From e1d9f555c83f2916964f7f76f459ab54ff8101fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=B6=9B?= <1537080775@qq.com> Date: Sat, 29 Jun 2024 14:46:37 +0800 Subject: [PATCH] =?UTF-8?q?feat(20240629=5Frole=5Fmenu):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化在新增修改菜单的时候，父级菜单tree只显示目录 --- .../menu/components/MenuFormCom/index.vue | 114 ++--- web/src/views/system/menu/types.ts | 2 +- .../PermissionComNew/index copy.vue | 420 ++++++++++++++++++ .../components/PermissionComNew/index.vue | 2 +- 4 files changed, 480 insertions(+), 58 deletions(-) create mode 100644 web/src/views/system/role/components/PermissionComNew/index copy.vue diff --git a/web/src/views/system/menu/components/MenuFormCom/index.vue b/web/src/views/system/menu/components/MenuFormCom/index.vue index 5fa4aba..bb7ac32 100644 --- a/web/src/views/system/menu/components/MenuFormCom/index.vue +++ b/web/src/views/system/menu/components/MenuFormCom/index.vue @@ -10,21 +10,12 @@ - + - + @@ -35,12 +26,14 @@ - + - + @@ -48,46 +41,45 @@ - + - + + + + + + + + + + + - - - - - - - - - - - +
- + - + @@ -96,7 +88,8 @@ - +
@@ -118,6 +111,8 @@ import { lazyLoadMenu, AddObj, UpdateObj } from '../../api'; import { successNotification } from '/@/utils/message'; import { MenuFormDataType, MenuTreeItemType, ComponentFileItem, APIResponseData } from '../../types'; import type Node from 'element-plus/es/components/tree/src/model/node'; +import { log } from 'console'; +import XEUtils from 'xe-utils'; interface IProps { initFormData: Partial | null; @@ -148,14 +143,14 @@ const validateWebPath = (rule: any, value: string, callback: Function) => { }; const validateLinkUrl = (rule: any, value: string, callback: Function) => { - let pattern = /^\/.*?/; - let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; - const reg = pattern.test(value) || patternUrl.test(value) - if (reg) { - callback(); - } else { - callback(new Error('请输入正确的地址')); - } + let pattern = /^\/.*?/; + let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; + const reg = pattern.test(value) || patternUrl.test(value) + if (reg) { + callback(); + } else { + callback(new Error('请输入正确的地址')); + } }; const props = withDefaults(defineProps(), { @@ -172,7 +167,7 @@ const rules = reactive({ name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }], component: [{ required: true, message: '请输入组件地址', trigger: 'blur' }], component_name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }], - link_url: [{ required: true, message: '请输入外链接地址',validator:validateLinkUrl, trigger: 'blur' }], + link_url: [{ required: true, message: '请输入外链接地址', validator: validateLinkUrl, trigger: 'blur' }], }); let deptDefaultList = ref([]); @@ -189,9 +184,9 @@ let menuFormData = reactive({ description: '', is_catalog: false, is_link: false, - is_iframe: false, - is_affix: false, - link_url:'' + is_iframe: false, + is_affix: false, + link_url: '' }); let menuBtnLoading = ref(false); @@ -210,9 +205,9 @@ const setMenuFormData = () => { menuFormData.description = props.initFormData?.description || ''; menuFormData.is_catalog = !!props.initFormData.is_catalog; menuFormData.is_link = !!props.initFormData.is_link; - menuFormData.is_iframe =!!props.initFormData.is_iframe; - menuFormData.is_affix =!!props.initFormData.is_affix; - menuFormData.link_url =props.initFormData.link_url; + menuFormData.is_iframe = !!props.initFormData.is_iframe; + menuFormData.is_affix = !!props.initFormData.is_affix; + menuFormData.link_url = props.initFormData.link_url; } }; @@ -246,7 +241,7 @@ const createFilter = (queryString: string) => { const handleTreeLoad = (node: Node, resolve: Function) => { if (node.level !== 0) { lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => { - resolve(res.data); + resolve(XEUtils.filter(res.data, (i: MenuTreeItemType) => i.is_catalog)); }); } }; @@ -278,9 +273,14 @@ const handleCancel = (type: string = '') => { formRef.value?.resetFields(); }; +/** + * 初始化 + */ onMounted(async () => { props.treeData.map((item) => { - deptDefaultList.value.push(item); + if (item.is_catalog) { + deptDefaultList.value.push(item); + } }); setMenuFormData(); }); @@ -290,6 +290,7 @@ onMounted(async () => { .menu-form-com { margin: 10px; overflow-y: auto; + .menu-form-alert { color: #fff; line-height: 24px; @@ -298,6 +299,7 @@ onMounted(async () => { border-radius: 4px; background-color: var(--el-color-primary); } + .menu-form-btns { padding-bottom: 10px; box-sizing: border-box; diff --git a/web/src/views/system/menu/types.ts b/web/src/views/system/menu/types.ts index 7975478..e99086c 100644 --- a/web/src/views/system/menu/types.ts +++ b/web/src/views/system/menu/types.ts @@ -65,5 +65,5 @@ export interface MenuFormDataType { is_link: boolean; is_iframe:boolean; is_affix:boolean; - link_url: string; + link_url: string|undefined; } diff --git a/web/src/views/system/role/components/PermissionComNew/index copy.vue b/web/src/views/system/role/components/PermissionComNew/index copy.vue new file mode 100644 index 0000000..0b1ca19 --- /dev/null +++ b/web/src/views/system/role/components/PermissionComNew/index copy.vue @@ -0,0 +1,420 @@ + + + + + + + diff --git a/web/src/views/system/role/components/PermissionComNew/index.vue b/web/src/views/system/role/components/PermissionComNew/index.vue index 0b1ca19..1e98ead 100644 --- a/web/src/views/system/role/components/PermissionComNew/index.vue +++ b/web/src/views/system/role/components/PermissionComNew/index.vue @@ -160,7 +160,7 @@ let customDataPermission = ref([]); //获取菜单,按钮,权限 const getMenuBtnPermission = async () => { const resMenu = await getRolePermission({ role: props.roleId }) - menuData.value = resMenu + menuData.value = resMenu } // 获取按钮的数据权限下拉选项