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

- 移除用户编码字段
- 添加真实姓名字段- 更新用户角色选择功能
- 优化表单布局和样式- 调整菜单添加提示信息
This commit is contained in:
du.meimei
2025-04-24 17:56:18 +08:00
parent 921f59e72f
commit 79be862637
4 changed files with 149 additions and 45 deletions

View File

@@ -1,48 +1,92 @@
<template>
<el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @close="handleClose">
<el-dialog
:title="title"
:visible.sync="visible"
width="800px"
append-to-body
@close="handleClose"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户编码" prop="userCode">
<el-input v-model="form.userCode" placeholder="请输入用户编码" clearable size="small" :disabled="isView || isEdit" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" clearable size="small" :disabled="isView" />
<el-input
v-model="form.userName"
placeholder="请输入用户名称"
clearable
size="small"
:disabled="isView"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="真实姓名" prop="realName">
<el-input v-model="form.realName" placeholder="请输入真实姓名" clearable size="small" :disabled="isView" />
</el-form-item>
</el-col>
<el-input
v-model="form.realName"
placeholder="请输入真实姓名"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-col
></el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入手机号" clearable size="small" :disabled="isView" />
<el-input
v-model="form.mobile"
placeholder="请输入手机号"
clearable
size="small"
:disabled="isView"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
clearable
size="small"
:disabled="isView"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" clearable size="small" :disabled="isView" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户角色" prop="sysUserRoleDTOs">
<el-select v-model="selectedRoleIds" multiple placeholder="请选择用户角色" clearable size="small" :disabled="isView" @change="handleRolesChange">
<el-option v-for="item in roleListData" :key="item.id" :label="item.roleName" :value="item.id" />
<el-select
v-model="selectedRoleIds"
multiple
placeholder="请选择用户角色"
clearable
size="small"
:disabled="isView"
@change="handleRolesChange"
>
<el-option
v-for="item in roleListData"
:key="item.id"
:label="item.roleName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" v-if="!isView">
<el-button type="primary" size="small" :loading="loading" @click="submitForm"> </el-button>
<el-button
type="primary"
size="small"
:loading="loading"
@click="submitForm"
> </el-button
>
<el-button size="small" @click="handleClose"> </el-button>
</div>
<div slot="footer" class="dialog-footer" v-else>
@@ -92,11 +136,18 @@ export default {
roleListData: [],
selectedRoleIds: [], // 新增用于绑定选中的角色ID数组
rules: {
userCode: [{ required: true, message: '请输入用户编码', trigger: 'blur' }],
userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
realName: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
],
userName: [
{ required: true, message: '请输入用户名称', trigger: 'blur' }
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
roleOptions: [{ value: 'admin', label: '管理员' }, { value: 'user', label: '普通用户' }],
roleOptions: [
{ value: 'admin', label: '管理员' },
{ value: 'user', label: '普通用户' }
],
loading: false
}
},
@@ -149,7 +200,9 @@ export default {
const submitData = { ...this.form }
// 根据是否是编辑模式调用不同的API
const apiRequest = this.isEdit ? updateUser(submitData) : addUser(submitData)
const apiRequest = this.isEdit
? updateUser(submitData)
: addUser(submitData)
apiRequest
.then(response => {
@@ -158,11 +211,16 @@ export default {
this.$emit('submit', submitData)
this.handleClose()
} else {
this.$message.error(response.msg || (this.isEdit ? '修改失败' : '添加失败'))
this.$message.error(
response.msg || (this.isEdit ? '修改失败' : '添加失败')
)
}
})
.catch(error => {
console.error(this.isEdit ? '修改用户出错:' : '添加用户出错:', error)
console.error(
this.isEdit ? '修改用户出错:' : '添加用户出错:',
error
)
this.$message.error(this.isEdit ? '修改用户出错' : '添加用户出错')
})
.finally(() => {