feat(user): 优化用户管理功能

- 移除获取角色列表的冗余代码
- 添加角色列表数据传递和展示
-优化用户表单验证规则
- 美化用户角色展示样式
- 调整 API 请求配置
This commit is contained in:
陈昱达
2025-05-22 18:05:37 +08:00
parent 8c4770ebf7
commit d1016345bd
4 changed files with 74 additions and 37 deletions

View File

@@ -85,7 +85,8 @@ const agentEdit = data => {
const getAccessToken = data => { const getAccessToken = data => {
return request({ return request({
url: getUrl('/third/access_token'), url: getUrl('/third/access_token'),
method: 'get' method: 'get',
noLoading: true
}) })
} }

View File

@@ -359,3 +359,6 @@
border-color: #fff; border-color: #fff;
padding: 0; padding: 0;
} }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
color: $--color-primary;
}

View File

@@ -118,6 +118,10 @@ export default {
type: String, type: String,
default: '添加用户' default: '添加用户'
}, },
roleListData: {
type: Array,
default: () => []
},
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
@@ -145,14 +149,20 @@ export default {
email: '', email: '',
sysUserRoleDTOs: [] sysUserRoleDTOs: []
}, },
roleListData: [],
selectedRoleIds: [], // 新增用于绑定选中的角色ID数组 selectedRoleIds: [], // 新增用于绑定选中的角色ID数组
rules: { rules: {
realName: [ realName: [{ required: true, message: '请输入真实姓名' }],
{ required: true, message: '请输入真实姓名', trigger: 'blur' } userName: [{ required: true, message: '请输入用户名称' }],
email: [
{ required: true, message: '请输入邮箱' },
// 邮箱格式校验 正则
{
type: 'email',
message: '请输入正确的邮箱地址'
}
], ],
userName: [ sysUserRoleDTOs: [
{ required: true, message: '请输入用户名称', trigger: 'blur' } { required: true, message: '请选择用户角色', trigger: 'blur' }
] ]
}, },
roleOptions: [ roleOptions: [
@@ -167,31 +177,18 @@ export default {
handler(val) { handler(val) {
if (val && Object.keys(val).length > 0) { if (val && Object.keys(val).length > 0) {
this.form = { ...val } this.form = { ...val }
this.selectedRoleIds = this.form.sysUserRoleDTOs this.selectedRoleIds = this.form.sysUserRoleDTOs.map(item => {
return item.roleId
})
} }
}, },
immediate: true immediate: true
} }
}, },
created() { created() {
this.getRoleListData() // this.getRoleListData()
}, },
methods: { methods: {
// 获取角色列表
getRoleListData() {
this.loading = true
getRoleList({})
.then(response => {
this.roleListData = response.content.content || []
})
.catch(error => {
this.$message.error('获取角色列表出错', error)
})
.finally(() => {
this.loading = false
})
},
handleClose() { handleClose() {
this.$refs.form.resetFields() this.$refs.form.resetFields()
this.$emit('update:visible', false) this.$emit('update:visible', false)
@@ -205,7 +202,7 @@ export default {
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
this.loading = true // this.loading = true
const submitData = { ...this.form } const submitData = { ...this.form }
// 根据是否是编辑模式调用不同的API // 根据是否是编辑模式调用不同的API
@@ -213,24 +210,18 @@ export default {
? updateUser(submitData) ? updateUser(submitData)
: addUser(submitData) : addUser(submitData)
apiRequest apiRequest.then(() => {
.then(() => {
this.$message.success(this.isEdit ? '修改成功' : '添加成功') this.$message.success(this.isEdit ? '修改成功' : '添加成功')
this.$emit('submit', submitData) this.$emit('submit', submitData)
this.handleClose() this.handleClose()
}) })
.catch(() => {
this.$message.error(this.isEdit ? '修改用户出错' : '添加用户出错')
})
.finally(() => {
this.loading = false
})
} }
}) })
}, },
// 处理角色选择变化 // 处理角色选择变化
handleRolesChange(roleIds) { handleRolesChange(roleIds) {
this.form.sysUserRoleDTOs = roleIds.map(id => ({ roleId: id })) this.form.sysUserRoleDTOs = roleIds.map(id => ({ roleId: id }))
this.$refs.form.validateField('sysUserRoleDTOs')
}, },
clearForm() { clearForm() {
this.form = {} this.form = {}

View File

@@ -67,6 +67,7 @@
:title="dialogTitle" :title="dialogTitle"
:is-edit="isEdit" :is-edit="isEdit"
:is-view="isView" :is-view="isView"
:roleListData="roleListData"
:user-data="currentUserData" :user-data="currentUserData"
@submit="handleSubmit" @submit="handleSubmit"
/> />
@@ -90,6 +91,7 @@ import {
changeUserStatus, changeUserStatus,
resetPassword resetPassword
} from '@/api/generatedApi/system' } from '@/api/generatedApi/system'
import { getRoleList } from '@/api/system/role'
export default { export default {
name: 'UserManage', name: 'UserManage',
@@ -99,6 +101,7 @@ export default {
}, },
data() { data() {
return { return {
roleListData: [],
loading: false, loading: false,
dialogVisible: false, dialogVisible: false,
resetPasswordVisible: false, resetPasswordVisible: false,
@@ -127,7 +130,35 @@ export default {
{ prop: 'realName', key: '真实姓名' }, { prop: 'realName', key: '真实姓名' },
{ prop: 'mobile', key: '手机号' }, { prop: 'mobile', key: '手机号' },
{ prop: 'email', key: '邮箱' }, { prop: 'email', key: '邮箱' },
{ prop: 'userRoles', key: '用户角色' }, {
prop: 'userRoles',
key: '用户角色',
render: (h, p) => {
let text = []
p.row.sysUserRoleDTOs.map(item => {
this.roleListData.find(role => {
console.log(role, item)
if (role.id === item.roleId) {
text.push(role.roleName)
}
})
})
return h('div', [
text.map(item => {
return h(
'el-tag',
{
props: {
size: 'mini'
},
class: 'mr5'
},
item
)
})
])
}
},
{ {
prop: 'status', prop: 'status',
key: '状态', key: '状态',
@@ -222,9 +253,20 @@ export default {
} }
}, },
created() { created() {
this.getRoleListData()
this.getUserList() this.getUserList()
}, },
methods: { methods: {
// 获取角色列表
getRoleListData() {
this.loading = true
getRoleList({}).then(response => {
if (response) {
this.roleListData = response.content.content || []
}
})
},
// 获取用户列表 // 获取用户列表
getUserList() { getUserList() {
this.loading = true this.loading = true