perf: 优化权限管理

src/views/Authorization/Role/components/Detail.vue

@@ -0,0 +1,106 @@
+<script setup lang="tsx">
+import { PropType, ref, unref, nextTick } from 'vue'
+import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
+import { ElTag, ElTree } from 'element-plus'
+import { findIndex } from '@/utils'
+import { getMenuListApi } from '@/api/menu'
+
+defineProps({
+  currentRow: {
+    type: Object as PropType<any>,
+    default: () => undefined
+  }
+})
+
+const filterPermissionName = (value: string) => {
+  const index = findIndex(unref(currentTreeData)?.permissionList || [], (item) => {
+    return item.value === value
+  })
+  return (unref(currentTreeData)?.permissionList || [])[index].label ?? ''
+}
+
+const renderTag = (enable?: boolean) => {
+  return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
+}
+
+const treeRef = ref<typeof ElTree>()
+
+const currentTreeData = ref()
+const nodeClick = (treeData: any) => {
+  currentTreeData.value = treeData
+}
+
+const treeData = ref<any[]>([])
+const getMenuList = async () => {
+  const res = await getMenuListApi()
+  if (res) {
+    treeData.value = res.data.list
+    await nextTick()
+  }
+}
+getMenuList()
+
+const detailSchema = ref<DescriptionsSchema[]>([
+  {
+    field: 'roleName',
+    label: '角色名称'
+  },
+  {
+    field: 'status',
+    label: '状态',
+    slots: {
+      default: (data: any) => {
+        return renderTag(data.status)
+      }
+    }
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    span: 24
+  },
+  {
+    field: 'permissionList',
+    label: '菜单分配',
+    span: 24,
+    slots: {
+      default: () => {
+        return (
+          <>
+            <div class="flex w-full">
+              <div class="flex-1">
+                <ElTree
+                  ref={treeRef}
+                  node-key="id"
+                  props={{ children: 'children', label: 'title' }}
+                  highlight-current
+                  expand-on-click-node={false}
+                  data={treeData.value}
+                  onNode-click={nodeClick}
+                >
+                  {{
+                    default: (data) => {
+                      return <span>{data?.data?.title}</span>
+                    }
+                  }}
+                </ElTree>
+              </div>
+              <div class="flex-1">
+                {unref(currentTreeData)
+                  ? unref(currentTreeData)?.meta?.permission?.map((v: string) => {
+                      return <ElTag class="ml-2 mt-2">{filterPermissionName(v)}</ElTag>
+                    })
+                  : null}
+              </div>
+            </div>
+          </>
+        )
+      }
+    }
+  }
+])
+</script>
+
+<template>
+  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
+</template>