first commit

src/views/permission/composables/useRolePermissionEditor.js

@@ -0,0 +1,69 @@
+import { computed, nextTick, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { roleData } from '../../../data/roles'
+import { customMenus } from '../../../data/customMenus'
+import { permissionGroups } from '../../../permissions/permissions'
+import { useAuth } from '../../../stores/auth'
+import { useRbac } from '../../../stores/rbac'
+
+export function useRolePermissionEditor() {
+  const { rolePermissions, updateRolePermission, createRole } = useRbac()
+  const { currentRole } = useAuth()
+  const selectedRole = ref(roleData[0].name)
+  const dialogVisible = ref(false)
+  const newRoleName = ref('')
+  const treeRef = ref()
+  const syncingTree = ref(false)
+  const permissionTree = computed(() => {
+    const groups = permissionGroups.map(group => ({
+      id: `group-${group.name}`,
+      label: group.name,
+      children: group.items.map(permission => ({ id: permission, label: permission, permission })),
+    }))
+    if (customMenus.length) {
+      groups.push({
+        id: 'group-custom-menus',
+        label: '自定义菜单',
+        children: customMenus.map(menu => ({ id: menu.permission, label: menu.title, permission: menu.permission })),
+      })
+    }
+    return groups
+  })
+  const currentLevel = computed(() => roleData.find(role => role.name === currentRole.value)?.level || 1)
+  const selectedRoleRecord = computed(() => roleData.find(role => role.name === selectedRole.value))
+  const canEditSelectedRole = computed(() => (selectedRoleRecord.value?.level || 1) >= currentLevel.value)
+
+  watch(selectedRole, async role => {
+    syncingTree.value = true
+    await nextTick()
+    treeRef.value?.setCheckedKeys(rolePermissions[role] || [])
+    await nextTick()
+    syncingTree.value = false
+  }, { immediate: true })
+
+  function selectRole(row) { selectedRole.value = row.name }
+  function handleCheck(data, checked) {
+    if (!syncingTree.value && data.permission && canEditSelectedRole.value) {
+      updateRolePermission(selectedRole.value, data.permission, checked)
+    }
+  }
+  function addRole() {
+    const name = newRoleName.value.trim()
+    if (!name) return ElMessage.warning('请输入角色名称')
+    if (roleData.some(role => role.name === name)) return ElMessage.warning('角色名称已存在')
+    roleData.push({
+      id: Date.now(), name, description: '自定义权限角色', memberCount: 0,
+      category: '自定义角色', level: currentLevel.value + 1, status: '启用',
+    })
+    createRole(name)
+    selectedRole.value = name
+    newRoleName.value = ''
+    dialogVisible.value = false
+    ElMessage.success('角色已创建')
+  }
+
+  return {
+    roleData, rolePermissions, selectedRole, selectedRoleRecord, canEditSelectedRole,
+    permissionTree, treeRef, dialogVisible, newRoleName, selectRole, handleCheck, addRole,
+  }
+}