⚡菜单管理替换成vxe-table

package.json

@@ -40,15 +40,19 @@
     "vue-clipboard3": "^2.0.0",
     "vue-cropper": "1.0.2",
     "vue-i18n": "9.2.2",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.2",
+    "vxe-table": "^4.5.12",
+    "xe-utils": "^3.5.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/compiler-sfc": "^3.3.4",
+    "consola": "^3.2.3",
     "sass": "1.45.0",
     "unplugin-auto-import": "0.5.3",
     "vite": "^4.3.9",
     "vite-plugin-compression": "^0.3.6",
+    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "1.0.5",
     "vite-plugin-vue-setup-extend": "^0.4.0"
   }

src/main.js

@@ -8,6 +8,7 @@ import '@/assets/styles/index.scss' // global css
 import App from './App'
 import router from './router'
 import directive from './directive' // directive
+import vxetb from './vxe-tb'
 // 注册指令
 import plugins from './plugins' // plugins
 import { downFile } from '@/utils/request'
@@ -70,5 +71,5 @@ app.component('svg-icon', SvgIcon)
 app.component('ZrDialog', Dialog)
 
 directive(app)
-
+vxetb(app)
 app.use(pinia).use(router).use(plugins).use(ElementPlus, {}).use(elementIcons).use(vueI18n).mount('#app')

src/views/system/menu/index.vue

@@ -44,78 +44,68 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table
+    <vxe-table
-      v-if="refreshTable"
+      height="600"
-      v-loading="loading"
+      show-overflow
-      :data="menuList"
-      row-key="menuId"
-      :default-expand-all="isExpandAll"
-      border
-      lazy
       ref="listRef"
-      :load="loadMenu"
+      :loading="loading"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      :tree-config="{
-      <el-table-column prop="menuName" :label="$t('m.menuName')" :show-overflow-tooltip="true" width="160">
+        transform: true,
-        <template #default="scope">
+        rowField: 'menuId',
-          <span v-if="scope.row.menuNameKey">
+        parentField: 'parentId'
-            {{ $t(scope.row.menuNameKey) }}
+      }"
-          </span>
+      :scroll-y="{ enabled: true, gt: 20 }"
-          <span v-else>
+      :data="menuList">
-            {{ scope.row.menuName }}
+      <vxe-column field="menuName" :title="$t('m.menuName')" tree-node width="160"> </vxe-column>
-          </span>
+      <vxe-column field="menuId" :title="$t('m.menuid')"></vxe-column>
-        </template>
+      <vxe-column field="icon" :title="$t('m.icon')" align="center" width="60"> </vxe-column>
-      </el-table-column>
+
-      <el-table-column prop="icon" :label="$t('m.icon')" align="center" width="60">
+      <vxe-column field="menuType" :title="$t('m.menuType')" align="center" width="80">
-        <template #default="scope">
-          <svg-icon :name="scope.row.icon" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="menuId" :label="$t('m.menuid')" :show-overflow-tooltip="true" width="80" align="center"></el-table-column>
-      <el-table-column prop="menuType" :label="$t('m.menuType')" align="center" width="80">
         <template #default="scope">
           <el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">{{ $t('m.link') }}</el-tag>
           <el-tag v-else-if="scope.row.menuType == 'C'">{{ $t('m.menu') }}</el-tag>
           <el-tag type="success" v-else-if="scope.row.menuType == 'M'">{{ $t('m.directory') }}</el-tag>
           <el-tag type="warning" v-else-if="scope.row.menuType == 'F'">{{ $t('m.button') }}</el-tag>
         </template>
-      </el-table-column>
+      </vxe-column>
-      <el-table-column prop="orderNum" :label="$t('m.sort')" width="90" sortable align="center">
+      <vxe-column field="orderNum" :title="$t('m.sort')" width="90" sortable align="center">
         <template #default="scope">
-          <span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index)">{{ scope.row.orderNum }}</span>
+          <span v-show="editIndex != scope.row.menuId" @click="editCurrRow(scope.row.menuId)">{{ scope.row.orderNum }}</span>
           <el-input
             :ref="setColumnsRef"
-            v-show="editIndex == scope.$index"
+            v-show="editIndex == scope.row.menuId"
             v-model="scope.row.orderNum"
             @blur="handleChangeSort(scope.row)"></el-input>
         </template>
-      </el-table-column>
+      </vxe-column>
-      <el-table-column prop="perms" :label="$t('m.authorityID')" :show-overflow-tooltip="true"></el-table-column>
+      <vxe-column field="perms" :title="$t('m.authorityID')" show-overflow="title"></vxe-column>
-      <el-table-column prop="component" :label="$t('m.componentPath')" :show-overflow-tooltip="true"></el-table-column>
+      <vxe-column field="component" :title="$t('m.componentPath')" show-overflow></vxe-column>
-      <el-table-column prop="visible" :label="$t('m.isShow')" width="70" align="center">
+      <vxe-column field="visible" :title="$t('m.isShow')" width="90" align="center">
         <template #default="scope">
           <dict-tag :options="sys_show_hide" :value="scope.row.visible" />
         </template>
-      </el-table-column>
+      </vxe-column>
-      <el-table-column prop="status" :label="$t('m.menuState')" width="80" align="center">
+      <vxe-column field="status" :title="$t('m.menuState')" width="80" align="center">
         <template #default="scope">
           <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
-      </el-table-column>
+      </vxe-column>
-      <el-table-column :label="$t('common.addTime')" align="center" prop="createTime" :show-overflow-tooltip="true">
+      <vxe-column :title="$t('common.addTime')" align="center" field="createTime" show-overflow>
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
-      </el-table-column>
+      </vxe-column>
-      <el-table-column :label="$t('btn.operate')" align="center" width="170" class-name="small-padding fixed-width">
+      <vxe-column :title="$t('btn.operate')" align="center" width="140">
         <template #default="scope">
+          <el-button-group>
             <el-button text size="small" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']"></el-button>
             <el-button text size="small" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']"></el-button>
             <el-button text size="small" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']"></el-button>
+          </el-button-group>
         </template>
-      </el-table-column>
+      </vxe-column>
-    </el-table>
+    </vxe-table>
 
-    <!-- 添加或修改菜单对话框 -->
     <el-dialog :title="title" v-model="open" width="720px" append-to-body>
       <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
@@ -332,7 +322,6 @@
 import { addMenu, delMenu, getMenu, listMenu, updateMenu, changeMenuSort as changeSort, listMenuById } from '@/api/system/menu'
 import SvgIcon from '@/components/SvgIcon'
 import IconSelect from '@/components/IconSelect'
-
 const { proxy } = getCurrentInstance()
 
 var dictParams = [{ dictType: 'sys_show_hide' }, { dictType: 'sys_normal_disable' }]
@@ -386,7 +375,7 @@ function getList(type) {
   if (queryParams.value.parentId != undefined || queryParams.value.menuName != undefined) {
     queryParams.value.menuTypeIds = ''
   } else {
-    queryParams.value.menuTypeIds = 'M,C'
+    queryParams.value.menuTypeIds = 'M,C,F'
   }
   listMenu(queryParams.value).then((response) => {
     menuList.value = response.data
@@ -451,11 +440,26 @@ function handleAdd(row) {
 }
 /** 展开/折叠操作 */
 function toggleExpandAll() {
-  refreshTable.value = false
+  // refreshTable.value = false
   isExpandAll.value = !isExpandAll.value
-  nextTick(() => {
+  // nextTick(() => {
-    refreshTable.value = true
+  //   refreshTable.value = true
-  })
+  // })
+  const $table = listRef.value
+  if ($table) {
+    if (isExpandAll.value) {
+      $table.setAllTreeExpand(true)
+    } else {
+      $table.clearTreeExpand()
+    }
+  }
+}
+const hasExpandRow = (row) => {
+  const $table = listRef.value
+  if ($table) {
+    return $table.isTreeExpandByRow(row)
+  }
+  return false
 }
 /** 修改按钮操作 */
 async function handleUpdate(row) {
@@ -546,23 +550,25 @@ const loadMenu = (row, treeNode, resolve) => {
 function refreshMenu(pid) {
   loading.value = true
   // console.log(loadNodeMap)
-  if (loadNodeMap.size > 0) {
+  // if (loadNodeMap.size > 0) {
-    const hasNode = loadNodeMap.has(pid)
+  //   const hasNode = loadNodeMap.has(pid)
-    if (hasNode) {
+  //   if (hasNode) {
-      const { row, treeNode, resolve } = loadNodeMap.get(pid)
+  //     const { row, treeNode, resolve } = loadNodeMap.get(pid)
-      proxy.$refs.listRef.store.states.lazyTreeNodeMap[pid] = []
+  //     proxy.$refs.listRef.store.states.lazyTreeNodeMap[pid] = []
-      loadMenu(row, treeNode, resolve)
+  //     loadMenu(row, treeNode, resolve)
-    }
+  //   }
-    loading.value = false
+  //   loading.value = false
-  } else {
+  // } else {
+  //   getList()
+  // }
   getList()
 }
-}
 
-// listMenu({ menuTypeIds: 'M,C' }).then((response) => {
+listMenu({ menuTypeIds: 'M,C' }).then((response) => {
-//   menuQueryOptions.value = response.data
+  menuQueryOptions.value = response.data
-// })
+})
 
 // 首次列表加载（只加载一层）
-getList(1)
+// getList(1)
+handleQuery()
 </script>

src/vxe-tb.js

@@ -0,0 +1,51 @@
+// import XEUtils from 'xe-utils'
+import {
+  // 全局对象
+  // VXETable,
+  Icon,
+  Column,
+  // 表格
+  Tooltip,
+  Table
+} from 'vxe-table'
+import 'vxe-table/styles/cssvar.scss'
+
+export default function useTable(app) {
+  // 表格功能
+  // app.use(Filter)
+  // .use(Edit)
+  // .use(Menu)
+  // .use(Export)
+  // .use(Keyboard)
+  // .use(Validator)
+
+  // 可选组件
+  app
+    .use(Column)
+    // .use(Colgroup)
+    // .use(Grid)
+    .use(Tooltip)
+    // .use(Toolbar)
+    // .use(Pager)
+    // .use(Form)
+    // .use(FormItem)
+    // .use(FormGather)
+    // .use(Checkbox)
+    // .use(CheckboxGroup)
+    // .use(Radio)
+    // .use(RadioGroup)
+    // .use(RadioButton)
+    // .use(Switch)
+    // .use(Input)
+    // .use(Select)
+    // .use(Optgroup)
+    // .use(Option)
+    // .use(Textarea)
+    // .use(Button)
+    // .use(Modal)
+    // .use(List)
+    // .use(Pulldown)
+
+    // 安装表格
+    .use(Table)
+}

vite/plugins/index.js

@@ -4,6 +4,7 @@ import createAutoImport from './auto-import'
 import createSvgIcon from './svg-icon'
 import createCompression from './compression'
 import createSetupExtend from './setup-extend'
+import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import'
 
 export default function createVitePlugins(viteEnv, isBuild = false) {
   const vitePlugins = [vue()]
@@ -11,5 +12,9 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
   vitePlugins.push(createSetupExtend())
   vitePlugins.push(createSvgIcon(isBuild))
   isBuild && vitePlugins.push(...createCompression(viteEnv))
+
+  vitePlugins.push(createStyleImportPlugin({
+    resolves: [VxeTableResolve()]
+  }))
   return vitePlugins
 }