Browse Source

👣 解决路由冲突问题

master
wangxiang 3 years ago
parent
commit
da3d483957
  1. 10
      kicc-ui/src/router/guard/permissionGuard.ts
  2. 102
      kicc-ui/src/views/system/config/index.vue

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

@ -21,9 +21,6 @@ export function createPermissionGuard(router: Router) {
const userStore = useUserStoreWithOut(); const userStore = useUserStoreWithOut();
const permissionStore = usePermissionStoreWithOut(); const permissionStore = usePermissionStoreWithOut();
router.beforeEach(async (to, from, next) => { 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)) if (whitePathList.includes(to.path as PageEnum))
return next(); return next();
@ -44,7 +41,12 @@ export function createPermissionGuard(router: Router) {
return next(redirectLogin); 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(); const routes = await permissionStore.buildRoutesAction();
routes.forEach((route) => router.addRoute(route as unknown as RouteRecordRaw)); routes.forEach((route) => router.addRoute(route as unknown as RouteRecordRaw));

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

@ -46,16 +46,7 @@
</AFormItem> </AFormItem>
</AForm> </AForm>
<ATable ref="tableElRef" <ATable ref="tableElRef"
v-bind="state.tableProps" v-bind="getBindValues"
:loading="state.loading"
:size="state.selectedKeys[0]"
:dataSource="state.dataSource"
:columns="columns"
:bordered="true"
:scroll="getScrollRef"
:rowClassName="getRowClassName"
:rowSelection="getRowSelectionRef"
:pagination="getPaginationInfo"
@change="handleTablePaginationChange" @change="handleTablePaginationChange"
> >
<template #title> <template #title>
@ -160,7 +151,7 @@
import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker, Alert } from 'ant-design-vue'; 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 {BasicColumn, BasicTableProps, PaginationProps, SizeType, SorterResult} from '/@/components/Table';
import { listConfig, delConfig } from '/@/api/platform/system/controller/config'; 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 { columns } from './config.data';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { reactive, toRaw, unref } from 'vue'; import { reactive, toRaw, unref } from 'vue';
@ -176,13 +167,13 @@
import {usePagination} from "/@/components/Table/src/hooks/usePagination"; import {usePagination} from "/@/components/Table/src/hooks/usePagination";
import {useTableStyle} from "/@/components/Table/src/hooks/useTableStyle"; import {useTableStyle} from "/@/components/Table/src/hooks/useTableStyle";
import {useTableScroll} from "/@/components/Table/src/hooks/useTableScroll"; import {useTableScroll} from "/@/components/Table/src/hooks/useTableScroll";
import expandIcon from "/@/components/Table/src/components/ExpandIcon";
import {omit} from "lodash-es";
/** 类型规范统一声明定义区域 */ /** 类型规范统一声明定义区域 */
interface TableState { interface TableState {
loading: boolean;
single: boolean; single: boolean;
multiple: boolean; multiple: boolean;
tableHeight: number;
tableInstance: ComponentRef; tableInstance: ComponentRef;
queryFormInstance: ComponentRef | any; queryFormInstance: ComponentRef | any;
selectedKeys: SizeType[]; selectedKeys: SizeType[];
@ -191,7 +182,6 @@
key: string | undefined; key: string | undefined;
isSys: string | undefined; isSys: string | undefined;
}; };
dataSource: any[];
dateRange: string[]; dateRange: string[];
tableProps: Recordable; tableProps: Recordable;
} }
@ -220,18 +210,13 @@
const queryFormElRef = ref(null); const queryFormElRef = ref(null);
const { createConfirm } = useMessage(); const { createConfirm } = useMessage();
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const { toggle, isFullscreen } = useFullscreen(wrapRef); const { toggle, isFullscreen } = useFullscreen(wrapRef);
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const state = reactive<TableState>({ const state = reactive<TableState>({
//
loading: true,
// //
single: true, single: true,
// //
multiple: true, multiple: true,
//
tableHeight: 588,
// a-table // a-table
tableInstance: null, tableInstance: null,
// a-form // a-form
@ -244,24 +229,25 @@
key: undefined, key: undefined,
isSys: undefined isSys: undefined
}, },
//
dataSource: [],
// //
dateRange: [], dateRange: [],
// api // api
tableProps: { tableProps: {
// ID // ID
rowKey: 'id', rowKey: 'id',
//
loading: false,
//
dataSource: [],
// //
rowSelection: { type: 'checkbox' } rowSelection: { type: 'checkbox' },
//
bordered: true
} }
}); });
// vben-tablerowSelection, // vben-tablerowSelection,
const basicTableProps = computed(() => { const basicTableProps = computed(() => {
return { return { ...basicProps, ...state.tableProps } as unknown as BasicTableProps;
...basicProps,
...state.tableProps
} as unknown as BasicTableProps;
}); });
const { const {
getRowSelection, getRowSelection,
@ -271,7 +257,7 @@
getSelectRowKeys, getSelectRowKeys,
deleteSelectRowByKey, deleteSelectRowByKey,
setSelectedRowKeys setSelectedRowKeys
} = useRowSelection(basicTableProps, ref(state.dataSource), noop); } = useRowSelection(basicTableProps, ref(state.tableProps.dataSource), noop);
// vben-table // vben-table
const { const {
getPaginationInfo, getPaginationInfo,
@ -283,7 +269,23 @@
// 使vben-table线 // 使vben-table线
const { getRowClassName } = useTableStyle(basicTableProps, prefixCls); const { getRowClassName } = useTableStyle(basicTableProps, prefixCls);
// 使vben-table // 使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(() => { onMounted(() => {
@ -291,10 +293,6 @@
state.queryFormInstance = unref(queryFormElRef); state.queryFormInstance = unref(queryFormElRef);
useTimeoutFn(() => getList() , 16); useTimeoutFn(() => getList() , 16);
}); });
watchEffect(() => {
//
handleTableHeightSetting(state.dataSource.length > 0 ? false : true);
});
watch(getRowSelectionRef, ()=> { watch(getRowSelectionRef, ()=> {
handleSelectionChange(getSelectRowKeys()); handleSelectionChange(getSelectRowKeys());
},{ },{
@ -302,22 +300,19 @@
deep: true 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() { async function getList() {
state.loading = true; try {
const { current = 1, pageSize = 10 } = getPagination() as PaginationProps; state.tableProps.loading = true;
listConfig(convertDateRange({ ...state.queryParams, current, size: pageSize }, state.dateRange)).then(response => { const { current = 1, pageSize = 10 } = getPagination() as PaginationProps;
state.dataSource = response.data; const result = await listConfig(convertDateRange({ ...state.queryParams, current, size: pageSize }, state.dateRange));
setPagination({ total: response.total }); if (result) {
state.loading = false; state.tableProps.dataSource = result.data;
}); setPagination({ total: result.total });
}
} finally {
state.tableProps.loading = false;
}
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
@ -348,20 +343,23 @@
/** 新增按钮操作,行内新增与工具栏局域新增通用 */ /** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() { function handleAdd() {
openModal(true,{isUpdate: false }); /*openModal(true,{isUpdate: false });*/
} }
/** 编辑按钮操作,行内编辑 */ /** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) { function handleEdit(record?: Recordable) {
record = record || { id: toRaw(state.ids) }; /*record = record || { id: toRaw(state.ids) };
openModal(true, { isUpdate: true, record }); openModal(true, { isUpdate: true, record });*/
} }
/** 删除按钮操作,行内删除 */ /** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) { async function handleDel(record?: Recordable) {
const ids = record?.id || toRaw(state.ids); /*const ids = record?.id || toRaw(state.ids);
createConfirm({ createConfirm({
iconType: 'warning', iconType: 'warning',
title: '警告', title: '警告',
@ -371,7 +369,7 @@
createMessage.success('删除成功!'); createMessage.success('删除成功!');
handleSuccess(); handleSuccess();
} }
}); });*/
} }
</script> </script>

Loading…
Cancel
Save