👣 解决路由冲突问题

kicc-ui/src/router/guard/permissionGuard.ts

@@ -21,9 +21,6 @@ export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
   router.beforeEach(async (to, from, next) => {
-    // 用户个性化设置根路由调整地址(首页地址),如果能进去说明以及获取了token不需要进行权限校验
-    if (from.path === ROOT_HOME && to.path === PageEnum.BASE_HOME && userStore.getUserInfo.homePath !== PageEnum.BASE_HOME)
-      return next(userStore.getUserInfo.homePath!);
     // 放过白名单路由
     if (whitePathList.includes(to.path as PageEnum))
       return next();
@@ -44,7 +41,12 @@ export function createPermissionGuard(router: Router) {
       return next(redirectLogin);
     }
     // 检测是否构建完路由与菜单
-    if (permissionStore.getIsDynamicAddedRoute) return next();
+    if (permissionStore.getIsDynamicAddedRoute) {
+      // 用户个性化设置根路由调整地址(首页地址),如果能进去说明以及获取了token不需要进行权限校验
+      if (from.path === ROOT_HOME && to.path === PageEnum.BASE_HOME && userStore.getUserInfo.homePath !== PageEnum.BASE_HOME) {
+        return next(userStore.getUserInfo.homePath!);
+      } else return next();
+    }
     // 构建路由与菜单
     const routes = await permissionStore.buildRoutesAction();
     routes.forEach((route) => router.addRoute(route as unknown as RouteRecordRaw));

kicc-ui/src/views/system/config/index.vue

@@ -46,16 +46,7 @@
       </AFormItem>
     </AForm>
     <ATable ref="tableElRef"
-            v-bind="state.tableProps"
-            :loading="state.loading"
-            :size="state.selectedKeys[0]"
-            :dataSource="state.dataSource"
-            :columns="columns"
-            :bordered="true"
-            :scroll="getScrollRef"
-            :rowClassName="getRowClassName"
-            :rowSelection="getRowSelectionRef"
-            :pagination="getPaginationInfo"
+            v-bind="getBindValues"
             @change="handleTablePaginationChange"
     >
       <template #title>
@@ -160,7 +151,7 @@
   import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker, Alert } from 'ant-design-vue';
   import {BasicColumn, BasicTableProps, PaginationProps, SizeType, SorterResult} from '/@/components/Table';
   import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
-  import ConfigModal from './ConfigModal.vue';
+  //import ConfigModal from './ConfigModal.vue';
   import { columns } from './config.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { reactive, toRaw, unref } from 'vue';
@@ -176,13 +167,13 @@
   import {usePagination} from "/@/components/Table/src/hooks/usePagination";
   import {useTableStyle} from "/@/components/Table/src/hooks/useTableStyle";
   import {useTableScroll} from "/@/components/Table/src/hooks/useTableScroll";
+  import expandIcon from "/@/components/Table/src/components/ExpandIcon";
+  import {omit} from "lodash-es";
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
-    loading: boolean;
     single: boolean;
     multiple: boolean;
-    tableHeight: number;
     tableInstance: ComponentRef;
     queryFormInstance: ComponentRef | any;
     selectedKeys: SizeType[];
@@ -191,7 +182,6 @@
       key: string | undefined;
       isSys: string | undefined;
     };
-    dataSource: any[];
     dateRange: string[];
     tableProps: Recordable;
   }
@@ -220,18 +210,13 @@
   const queryFormElRef = ref(null);
   const { createConfirm } = useMessage();
   const { createMessage } = useMessage();
-
   const { toggle, isFullscreen } = useFullscreen(wrapRef);
   const [registerModal, { openModal }] = useModal();
   const state = reactive<TableState>({
-    // 遮罩层
-    loading: true,
     // 非单个禁用
     single: true,
     // 非多个禁用
     multiple: true,
-    // 手动设置表格高度
-    tableHeight: 588,
     // a-table表格实例
     tableInstance: null,
     // a-form表单实例
@@ -244,24 +229,25 @@
       key: undefined,
       isSys: undefined
     },
-    // 数据列表
-    dataSource: [],
     // 日期范围
     dateRange: [],
     // 表格api
     tableProps: {
       // 表格ID
       rowKey: 'id',
+      // 遮罩层
+      loading: false,
+      // 数据列表
+      dataSource: [],
       // 表格行配置
-      rowSelection: { type: 'checkbox' }
+      rowSelection: { type: 'checkbox' },
+      // 是否展示外边框和列边框
+      bordered: true
     }
   });
   // 基于vben-table扩展rowSelection,实现勾选数据自主可控
   const basicTableProps = computed(() => {
-    return {
-      ...basicProps,
-      ...state.tableProps
-    } as unknown as BasicTableProps;
+    return { ...basicProps, ...state.tableProps } as unknown as BasicTableProps;
   });
   const {
     getRowSelection,
@@ -271,7 +257,7 @@
     getSelectRowKeys,
     deleteSelectRowByKey,
     setSelectedRowKeys
-  } = useRowSelection(basicTableProps, ref(state.dataSource), noop);
+  } = useRowSelection(basicTableProps, ref(state.tableProps.dataSource), noop);
   // 基于vben-table扩展分页
   const {
     getPaginationInfo,
@@ -283,7 +269,23 @@
   // 使用vben-table行斑马线
   const { getRowClassName } = useTableStyle(basicTableProps, prefixCls);
   // 使用vben-table自动计算表格高度跟在指定区域显示滚动条
-  const { getScrollRef, redoHeight } = useTableScroll(basicTableProps, tableElRef, columns as any, getRowSelectionRef, state.dataSource as any);
+  const { getScrollRef, redoHeight } = useTableScroll(basicTableProps, tableElRef, columns as any, getRowSelectionRef, state.tableProps.dataSource as any);
+
+  // 绑定table元素
+  const getBindValues = computed(() => {
+    debugger
+    const propsData: Recordable = {
+      ...state.tableProps,
+      tableLayout: 'fixed',
+      columns: columns,
+      size: state.selectedKeys[0],
+      scroll: unref(getScrollRef),
+      rowClassName: unref(getRowClassName),
+      rowSelection: unref(getRowSelectionRef),
+      pagination: toRaw(unref(getPaginationInfo)),
+    };
+    return propsData;
+  });
 
   /** 生命周期钩子回调处理区域 */
   onMounted(() => {
@@ -291,10 +293,6 @@
     state.queryFormInstance = unref(queryFormElRef);
     useTimeoutFn(() => getList() , 16);
   });
-  watchEffect(() => {
-    // 当数据不存在时清理表格高度
-    handleTableHeightSetting(state.dataSource.length > 0 ? false : true);
-  });
   watch(getRowSelectionRef, ()=> {
     handleSelectionChange(getSelectRowKeys());
   },{
@@ -302,22 +300,19 @@
     deep: true
   });
 
-  /** 处理表格高度设置 */
-  function handleTableHeightSetting(clean?: boolean) {
-    if (!state.tableInstance?.$el) return;
-    const bodyEl: HTMLElement | null =  state.tableInstance.$el.querySelector('.ant-table-body');
-    bodyEl && (bodyEl.style.height = `${ clean ? 'unset' : state.tableHeight+'px' }`);
-  }
-
   /** 查询列表数据 */
-  function getList() {
-    state.loading = true;
+  async function getList() {
+    try {
+      state.tableProps.loading = true;
       const { current = 1, pageSize = 10 } = getPagination() as PaginationProps;
-    listConfig(convertDateRange({ ...state.queryParams, current, size: pageSize }, state.dateRange)).then(response => {
-      state.dataSource = response.data;
-      setPagination({ total: response.total });
-      state.loading = false;
-    });
+      const result = await listConfig(convertDateRange({ ...state.queryParams, current, size: pageSize }, state.dateRange));
+      if (result) {
+        state.tableProps.dataSource = result.data;
+        setPagination({ total: result.total });
+      }
+    } finally {
+      state.tableProps.loading = false;
+    }
   }
 
   /** 搜索按钮操作 */
@@ -348,20 +343,23 @@
 
 
 
+
+
+
   /** 新增按钮操作,行内新增与工具栏局域新增通用 */
   function handleAdd() {
-    openModal(true,{isUpdate: false });
+    /*openModal(true,{isUpdate: false });*/
   }
 
   /** 编辑按钮操作,行内编辑 */
   function handleEdit(record?: Recordable) {
-    record = record || { id: toRaw(state.ids) };
-    openModal(true, { isUpdate: true, record });
+    /*record = record || { id: toRaw(state.ids) };
+    openModal(true, { isUpdate: true, record });*/
   }
 
   /** 删除按钮操作,行内删除 */
   async function handleDel(record?: Recordable) {
-    const ids = record?.id || toRaw(state.ids);
+    /*const ids = record?.id || toRaw(state.ids);
     createConfirm({
       iconType: 'warning',
       title: '警告',
@@ -371,7 +369,7 @@
         createMessage.success('删除成功!');
         handleSuccess();
       }
-    });
+    });*/
   }
 
 </script>