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 { fetchGetMenuTreeSelect } from '@/service/api/system';
-import { handleTree } from '@/utils/common';
 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,
+      id: 0,
-      menuName: '根目录',
+      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"
+        :selectable="false"
-        label-field="menuName"
+        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"
       />

src/locales/langs/en-us.ts

@@ -188,7 +188,8 @@ const local: App.I18n.Schema = {
     'system_oss-config': 'OSS Config',
     monitor_cache: 'Cache Monitor',
     monitor_online: 'Online User',
-    'user-center': 'User Center'
+    'user-center': 'User Center',
+    system_role: 'Role Management'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -188,7 +188,8 @@ const local: App.I18n.Schema = {
     'system_oss-config': 'OSS配置',
     monitor_cache: '缓存监控',
     monitor_online: '在线用户',
-    'user-center': '个人中心'
+    'user-center': '个人中心',
+    system_role: '角色管理'
   },
   page: {
     login: {

src/service/api/system/menu.ts

@@ -35,6 +35,14 @@ export function fetchDeleteMenu(menuId: CommonType.IdType) {
   });
 }
 
+/** 获取菜单树 */
+export function fetchGetMenuTreeSelect() {
+  return request<Api.System.MenuList>({
+    url: 'system/menu/treeselect',
+    method: 'get'
+  });
+}
+
 /** 获取角色菜单权限 */
 export function fetchGetRoleMenuTreeSelect(roleId: CommonType.IdType) {
   return request<Api.System.RoleMenuTreeSelect>({

src/service/api/system/role.ts

@@ -52,3 +52,20 @@ export function fetchGetRoleSelect(roleIds?: CommonType.IdType[]) {
     params: { roleIds }
   });
 }
+
+/** 获取对应角色部门树列表 */
+export function fetchGetRoleDeptTreeSelect(roleId: CommonType.IdType) {
+  return request<Api.System.RoleDeptTreeSelect>({
+    url: `/system/role/deptTree/${roleId}`,
+    method: 'get'
+  });
+}
+
+/** 获取对应角色用户列表 */
+export function fetchGetRoleUserList(params: Api.System.UserSearchParams) {
+  return request<Api.System.UserList>({
+    url: `/system/role/authUser/allocatedList`,
+    method: 'get',
+    params
+  });
+}

src/typings/api/system.api.d.ts

@@ -48,8 +48,16 @@ declare namespace Api {
     type RoleOperateParams = CommonType.RecordNullable<
       Pick<
         Api.System.Role,
-        'roleId' | 'roleName' | 'roleKey' | 'roleSort' | 'menuCheckStrictly' | 'status' | 'remark'
+        | 'roleId'
-      > & { menuIds: CommonType.IdType[] }
+        | 'roleName'
+        | 'roleKey'
+        | 'roleSort'
+        | 'menuCheckStrictly'
+        | 'deptCheckStrictly'
+        | 'dataScope'
+        | 'status'
+        | 'remark'
+      > & { menuIds: CommonType.IdType[]; deptIds: CommonType.IdType[] }
     >;
 
     /** role list */
@@ -61,6 +69,12 @@ declare namespace Api {
       menus: MenuList;
     }>;
 
+    /** role dept tree select */
+    type RoleDeptTreeSelect = Common.CommonRecord<{
+      checkedKeys: CommonType.IdType[];
+      depts: Dept[];
+    }>;
+
     /** all role */
     type AllRole = Pick<Role, 'roleId' | 'roleName' | 'roleKey'>;
 
@@ -108,7 +122,9 @@ declare namespace Api {
 
     /** user search params */
     type UserSearchParams = CommonType.RecordNullable<
-      Pick<User, 'deptId' | 'userName' | 'nickName' | 'phonenumber' | 'status'> & Common.CommonSearchParams
+      Pick<User, 'deptId' | 'userName' | 'nickName' | 'phonenumber' | 'status'> & {
+        roleId: CommonType.IdType;
+      } & Common.CommonSearchParams
     >;
 
     /** user operate params */

src/typings/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     copy: typeof import('./../components/custom/menu-tree-select copy.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
+    DeptTree: typeof import('./../components/custom/dept-tree.vue')['default']
     DictRadio: typeof import('./../components/custom/dict-radio.vue')['default']
     DictSelect: typeof import('./../components/custom/dict-select.vue')['default']
     DictTag: typeof import('./../components/custom/dict-tag.vue')['default']

src/views/system/role/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="tsx">
 import { NDivider, NTag } from 'naive-ui';
+import { jsonClone } from '@sa/utils';
+import { useBoolean } from '@sa/hooks';
 import { dataScopeRecord } from '@/constants/business';
 import { fetchBatchDeleteRole, fetchGetRoleList, fetchUpdateRoleStatus } from '@/service/api/system/role';
 import { useAppStore } from '@/store/modules/app';
@@ -11,6 +13,8 @@ import ButtonIcon from '@/components/custom/button-icon.vue';
 import StatusSwitch from '@/components/custom/status-switch.vue';
 import RoleOperateDrawer from './modules/role-operate-drawer.vue';
 import RoleSearch from './modules/role-search.vue';
+import RoleDataScopeDrawer from './modules/role-data-scope-drawer.vue';
+import RoleAuthUserDrawer from './modules/role-auth-user-drawer.vue';
 
 defineOptions({
   name: 'RoleList'
@@ -20,6 +24,8 @@ const appStore = useAppStore();
 const { download } = useDownload();
 const { hasAuth } = useAuth();
 
+const { bool: dataScopeDrawerVisible, setTrue: openDataScopeDrawer } = useBoolean(false);
+const { bool: authUserDrawerVisible, setTrue: openAuthUserDrawer } = useBoolean(false);
 const {
   columns,
   columnChecks,
@@ -107,21 +113,11 @@ const {
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 130,
+      width: 220,
       render: row => {
         if (row.roleId === 1) return null;
 
-        const divider = () => {
-          if (!hasAuth('system:role:edit') || !hasAuth('system:role:remove')) {
-            return null;
-          }
-          return <NDivider vertical />;
-        };
-
         const editBtn = () => {
-          if (!hasAuth('system:role:edit')) {
-            return null;
-          }
           return (
             <ButtonIcon
               text
@@ -133,10 +129,31 @@ const {
           );
         };
 
+        const dataScopeBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:database"
+              tooltipContent="数据范权限"
+              onClick={() => handleDataScope(row)}
+            />
+          );
+        };
+
+        const authUserBtn = () => {
+          return (
+            <ButtonIcon
+              text
+              type="primary"
+              icon="material-symbols:assignment-ind-outline"
+              tooltipContent="分配用户"
+              onClick={() => handleAuthUser(row)}
+            />
+          );
+        };
+
         const deleteBtn = () => {
-          if (!hasAuth('system:role:remove')) {
-            return null;
-          }
           return (
             <ButtonIcon
               text
@@ -149,11 +166,22 @@ const {
           );
         };
 
+        const buttons = [];
+        if (hasAuth('system:role:edit')) {
+          buttons.push(editBtn());
+          buttons.push(dataScopeBtn());
+          buttons.push(authUserBtn());
+        }
+        if (hasAuth('system:role:remove')) buttons.push(deleteBtn());
+
         return (
           <div class="flex-center gap-8px">
-            {editBtn()}
+            {buttons.map((btn, index) => (
-            {divider()}
+              <>
-            {deleteBtn()}
+                {index !== 0 && <NDivider vertical />}
+                {btn}
+              </>
+            ))}
           </div>
         );
       }
@@ -204,6 +232,18 @@ async function handleStatusChange(
     getData();
   }
 }
+
+function handleDataScope(row: Api.System.Role) {
+  const findItem = data.value.find(item => item.roleId === row.roleId) || null;
+  editingData.value = jsonClone(findItem);
+  openDataScopeDrawer();
+}
+
+function handleAuthUser(row: Api.System.Role) {
+  const findItem = data.value.find(item => item.roleId === row.roleId) || null;
+  editingData.value = jsonClone(findItem);
+  openAuthUserDrawer();
+}
 </script>
 
 <template>
@@ -243,6 +283,12 @@ async function handleStatusChange(
         :row-data="editingData"
         @submitted="getDataByPage"
       />
+      <RoleDataScopeDrawer
+        v-model:visible="dataScopeDrawerVisible"
+        :row-data="editingData"
+        @submitted="getDataByPage"
+      />
+      <RoleAuthUserDrawer v-model:visible="authUserDrawerVisible" :row-data="editingData" @submitted="getDataByPage" />
     </NCard>
   </div>
 </template>

src/views/system/role/modules/role-data-scope-drawer.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { useLoading } from '@sa/hooks';
+import { dataScopeOptions } from '@/constants/business';
+import { fetchGetRoleDeptTreeSelect, fetchUpdateRole } from '@/service/api/system/role';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import DeptTree from '@/components/custom/dept-tree.vue';
+
+defineOptions({
+  name: 'RoleDataScopeDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData?: Api.System.Role | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const deptTreeRef = ref<InstanceType<typeof DeptTree> | null>(null);
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const deptOptions = ref<Api.System.Dept[]>([]);
+
+const { loading: deptLoading, startLoading: startDeptLoading, endLoading: endDeptLoading } = useLoading();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { createRequiredRule } = useFormRules();
+
+const title = computed(() => '分配数据权限');
+
+type Model = Api.System.RoleOperateParams;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    roleId: props.rowData?.roleId,
+    roleName: props.rowData?.roleName,
+    roleKey: props.rowData?.roleKey,
+    roleSort: props.rowData?.roleSort,
+    deptIds: [],
+    menuIds: [],
+    deptCheckStrictly: true,
+    dataScope: '1'
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'dataScope'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  dataScope: createRequiredRule('数据权限范围不能为空')
+};
+
+async function handleUpdateModelWhenEdit() {
+  startDeptLoading();
+  deptOptions.value = [];
+  model.deptIds = [];
+
+  if (props.rowData) {
+    Object.assign(model, props.rowData);
+    const { error, data } = await fetchGetRoleDeptTreeSelect(props.rowData.roleId!);
+    if (error) return;
+    deptOptions.value = data.depts;
+    model.deptIds = data.checkedKeys;
+  }
+  endDeptLoading();
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  const { roleId, roleName, roleKey, roleSort, dataScope, deptIds, menuIds } = model;
+
+  const { error } = await fetchUpdateRole({
+    roleId,
+    roleName,
+    roleKey,
+    roleSort,
+    dataScope,
+    deptIds: dataScope === '2' ? deptIds : [],
+    menuIds
+  });
+  if (error) return;
+
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem label="角色名称" path="roleName">
+          <NInput v-model:value="model.roleName" disabled placeholder="请输入角色名称" />
+        </NFormItem>
+        <NFormItem path="roleKey">
+          <template #label>
+            <div class="flex-center">
+              <FormTip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" />
+              <span class="pl-3px">权限字符</span>
+            </div>
+          </template>
+          <NInput v-model:value="model.roleKey" disabled placeholder="请输入权限字符" />
+        </NFormItem>
+        <NFormItem label="权限范围" path="dataScope">
+          <NSelect v-model:value="model.dataScope" :options="dataScopeOptions" />
+        </NFormItem>
+        <NFormItem v-if="model.dataScope === '2'" label="数据权限" path="deptIds" class="pr-24px">
+          <DeptTree
+            ref="deptTreeRef"
+            v-model:value="model.deptIds"
+            v-model:options="deptOptions"
+            v-model:loading="deptLoading"
+            v-model:cascade="model.deptCheckStrictly"
+            :immediate="false"
+          />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

src/views/system/role/modules/role-operate-drawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
+import { useLoading } from '@sa/hooks';
 import { fetchCreateRole, fetchUpdateRole } from '@/service/api/system/role';
 import { fetchGetRoleMenuTreeSelect } from '@/service/api/system';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@@ -36,6 +37,8 @@ const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
 
 const menuOptions = ref<Api.System.MenuList>([]);
 
+const { loading: menuLoading, startLoading: startMenuLoading, endLoading: stopMenuLoading } = useLoading();
+
 const { formRef, validate, restoreValidation } = useNaiveForm();
 const { createRequiredRule } = useFormRules();
 
@@ -83,25 +86,16 @@ async function handleUpdateModelWhenEdit() {
   }
 
   if (props.operateType === 'edit' && props.rowData) {
+    startMenuLoading();
     Object.assign(model, props.rowData);
     const { data, error } = await fetchGetRoleMenuTreeSelect(model.roleId!);
     if (error) return;
     model.menuIds = data.checkedKeys;
-    prepareMenuOptions(data.menus);
     menuOptions.value = data.menus;
+    stopMenuLoading();
   }
 }
 
-function prepareMenuOptions(menus: Api.System.MenuList) {
-  menus.forEach(menu => {
-    menu.menuId = menu.id!;
-    menu.menuName = menu.label!;
-    if (menu.children) {
-      prepareMenuOptions(menu.children);
-    }
-  });
-}
-
 function closeDrawer() {
   visible.value = false;
 }
@@ -182,6 +176,7 @@ watch(visible, () => {
             v-model:value="model.menuIds"
             v-model:options="menuOptions"
             v-model:cascade="model.menuCheckStrictly"
+            v-model:loading="menuLoading"
             :immediate="operateType === 'add'"
           />
         </NFormItem>