feat: 新增角色列表

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()}
-            {divider()}
-            {deleteBtn()}
+            {buttons.map((btn, index) => (
+              <>
+                {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>