feat: 分配用户角色权限

src/api/system/permission/index.ts

@@ -37,6 +37,6 @@ export function listUserRoles(userId: number) {
 }
 
 // 赋予用户角色
-export function aassignUserRole(data: PermissionAssignUserRoleReqVO) {
+export function assignUserRole(data: PermissionAssignUserRoleReqVO) {
   return defHttp.post({ url: '/system/permission/assign-user-role', data })
 }

src/views/system/user/UserRoleModal.vue

@@ -0,0 +1,44 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="用户角色权限" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup name="UserRoleModal">
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, useForm } from '@/components/Form'
+import { userRoleFormSchema } from './user.data'
+import { getUser } from '@/api/system/user'
+import { assignUserRole, listUserRoles } from '@/api/system/permission'
+
+const emit = defineEmits(['success', 'register'])
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 120,
+  baseColProps: { span: 24 },
+  schemas: userRoleFormSchema,
+  showActionButtonGroup: false,
+  actionColOptions: { span: 23 }
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields()
+  setModalProps({ confirmLoading: false })
+
+  const res = await getUser(data.record.id)
+  const roleIds = await listUserRoles(data.record.id)
+  res.roleIds = roleIds
+  setFieldsValue({ ...res })
+})
+
+async function handleSubmit() {
+  try {
+    const values = await validate()
+    setModalProps({ confirmLoading: true })
+    await assignUserRole({ userId: values.id, roleIds: values.roleIds })
+    closeModal()
+    emit('success')
+  } finally {
+    setModalProps({ confirmLoading: false })
+  }
+}
+</script>

src/views/system/user/index.vue

@@ -14,7 +14,21 @@
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
-              { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'system:user:update', onClick: handleEdit.bind(null, record) },
+              { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'system:user:update', onClick: handleEdit.bind(null, record) }
+            ]"
+            :dropDownActions="[
+              {
+                icon: IconEnum.EDIT,
+                label: '分配角色',
+                auth: 'system:permission:assign-user-role',
+                onClick: handleRole.bind(null, record)
+              },
+              {
+                icon: IconEnum.EDIT,
+                label: '重置密码',
+                auth: 'system:user:update-password',
+                onClick: handleResetPwd.bind(null, record)
+              },
               {
                 icon: IconEnum.DELETE,
                 color: 'error',
@@ -32,6 +46,7 @@
       </template>
     </BasicTable>
     <UserModal @register="registerModal" @success="reload()" />
+    <UserRoleModal @register="registerRoleModal" @success="reload()" />
   </div>
 </template>
 <script lang="ts" setup name="User">
@@ -40,6 +55,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
 import UserModal from './UserModal.vue'
+import UserRoleModal from './UserRoleModal.vue'
 import DeptTree from './DeptTree.vue'
 import { IconEnum } from '@/enums/appEnum'
 import { BasicTable, useTable, TableAction } from '@/components/Table'
@@ -49,6 +65,7 @@ import { UserExportReqVO, deleteUser, exportUser, getUserPage } from '@/api/syst
 const { t } = useI18n()
 const { createConfirm, createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
+const [registerRoleModal, { openModal: openRoleModal }] = useModal()
 const searchInfo = reactive<Recordable>({})
 
 const [registerTable, { getForm, reload }] = useTable({
@@ -71,10 +88,12 @@ const [registerTable, { getForm, reload }] = useTable({
   }
 })
 
+/** 新增按钮操作 */
 function handleCreate() {
   openModal(true, { isUpdate: false })
 }
 
+/** 导出按钮操作 */
 async function handleExport() {
   createConfirm({
     title: t('common.exportTitle'),
@@ -87,16 +106,28 @@ async function handleExport() {
   })
 }
 
+/** 修改按钮操作 */
 function handleEdit(record: Recordable) {
   openModal(true, { record, isUpdate: true })
 }
 
+/** 分配用户角色操作 */
+function handleRole(record: Recordable) {
+  openRoleModal(true, { record })
+}
+
+/** 重置密码按钮操作 */
+function handleResetPwd(record: Recordable) {
+  openModal(true, { record, isUpdate: true })
+}
+
+/** 删除按钮操作 */
 async function handleDelete(record: Recordable) {
   await deleteUser(record.id)
   createMessage.success(t('common.delSuccessText'))
   reload()
 }
-
+/** 点击部门操作 */
 function handleSelect(deptId = '') {
   searchInfo.deptId = deptId
   reload()

src/views/system/user/user.data.ts

@@ -6,6 +6,7 @@ import { listSimplePosts } from '@/api/system/post'
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { updateUserStatus } from '@/api/system/user'
+import { listSimpleRoles } from '@/api/system/role'
 
 export const columns: BasicColumn[] = [
   {
@@ -199,3 +200,35 @@ export const formSchema: FormSchema[] = [
     component: 'InputTextArea'
   }
 ]
+
+export const userRoleFormSchema: FormSchema[] = [
+  {
+    label: '编号',
+    field: 'id',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '用户名称',
+    field: 'username',
+    component: 'Input',
+    dynamicDisabled: () => true
+  },
+  {
+    label: '用户昵称',
+    field: 'nickname',
+    component: 'Input',
+    dynamicDisabled: () => true
+  },
+  {
+    label: '角色',
+    field: 'roleIds',
+    component: 'ApiSelect',
+    componentProps: {
+      api: () => listSimpleRoles(),
+      labelField: 'name',
+      valueField: 'id',
+      mode: 'tags'
+    }
+  }
+]