528 lines
14 KiB
Vue
528 lines
14 KiB
Vue
<template>
|
||
<div class="user-role-page">
|
||
<el-card class="search-card" shadow="never">
|
||
<div class="search-bar">
|
||
<el-form :inline="true" :model="queryForm" label-width="80px">
|
||
<el-form-item label="用户">
|
||
<el-select
|
||
v-model="queryForm.userId"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择用户"
|
||
style="width: 200px"
|
||
>
|
||
<el-option
|
||
v-for="item in userOptions"
|
||
:key="item.id"
|
||
:label="item.userName || item.nicke || item.nickName"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="角色">
|
||
<el-select
|
||
v-model="queryForm.roleId"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择角色"
|
||
style="width: 200px"
|
||
>
|
||
<el-option
|
||
v-for="item in roleOptions"
|
||
:key="item.id"
|
||
:label="item.roleName || item.roleCode"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<el-button @click="resetSearch">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="toolbar">
|
||
<el-button type="primary" @click="openDrawer('create')">新增用户角色关联</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card shadow="never">
|
||
<el-table
|
||
:data="tableData"
|
||
stripe
|
||
border
|
||
style="width: 100%"
|
||
v-loading="loading"
|
||
>
|
||
<el-table-column type="index" label="序号" width="70" />
|
||
<el-table-column
|
||
prop="userId"
|
||
label="用户名"
|
||
min-width="150"
|
||
>
|
||
<template #default="scope">
|
||
{{ getUserName(scope.row.userId) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="roleId"
|
||
label="角色名"
|
||
min-width="150"
|
||
>
|
||
<template #default="scope">
|
||
{{ getRoleName(scope.row.roleId) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="remark"
|
||
label="备注"
|
||
min-width="200"
|
||
:formatter="formatCell"
|
||
/>
|
||
<el-table-column label="操作" width="120" fixed="right">
|
||
<template #default="scope">
|
||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="pagination">
|
||
<el-pagination
|
||
v-model:current-page="pagination.pageNum"
|
||
v-model:page-size="pagination.pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
background
|
||
@current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-drawer
|
||
v-model="drawerVisible"
|
||
title="新增用户角色关联"
|
||
direction="rtl"
|
||
:size="500"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="100px"
|
||
class="drawer-form"
|
||
>
|
||
<el-form-item label="用户" prop="userId">
|
||
<el-select
|
||
v-model="form.userId"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择用户"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in userOptions"
|
||
:key="item.id"
|
||
:label="item.userName || item.nicke || item.nickName"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="角色" prop="roleId">
|
||
<el-select
|
||
v-model="form.roleId"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择角色"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in roleOptions"
|
||
:key="item.id"
|
||
:label="item.roleName || item.roleCode"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input
|
||
v-model="form.remark"
|
||
type="textarea"
|
||
placeholder="请输入备注"
|
||
:rows="3"
|
||
maxlength="200"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="drawer-footer">
|
||
<el-button @click="drawerVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { userRoleAdd, userRoleDel, userRoleList, userRoleByUserId } from '@/api/system/user-role'
|
||
import { userselect } from '@/api/system/user'
|
||
import { rleselect } from '@/api/system/role'
|
||
|
||
interface UserRoleItem {
|
||
id?: number | string
|
||
userId: number | string
|
||
roleId: number | string
|
||
remark?: string
|
||
}
|
||
|
||
interface UserItem {
|
||
id: number | string
|
||
userName?: string
|
||
nicke?: string
|
||
nickName?: string
|
||
}
|
||
|
||
interface RoleItem {
|
||
id: number | string
|
||
roleName?: string
|
||
roleCode?: string
|
||
}
|
||
|
||
const loading = ref(false)
|
||
const submitLoading = ref(false)
|
||
const tableData = ref<UserRoleItem[]>([])
|
||
const total = ref(0)
|
||
const userOptions = ref<UserItem[]>([])
|
||
const roleOptions = ref<RoleItem[]>([])
|
||
const userMap = ref<Map<number | string, string>>(new Map())
|
||
const roleMap = ref<Map<number | string, string>>(new Map())
|
||
|
||
const queryForm = reactive({
|
||
userId: null as number | string | null,
|
||
roleId: null as number | string | null,
|
||
})
|
||
|
||
const pagination = reactive({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
})
|
||
|
||
const drawerVisible = ref(false)
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const form = reactive<UserRoleItem>({
|
||
userId: '',
|
||
roleId: '',
|
||
remark: '',
|
||
})
|
||
|
||
const rules: FormRules = {
|
||
userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
|
||
roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
|
||
}
|
||
|
||
const resetForm = () => {
|
||
form.userId = ''
|
||
form.roleId = ''
|
||
form.remark = ''
|
||
formRef.value?.clearValidate()
|
||
}
|
||
|
||
const formatCell = (_row: any, _column: any, value: any) => {
|
||
if (value === 0) return 0
|
||
return value === undefined || value === null || value === '' ? '暂无' : value
|
||
}
|
||
|
||
// 获取用户名
|
||
const getUserName = (userId: number | string | null | undefined) => {
|
||
if (!userId) return '暂无'
|
||
return userMap.value.get(userId) || '暂无'
|
||
}
|
||
|
||
// 获取角色名
|
||
const getRoleName = (roleId: number | string | null | undefined) => {
|
||
if (!roleId) return '暂无'
|
||
return roleMap.value.get(roleId) || '暂无'
|
||
}
|
||
|
||
// 加载用户列表
|
||
const loadUsers = async () => {
|
||
try {
|
||
const res: any = await userselect({})
|
||
const data = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
|
||
userOptions.value = data
|
||
userMap.value.clear()
|
||
data.forEach((user: UserItem) => {
|
||
if (user.id) {
|
||
const userName = user.userName || user.nicke || user.nickName || ''
|
||
userMap.value.set(user.id, userName)
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error('load user list error', error)
|
||
ElMessage.error('加载用户列表失败')
|
||
userOptions.value = []
|
||
}
|
||
}
|
||
|
||
// 加载角色列表
|
||
const loadRoles = async () => {
|
||
try {
|
||
const res: any = await rleselect({})
|
||
const data = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
|
||
roleOptions.value = data
|
||
roleMap.value.clear()
|
||
data.forEach((role: RoleItem) => {
|
||
if (role.id) {
|
||
const roleName = role.roleName || role.roleCode || ''
|
||
roleMap.value.set(role.id, roleName)
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error('load role list error', error)
|
||
ElMessage.error('加载角色列表失败')
|
||
roleOptions.value = []
|
||
}
|
||
}
|
||
|
||
// 加载用户角色关联列表
|
||
const loadList = async () => {
|
||
loading.value = true
|
||
try {
|
||
// 确保用户和角色列表已加载
|
||
if (userOptions.value.length === 0) {
|
||
await loadUsers()
|
||
}
|
||
if (roleOptions.value.length === 0) {
|
||
await loadRoles()
|
||
}
|
||
|
||
const params: any = {
|
||
pageNum: pagination.pageNum,
|
||
pageSize: pagination.pageSize,
|
||
}
|
||
if (queryForm.userId) {
|
||
params.userId = queryForm.userId
|
||
}
|
||
if (queryForm.roleId) {
|
||
params.roleId = queryForm.roleId
|
||
}
|
||
|
||
const res: any = await userRoleList(params)
|
||
|
||
console.log('用户角色关联列表API返回数据:', res)
|
||
|
||
let pageData = res?.data
|
||
|
||
if (!pageData && (res?.records || res?.total !== undefined)) {
|
||
pageData = res
|
||
}
|
||
|
||
const recordsFromData =
|
||
pageData?.records ||
|
||
pageData?.list ||
|
||
pageData?.rows ||
|
||
pageData?.items ||
|
||
(Array.isArray(pageData?.data) ? pageData.data : undefined)
|
||
|
||
const records = Array.isArray(recordsFromData)
|
||
? recordsFromData
|
||
: Array.isArray(pageData)
|
||
? pageData
|
||
: Array.isArray(res?.data)
|
||
? res.data
|
||
: []
|
||
|
||
const totalValue =
|
||
pageData?.total ??
|
||
pageData?.count ??
|
||
pageData?.totalCount ??
|
||
res?.total ??
|
||
(Array.isArray(records) ? records.length : 0)
|
||
|
||
tableData.value = records
|
||
total.value = Number(totalValue) || 0
|
||
|
||
console.log('解析后的数据:', {
|
||
records: records.length,
|
||
total: total.value,
|
||
firstRecord: records[0],
|
||
})
|
||
} catch (error: any) {
|
||
console.error('load user role list error', error)
|
||
const errorMsg = error?.message || error?.msg || '加载用户角色关联列表失败'
|
||
ElMessage.error(errorMsg)
|
||
tableData.value = []
|
||
total.value = 0
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const handleSearch = () => {
|
||
pagination.pageNum = 1
|
||
loadList()
|
||
}
|
||
|
||
const resetSearch = () => {
|
||
queryForm.userId = null
|
||
queryForm.roleId = null
|
||
handleSearch()
|
||
}
|
||
|
||
const handleSizeChange = (size: number) => {
|
||
pagination.pageSize = size
|
||
loadList()
|
||
}
|
||
|
||
const handleCurrentChange = (page: number) => {
|
||
pagination.pageNum = page
|
||
loadList()
|
||
}
|
||
|
||
const openDrawer = async (mode: 'create') => {
|
||
resetForm()
|
||
drawerVisible.value = true
|
||
|
||
// 加载用户和角色数据
|
||
await Promise.all([loadUsers(), loadRoles()])
|
||
}
|
||
|
||
const submitForm = () => {
|
||
formRef.value?.validate(async (valid) => {
|
||
if (!valid) return
|
||
|
||
// 检查用户是否已拥有该角色
|
||
try {
|
||
const res: any = await userRoleByUserId(form.userId)
|
||
const data = res?.data ?? res ?? {}
|
||
|
||
// 兼容多种返回格式
|
||
const userRoles = Array.isArray(data)
|
||
? data
|
||
: Array.isArray(data.data)
|
||
? data.data
|
||
: Array.isArray(data.records)
|
||
? data.records
|
||
: Array.isArray(data.list)
|
||
? data.list
|
||
: []
|
||
|
||
// 检查是否已存在该角色关联
|
||
const existingRole = userRoles.find((item: any) => item.roleId === form.roleId)
|
||
|
||
if (existingRole) {
|
||
// 获取用户名和角色名
|
||
const userName = getUserName(form.userId)
|
||
const roleName = getRoleName(form.roleId)
|
||
ElMessage.warning(`用户【${userName}】已拥有【${roleName}】角色，无需重复分配`)
|
||
return
|
||
}
|
||
} catch (error: any) {
|
||
console.error('check user role error', error)
|
||
// 如果检查失败，继续执行新增操作，让后端处理重复情况
|
||
}
|
||
|
||
submitLoading.value = true
|
||
try {
|
||
const payload: any = {
|
||
userId: form.userId,
|
||
roleId: form.roleId,
|
||
remark: form.remark || '',
|
||
}
|
||
|
||
await userRoleAdd(payload)
|
||
ElMessage.success('新增成功')
|
||
drawerVisible.value = false
|
||
loadList()
|
||
} catch (error: any) {
|
||
console.error('submit user role error', error)
|
||
const errorMsg = error?.message || error?.msg || '新增失败'
|
||
ElMessage.error(errorMsg)
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleDelete = (row: UserRoleItem) => {
|
||
if (!row.id) {
|
||
ElMessage.warning('缺少关联ID')
|
||
return
|
||
}
|
||
const userName = getUserName(row.userId)
|
||
const roleName = getRoleName(row.roleId)
|
||
ElMessageBox.confirm(`确认删除用户「${userName}」与角色「${roleName}」的关联吗？`, '提示', {
|
||
type: 'warning',
|
||
})
|
||
.then(async () => {
|
||
if (row.id == null) {
|
||
ElMessage.warning('缺少关联ID，无法删除')
|
||
return
|
||
}
|
||
try {
|
||
await userRoleDel(row.id)
|
||
ElMessage.success('删除成功')
|
||
loadList()
|
||
} catch (error: any) {
|
||
console.error('delete user role error', error)
|
||
const errorMsg = error?.message || error?.msg || '删除失败'
|
||
ElMessage.error(errorMsg)
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadUsers()
|
||
loadRoles()
|
||
loadList()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-role-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.search-card {
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.drawer-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
</style>
|
||
|