feat: 完善用户权限

yudao-ui-admin-vue3/src/views/system/role/index.vue

@@ -1,14 +1,6 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, unref } from 'vue'
 import dayjs from 'dayjs'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import { useI18n } from '@/hooks/web/useI18n'
-import { FormExpose } from '@/components/Form'
-import type { RoleVO } from '@/api/system/role/types'
-import { rules, allSchemas } from './role.data'
-import * as RoleApi from '@/api/system/role'
-import Dialog from '@/components/Dialog/src/Dialog.vue'
 import {
   ElForm,
   ElFormItem,
@@ -20,6 +12,18 @@ import {
   ElCard,
   ElSwitch
 } from 'element-plus'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { useTable } from '@/hooks/web/useTable'
+import { useI18n } from '@/hooks/web/useI18n'
+import { FormExpose } from '@/components/Form'
+import { rules, allSchemas } from './role.data'
+import type { RoleVO } from '@/api/system/role/types'
+import type {
+  PermissionAssignRoleDataScopeReqVO,
+  PermissionAssignRoleMenuReqVO
+} from '@/api/system/permission/types'
+import * as RoleApi from '@/api/system/role'
+import * as PermissionApi from '@/api/system/permission'
 import { listSimpleMenusApi } from '@/api/system/menu'
 import { listSimpleDeptApi } from '@/api/system/dept'
 import { handleTree } from '@/utils/tree'
@@ -95,6 +99,7 @@ const handleDetail = async (row: RoleVO) => {
 
 // ========== 数据权限 ==========
 const dataScopeForm = reactive({
+  id: 0,
   name: '',
   code: '',
   dataScope: 0,
@@ -111,33 +116,62 @@ const dialogScopeVisible = ref(false)
 const dialogScopeTitle = ref('数据权限')
 const actionScopeType = ref('')
 const dataScopeDictDatas = ref()
+const defaultCheckedKeys = ref()
 // 选项
 const checkStrictly = ref(true)
 const treeNodeAll = ref(false)
+// 全选/全不选
+const handleCheckedTreeNodeAll = () => {
+  treeRef.value!.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
+}
 // 权限操作
 const handleScope = async (type: string, row: RoleVO) => {
-  checkStrictly.value = true
-  treeNodeAll.value = false
-  dataScopeForm.dataScope = 0
+  dataScopeForm.id = row.id
   dataScopeForm.name = row.name
   dataScopeForm.code = row.code
   if (type === 'menu') {
     const menuRes = await listSimpleMenusApi()
     treeOptions.value = handleTree(menuRes)
-  } else if (type === 'dept') {
+    const role = await PermissionApi.listRoleMenusApi(row.id)
+    console.info(role)
+    if (role) {
+      // treeRef.value!.setCheckedKeys(role as unknown as Array<number>)
+      defaultCheckedKeys.value = role
+    }
+  } else if (type === 'data') {
     const deptRes = await listSimpleDeptApi()
     treeOptions.value = handleTree(deptRes)
+    const role = await RoleApi.getRoleApi(row.id)
+    console.info(role)
+    dataScopeForm.dataScope = role.dataScope
+    if (role.dataScopeDeptIds) {
+      // treeRef.value!.setCheckedKeys(role.dataScopeDeptIds as unknown as Array<number>, false)
+      defaultCheckedKeys.value = role.dataScopeDeptIds
+    }
   }
   actionScopeType.value = type
   dialogScopeVisible.value = true
 }
-// 全选/全不选
-const handleCheckedTreeNodeAll = () => {
-  treeRef.value?.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
-}
-// TODO:保存
-const submitScope = () => {
-  console.info()
+// 保存权限
+const submitScope = async () => {
+  const keys = treeRef.value!.getCheckedKeys(false) as unknown as Array<number>
+  console.info(keys)
+  if ('data' === actionScopeType.value) {
+    const data = ref<PermissionAssignRoleDataScopeReqVO>({
+      roleId: dataScopeForm.id,
+      dataScope: dataScopeForm.dataScope,
+      dataScopeDeptIds: dataScopeForm.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] : keys
+    })
+    await PermissionApi.assignRoleDataScopeApi(data.value)
+  } else if ('menu' === actionScopeType.value) {
+    const data = ref<PermissionAssignRoleMenuReqVO>({
+      roleId: dataScopeForm.id,
+      menuIds: keys
+    })
+    await PermissionApi.assignRoleMenuApi(data.value)
+  }
+  ElMessage.success(t('common.updateSuccess'))
+  dialogScopeVisible.value = false
 }
 const init = () => {
   dataScopeDictDatas.value = getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
@@ -308,7 +342,7 @@ onMounted(() => {
             ref="treeRef"
             node-key="id"
             show-checkbox
-            default-expand-all
+            :default-checked-keys="defaultCheckedKeys"
             :check-strictly="!checkStrictly"
             :props="defaultProps"
             :data="treeOptions"

yudao-ui-admin-vue3/src/views/system/user/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, unref, watch } from 'vue'
+import { onMounted, reactive, ref, unref, watch } from 'vue'
 import dayjs from 'dayjs'
 import {
+  ElTag,
   ElInput,
   ElCard,
   ElTree,
@@ -23,14 +24,19 @@ import { useTable } from '@/hooks/web/useTable'
 import { FormExpose } from '@/components/Form'
 import type { UserVO } from '@/api/system/user/types'
 import type { PostVO } from '@/api/system/post/types'
+import type { PermissionAssignUserRoleReqVO } from '@/api/system/permission/types'
 import { listSimpleDeptApi } from '@/api/system/dept'
 import { listSimplePostsApi } from '@/api/system/post'
+import { listSimpleRolesApi } from '@/api/system/role'
+import { aassignUserRoleApi, listUserRolesApi } from '@/api/system/permission'
 import { rules, allSchemas } from './user.data'
 import * as UserApi from '@/api/system/user'
 import download from '@/utils/download'
+import { useRouter } from 'vue-router'
 import { CommonStatusEnum } from '@/utils/constants'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 import { useMessage } from '@/hooks/web/useMessage'
+
 const message = useMessage()
 interface Tree {
   id: number
@@ -74,6 +80,10 @@ const handleDeptNodeClick = (data: { [key: string]: any }) => {
   tableTitle.value = data.name
   methods.getList()
 }
+const { push } = useRouter()
+const handleDeptEdit = () => {
+  push('/system/dept')
+}
 watch(filterText, (val) => {
   treeRef.value!.filter(val)
 })
@@ -164,7 +174,37 @@ const handleResetPwd = (row: UserVO) => {
     })
   })
 }
-
+// 分配角色
+const roleDialogVisible = ref(false)
+const roleOptions = ref()
+const userRole = reactive({
+  id: 0,
+  username: '',
+  nickname: '',
+  roleIds: []
+})
+const handleRole = async (row: UserVO) => {
+  userRole.id = row.id
+  userRole.username = row.username
+  userRole.nickname = row.nickname
+  // 获得角色拥有的权限集合
+  const roles = await listUserRolesApi(row.id)
+  userRole.roleIds = roles
+  // 获取角色列表
+  const roleOpt = await listSimpleRolesApi()
+  roleOptions.value = roleOpt
+  roleDialogVisible.value = true
+}
+// 提交
+const submitRole = async () => {
+  const data = ref<PermissionAssignUserRoleReqVO>({
+    userId: userRole.id,
+    roleIds: userRole.roleIds
+  })
+  await aassignUserRoleApi(data.value)
+  message.success(t('common.updateSuccess'))
+  roleDialogVisible.value = false
+}
 // ========== 详情相关 ==========
 const detailRef = ref()
 
@@ -251,6 +291,9 @@ getList()
       <template #header>
         <div class="card-header">
           <span>部门列表</span>
+          <el-button link class="button" type="primary" @click="handleDeptEdit">
+            修改部门
+          </el-button>
         </div>
       </template>
       <el-input v-model="filterText" placeholder="搜索部门" />
@@ -351,6 +394,14 @@ getList()
           >
             <Icon icon="ep:key" class="mr-1px" /> 重置密码
           </el-button>
+          <el-button
+            link
+            type="primary"
+            v-hasPermi="['system:permission:assign-user-role']"
+            @click="handleRole(row)"
+          >
+            <Icon icon="ep:key" class="mr-1px" /> 分配角色
+          </el-button>
           <el-button
             link
             type="primary"
@@ -398,10 +449,14 @@ getList()
       :data="detailRef"
     >
       <template #deptId="{ row }">
-        <span>{{ row.dept.name }}</span>
+        <span>{{ row.dept?.name }}</span>
       </template>
       <template #postIds="{ row }">
-        <span>{{ row.dept.name }}</span>
+        <el-tag v-for="(post, index) in row.postIds" :key="index" index="">
+          <template v-for="postObj in postOptions">
+            {{ post === postObj.id ? postObj.name : '' }}
+          </template>
+        </el-tag>
       </template>
       <template #sex="{ row }">
         <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
@@ -426,6 +481,34 @@ getList()
       <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
     </template>
   </Dialog>
+  <!-- 分配用户角色 -->
+  <Dialog v-model="roleDialogVisible" title="分配角色">
+    <el-form :model="userRole" label-width="80px">
+      <el-form-item label="用户名称">
+        <el-input v-model="userRole.username" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="用户昵称">
+        <el-input v-model="userRole.nickname" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select v-model="userRole.roleIds" multiple>
+          <el-option
+            v-for="item in roleOptions"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button type="primary" :loading="loading" @click="submitRole">
+        {{ t('action.save') }}
+      </el-button>
+      <el-button @click="roleDialogVisible = false">{{ t('dialog.close') }}</el-button>
+    </template>
+  </Dialog>
   <!-- 导入 -->
   <Dialog
     v-model="importDialogVisible"

yudao-ui-admin-vue3/src/views/system/user/user.data.ts

@@ -152,7 +152,7 @@ const crudSchemas = reactive<CrudSchema[]>([
   },
   {
     field: 'action',
-    width: '340px',
+    width: '400px',
     label: t('table.action'),
     form: {
       show: false