!244 完善用户权限

Merge pull request !244 from xingyu/master

!244 完善用户权限
Merge pull request !244 from xingyu/master
芋道源码 · Gitee
2 parents dcea527b 7d3c59af
Showing 13 changed files with 248 additions and 78 deletions
README.md
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/README.md
yudao-ui-admin-vue3/package.json
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/tenantPackage/index.vue
yudao-ui-admin-vue3/src/views/system/user/index.vue
yudao-ui-admin-vue3/src/views/system/user/user.data.ts
yudao-ui-admin-vue3/vite.config.ts
@@ -204,11 +204,11 @@ ps：核心功能已经实现，正在对接微信小程序中...
 | 框架                                                                  | 说明               | 版本     |
 |----------------------------------------------------------------------|------------------|--------|
 | [Vue](https://staging-cn.vuejs.org/)                                 | Vue 框架           | 3.2.37 |
-| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具          | 3.0.3  |
-| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.2.11 |
+| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具          | 3.0.4  |
+| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.2.12 |
 | [TypeScript](https://www.typescriptlang.org/docs/)                   | TypeScript       | 4.7.4  |
 | [pinia](https://pinia.vuejs.org/)                                    | Vue 存储库 替代 vuex5 | 2.0.17 |
-| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.1.10 |
+| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.2.0  |
 | [windicss](https://cn.windicss.org/)                                 | 下一代工具优先的 CSS 框架  | 3.5.6  |
 | [iconify](https://icon-sets.iconify.design/)                         | 在线图标库            | 2.2.1  |
@@ -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")
@@ -27,15 +27,15 @@
 | 框架 | 说明 | 版本     |
 | --- | --- |--------|
 | [Vue](https://staging-cn.vuejs.org/) | vue 框架 | 3.2.37 |
-| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.0.3  |
-| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.11 |
-| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.7.4  |
+| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.0.4 |
+| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.12 |
+| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.7.4 |
 | [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.17 |
-| [vueuse](https://vueuse.org//) | 常用工具集 | 9.0.0  |
-| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.1.10 |
-| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.3  |
-| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6  |
-| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.1  |
+| [vueuse](https://vueuse.org//) | 常用工具集 | 9.0.2 |
+| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.0 |
+| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.3 |
+| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
+| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.1 |
 | [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.14 |
 ### 推荐 VScode 开发，插件如下
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.2.1",
-    "@vueuse/core": "^9.0.0",
+    "@vueuse/core": "^9.0.2",
     "@wangeditor/editor": "^5.1.14",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "@zxcvbn-ts/core": "^2.0.3",
@@ -35,7 +35,7 @@
     "dayjs": "^1.11.4",
     "echarts": "^5.3.3",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "2.2.11",
+    "element-plus": "2.2.12",
     "intro.js": "^6.0.0",
     "jsencrypt": "^3.2.1",
     "lodash-es": "^4.17.21",
@@ -48,20 +48,20 @@
     "url": "^0.11.0",
     "vue": "3.2.37",
     "vue-cropper": "^1.0.3",
-    "vue-i18n": "9.1.10",
+    "vue-i18n": "9.2.0",
     "vue-router": "^4.1.3",
-    "vue-types": "^4.2.0",
+    "vue-types": "^4.2.1",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@iconify/json": "^2.1.85",
+    "@iconify/json": "^2.1.86",
     "@intlify/vite-plugin-vue-i18n": "^5.0.1",
     "@purge-icons/generated": "^0.8.1",
     "@types/intro.js": "^5.1.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.6.2",
+    "@types/node": "^18.6.3",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
@@ -70,9 +70,9 @@
     "@vitejs/plugin-vue": "^3.0.1",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "autoprefixer": "^10.4.8",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-define-config": "^1.5.1",
+    "eslint-define-config": "^1.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.3.0",
     "less": "^4.1.3",
@@ -97,7 +97,7 @@
     "vite-plugin-eslint": "^1.7.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-purge-icons": "^0.8.2",
-    "vite-plugin-style-import": "1.4.1",
+    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.7",
     "vue-tsc": "^0.39.4",
+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"
@@ -7,7 +7,7 @@ import { useTable } from &#39;@/hooks/web/useTable&#39;
 import { useI18n } from '@/hooks/web/useI18n'
 import { FormExpose } from '@/components/Form'
 import { TenantPackageVO } from '@/api/system/tenantPackage/types'
-import { ElMessage, ElCard, ElCheckbox, ElTree } from 'element-plus'
+import { ElMessage, ElCard, ElSwitch, ElTree } from 'element-plus'
 import { rules, allSchemas } from './tenantPackage.data'
 import * as TenantPackageApi from '@/api/system/tenantPackage'
 import { listSimpleMenusApi } from '@/api/system/menu'
@@ -21,11 +21,15 @@ const defaultProps = {
 // ========== 创建菜单树结构 ==========
 const menuOptions = ref([]) // 树形结构
 const treeRef = ref<InstanceType<typeof ElTree>>()
+const treeNodeAll = ref(false)
+// 全选/全不选
+const handleCheckedTreeNodeAll = () => {
+  treeRef.value!.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
+}
 const getTree = async () => {
   const res = await listSimpleMenusApi()
   menuOptions.value = handleTree(res)
 }
-let menuCheckStrictly = true
 const menuExpand = ref(false)
 const menuNodeAll = ref(false)
@@ -42,7 +46,6 @@ const formRef = ref&lt;FormExpose&gt;() // 表单 Ref
 const actionType = ref('') // 操作按钮的类型
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
-const menuParentId = ref()
 // 设置标题
 const setDialogTile = (type: string) => {
@@ -58,7 +61,6 @@ const handleCreate = () =&gt; {
   unref(formRef)?.getElFormRef()?.resetFields()
   //重置菜单树
   unref(treeRef)?.setCheckedKeys([])
-  menuCheckStrictly = true
   menuExpand.value = false
   menuNodeAll.value = false
 }
@@ -69,13 +71,8 @@ const handleUpdate = async (row: any) =&gt; {
   // 设置数据
   const res = await TenantPackageApi.getTenantPackageApi(row.id)
   unref(formRef)?.setValues(res)
-  // 设置菜单项
-  // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
-  menuCheckStrictly = true
   // 设置选中
   unref(treeRef)?.setCheckedKeys(res.menuIds)
-  // 设置为非严格，继续使用半选中
-  menuCheckStrictly = false
 }
 // 提交按钮
 const submitForm = async () => {
@@ -163,20 +160,23 @@ onMounted(async () =&gt; {
         <el-card class="box-card">
           <template #header>
             <div class="card-header">
-              <el-checkbox>展开/折叠</el-checkbox>
-              <el-checkbox>全选/全不选</el-checkbox>
+              全选/全不选:
+              <el-switch
+                v-model="treeNodeAll"
+                inline-prompt
+                active-text="是"
+                inactive-text="否"
+                @change="handleCheckedTreeNodeAll()"
+              />
             </div>
           </template>
-          <!--            default-expand-all-->
           <el-tree
             ref="treeRef"
             node-key="id"
-            v-model="menuParentId"
+            show-checkbox
             :props="defaultProps"
             :data="menuOptions"
-            show-checkbox
-            :check-strictly="menuCheckStrictly"
-            empty-text="加载菜单中..."
+            empty-text="加载中，请稍后"
           />
         </el-card>
       </template>
 <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
@@ -6,7 +6,7 @@ import WindiCSS from &#39;vite-plugin-windicss&#39;
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import EslintPlugin from 'vite-plugin-eslint'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
-import styleImport, { ElementPlusResolve } from 'vite-plugin-style-import'
+import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import DefineOptions from 'unplugin-vue-define-options/vite'
@@ -55,7 +55,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
       Vue(),
       VueJsx(),
       WindiCSS(),
-      styleImport({
+      createStyleImportPlugin({
         resolves: [ElementPlusResolve()],
         libs: [{
           libraryName: 'element-plus',