修改文件

src/api/modules/system/role.js

@@ -23,6 +23,13 @@ export default {
             data: form,
         })
     },
+    async roleTree() {
+        return HcApi({
+            url: '/api/blade-system/role/tree',
+            method: 'get',
+            params: {},
+        })
+    },
     async treeTow() {
         return HcApi({
             url: '/api/blade-system/role/treeTow',

src/views/system/modules/user/role.vue

@@ -0,0 +1,87 @@
+<template>
+    <hc-dialog v-model="isShow" is-table widths="400px" :padding="false" title="用户角色配置" is-footer-center @close="dialogClose">
+        <el-tree ref="treeRef" :props="treeProps" :default-checked-keys="userRoles" show-checkbox :data="treeData" node-key="id" check-strictly default-expand-all />
+        <template #footer>
+            <el-button hc-btn @click="dialogClose">取消</el-button>
+            <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getArrValue } from 'js-fast-way'
+import roleApi from '~api/system/role'
+import mainApi from '~api/system/user'
+
+const props = defineProps({
+    roles: {
+        type: Array,
+        default: () => ([]),
+    },
+    users: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+//事件
+const emit = defineEmits(['close', 'finish'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听内容
+const userRoles = ref(props.roles)
+watch(() => props.roles, (data) => {
+    userRoles.value = getArrValue(data)
+}, { immediate: true, deep: true })
+
+//监听内容
+const userIds = ref(props.users)
+watch(() => props.users, (data) => {
+    userIds.value = getArrValue(data)
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) {
+        getDataApi()
+    }
+})
+
+//获取数据
+const treeRef = ref(null)
+const treeProps = { label: 'title', children: 'children' }
+const treeData = ref([])
+const getDataApi = async () => {
+    const { data } = await roleApi.roleTree()
+    treeData.value = getArrValue(data)
+}
+
+//提交表单
+const submitLoading = ref(false)
+const dialogSubmit = async () => {
+    const ids = userIds.value.join(',')
+    const keys = treeRef.value?.getCheckedKeys()
+    const roles = keys.join(',')
+    const { isRes } = await mainApi.grant({
+        userIds: ids,
+        roleIds: roles,
+    })
+    if (!isRes) return
+    window.$message.success('操作成功')
+    dialogClose()
+    emit('finish')
+}
+
+//关闭弹窗
+const dialogClose = () => {
+    isShow.value = false
+    userRoles.value = []
+    submitLoading.value = false
+    emit('close')
+}
+</script>

src/views/system/user.vue

@@ -31,7 +31,7 @@
             <template #extraToHeader>
                 <el-button hc-btn type="primary" @click="addUserClick">新增</el-button>
                 <el-button hc-btn type="danger" @click="delUserClick">删除</el-button>
-                <el-button hc-btn type="info">角色配置</el-button>
+                <el-button hc-btn type="info" @click="roleUserClick">角色配置</el-button>
                 <el-button hc-btn type="warning">密码重置</el-button>
                 <el-button hc-btn type="info">平台配置</el-button>
                 <el-button hc-btn type="danger">账号封禁</el-button>
@@ -54,6 +54,8 @@
         </hc-card>
         <!-- 新增编辑 -->
         <HcDataDialog v-model="isUserDataShow" :info="userItem" @finish="getTableData" />
+        <!-- 角色配置 -->
+        <HcRoleDialog v-model="isUserRoleShow" :users="userIds" :roles="userRoles" @finish="getTableData" />
     </hc-body>
 </template>
 
@@ -63,6 +65,7 @@ import { HcDelMsg } from 'hc-vue3-ui'
 import { getDictionaryData } from '~uti/tools'
 import { arrToId, getArrValue, isNullES } from 'js-fast-way'
 import HcDataDialog from './modules/user/data.vue'
+import HcRoleDialog from './modules/user/role.vue'
 import deptApi from '~api/system/dept'
 import mainApi from '~api/system/user'
 
@@ -199,5 +202,33 @@ const delUserData = async (id) => {
     const { isRes } = await mainApi.del(id)
     if (!isRes) return
     window.$message.success('删除成功')
+    getTableData().then()
+}
+
+//角色配置
+const userRoles = ref([])
+const userIds = ref([])
+const isUserRoleShow = ref(false)
+const roleUserClick = () => {
+    const rows = tableCheckKeys.value
+    if (rows.length <= 0) {
+        window.$message.warning('请先勾选要操作的用户')
+        return
+    }
+    //处理数据
+    let newRoleUser = '', users = []
+    for (let i = 0; i < rows.length; i++) {
+        users.push(rows[i].id)
+        if (isNullES(newRoleUser)) {
+            newRoleUser = rows[i].roleId || ''
+        } else {
+            newRoleUser += ',' + rows[i].roleId || ''
+        }
+    }
+    userIds.value = users
+    //转为数组以及数组去重
+    const roleUser = newRoleUser.split(',')
+    userRoles.value = Array.from(new Set(roleUser))
+    isUserRoleShow.value = true
 }
 </script>