feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 (#105)

* fix(slot): 优化部分slot写法,减少手动判断

* fix(slot): 优化部分slot写法,减少手动判断

* feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出

* feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出

.vscode/settings.json

@@ -20,5 +20,12 @@
     "json",
     "jsonc"
   ],
-  "common-intellisense.ui": ["naiveUi2"]
+  "common-intellisense.ui": [
+    "naiveUi2"
+  ],
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#233212",
+    "titleBar.activeBackground": "#314619",
+    "titleBar.activeForeground": "#F9FCF6"
+  }
 }

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
+    "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.40.1",
     "pinia": "^2.2.4",
@@ -24,6 +25,9 @@
     "vue": "^3.5.12",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5",
+    "vxe-pc-ui": "4.2.5",
+    "vxe-table": "4.8.13",
+    "vxe-table-plugin-export-xlsx": "^4.0.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/components/common/MeVxeGrid.vue

@@ -0,0 +1,234 @@
+<template>
+  <div
+    :style="isComputedHeight ? `height: calc(100% - ${autoHeight}px);` : `height: ${autoHeight}px`"
+  >
+    <vxe-grid
+      ref="gridRef"
+      :columns="vxeColumns"
+      :loading="loading"
+      :data="data"
+      height="auto"
+      :stripe="true"
+      :border="true"
+      size="mini"
+      :auto-resize="true"
+      :pager-config="pagerConfig"
+      :export-config="exportConfig"
+      :toolbar-config="vxeToolbarConfig"
+      :proxy-config="proxyConfig"
+      v-on="gridEvent"
+    >
+      <template #loading>
+        <n-spin :show="loading" />
+      </template>
+      <template v-for="(c, k) in slots" :key="k" #[c.key]="{ row }">
+        <template v-if="Array.isArray(c.render(row))">
+          <component :is="r" v-for="(r, k1) in c.render(row)" :key="k1" :row="row" :col="c" />
+        </template>
+        <template v-else>
+          <component :is="c.render(row)" :row="row" :col="c" />
+        </template>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'MeVxeGrid' })
+const props = defineProps({
+  /**
+   * @remote 当isComputedHeight为true时为除table外的高度 false时为table高度
+   */
+  autoHeight: {
+    type: Number,
+    default: 300,
+  },
+  /**
+   * @isPagination 是否为自动计算高度
+   */
+  isComputedHeight: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @remote table的列
+   */
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+
+  pagination: {
+    type: [Boolean, Object],
+    default: true,
+  },
+
+  exportConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  toolbarConfig: {
+    type: Object,
+    default: () => ({ }),
+  },
+  /**
+   * 是否显示复选框
+   */
+  showCheck: {
+    type: Boolean,
+    default: false,
+  },
+  rowKey: {
+    type: String, // rowKey
+    default: 'id',
+  },
+
+  exportMethod: {
+    type: Function,
+    default: () => null,
+  },
+  remoteMethod: {
+    type: Function,
+    default: () => null,
+  },
+})
+const emits = defineEmits(['update:checked-row-keys', 'pageChanged'])
+const isFirst = shallowRef(true)
+const gridRef = ref(null)
+
+watch(
+  () => props.data,
+  (n) => {
+    isFirst.value = false
+    gridRef.value.reloadData(n)
+  },
+)
+
+const vxeToolbarConfig = computed(() => {
+  return {
+    size: 'mini',
+    className: 'c-toolbar',
+    perfect: true,
+    refresh: true,
+    export: true,
+    zoom: true,
+    custom: true,
+    ...props.toolbarConfig,
+  }
+})
+const pagerConfig = computed(() => {
+  if (props.pagination === false) {
+    return {
+      enabled: false,
+    }
+  }
+  return {
+    currentPage: props.pagination.pageNo,
+    pageSize: props.pagination.pageSize,
+    total: props.pagination.itemCount,
+    background: true,
+    size: 'small',
+    layouts: [
+      'Home',
+      'PrevPage',
+      'JumpNumber',
+      'NextPage',
+      'End',
+      'Sizes',
+      'FullJump',
+      'Total',
+    ],
+  }
+})
+/**
+ * 将naive 转为vxe-table可用的列
+ */
+const vxeColumns = computed(() => {
+  if (props.showCheck) {
+    return [{
+      type: 'checkbox',
+      resizable: false,
+      width: 45,
+      align: 'center',
+      fixed: 'left',
+    }, ...props.columns.map((item) => {
+      item.field = item.key
+      if (item.render) {
+        item.slots = { default: item.key }
+      }
+      return item
+    })]
+  }
+  return props.columns.map((item) => {
+    item.field = item.key
+    if (item.render) {
+      item.slots = { default: item.key }
+    }
+    return item
+  })
+})
+
+/**
+ * 将naive render函数转换为vxeTable的slots
+ */
+const slots = computed(() => {
+  return props.columns.filter(item => item.render)
+})
+
+const gridEvent = {
+  checkboxAll() {
+    const $grid = gridRef.value
+    if ($grid) {
+      emits(
+        'update:checked-row-keys',
+        $grid.getCheckboxRecords().map(item => item[props.rowKey]),
+      )
+    }
+  },
+  checkboxChange() {
+    const $grid = gridRef.value
+    if ($grid) {
+      emits(
+        'update:checked-row-keys',
+        $grid.getCheckboxRecords().map(item => item[props.rowKey]),
+      )
+    }
+  },
+  pageChange(e) {
+    emits('pageChanged', e)
+  },
+}
+
+const proxyConfig = {
+  props: {
+    result: 'data.pageData',
+    total: 'data.total',
+  },
+  ajax: {
+    query: async ({ page }) => {
+      if (isFirst.value === true) {
+        return Promise.reject('')
+      }
+      props.remoteMethod(page.currentPage, page.pageSize)
+    },
+    queryAll: async () => {
+      const res = await props.exportMethod()
+      return res
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/common/index.js

@@ -2,5 +2,6 @@ export { default as AppCard } from './AppCard.vue'
 export { default as AppPage } from './AppPage.vue'
 export { default as CommonPage } from './CommonPage.vue'
 export { default as LayoutSetting } from './LayoutSetting.vue'
+export { default as MeVxeGrid } from './MeVxeGrid.vue'
 export { default as TheFooter } from './TheFooter.vue'
 export { default as ToggleTheme } from './ToggleTheme.vue'

src/components/me/crud/index.vue

@@ -7,38 +7,59 @@
  --------------------------------->
 
 <template>
-  <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
+  <div :class="computedHeight === true ? 'h-100%' : ''">
-    <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
+    <div id="search_main">
-      <n-scrollbar x-scrollable>
+      <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
-        <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
+        <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
-          <slot />
+          <n-scrollbar x-scrollable>
-        </n-space>
+            <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
-      </n-scrollbar>
+              <slot />
-      <div class="flex-shrink-0 p-10">
+            </n-space>
-        <n-button ghost type="primary" @click="handleReset">
+          </n-scrollbar>
-          <i class="i-fe:rotate-ccw mr-4" />
+          <div class="flex-shrink-0 p-10">
-          重置
+            <n-button ghost type="primary" @click="handleReset">
-        </n-button>
+              <i class="i-fe:rotate-ccw mr-4" />
-        <n-button attr-type="submit" class="ml-20" type="primary">
+              重置
-          <i class="i-fe:search mr-4" />
+            </n-button>
-          搜索
+            <n-button attr-type="submit" class="ml-20" type="primary">
-        </n-button>
+              <i class="i-fe:search mr-4" />
+              搜索
+            </n-button>
 
-        <template v-if="expand">
+            <template v-if="expand">
-          <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
+              <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
-            <i class="i-fe:chevrons-down ml-4" />
+                <i class="i-fe:chevrons-down ml-4" />
-            展开
+                展开
-          </n-button>
+              </n-button>
-          <n-button v-else text type="primary" @click="toggleExpand">
+              <n-button v-else text type="primary" @click="toggleExpand">
-            <i class="i-fe:chevrons-up ml-4" />
+                <i class="i-fe:chevrons-up ml-4" />
-            收起
+                收起
-          </n-button>
+              </n-button>
-        </template>
+            </template>
-      </div>
+          </div>
-    </form>
+        </form>
-  </AppCard>
+      </AppCard>
+    </div>
+    <MeVxeGrid
+      :remote="remote"
+      :loading="loading"
+      :scroll-x="scrollX"
+      :columns="columns"
+      :export-config="{ filename: exportName, modes: ['all', 'current'] }"
+      :toolbar-config="toolbarConfig"
+      :data="tableData"
+      :auto-height="computedHeight === true ? autoHeight : computedHeight"
+      :row-key="rowKey"
+      :is-computed-height="computedHeight === true"
+      :show-check="showCheck"
+      :pagination="isPagination ? pagination : false"
+      :remote-method="remoteMethod"
+      :export-method="exportMethod"
+      @update:checked-row-keys="onChecked"
+      @update:page="onPageChange"
+    />
 
-  <NDataTable
+  <!-- <NDataTable
     :remote="remote"
     :loading="loading"
     :scroll-x="scrollX"
@@ -48,14 +69,39 @@
     :pagination="isPagination ? pagination : false"
     @update:checked-row-keys="onChecked"
     @update:page="onPageChange"
-  />
+  /> -->
+  </div>
 </template>
 
 <script setup>
-import { NDataTable } from 'naive-ui'
 import { utils, writeFile } from 'xlsx'
 
 const props = defineProps({
+  /**
+   * 是否自动计算高度，适用只有search和table
+   */
+  computedHeight: {
+    type: [Boolean, Number],
+    default: () => true,
+  },
+  showCheck: {
+    type: Boolean,
+    default: () => false,
+  },
+  toolbarConfig: {
+    type: Object,
+    default: () => ({
+      export: true,
+      zoom: true,
+    }),
+  },
+  /**
+   * @remote 导出数据表格名称
+   */
+  exportName: {
+    type: String,
+    default: '导出数据',
+  },
   /**
    * @remote true: 后端分页  false： 前端分页
    */
@@ -105,8 +151,18 @@ const props = defineProps({
   /** 是否支持展开 */
   expand: Boolean,
 })
-
 const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+
+const autoHeight = ref(0)
+
+window.onresize = () => {
+  autoHeight.value = document.getElementById('search_main').clientHeight + 24
+}
+
+onMounted(() => {
+  autoHeight.value = document.getElementById('search_main').clientHeight + 24
+})
+
 const loading = ref(false)
 const initQuery = { ...props.queryItems }
 const tableData = ref([])
@@ -125,6 +181,22 @@ function toggleExpand() {
   isExpanded.value = !isExpanded.value
 }
 
+async function exportMethod() {
+  const { data } = await props.getData({
+    pageNo: 1,
+    pageSize: 2000,
+    ...props.queryItems,
+  })
+  return data
+}
+
+function remoteMethod(page, pageSize) {
+  pagination.page = page
+  pagination.pageSize = pageSize
+
+  handleQuery()
+}
+
 async function handleQuery() {
   try {
     loading.value = true
@@ -143,6 +215,7 @@ async function handleQuery() {
       // 如果当前页数据为空，且总条数不为0，则返回上一页数据
       onPageChange(pagination.page - 1)
     }
+    return data
   }
   catch (error) {
     console.error(error)
@@ -180,9 +253,7 @@ function onPageChange(currentPage) {
   }
 }
 function onChecked(rowKeys) {
-  if (props.columns.some(item => item.type === 'selection')) {
+  emit('onChecked', rowKeys)
-    emit('onChecked', rowKeys)
-  }
 }
 function handleExport(columns = props.columns, data = tableData.value) {
   if (!data?.length)

src/main.js

@@ -8,19 +8,35 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
+import ExcelJS from 'exceljs'
 import { createApp } from 'vue'
 import App from './App.vue'
-import { setupDirectives } from './directives'
 
+import { setupDirectives } from './directives'
+/**
+ * 引入vxe-table 和 vxe-pc-ui excel导出
+ */
+import VxeUI from 'vxe-pc-ui'
+import VXETable from 'vxe-table'
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
 import { setupRouter } from './router'
 import { setupStore } from './store'
+
 import { setupNaiveDiscreteApi } from './utils'
+import 'vxe-pc-ui/lib/style.css'
+import 'vxe-table/lib/style.css'
 import '@/styles/reset.css'
 import '@/styles/global.css'
 import 'uno.css'
 
 async function bootstrap() {
   const app = createApp(App)
+
+  VXETable.use(VXETablePluginExportXLSX, {
+    ExcelJS,
+  })
+  app.use(VxeUI).use(VXETable)
+
   setupStore(app)
   setupDirectives(app)
   await setupRouter(app)

src/store/modules/app.js

@@ -10,6 +10,7 @@ import { defaultLayout, defaultPrimaryColor, naiveThemeOverrides } from '@/setti
 import { generate, getRgbStr } from '@arco-design/color'
 import { useDark } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { VxeUI } from 'vxe-pc-ui'
 
 export const useAppStore = defineStore('app', {
   state: () => ({
@@ -40,6 +41,18 @@ export const useAppStore = defineStore('app', {
         list: true,
         dark: isDark,
       })
+      VxeUI.setTheme(isDark ? 'dark' : 'light')
+      if (isDark) {
+        document.body.style.setProperty('--vxe-ui-font-color', '#fff')
+      }
+      else {
+        document.body.style.setProperty('--vxe-ui-font-color', '#000')
+      }
+
+      document.body.style.setProperty('--vxe-ui-font-primary-color', color)
+      document.body.style.setProperty('--vxe-ui-font-primary-lighten-color', color)
+      document.body.style.setProperty('--vxe-ui-font-primary-darken-color', color)
+
       document.body.style.setProperty('--primary-color', getRgbStr(colors[5]))
       this.naiveThemeOverrides.common = Object.assign(this.naiveThemeOverrides.common || {}, {
         primaryColor: colors[5],

src/views/pms/resource/index.vue

@@ -81,6 +81,7 @@
             :columns="btnsColumns"
             :scroll-x="-1"
             :get-data="api.getButtons"
+            :computed-height="300"
             :query-items="{ parentId: currentMenu.id }"
           />
         </template>

src/views/pms/role/role-user.vue

@@ -37,6 +37,7 @@
       :scroll-x="1200"
       :columns="columns"
       :get-data="api.getAllUsers"
+      :show-check="true"
       @on-checked="onChecked"
     >
       <MeQueryItem label="用户名" :label-width="50">
@@ -90,7 +91,7 @@ const genders = [
 ]
 
 const columns = [
-  { type: 'selection', fixed: 'left' },
+  // { type: 'selection', fixed: 'left' },
   {
     title: '头像',
     key: 'avatar',
@@ -101,11 +102,10 @@ const columns = [
         src: avatar,
       }),
   },
-  { title: '用户名', key: 'username', width: 150, ellipsis: { tooltip: true } },
+  { title: '用户名', key: 'username', ellipsis: { tooltip: true } },
   {
     title: '角色',
     key: 'roles',
-    width: 200,
     ellipsis: { tooltip: true },
     render: ({ roles }) => {
       if (roles?.length) {
@@ -156,7 +156,7 @@ const columns = [
   {
     title: '操作',
     key: 'actions',
-    width: 100,
+    width: 120,
     align: 'right',
     fixed: 'right',
     hideInExcel: true,

src/views/pms/user/index.vue

@@ -162,11 +162,10 @@ const columns = [
         src: avatar,
       }),
   },
-  { title: '用户名', key: 'username', width: 150, ellipsis: { tooltip: true } },
+  { title: '用户名', key: 'username', ellipsis: { tooltip: true } },
   {
     title: '角色',
     key: 'roles',
-    width: 200,
     ellipsis: { tooltip: true },
     render: ({ roles }) => {
       if (roles?.length) {