feat: 用户管理新增分配角色功能

Author: Charles7c

src/apis/system/user.ts

@@ -40,11 +40,6 @@ export function exportUser(query: T.UserQuery) {
   return http.download(`${BASE_URL}/export`, query)
 }
 
-/** @desc 重置密码 */
-export function resetUserPwd(data: any, id: string) {
-  return http.patch(`${BASE_URL}/${id}/password`, data)
-}
-
 /** @desc 下载用户导入模板 */
 export function downloadUserImportTemplate() {
   return http.download(`${BASE_URL}/import/template`)
@@ -59,3 +54,13 @@ export function parseImportUser(data: FormData) {
 export function importUser(data: any) {
   return http.post(`${BASE_URL}/import`, data)
 }
+
+/** @desc 重置密码 */
+export function resetUserPwd(data: any, id: string) {
+  return http.patch(`${BASE_URL}/${id}/password`, data)
+}
+
+/** @desc 分配角色 */
+export function updateUserRole(data: { roleIds: string[] }, id: string) {
+  return http.patch(`${BASE_URL}/${id}/role`, data)
+}

src/views/system/user/UserUpdateRoleModal.vue

@@ -0,0 +1,90 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="分配角色"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 500 ? 500 : '100%'"
+    draggable
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { getUser, updateUserRole } from '@/apis/system'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { useForm } from '@/hooks'
+import { useRole } from '@/hooks/app'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+const dataId = ref('')
+const visible = ref(false)
+const formRef = ref<InstanceType<typeof GiForm>>()
+const { roleList, getRoleList } = useRole()
+
+const options: Options = {
+  form: { size: 'large' },
+  btns: { hide: true },
+}
+
+const columns: Columns = reactive([
+  {
+    label: '角色',
+    field: 'roleIds',
+    type: 'select',
+    options: roleList,
+    props: {
+      multiple: true,
+      allowClear: true,
+      allowSearch: { retainInputValue: true },
+      placeholder: '请选择角色',
+    },
+    rules: [{ required: true, message: '请选择角色' }],
+  },
+])
+
+const { form, resetForm } = useForm({})
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    await updateUserRole({ roleIds: form.roleIds }, dataId.value)
+    Message.success('分配成功')
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 初始化
+const onOpen = async (id: string) => {
+  reset()
+  dataId.value = id
+  if (!roleList.value.length) {
+    await getRoleList()
+  }
+  const res = await getUser(id)
+  Object.assign(form, res.data)
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>

src/views/system/user/index.vue

@@ -70,13 +70,14 @@
                 删除
               </a-link>
               <a-dropdown>
-                <a-button v-if="has.hasPermOr(['system:user:resetPwd'])" type="text" size="mini">
+                <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini">
                   <template #icon>
                     <icon-more :size="16" />
                   </template>
                 </a-button>
                 <template #content>
                   <a-doption v-permission="['system:user:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption>
+                  <a-doption v-permission="['system:user:updateRole']" @click="onUpdateRole(record)">分配角色</a-doption>
                 </template>
               </a-dropdown>
             </a-space>
@@ -89,6 +90,7 @@
     <UserImportDrawer ref="UserImportDrawerRef" @save-success="search" />
     <UserDetailDrawer ref="UserDetailDrawerRef" />
     <UserResetPwdModal ref="UserResetPwdModalRef" />
+    <UserUpdateRoleModal ref="UserUpdateRoleModalRef" @save-success="search" />
   </div>
 </template>
 
@@ -98,6 +100,7 @@ import UserAddDrawer from './UserAddDrawer.vue'
 import UserImportDrawer from './UserImportDrawer.vue'
 import UserDetailDrawer from './UserDetailDrawer.vue'
 import UserResetPwdModal from './UserResetPwdModal.vue'
+import UserUpdateRoleModal from './UserUpdateRoleModal.vue'
 import { type UserQuery, type UserResp, deleteUser, exportUser, listUser } from '@/apis/system'
 import type { Columns, Options } from '@/components/GiForm'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
@@ -252,6 +255,12 @@ const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
 const onResetPwd = (record: UserResp) => {
   UserResetPwdModalRef.value?.onReset(record.id)
 }
+
+const UserUpdateRoleModalRef = ref<InstanceType<typeof UserUpdateRoleModal>>()
+// 分配角色
+const onUpdateRole = (record: UserResp) => {
+  UserUpdateRoleModalRef.value?.onOpen(record.id)
+}
 </script>
 
 <style lang="scss" scoped>