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 => {
return request({
url: getUrl('/third/access_token'),
method: 'get'
method: 'get',
noLoading: true
})
}

View File

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

View File

@@ -67,6 +67,7 @@
:title="dialogTitle"
:is-edit="isEdit"
:is-view="isView"
:roleListData="roleListData"
:user-data="currentUserData"
@submit="handleSubmit"
/>
@@ -90,6 +91,7 @@ import {
changeUserStatus,
resetPassword
} from '@/api/generatedApi/system'
import { getRoleList } from '@/api/system/role'
export default {
name: 'UserManage',
@@ -99,6 +101,7 @@ export default {
},
data() {
return {
roleListData: [],
loading: false,
dialogVisible: false,
resetPasswordVisible: false,
@@ -127,7 +130,35 @@ export default {
{ prop: 'realName', key: '真实姓名' },
{ prop: 'mobile', 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',
key: '状态',
@@ -222,9 +253,20 @@ export default {
}
},
created() {
this.getRoleListData()
this.getUserList()
},
methods: {
// 获取角色列表
getRoleListData() {
this.loading = true
getRoleList({}).then(response => {
if (response) {
this.roleListData = response.content.content || []
}
})
},
// 获取用户列表
getUserList() {
this.loading = true