feat: 完善用户权限

xingyu
1 parent 72db9341
Showing 8 changed files with 210 additions and 40 deletions
yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/controller/admin/permission/vo/permission/PermissionAssignUserRoleReqVO.java
yudao-ui-admin-vue3/src/api/system/permission/index.ts
yudao-ui-admin-vue3/src/api/system/permission/types.ts
yudao-ui-admin-vue3/src/api/system/role/index.ts
yudao-ui-admin-vue3/src/components/CountTo/src/CountTo.vue
yudao-ui-admin-vue3/src/views/system/role/index.vue
yudao-ui-admin-vue3/src/views/system/user/index.vue
yudao-ui-admin-vue3/src/views/system/user/user.data.ts
@@ -12,8 +12,8 @@ import java.util.Set;
 @Data
 public class PermissionAssignUserRoleReqVO {
-    @ApiModelProperty(value = "角色编号", required = true, example = "1")
-    @NotNull(message = "角色编号不能为空")
+    @ApiModelProperty(value = "用户编号", required = true, example = "1")
+    @NotNull(message = "用户编号不能为空")
     private Long userId;
     @ApiModelProperty(value = "角色编号列表", example = "1,3,5")
+import { useAxios } from '@/hooks/web/useAxios'
+import type {
+  PermissionAssignRoleDataScopeReqVO,
+  PermissionAssignRoleMenuReqVO,
+  PermissionAssignUserRoleReqVO
+} from './types'
+
+const request = useAxios()
+
+// 查询角色拥有的菜单权限
+export const listRoleMenusApi = async (roleId: number) => {
+  return await request.get({ url: '/system/permission/list-role-resources?roleId=' + roleId })
+}
+
+// 赋予角色菜单权限
+export const assignRoleMenuApi = async (data: PermissionAssignRoleMenuReqVO) => {
+  return await request.post({ url: '/system/permission/assign-role-menu', data })
+}
+
+// 赋予角色数据权限
+export const assignRoleDataScopeApi = async (data: PermissionAssignRoleDataScopeReqVO) => {
+  return await request.post({ url: '/system/permission/assign-role-data-scope', data })
+}
+
+// 查询用户拥有的角色数组
+export const listUserRolesApi = async (userId: number) => {
+  return await request.get({ url: '/system/permission/list-user-roles?userId=' + userId })
+}
+
+// 赋予用户角色
+export const aassignUserRoleApi = async (data: PermissionAssignUserRoleReqVO) => {
+  return await request.post({ url: '/system/permission/assign-user-role', data })
+}
+export type PermissionAssignUserRoleReqVO = {
+  userId: number
+  roleIds: number[]
+}
+
+export type PermissionAssignRoleMenuReqVO = {
+  roleId: number
+  menuIds: number[]
+}
+
+export type PermissionAssignRoleDataScopeReqVO = {
+  roleId: number
+  dataScope: number
+  dataScopeDeptIds: number[]
+}
@@ -4,31 +4,36 @@ import type { RoleVO } from &#39;./types&#39;
 const request = useAxios()
 // 查询角色列表
-export const getRolePageApi = (params) => {
-  return request.get({ url: '/system/role/page', params })
+export const getRolePageApi = async (params) => {
+  return await request.get({ url: '/system/role/page', params })
+}
+
+// 查询角色（精简)列表
+export const listSimpleRolesApi = async () => {
+  return await request.get({ url: '/system/role/list-all-simple' })
 }
 // 查询角色详情
-export const getRoleApi = (id: number) => {
-  return request.get({ url: '/system/role/get?id=' + id })
+export const getRoleApi = async (id: number) => {
+  return await request.get({ url: '/system/role/get?id=' + id })
 }
 // 新增角色
-export const createRoleApi = (data: RoleVO) => {
-  return request.post({ url: '/system/role/create', data })
+export const createRoleApi = async (data: RoleVO) => {
+  return await request.post({ url: '/system/role/create', data })
 }
 // 修改角色
-export const updateRoleApi = (data: RoleVO) => {
-  return request.put({ url: '/system/role/update', data })
+export const updateRoleApi = async (data: RoleVO) => {
+  return await request.put({ url: '/system/role/update', data })
 }
 // 修改角色状态
-export const updateRoleStatusApi = (data: RoleVO) => {
-  return request.put({ url: '/system/role/update-status', data })
+export const updateRoleStatusApi = async (data: RoleVO) => {
+  return await request.put({ url: '/system/role/update-status', data })
 }
 // 删除角色
-export const deleteRoleApi = (id: number) => {
-  return request.delete({ url: '/system/role/delete?id=' + id })
+export const deleteRoleApi = async (id: number) => {
+  return await request.delete({ url: '/system/role/delete?id=' + id })
 }
@@ -157,7 +157,7 @@ const count = (timestamp: number) =&gt; {
   } else {
     state.printVal = state.printVal > endVal ? endVal : state.printVal
   }
-  state.displayValue = formatNumber(state.printVal)
+  state.displayValue = formatNumber(state.printVal!)
   if (progress < (state.localDuration as number)) {
     state.rAF = requestAnimationFrame(count)
   } else {
 <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) =&gt; {
 // ========== 数据权限 ==========
 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(() =&gt; {
             ref="treeRef"
             node-key="id"
             show-checkbox
-            default-expand-all
+            :default-checked-keys="defaultCheckedKeys"
             :check-strictly="!checkStrictly"
             :props="defaultProps"
             :data="treeOptions"
 <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 &#39;@/hooks/web/useTable&#39;
 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 }) =&gt; {
   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) =&gt; {
     })
   })
 }
-
+// 分配角色
+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="搜索部门" />
@@ -354,6 +397,14 @@ getList()
           <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"
             v-hasPermi="['system:user:delete']"
             @click="delList(row.id, false)"
           >
@@ -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"
@@ -152,7 +152,7 @@ const crudSchemas = reactive&lt;CrudSchema[]&gt;([
   },
   {
     field: 'action',
-    width: '340px',
+    width: '400px',
     label: t('table.action'),
     form: {
       show: false