feat: 新增角色列表

src/components/custom/dept-tree.vue

@@ -0,0 +1,144 @@
+<script setup lang="tsx">
+import { onMounted, ref, useAttrs } from 'vue';
+import type { TreeSelectInst, TreeSelectProps } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetDeptTree } from '@/service/api/system/user';
+
+defineOptions({ name: 'DeptTree' });
+
+interface Props {
+  immediate?: boolean;
+  [key: string]: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  immediate: true
+});
+
+const { bool: expandAll } = useBoolean();
+const { bool: checkAll } = useBoolean();
+const expandedKeys = ref<CommonType.IdType[]>([100]);
+
+const deptTreeRef = ref<TreeSelectInst | null>(null);
+const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
+const options = defineModel<any[]>('options', { required: false, default: [] });
+const cascade = defineModel<boolean>('cascade', { required: false, default: true });
+const loading = defineModel<boolean>('loading', { required: false, default: false });
+
+const attrs: TreeSelectProps = useAttrs();
+
+async function getDeptList() {
+  loading.value = true;
+  const { error, data } = await fetchGetDeptTree();
+  if (error) return;
+
+  // 确保 options.value 是数组
+  if (data) {
+    options.value = Array.isArray(data) ? data : [data];
+  } else {
+    options.value = [];
+  }
+
+  loading.value = false;
+}
+
+onMounted(() => {
+  if (props.immediate) {
+    getDeptList();
+  }
+});
+
+function getAllDeptIds(depts: any[]) {
+  const deptIds: CommonType.IdType[] = [];
+  depts.forEach(item => {
+    if (item.id) {
+      deptIds.push(item.id);
+    }
+    if (item.children && Array.isArray(item.children)) {
+      deptIds.push(...getAllDeptIds(item.children));
+    }
+  });
+  return deptIds;
+}
+
+function handleCheckedTreeNodeAll(checked: boolean) {
+  if (checked) {
+    value.value = getAllDeptIds(options.value);
+    return;
+  }
+  value.value = [];
+}
+
+function handleSubmit() {
+  const deptIds = [...value.value];
+  const indeterminateData = deptTreeRef.value?.getIndeterminateData();
+  if (cascade.value) {
+    const parentIds: string[] = indeterminateData?.keys.filter(item => !deptIds?.includes(String(item))) as string[];
+    deptIds?.push(...parentIds);
+  }
+  return deptIds;
+}
+
+defineExpose({
+  submit: handleSubmit,
+  refresh: getDeptList
+});
+</script>
+
+<template>
+  <div class="w-full flex-col gap-12px">
+    <div class="w-full flex-center">
+      <NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
+      <NCheckbox
+        v-model:checked="checkAll"
+        :checked-value="true"
+        :unchecked-value="false"
+        @update:checked="handleCheckedTreeNodeAll"
+      >
+        全选/反选
+      </NCheckbox>
+      <NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
+    </div>
+    <NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
+      <NTree
+        ref="deptTreeRef"
+        v-model:checked-keys="value"
+        v-model:expanded-keys="expandedKeys"
+        multiple
+        checkable
+        key-field="id"
+        label-field="label"
+        :data="options"
+        :cascade="cascade"
+        :loading="loading"
+        virtual-scroll
+        :check-strategy="cascade ? 'child' : 'all'"
+        :default-expand-all="expandAll"
+        v-bind="attrs"
+      />
+    </NSpin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.resource {
+  border-radius: 6px;
+  border: 1px solid rgb(224, 224, 230);
+
+  .n-tree {
+    min-height: 200px;
+    max-height: 300px;
+    width: 100%;
+    height: 100%;
+
+    :deep(.n-tree__empty) {
+      min-height: 200px;
+      justify-content: center;
+    }
+  }
+
+  .n-empty {
+    justify-content: center;
+  }
+}
+</style>

src/components/custom/menu-tree.vue

@@ -2,8 +2,7 @@
 import { onMounted, ref, useAttrs } from 'vue';
 import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
-import { fetchGetMenuList } from '@/service/api/system';
-import { handleTree } from '@/utils/common';
+import { fetchGetMenuTreeSelect } from '@/service/api/system';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 
 defineOptions({ name: 'MenuTree' });
@@ -18,26 +17,27 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const { bool: expandAll } = useBoolean();
-const { bool: cascade } = useBoolean(true);
 const { bool: checkAll } = useBoolean();
+const expandedKeys = ref<CommonType.IdType[]>([0]);
 
 const menuTreeRef = ref<TreeSelectInst | null>(null);
 const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
 const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
+const cascade = defineModel<boolean>('cascade', { required: false, default: true });
 const loading = defineModel<boolean>('loading', { required: false, default: false });
 
 const attrs: TreeSelectProps = useAttrs();
 
 async function getMenuList() {
   loading.value = true;
-  const { error, data } = await fetchGetMenuList();
+  const { error, data } = await fetchGetMenuTreeSelect();
   if (error) return;
   options.value = [
     {
-      menuId: 0,
-      menuName: '根目录',
+      id: 0,
+      label: '根目录',
       icon: 'material-symbols:home-outline-rounded',
-      children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
+      children: data
     }
   ] as Api.System.MenuList;
   loading.value = false;
@@ -51,8 +51,11 @@ onMounted(() => {
 
 function renderPrefix({ option }: { option: TreeOption }) {
   const renderLocalIcon = String(option.icon).startsWith('icon-');
-  const icon = renderLocalIcon ? undefined : String(option.icon);
+  let icon = renderLocalIcon ? undefined : String(option.icon ?? 'material-symbols:buttons-alt-outline-rounded');
   const localIcon = renderLocalIcon ? String(option.icon).replace('icon-', 'menu-') : undefined;
+  if (icon === '#') {
+    icon = 'material-symbols:buttons-alt-outline-rounded';
+  }
   return <SvgIcon icon={icon} localIcon={localIcon} />;
 }
 
@@ -109,17 +112,18 @@ defineExpose({
       <NTree
         ref="menuTreeRef"
         v-model:checked-keys="value"
+        v-model:expanded-keys="expandedKeys"
         multiple
         checkable
-        key-field="menuId"
-        label-field="menuName"
+        :selectable="false"
+        key-field="id"
+        label-field="label"
         :data="options"
         :cascade="cascade"
         :loading="loading"
         virtual-scroll
-        :check-strategy="cascade ? 'child' : 'all'"
+        check-strategy="all"
         :default-expand-all="expandAll"
-        :default-expanded-keys="[0]"
         :render-prefix="renderPrefix"
         v-bind="attrs"
       />