【代码评审】Bpm：模型列表的优化

src/directives/permission/hasPermi.ts

-import type {App} from 'vue'
-import {useUserStore} from "@/store/modules/user";
+import type { App } from 'vue'
+import { useUserStore } from '@/store/modules/user'
 
 const { t } = useI18n() // 国际化
 
+/** 判断权限的指令 directive */
 export function hasPermi(app: App<Element>) {
   app.directive('hasPermi', (el, binding) => {
     const { value } = binding
@@ -18,9 +19,13 @@ export function hasPermi(app: App<Element>) {
     }
   })
 }
-const userStore = useUserStore();
+
+/** 判断权限的方法 function */
+const userStore = useUserStore()
 const all_permission = '*:*:*'
 export const hasPermission = (permission: string[]) => {
-  return userStore.permissionsSet.has(all_permission) ||
-    permission.some(permission => userStore.permissionsSet.has(permission))
+  return (
+    userStore.permissions.has(all_permission) ||
+    permission.some((permission) => userStore.permissions.has(permission))
+  )
 }

src/store/modules/user.ts

@@ -15,8 +15,7 @@ interface UserVO {
 
 interface UserInfoVO {
   // USER 缓存
-  permissions: string[]
-  permissionsSet: Set<string>
+  permissions: Set<string>
   roles: string[]
   isSetUser: boolean
   user: UserVO
@@ -24,8 +23,7 @@ interface UserInfoVO {
 
 export const useUserStore = defineStore('admin-user', {
   state: (): UserInfoVO => ({
-    permissions: [],
-    permissionsSet: new Set<string>(),
+    permissions: new Set<string>(),
     roles: [],
     isSetUser: false,
     user: {
@@ -36,7 +34,7 @@ export const useUserStore = defineStore('admin-user', {
     }
   }),
   getters: {
-    getPermissions(): string[] {
+    getPermissions(): Set<string> {
       return this.permissions
     },
     getRoles(): string[] {
@@ -59,8 +57,7 @@ export const useUserStore = defineStore('admin-user', {
       if (!userInfo) {
         userInfo = await getInfo()
       }
-      this.permissions = userInfo.permissions
-      this.permissionsSet = new Set(userInfo.permissions)
+      this.permissions = new Set(userInfo.permissions)
       this.roles = userInfo.roles
       this.user = userInfo.user
       this.isSetUser = true
@@ -88,7 +85,7 @@ export const useUserStore = defineStore('admin-user', {
       this.resetState()
     },
     resetState() {
-      this.permissions = []
+      this.permissions = new Set<string>()
       this.roles = []
       this.isSetUser = false
       this.user = {

src/views/bpm/model/CategoryDraggableModel.vue

@@ -190,10 +190,7 @@
               <el-button type="primary" link>更多</el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    command="handleDefinitionList"
-                    v-if="hasPermiPdQuery"
-                  >
+                  <el-dropdown-item command="handleDefinitionList" v-if="hasPermiPdQuery">
                     历史
                   </el-dropdown-item>
                   <el-dropdown-item
@@ -278,6 +275,7 @@ const originalData: any = ref([]) // 原始数据
 const modelList: any = ref([]) // 模型列表
 const isExpand = ref(false) // 是否处于展开状态
 
+/** 权限校验：通过 computed 解决列表的卡顿问题 */
 const hasPermiUpdate = computed(() => {
   return checkPermi(['bpm:model:update'])
 })
@@ -294,7 +292,6 @@ const hasPermiPdQuery = computed(() => {
   return checkPermi(['bpm:process-definition:query'])
 })
 
-
 /** '更多'操作按钮 */
 const handleModelCommand = (command: string, row: any) => {
   switch (command) {