1.0发布，Fixes Bug，以及新增 ProTable组件

2026-02-16 19:22:27 +08:00 · 2021-07-12 16:16:51 +08:00
parent d423f27e94
commit 1e9b7074e5
43 changed files with 1375 additions and 65 deletions
--- a/src/views/comp/table/columns.ts
+++ b/src/views/comp/table/columns.ts
@@ -0,0 +1,57 @@
+import { h } from 'vue'
+import { NAvatar, NButton } from 'naive-ui'
+
+export const columns = [
+  {
+    title: 'id',
+    key: 'id'
+  },
+  {
+    title: '名称',
+    key: 'name'
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    render(row) {
+      return h(
+        NAvatar,
+        {
+          size: 48,
+          src: row.avatar
+        }
+      )
+    }
+  },
+  {
+    title: '地址',
+    key: 'address'
+  },
+  {
+    title: '开始日期',
+    key: 'beginTime',
+  },
+  {
+    title: '结束日期',
+    key: 'endTime',
+  },
+  {
+    title: '创建时间',
+    key: 'date',
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    render(row) {
+      return h(
+        NButton,
+        {
+          size: 'small',
+          onClick: () => {
+          }
+        },
+        { default: () => '编辑' }
+      )
+    }
+  }
+]
--- a/src/views/comp/table/list.vue
+++ b/src/views/comp/table/list.vue
@@ -0,0 +1,65 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <ProTable
+      title="表格列表"
+      titleTooltip="这是一个提示"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="row => row.id"
+      ref="actionRef"
+      @update:checked-row-keys="onCheckedRow"
+    >
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
+      </template>
+    </ProTable>
+  </n-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive, toRefs, ref, h } from 'vue'
+import { NTag, NButton, useMessage } from 'naive-ui'
+import { ProTable } from '@/components/ProTable'
+import { getTableList } from '@/api/table/list'
+import { columns } from './columns'
+
+export default defineComponent({
+  components: { ProTable },
+  setup() {
+    const message = useMessage()
+    const actionRef = ref()
+    const state = reactive({
+      params: {
+        pageSize: 5,
+        name: 'xiaoMa'
+      },
+    })
+    const loadDataTable = async (params) => {
+      const data = await getTableList(params);
+      return data
+    }
+
+    function onCheckedRow(rowKeys) {
+      console.log(rowKeys)
+    }
+
+    function reloadTable() {
+      console.log(actionRef.value)
+      actionRef.value.reload()
+    }
+
+    return {
+      ...toRefs(state),
+      columns,
+      actionRef,
+      loadDataTable,
+      onCheckedRow,
+      reloadTable
+    }
+  }
+})
+</script>
+
+<style lang='less' scoped>
+
+</style>
--- a/src/views/dashboard/console/console.vue
+++ b/src/views/dashboard/console/console.vue
@@ -13,13 +13,15 @@
          </div>
          <div class="py-1 px-1 flex justify-between ">
            <div class="text-sn">
-              日同比<CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
+              日同比
+              <CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
              <n-icon size="12" style="color: #00ff6f">
                <component is="CaretUpOutlined"/>
              </n-icon>
            </div>
            <div class="text-sn">
-              周同比<CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
+              周同比
+              <CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
              <n-icon size="12" style="color: #ffde66">
                <component is="CaretDownOutlined"/>
              </n-icon>
@@ -77,13 +79,15 @@
          </div>
          <div class="py-1 px-1 flex justify-between ">
            <div class="text-sn">
-              日同比<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              日同比
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
              <n-icon size="12" style="color: #00ff6f">
                <component is="CaretUpOutlined"/>
              </n-icon>
            </div>
            <div class="text-sn">
-              周同比<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              周同比
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
              <n-icon size="12" style="color: #ffde66">
                <component is="CaretDownOutlined"/>
              </n-icon>
@@ -111,13 +115,15 @@
          </div>
          <div class="py-1 px-1 flex justify-between ">
            <div class="text-sn">
-              月同比<CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
+              月同比
+              <CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
              <n-icon size="12" style="color: #00ff6f">
                <component is="CaretUpOutlined"/>
              </n-icon>
            </div>
            <div class="text-sn">
-              月同比<CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
+              月同比
+              <CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
              <n-icon size="12" style="color: #ffde66">
                <component is="CaretDownOutlined"/>
              </n-icon>
@@ -179,10 +185,10 @@ export default defineComponent({
        'border-bottom': '1px solid #eee',
        'font-size': '16px'
      },
-      visits:{},
-      saleroom:{},
-      orderLarge:{},
-      volume:{},
+      visits: {},
+      saleroom: {},
+      orderLarge: {},
+      volume: {},
    })
    // 图标列表
    const iconList = [
@@ -267,8 +273,8 @@ export default defineComponent({
        }
      },
    ]
-    onMounted(async ()=> {
-      const { visits, saleroom, orderLarge, volume} =  await getConsoleInfo()
+    onMounted(async () => {
+      const { visits, saleroom, orderLarge, volume } = await getConsoleInfo()
      state.visits = visits
      state.saleroom = saleroom
      state.orderLarge = orderLarge
--- a/src/views/dashboard/workplace/workplace.vue
+++ b/src/views/dashboard/workplace/workplace.vue
@@ -41,7 +41,8 @@
      <n-gi>
        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small" title="项目">
          <div class="flex flex-wrap project-card">
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+            <n-card size="small"
+                    class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
                    :bordered="false" hoverable>
              <div class="flex">
                <span>
@@ -58,7 +59,8 @@
                开源君，2021-07-04
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+            <n-card size="small"
+                    class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
                    :bordered="false" hoverable>
              <div class="flex">
                <span>
@@ -75,12 +77,13 @@
                学不动也要学，2021-07-04
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+            <n-card size="small"
+                    class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
                    :bordered="false" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30" style="color: #e44c27">
-                    <Html5Outlined />
+                    <Html5Outlined/>
                  </n-icon>
                </span>
                <span class="text-lg ml-4">Html5</span>
@@ -92,7 +95,8 @@
                撸码也是一种艺术 2021-04-01
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+            <n-card size="small"
+                    class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
                    :bordered="false" hoverable>
              <div class="flex">
                <span>
@@ -109,7 +113,8 @@
                铁粉君 2021-07-04。
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+            <n-card size="small"
+                    class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
                    :bordered="false" hoverable>
              <div class="flex">
                <span>
@@ -126,7 +131,8 @@
                技术牛 2021-07-04。
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+            <n-card size="small"
+                    class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
                    :bordered="false" hoverable>
              <div class="flex">
                <span>
@@ -220,7 +226,9 @@
              </template>
              <n-thing title="页面切换其实也支持缓存，只是加了过度效果，看起来像是重新渲染了">
                <template #description>
-                  <p class="text-gray-400"><n-input type="text" placeholder="不信，输点文字试试"></n-input></p>
+                  <p class="text-gray-400">
+                    <n-input type="text" placeholder="不信，输点文字试试"></n-input>
+                  </p>
                </template>
              </n-thing>
            </n-list-item>
@@ -228,7 +236,8 @@
        </n-card>
      </n-gi>
      <n-gi>
-        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small" title="快捷操作">
+        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small"
+                title="快捷操作">
          <div class="flex flex-wrap project-card">
            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
                    :bordered="false" hoverable>
@@ -327,9 +336,19 @@ import {
 import { defineComponent } from 'vue'

 export default defineComponent({
-  name:'dashboard_workplace',
-  components: { GithubOutlined, LogoVue, DashboardOutlined, ProfileOutlined, FileProtectOutlined, SettingOutlined, ApartmentOutlined,
-    Html5Outlined, LogoAngular, LogoReact, LogoJavascript
+  name: 'dashboard_workplace',
+  components: {
+    GithubOutlined,
+    LogoVue,
+    DashboardOutlined,
+    ProfileOutlined,
+    FileProtectOutlined,
+    SettingOutlined,
+    ApartmentOutlined,
+    Html5Outlined,
+    LogoAngular,
+    LogoReact,
+    LogoJavascript
  },
  setup() {
    return {
@@ -342,9 +361,10 @@ export default defineComponent({
 <style lang="less" scoped>
 .project-card {
  margin-right: -6px;
+
  &-item {
    margin: -1px;
-    width:33.333333%
+    width: 33.333333%
  }
 }
 </style>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -116,7 +116,7 @@ export default defineComponent({
          loadingMessage = message.loading('登录中...')
          state.loading = true

-          const params:FormState = {
+          const params: FormState = {
            username,
            password
          }