表格优化

src/components/table/column/index.vue

@@ -1,7 +1,8 @@
-<script lang="ts">
+<script lang='ts'>
 import { defineComponent, createVNode, reactive } from 'vue'
-import { ElTableColumn } from 'element-plus'
+import { Column } from 'vxe-table'
 import { uuid } from '@/utils/random'
+
 export default defineComponent({
     name: 'Column',
     props: {
@@ -14,7 +15,7 @@ export default defineComponent({
         const attr = reactive(props.attr)
         attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.prop || uuid()
         return () => {
-            return createVNode(ElTableColumn, attr, slots.default)
+            return createVNode(Column, attr, slots.default)
         }
     }
 })

src/components/table/index.vue

@@ -1,21 +1,23 @@
 <template>
-    <el-table
+    <vxe-table
         ref="tableRef"
         class="ba-data-table w100"
         header-cell-class-name="table-header-cell"
         :data="tableStore.table.data"
-        :row-key="tableStore.pk"
         :border="true"
         v-loading="tableStore.table.loading"
         stripe
         @selection-change="onSelectionChange"
         v-bind="$attrs"
+        :column-config="{resizable: true}"
+        :tree-config="{}"
     >
         <!-- Column 组件内部是 el-table-column -->
         <Column
             :attr="item"
             :key="key + '-column'"
             v-for="(item, key) in tableStore.table.column"
+            :tree-node='item.treeNode'
         >
             <!-- tableStore 预设的列 render 方案 -->
             <template v-if="item.render" #default="scope">
@@ -23,20 +25,20 @@
                     :field="item"
                     :row="scope.row"
                     :column="scope.column"
-                    :index="scope.$index"
+                    :index="scope.rowIndex"
                     :key="
                         key +
                         '-' +
-                        scope.$index +
+                        scope.rowIndex +
                         '-' +
                         item.render +
                         '-' +
-                        (item.prop ? '-' + item.prop + '-' + scope.row[item.prop] : '')
+                        (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
                     "
                 />
             </template>
         </Column>
-    </el-table>
+    </vxe-table>
     <div v-if="props.pagination" class="table-pagination">
         <el-pagination
             :currentPage="tableStore.table.params!.pageNum"

src/layouts/admin/components/navBar/classic.vue

@@ -59,6 +59,7 @@ const onMenuCollapse = () => {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
             }
             &:hover {
+                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
                 background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
             }
         }

src/layouts/admin/components/navMenus.vue

@@ -165,6 +165,9 @@ const onLogout = () => {}
     .nav-menu-item.hover,
     .admin-info.hover {
         background: v-bind('configStore.getColorVal("headerBarHoverBackground")');
+        .nav-menu-icon {
+            color: v-bind('configStore.getColorVal("headerBarTabActiveColor")') !important;
+        }
     }
 }
 .dropdown-menu-box :deep(.el-dropdown-menu__item) {

src/layouts/admin/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <component :is="config.layout.layoutMode"></component>
+    <component :is='config.layout.layoutMode'></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { reactive } from 'vue'
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
@@ -58,37 +58,22 @@ const init = () => {
             title: '控制台',
             name: 'dashboard',
             path: 'dashboard',
-            icon: 'fa fa-dashboard',
+            icon: 'el-icon-Platform',
             menu_type: 'tab',
             url: '',
             component: '/src/views/dashboard/index.vue',
             keepalive: 'dashboard',
             extend: 'none',
-            children: [
-                {
-                    id: 94,
-                    pid: 1,
-                    type: 'button',
-                    title: '查看',
-                    name: 'dashboard/index',
-                    path: '',
-                    icon: '',
-                    menu_type: null,
-                    url: '',
-                    component: '',
-                    keepalive: 0,
-                    extend: 'none'
-                }
-            ]
+            children: []
         },
         {
             id: 3,
             pid: 0,
             type: 'menu',
-            title: '测试1',
+            title: '审计管理',
             name: 'test',
             path: 'test',
-            icon: 'fa fa-dashboard',
+            icon: 'el-icon-List',
             menu_type: 'tab',
             url: '',
             component: '/src/views/dashboard/test.vue',
@@ -102,7 +87,7 @@ const init = () => {
             title: '权限管理',
             name: 'auth',
             path: 'auth',
-            icon: 'fa fa-group',
+            icon: 'el-icon-Tools',
             menu_type: null,
             url: '',
             component: '',
@@ -116,7 +101,7 @@ const init = () => {
                     title: '角色管理',
                     name: 'auth/role',
                     path: 'auth/role',
-                    icon: 'fa fa-group',
+                    icon: 'el-icon-Avatar',
                     menu_type: 'tab',
                     url: '',
                     component: '/src/views/auth/role.vue',
@@ -131,7 +116,7 @@ const init = () => {
                     title: '菜单规则管理',
                     name: 'auth/menu',
                     path: 'auth/menu',
-                    icon: 'el-icon-Grid',
+                    icon: 'el-icon-Menu',
                     menu_type: 'tab',
                     url: '',
                     component: '/src/views/auth/menu/index.vue',

src/layouts/admin/router-view/main.vue

@@ -4,9 +4,7 @@
             <router-view v-slot='{ Component }'>
                 <transition :name='config.layout.mainAnimation' mode='out-in'>
                     <keep-alive :include='state.keepAliveComponentNameList'>
-                        <div class='default-main'>
-                            <component :is='Component' :key='state.componentKey' />
-                        </div>
+                        <component :is='Component' :key='state.componentKey' />
                     </keep-alive>
                 </transition>
             </router-view>

src/main.ts

@@ -4,6 +4,8 @@ import router from './router'
 import pinia from '@/stores/index'
 import { registerIcons } from '@/utils/common'
 import mitt from 'mitt'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/display.css'
@@ -16,6 +18,7 @@ const app = createApp(App)
 app.use(router)
 app.use(pinia)
 app.use(ElementPlus)
+app.use(VXETable)
 registerIcons(app) // icons
 
 app.mount('#app')

src/utils/request.ts

@@ -17,7 +17,7 @@ const loadingInstance: LoadingInstance = {
  * 根据运行环境获取基础请求URL
  */
 export const getUrl = (): string => {
-    if (import.meta.env.MODE == 'development') return '/api'
+    if (import.meta.env.MODE == 'development' || location.hostname === 'localhost') return '/api'
     return window.location.protocol + '//' + window.location.host
 }
 

src/utils/tableStore.ts

@@ -52,7 +52,9 @@ export default class TableStore {
                 requestPayload(this.method, this.table.params)
             )
         ).then((res: any) => {
+
             this.table.data = res.data.records || res.data
+            console.log(this.table.data)
             this.table.total = res.data.total || res.data.length
             this.table.loading = false
         })

src/views/auth/menu/index.vue

@@ -1,38 +1,42 @@
 <template>
-    <TableHeader>
-        <template v-slot:operation>
-            <el-button type='primary' @click='addMenu'>新增</el-button>
-        </template>
-    </TableHeader>
-    <Table ref='tableRef' :pagination='false' />
-    <popupForm ref='popupRef'></popupForm>
+    <div class='default-main'>
+        <TableHeader>
+            <template v-slot:operation>
+                <el-button :icon='Plus' type='primary' @click='addMenu'>添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref='tableRef' :pagination='false' />
+        <popupForm ref='popupRef'></popupForm>
+    </div>
 </template>
 <script setup lang='ts'>
+import { Plus } from '@element-plus/icons-vue'
 import { ref, onMounted, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import popupForm from './popupForm.vue'
+import { useNavTabs } from '@/stores/navTabs'
 
 defineOptions({
     name: 'auth/menu'
 })
 const tableRef = ref()
 const popupRef = ref()
+const navTabs = useNavTabs()
 const tableStore = new TableStore({
-    url: '/user-boot/function/functionTree',
+    url: '/user-boot/function/getRouteMenu',
     column: [
-        { type: 'selection', align: 'center', width: '60' },
-        { label: '菜单名称', prop: 'title', align: 'left' },
+        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
         {
-            label: '图标',
-            prop: 'icon',
+            title: '图标',
+            field: 'icon',
             align: 'center',
             width: '60',
             render: 'icon'
         },
         {
-            label: '操作',
+            title: '操作',
             align: 'center',
             width: '130',
             render: 'buttons',
@@ -54,10 +58,10 @@ const tableStore = new TableStore({
                     icon: 'el-icon-Delete',
                     render: 'confirmButton',
                     popconfirm: {
-                        confirmButtonText:'确认',
+                        confirmButtonText: '确认',
                         cancelButtonText: '取消',
                         confirmButtonType: 'danger',
-                        title: '确定删除该菜单吗？',
+                        title: '确定删除该菜单吗？'
                     },
                     click: (row) => {
                         popupRef.value.open('编辑菜单', row)
@@ -71,7 +75,22 @@ provide('tableStore', tableStore)
 
 onMounted(() => {
     tableStore.table.ref = tableRef.value
-    tableStore.index()
+    // tableStore.index()
+    const handlerRouter = (arr: any[]) => {
+        return arr.map((item: any, index: number) => {
+            if (item.children && item.children.length > 0) {
+                item.children = handlerRouter(item.children)
+            }
+            return {
+                ...item,
+                title: item.meta.title,
+                icon: item.meta.icon,
+                id: index
+            }
+        })
+    }
+    tableStore.table.data = handlerRouter(navTabs.state.tabsViewRoutes)
+    tableStore.table.loading = false
 })
 const addMenu = () => {
     console.log(popupRef)

src/views/auth/role.vue

@@ -1,3 +1,3 @@
 <template>
-    role
+    <div>123</div>
 </template>