From 46c6424334c2290153292f304f0ad26a4eaf3ca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A2=E6=B5=A9=E4=B8=9C?= <975115611@qq.com> Date: Fri, 10 Jan 2025 17:25:44 +0800 Subject: [PATCH] =?UTF-8?q?feat(menu):=20=E6=B7=BB=E5=8A=A0=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E6=9D=83=E9=99=90=E6=8E=A7=E5=88=B6=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 menuStore 中添加按钮权限数组 btnPermsArry - 在登录时获取用户权限并存储到菜单仓库 - 在内部用户和菜单资源页面添加权限控制指令 v-has-permi - 优化首页布局，添加用户头像下拉菜单 - 删除产品页面 - 修复菜单图标弹窗关闭逻辑 --- .vscode/launch.json | 23 ++++++ package.json | 2 + src/directives/hasPermi.js | 22 ++++++ src/home.vue | 85 ++++++++++++++--------- src/main.js | 6 ++ src/pages/login.vue | 7 +- src/pages/product/product.vue | 10 --- src/pages/systemSetting/internalusers.vue | 5 +- src/pages/systemSetting/menuResource.vue | 42 +++++++++-- src/stortes/menu.js | 11 ++- src/stortes/user.js | 3 +- src/utils/permissions.js | 21 ++++++ 12 files changed, 183 insertions(+), 54 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 src/directives/hasPermi.js delete mode 100644 src/pages/product/product.vue create mode 100644 src/utils/permissions.js diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..cb561fd --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,23 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "args": ["--extensionDevelopmentPath=${workspaceFolder}"], + "name": "启动扩展", + "outFiles": ["${workspaceFolder}/out/**/*.js"], + "preLaunchTask": "npm", + "request": "launch", + "type": "extensionHost" + }, + { + "type": "chrome", + "request": "launch", + "name": "针对 localhost 启动 Chrome", + "url": "http://localhost:5173", + "webRoot": "${workspaceFolder}" + } + ] +} diff --git a/package.json b/package.json index 55d6936..f338ede 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "version": "0.0.0", "type": "module", "scripts": { + "dev:debug": "node --inspect-brk node_modules/vite/bin/vite.js", + "build:debug": "node --inspect-brk node_modules/vite/bin/vite.js build", "serve": "vite", "dev": "vite", "pro": "vite --mode production", diff --git a/src/directives/hasPermi.js b/src/directives/hasPermi.js new file mode 100644 index 0000000..2fc49ac --- /dev/null +++ b/src/directives/hasPermi.js @@ -0,0 +1,22 @@ +import useMenuStore from '@/stortes/menu'; // 引入仓库 +// 自定义指令 v-has-permi +export default { + mounted(el, binding) { + const useMenuStoresdata = useMenuStore(); + const permissions = useMenuStoresdata.btnPermsArry; + const requiredPermissions = binding.value; // 获取传递的权限数组 + const all_permission = '*:*:*'; // 假设有一个表示所有权限的值 + + // 判断是否拥有权限 + const hasPermission = permissions.some(permission => { + return all_permission === permission || requiredPermissions.includes(permission); + }); + + // 如果没有权限，隐藏元素 + if (!hasPermission) { + el.style.display = 'none'; + } else { + el.style.display = ''; // 如果有权限，显示元素 + } + }, +}; diff --git a/src/home.vue b/src/home.vue index 6ca31a6..6952b72 100644 --- a/src/home.vue +++ b/src/home.vue @@ -11,7 +11,6 @@
-
-
- - Open user menu - -
+ +
+ + Open user menu + +
+ +
@@ -95,6 +101,8 @@ const handleClickOutside = e => { // 确保 contextMenuElement 已经被赋值 if (contextMenuElement.value && !contextMenuElement.value.contains(e.target)) { contextMenuVisible.value = false; + } else { + contextMenuVisible.value = false; } }; // 定义函数 refresh @@ -133,34 +141,49 @@ const closeAll = () => { proxy.$router.push(editableTabsValue.value); }); }; + +const handleContextOut = e => { + if (e === 'contextout') { + // 退出登录 + proxy.$messageBox + .confirm('确定退出登录吗？', '提示', { + type: '提示', + }) + .then(() => { + proxy.$router.push('/login'); + }); + } +}; const handleContextMenu = e => { + contextMenuVisible.value = false; let result = findNodeById(userData.value, e.srcElement.id.split('-')[1]); - rightMouseKey.value = e.srcElement.id.split('-')[1]; - rightMouseData.value = result; - // 判断当前右键点击的是否是第0或者是第一项 - let index = activeTabArray.value.findIndex(item => item.url === rightMouseKey.value); - if (index == 0 || index == 1) { - isLeftMenu.value = false; - } else { - isLeftMenu.value = true; - } - // 判断当前右键点击的菜单项是否是当前路由 - if (rightMouseKey.value == editableTabsValue.value) { - isActiveMenu.value = true; - } else { - isActiveMenu.value = false; - } - // 如果当前右键点击的菜单项是最后一项那就就不显示 关闭右侧的li - if (rightMouseKey.value == activeTabArray.value[activeTabArray.value.length - 1].url) { - // isRightMenu 设置为false - isRightMenu.value = false; - } else { - isRightMenu.value = true; + if (result) { + contextMenuVisible.value = true; + left.value = e.clientX - 10; + top.value = e.clientY + 15; + rightMouseKey.value = e.srcElement.id.split('-')[1]; + rightMouseData.value = result; + // 判断当前右键点击的是否是第0或者是第一项 + let index = activeTabArray.value.findIndex(item => item.url === rightMouseKey.value); + if (index == 0 || index == 1) { + isLeftMenu.value = false; + } else { + isLeftMenu.value = true; + } + // 判断当前右键点击的菜单项是否是当前路由 + if (rightMouseKey.value == editableTabsValue.value) { + isActiveMenu.value = true; + } else { + isActiveMenu.value = false; + } + // 如果当前右键点击的菜单项是最后一项那就就不显示 关闭右侧的li + if (rightMouseKey.value == activeTabArray.value[activeTabArray.value.length - 1].url) { + // isRightMenu 设置为false + isRightMenu.value = false; + } else { + isRightMenu.value = true; + } } - e.preventDefault(); - contextMenuVisible.value = true; - left.value = e.clientX - 10; - top.value = e.clientY + 15; }; const removeTab = pane => { diff --git a/src/main.js b/src/main.js index e965674..86cde73 100644 --- a/src/main.js +++ b/src/main.js @@ -7,11 +7,17 @@ import axios from './utils/request'; import pinia from './stortes'; //引入 import * as ElementPlusIconsVue from '@element-plus/icons-vue'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 引入中文语言包 +import { checkPermissions } from './utils/permissions'; +import hasPermi from './directives/hasPermi'; // 引入自定义指令 // import '@/assets/css/tailwind.css'; import 'uno.css'; const app = createApp(App); app.config.globalProperties.$api = axios; app.config.globalProperties.$icon = ElementPlusIconsVue; +// 引入权限校验方法 +app.config.globalProperties.$checkPermissions = checkPermissions; +// 注册全局指令 v-has-permi +app.directive('has-permi', hasPermi); // size: 'small', app.use(router).use(pinia).use(ElementPlus, { locale: zhCn, zIndex: 3000 }); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { diff --git a/src/pages/login.vue b/src/pages/login.vue index a60f89d..6d1322f 100644 --- a/src/pages/login.vue +++ b/src/pages/login.vue @@ -37,10 +37,10 @@ import useUserInfoStore from '@/stortes/user'; //引入仓库 import menuStore from '@/stortes/menu'; //引入仓库 import { storeToRefs } from 'pinia'; //引入pinia转换 const userInfoStore = useUserInfoStore(); -// const userdata = storeToRefs(userInfoStore); // 响应式 +const { userInfo } = storeToRefs(userInfoStore); // 响应式 const { proxy } = getCurrentInstance(); const menuInfoStore = menuStore(); -const { editableTabsValue } = storeToRefs(menuInfoStore); // 响应式 +const { editableTabsValue, btnPermsArry } = storeToRefs(menuInfoStore); // 响应式 let intervalId = null; let flag = ref(0); onMounted(async () => { @@ -96,6 +96,9 @@ const onSubmit = formEl => { const data = await proxy.$api.login(ruleForm); if (data.code == 200) { + console.log(userInfoStore, 'userInfoStoreuserInfoStore'); + menuInfoStore.getPerms(data.data.perms); + userInfoStore.changeUserInfo(data.data.informationObject); // userInfoStore.changeUserInfo(data.data); localStorage.setItem('token', data.data.token); localStorage.setItem('refreshToken', data.data.refreshToken); diff --git a/src/pages/product/product.vue b/src/pages/product/product.vue deleted file mode 100644 index b2ded6e..0000000 --- a/src/pages/product/product.vue +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/src/pages/systemSetting/internalusers.vue b/src/pages/systemSetting/internalusers.vue index 10b8dcf..406a29c 100644 --- a/src/pages/systemSetting/internalusers.vue +++ b/src/pages/systemSetting/internalusers.vue @@ -3,6 +3,7 @@
diff --git a/src/pages/systemSetting/menuResource.vue b/src/pages/systemSetting/menuResource.vue index e6f1535..f20b561 100644 --- a/src/pages/systemSetting/menuResource.vue +++ b/src/pages/systemSetting/menuResource.vue @@ -2,23 +2,22 @@
- 新增 + 新增
- + - @@ -136,7 +135,15 @@ - +
请选择图标
@@ -180,7 +187,7 @@