用户角色选择改为下拉单选

This commit is contained in:
wkc
2026-07-02 10:53:01 +08:00
parent 64ddc362e3
commit 2f53fc4d1e
2 changed files with 30 additions and 3 deletions

View File

@@ -0,0 +1,18 @@
# 用户管理角色下拉单选实施记录
## 修改内容
- 将用户管理新增、修改用户弹窗中的角色选择组件由多选下拉框改为下拉单选框。
- 新增前端单选值 `selectedRoleId`,选择角色时同步写回后端原有 `form.roleIds` 数组字段。
- 修改用户回显时仅取 `response.roleIds` 的第一个角色作为当前选中项,提交时保持 `roleIds: [roleId]` 格式。
## 影响范围
- 仅影响 `ruoyi-ui/src/views/system/user/index.vue` 的新增用户、修改用户弹窗角色下拉选择交互。
- 未修改后端接口、数据库、权限逻辑和用户分配角色页面。
## 验证情况
- 已执行 `nvm use`,使用 Node v14.21.3 / npm 6.14.18。
- 已执行 `npm run build:prod`,构建通过;仅存在原有资源体积 warning。
- 已在真实前端页面 `http://localhost:1024/system/user` 验证新增用户弹窗与修改用户弹窗:角色字段均为下拉单选框,无多选标签和单选圆点组件。

View File

@@ -159,7 +159,7 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色"> <el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择角色"> <el-select v-model="selectedRoleId" placeholder="请选择角色" @change="handleRoleChange">
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option> <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -246,6 +246,8 @@ export default {
postOptions: [], postOptions: [],
// 角色选项 // 角色选项
roleOptions: [], roleOptions: [],
// 当前选择角色
selectedRoleId: undefined,
// 表单参数 // 表单参数
form: {}, form: {},
defaultProps: { defaultProps: {
@@ -402,8 +404,13 @@ export default {
postIds: [], postIds: [],
roleIds: [] roleIds: []
} }
this.selectedRoleId = undefined
this.resetForm("form") this.resetForm("form")
}, },
// 角色单选后仍按后端原有 roleIds 数组提交
handleRoleChange(roleId) {
this.$set(this.form, "roleIds", roleId ? [roleId] : [])
},
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1 this.queryParams.pageNum = 1
@@ -455,8 +462,10 @@ export default {
this.form = response.data this.form = response.data
this.postOptions = response.posts this.postOptions = response.posts
this.roleOptions = response.roles this.roleOptions = response.roles
const roleId = response.roleIds && response.roleIds.length ? response.roleIds[0] : undefined
this.$set(this.form, "postIds", response.postIds) this.$set(this.form, "postIds", response.postIds)
this.$set(this.form, "roleIds", response.roleIds) this.$set(this.form, "roleIds", roleId ? [roleId] : [])
this.selectedRoleId = roleId
this.open = true this.open = true
this.title = "修改用户" this.title = "修改用户"
this.form.password = "" this.form.password = ""