vue2server7 7.0.45 → 7.0.46

package/frontEnd/src/components/OrgTreeSelectCascade.vue

@@ -153,7 +153,7 @@ const props = withDefaults(defineProps<OrgTreeSelectProps>(), {
   labelKey: 'name',
   childrenKey: 'children',
   defaultExpandedKeys: () => [],
-  defaultExpandAll: false
+  defaultExpandAll: true
 })
 
 const emit = defineEmits<OrgTreeSelectEmits>()
@@ -265,20 +265,65 @@ function openDialog(): void {
   selectedValue.value = props.modelValue
 }
 
+/**
+ * 获取所有节点 ID（递归）
+ * @param data - 树数据
+ * @returns 所有节点 ID 数组
+ */
+function getAllNodeIds(data: OrgTreeNode[]): (string | number)[] {
+  const ids: (string | number)[] = []
+  for (const item of data) {
+    ids.push(item.id)
+    if (item.children && item.children.length > 0) {
+      ids.push(...getAllNodeIds(item.children))
+    }
+  }
+  return ids
+}
+
+/**
+ * 分批展开节点（避免卡顿）
+ * @param ids - 节点 ID 数组
+ * @param batchSize - 每批处理的节点数
+ */
+async function expandNodesBatch(ids: (string | number)[], batchSize: number = 50): Promise<void> {
+  if (!treeRef.value) return
+
+  for (let i = 0; i < ids.length; i += batchSize) {
+    const batch = ids.slice(i, i + batchSize)
+    batch.forEach(id => {
+      treeRef.value?.expandNode(id as string)
+    })
+    // 每批处理后让出主线程，避免阻塞UI
+    if (i + batchSize < ids.length) {
+      await new Promise(resolve => setTimeout(resolve, 0))
+    }
+  }
+}
+
 /**
  * 弹窗打开后的回调
  */
 function onDialogOpened(): void {
-  nextTick(() => {
+  nextTick(async () => {
     updateSelectedNodes()
     if (!treeRef.value) return
 
+    // 先恢复选中状态
     if (props.multiple) {
       const keys = Array.isArray(selectedValue.value) ? selectedValue.value : []
       treeRef.value.setCheckedKeys(keys as (string | number)[])
     } else if (selectedValue.value !== null) {
       treeRef.value.setCurrentKey(selectedValue.value as string | number)
     }
+
+    // 异步展开节点，避免弹窗卡顿
+    if (props.defaultExpandAll) {
+      const allIds = getAllNodeIds(props.data)
+      await expandNodesBatch(allIds, 50)
+    } else if (props.defaultExpandedKeys.length > 0) {
+      await expandNodesBatch(props.defaultExpandedKeys, 50)
+    }
   })
 }
 

package/frontEnd/src/pages/OrgTreeSelectPage.vue

@@ -103,165 +103,72 @@ import { ref } from 'vue'
 import OrgTreeSelect, { type OrgTreeNode } from '../components/OrgTreeSelect.vue'
 import OrgTreeSelectCascade from '../components/OrgTreeSelectCascade.vue'
 
-// 机构树数据（模拟）
-const orgData = ref<OrgTreeNode[]>([
-  {
-    id: '25001',
-    code: '25001',
-    name: '北京银行总行核算中心',
-    icon: 'OfficeBuilding',
-    children: [
-      {
-        id: '00019',
-        code: '00019',
-        name: '北京分行',
-        icon: 'OfficeBuilding',
-        children: []
-      },
-      {
-        id: '00023',
-        code: '00023',
-        name: '中关村分行',
-        icon: 'OfficeBuilding',
-        children: []
-      },
-      {
-        id: '00025',
-        code: '00025',
-        name: '城市副中心分行',
-        icon: 'OfficeBuilding',
-        children: []
-      },
-      {
-        id: '25101',
-        code: '25101',
-        name: '北京核算中心',
+// 机构树数据（模拟）- 生成600条数据
+function generateOrgData(): OrgTreeNode[] {
+  const orgNames = [
+    '北京银行', '工商银行', '建设银行', '农业银行', '中国银行',
+    '交通银行', '招商银行', '浦发银行', '兴业银行', '民生银行',
+    '中信银行', '光大银行', '华夏银行', '广发银行', '平安银行'
+  ]
+  const branchTypes = ['分行', '支行', '营业部', '分理处', '储蓄所']
+  const districts = [
+    '东城', '西城', '朝阳', '丰台', '石景山', '海淀', '门头沟', '房山', '通州', '顺义',
+    '昌平', '大兴', '怀柔', '平谷', '密云', '延庆', '天津', '河北', '山西', '内蒙古',
+    '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东'
+  ]
+
+  const data: OrgTreeNode[] = []
+  let idCounter = 10000
+
+  // 生成10个总行
+  for (let i = 0; i < 10; i++) {
+    const bankName = orgNames[i % orgNames.length]
+    const bankId = String(idCounter++)
+    const bank: OrgTreeNode = {
+      id: bankId,
+      code: bankId,
+      name: `${bankName}总行`,
+      icon: 'OfficeBuilding',
+      children: []
+    }
+
+    // 每个总行下生成5-8个分行
+    const branchCount = 5 + Math.floor(Math.random() * 4)
+    for (let j = 0; j < branchCount; j++) {
+      const district = districts[j % districts.length]
+      const branchId = String(idCounter++)
+      const branch: OrgTreeNode = {
+        id: branchId,
+        code: branchId,
+        name: `${bankName}${district}${branchTypes[0]}`,
         icon: 'OfficeBuilding',
         children: []
       }
-    ]
-  },
-  {
-    id: '25111',
-    code: '25111',
-    name: '天津核算中心',
-    icon: 'OfficeBuilding',
-    children: [
-      {
-        id: '25311',
-        code: '25311',
-        name: '天津分行会计部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30001',
-        code: '30001',
-        name: '天津营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30011',
-        code: '30011',
-        name: '天津河西支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30021',
-        code: '30021',
-        name: '天津开发区支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30031',
-        code: '30031',
-        name: '天津南开支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30041',
-        code: '30041',
-        name: '北京银行股份有限公司天津八纬路支行',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30051',
-        code: '30051',
-        name: '天津梅江支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30061',
-        code: '30061',
-        name: '天津津南支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30071',
-        code: '30071',
-        name: '天津河北支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30081',
-        code: '30081',
-        name: '北京银行股份有限公司天津河东支行',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30091',
-        code: '30091',
-        name: '北京银行股份有限公司天津和平支行',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30101',
-        code: '30101',
-        name: '天津滨海支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30111',
-        code: '30111',
-        name: '天津西青支行营业部',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30121',
-        code: '30121',
-        name: '北京银行股份有限公司天津科创支行',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30131',
-        code: '30131',
-        name: '北京银行股份有限公司天津北辰支行',
-        icon: 'Document',
-        children: []
-      },
-      {
-        id: '30141',
-        code: '30141',
-        name: '北京银行天津中新生态城绿色支行',
-        icon: 'Document',
-        children: []
+
+      // 每个分行下生成8-12个支行
+      const subBranchCount = 8 + Math.floor(Math.random() * 5)
+      for (let k = 0; k < subBranchCount; k++) {
+        const subDistrict = districts[(j + k) % districts.length]
+        const subBranchId = String(idCounter++)
+        branch.children!.push({
+          id: subBranchId,
+          code: subBranchId,
+          name: `${bankName}${subDistrict}${branchTypes[1]}${k + 1}`,
+          icon: 'Document',
+          children: []
+        })
       }
-    ]
+
+      bank.children!.push(branch)
+    }
+
+    data.push(bank)
   }
-])
+
+  return data
+}
+
+const orgData = ref<OrgTreeNode[]>(generateOrgData())
 
 const singleValue = ref<string | null>(null)
 const multipleValue = ref<string[]>([])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.45",
+  "version": "7.0.46",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/111

@@ -0,0 +1,52 @@
+// src/directives/permission.ts
+import type { Directive } from 'vue'
+
+function getPermissions(): string[] {
+  return JSON.parse(localStorage.getItem('permissions') || '[]')
+}
+
+export const permissionDirective: Directive = {
+  mounted(el, binding) {
+    const { value } = binding
+    const permissions = getPermissions()
+
+    if (!value) return
+
+    const hasPermission = Array.isArray(value)
+      ? value.some(p => permissions.includes(p))
+      : permissions.includes(value)
+
+    if (!hasPermission) {
+      el.parentNode?.removeChild(el)
+    }
+  }
+}
+
+
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { permissionDirective } from '@/directives/permission'
+
+const app = createApp(App)
+
+app.directive('permission', permissionDirective)
+
+app.mount('#app')
+
+
+<el-button v-permission="'user:add'">新增</el-button>
+
+<el-button v-permission="['user:edit', 'user:update']">
+  编辑
+</el-button>
+
+
+
+
+<el-button v-permission="'user:add'">新增</el-button>
+
+<el-button v-permission="['user:edit', 'user:update']">
+  编辑
+</el-button>
+

package/test/vue3_permission_directive_advanced.md

@@ -0,0 +1,220 @@
+# Vue3 按钮权限管理（进阶版：自定义指令）
+
+## 📌 目标
+实现一套通用的按钮权限控制方案，支持：
+
+- ✅ 单权限 / 多权限
+- ✅ AND / OR 权限判断
+- ✅ 隐藏 或 禁用 控制
+- ✅ 动态更新权限
+- ✅ 可扩展（Pinia / 后端权限）
+
+---
+
+## 🧩 一、指令实现
+
+```ts
+// src/directives/permission.ts
+import type { Directive } from 'vue'
+
+function getPermissions(): string[] {
+  return JSON.parse(localStorage.getItem('permissions') || '[]')
+}
+
+function checkPermission(value: any, permissions: string[]) {
+  if (typeof value === 'string') {
+    return permissions.includes(value)
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(p => permissions.includes(p))
+  }
+
+  if (typeof value === 'object') {
+    const { code, mode = 'or' } = value
+
+    if (Array.isArray(code)) {
+      return mode === 'and'
+        ? code.every(p => permissions.includes(p))
+        : code.some(p => permissions.includes(p))
+    }
+
+    return permissions.includes(code)
+  }
+
+  return false
+}
+
+function handleEl(el: HTMLElement, hasPermission: boolean, effect = 'remove') {
+  if (hasPermission) return
+
+  if (effect === 'disable') {
+    el.setAttribute('disabled', 'true')
+    el.classList.add('is-disabled')
+    el.style.pointerEvents = 'none'
+  } else {
+    el.parentNode?.removeChild(el)
+  }
+}
+
+export const permissionDirective: Directive = {
+  mounted(el, binding) {
+    const permissions = getPermissions()
+    const { value, arg } = binding
+
+    const hasPermission = checkPermission(value, permissions)
+
+    handleEl(el, hasPermission, arg)
+  },
+
+  updated(el, binding) {
+    const permissions = getPermissions()
+    const { value, arg } = binding
+
+    const hasPermission = checkPermission(value, permissions)
+
+    handleEl(el, hasPermission, arg)
+  }
+}
+```
+
+---
+
+## 🚀 二、全局注册
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { permissionDirective } from '@/directives/permission'
+
+const app = createApp(App)
+
+app.directive('permission', permissionDirective)
+
+app.mount('#app')
+```
+
+---
+
+## 🎯 三、使用方式
+
+### 1️⃣ 单权限
+```vue
+<el-button v-permission="'user:add'">新增</el-button>
+```
+
+---
+
+### 2️⃣ 多权限（满足一个）
+```vue
+<el-button v-permission="['user:add','user:create']">
+  新增
+</el-button>
+```
+
+---
+
+### 3️⃣ 多权限（必须全部满足）
+```vue
+<el-button v-permission="{ code: ['user:add','user:vip'], mode: 'and' }">
+  高级新增
+</el-button>
+```
+
+---
+
+### 4️⃣ 无权限 → 禁用按钮
+```vue
+<el-button v-permission:disable="'user:add'">
+  新增
+</el-button>
+```
+
+---
+
+## 🧠 四、推荐优化（生产环境必做）
+
+### ✔ 使用 Pinia 管理权限
+
+```ts
+// stores/user.ts
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    permissions: [] as string[]
+  })
+})
+```
+
+### ✔ 修改指令权限来源
+
+```ts
+import { useUserStore } from '@/stores/user'
+
+const permissions = useUserStore().permissions
+```
+
+---
+
+## 📦 五、权限格式规范
+
+建议统一格式：
+
+```
+user:add
+user:delete
+order:list
+order:create
+```
+
+---
+
+## 🔐 六、后端权限校验（必须）
+
+前端权限只是 UI 控制，后端必须校验：
+
+```ts
+if (!user.permissions.includes('user:add')) {
+  throw new Error('Forbidden')
+}
+```
+
+---
+
+## ⚠️ 七、常见问题
+
+### ❌ 权限变化 UI 不更新
+✔ 已通过 `updated` 生命周期解决
+
+---
+
+### ❌ Element Plus 禁用无效
+✔ 必须加：
+
+```ts
+el.style.pointerEvents = 'none'
+```
+
+---
+
+### ❌ 使用 v-if 控制权限
+不推荐，会导致：
+- 模板混乱
+- 逻辑分散
+
+---
+
+## 🏁 总结
+
+推荐最终方案：
+
+👉 自定义指令（控制 UI）  
+👉 Pinia（存权限）  
+👉 后端校验（保证安全）  
+
+这样你的权限系统：
+- 清晰
+- 可维护
+- 可扩展