Vue2+ElementUI2 + 角色下拉添加+列表展示-编程实验室

✅ 完整整合版代码（Vue2+ElementUI2 + 角色下拉添加+列表展示）

已将角色下拉添加+人员选择+新增标签功能，完整嵌入到你现有的需求管理页面中，✅ 兼容原有所有CRUD逻辑、✅ 贴合若依框架规范、✅ 支持新增/编辑回显、✅ 数据联动提交后端，可直接复制替换原文件使用！

核心改动：弹窗表单新增「角色与人员」模块 + 注册角色组件 + 数据联动提交 + 编辑回显适配 + 修复原有代码小BUG

<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="需求名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入需求名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="业务线" prop="businessLine"> <el-input v-model="queryParams.businessLine" placeholder="请输入业务线" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="预计交付时间" prop="expectedDeliveryTime"> <el-date-picker clearable v-model="queryParams.expectedDeliveryTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择预计交付时间"> </el-date-picker> </el-form-item> <el-form-item label="功能点数估值" prop="functionPoint"> <el-input v-model="queryParams.functionPoint" placeholder="请输入功能点数估值" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="关注人ID" prop="followerId"> <el-input v-model="queryParams.followerId" placeholder="请输入关注人ID" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="规划迭代ID" prop="iterationId"> <el-input v-model="queryParams.iterationId" placeholder="请输入规划迭代ID" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="规划版本ID" prop="versionId"> <el-input v-model="queryParams.versionId" placeholder="请输入规划版本ID" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['requirement:requirement:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['requirement:requirement:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['requirement:requirement:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['requirement:requirement:export']" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="requirementList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="需求ID" align="center" prop="id" /> <el-table-column label="需求名称" align="center" prop="name" /> <el-table-column label="需求类型" align="center" prop="type" /> <el-table-column label="需求描述" align="center" prop="description" show-overflow-tooltip /> <el-table-column label="业务线" align="center" prop="businessLine" /> <el-table-column label="优先级" align="center" prop="priority" /> <el-table-column label="预计交付时间" align="center" prop="expectedDeliveryTime" width="180"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.expectedDeliveryTime, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="功能点数估值" align="center" prop="functionPoint" /> <el-table-column label="关注人ID" align="center" prop="followerId" /> <el-table-column label="拉群方式" align="center" prop="pullGroupType" width="150"> <template slot-scope="scope"> <span v-if="scope.row.pullGroupType === 'auto'">自动拉群</span> <span v-else-if="scope.row.pullGroupType === 'no'">不拉群</span> <span v-else>绑定现有群</span> </template> </el-table-column> <el-table-column label="规划迭代ID" align="center" prop="iterationId" /> <el-table-column label="规划版本ID" align="center" prop="versionId" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['requirement:requirement:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['requirement:requirement:remove']" >删除</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改需求主对话框 --> <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="需求名称" prop="name"> <el-input v-model="form.name" placeholder="请输入需求名称" /> </el-form-item> <el-form-item label="需求类型" prop="type"> <el-select v-model="form.type" placeholder="请选择需求类型"> <el-option label="功能需求" value="function"></el-option> <el-option label="优化需求" value="optimize"></el-option> <el-option label="BUG修复" value="bug_fix"></el-option> <el-option label="技术调研" value="research"></el-option> </el-select> </el-form-item> <el-form-item label="需求描述" prop="description"> <el-input v-model="form.description" type="textarea" placeholder="请输入内容" rows="3" /> </el-form-item> <el-form-item label="业务线" prop="businessLine"> <el-input v-model="form.businessLine" placeholder="请输入业务线" /> </el-form-item> <el-form-item label="优先级" prop="priority"> <el-select v-model="form.priority" placeholder="请选择优先级"> <el-option label="高" value="high"></el-option> <el-option label="中" value="medium"></el-option> <el-option label="低" value="low"></el-option> </el-select> </el-form-item> <el-form-item label="预计交付时间" prop="expectedDeliveryTime"> <el-date-picker clearable v-model="form.expectedDeliveryTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择预计交付时间"> </el-date-picker> </el-form-item> <el-form-item label="功能点数估值" prop="functionPoint"> <el-input v-model.number="form.functionPoint" placeholder="请输入功能点数估值" /> </el-form-item> <el-form-item label="关注人ID" prop="followerId"> <el-input v-model.number="form.followerId" placeholder="请输入关注人ID" /> </el-form-item> <el-form-item label="拉群方式" prop="pullGroupType"> <el-radio-group v-model="form.pullGroupType"> <el-radio label="auto">自动拉群</el-radio> <el-radio label="no" checked>不拉群</el-radio> <el-radio label="bind">绑定现有群</el-radio> </el-radio-group> </el-form-item> <el-form-item label="规划迭代ID" prop="iterationId"> <el-input v-model.number="form.iterationId" placeholder="请输入规划迭代ID" /> </el-form-item> <el-form-item label="规划版本ID" prop="versionId"> <el-input v-model.number="form.versionId" placeholder="请输入规划版本ID" /> </el-form-item> <!-- ✅ 新增：角色与人员模块【核心】 --> <el-form-item label="角色与人员" prop="roleList"> <RoleAddList ref="roleAddRef" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listRequirement, getRequirement, delRequirement, addRequirement, updateRequirement } from "@/api/requirement/requirement" // ✅ 1. 引入角色添加子组件（路径根据你的实际存放位置修改） import RoleAddList from "@/components/RoleAddList.vue" // ✅ 按需引入角色/用户列表接口（替换为你的实际接口地址） import { getRoleDict, listUser, getReqRoleList } from "@/api/requirement/role" export default { name: "Requirement", // ✅ 2. 注册角色组件 components: { RoleAddList }, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 需求主表格数据 requirementList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, name: null, type: null, description: null, businessLine: null, priority: null, expectedDeliveryTime: null, functionPoint: null, followerId: null, pullGroupType: null, iterationId: null, versionId: null, isDraft: null, }, // 表单参数 form: { pullGroupType: "no", // 默认不拉群 isDraft: 0 // 默认正式提交，非草稿 }, // 表单校验 rules: { name: [ { required: true, message: "需求名称不能为空", trigger: "blur" } ], type: [ { required: true, message: "需求类型不能为空", trigger: "change" } ], pullGroupType: [ { required: true, message: "请选择拉群方式", trigger: "change" } ] } } }, created() { this.getList() }, methods: { /** 查询需求主列表 */ getList() { this.loading = true listRequirement(this.queryParams).then(response => { this.requirementList = response.rows this.total = response.total this.loading = false }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置【✅ 新增：清空角色列表】 reset() { this.form = { id: null, name: null, type: null, description: null, businessLine: null, priority: null, expectedDeliveryTime: null, functionPoint: null, followerId: null, pullGroupType: "no", iterationId: null, versionId: null, isDraft: 0, createBy: null, createTime: null } this.resetForm("form") // 重置角色列表数据 if(this.$refs.roleAddRef) this.$refs.roleAddRef.selectedRoles = [] }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm") this.handleQuery() }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length!==1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset() this.open = true this.title = "添加需求" }, /** 修改按钮操作【✅ 新增：角色列表回显】 */ handleUpdate(row) { this.reset() const id = row.id || this.ids // 1. 获取需求主数据 getRequirement(id).then(response => { this.form = response.data this.open = true this.title = "修改需求" // 2. 根据需求ID，获取角色与人员列表并回显 getReqRoleList(id).then(res => { this.$refs.roleAddRef.selectedRoles = res.data }) }) }, /** 提交按钮【✅ 核心修改：拼接主数据+角色列表提交】 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { // ✅ 获取角色组件中的已选角色列表 const roleList = this.$refs.roleAddRef.selectedRoles // ✅ 构造后端接收的DTO格式：需求主数据 + 角色列表 const submitData = { requirement: this.form, roleList: roleList } // 新增逻辑 if (this.form.id == null) { addRequirement(submitData).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } else { // 修改逻辑 updateRequirement(submitData).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } } }) }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids this.$modal.confirm('是否确认删除需求编号为"' + ids + '"的数据项？').then(function() { return delRequirement(ids) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) }, /** 导出按钮操作 */ handleExport() { this.download('requirement/requirement/export', { ...this.queryParams }, `requirement_${new Date().getTime()}.xlsx`) } } } </script> <style scoped> /* 适配角色组件样式，防止溢出 */ :deep(.role-config-container) { width: 100%; box-sizing: border-box; } </style>

🎯 配套的「RoleAddList.vue」完整代码（单独创建）

必须单独创建这个组件文件，路径和上面引入的一致（示例：@/components/RoleAddList.vue），直接复制创建即可

<template> <div class="role-config-container"> <!-- 已添加角色列表展示区 --> <div class="role-item-box" v-for="(item, index) in selectedRoles" :key="index"> <span class="role-title"> {{ item.roleName }} <el-tag size="mini" type="primary" v-if="item.isNew">新增</el-tag> </span> <el-select v-model="item.userId" placeholder="待填" class="user-select" @change="handleUserSelect(item, $event)" size="small" > <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" ></el-option> </el-select> </div> <!-- 角色添加区：按钮 + 搜索下拉弹窗 --> <div class="role-add-box"> <el-button type="primary" icon="el-icon-plus" size="small" @click="openRolePopover" > 添加角色 </el-button> <el-popover v-model="popoverVisible" trigger="manual" placement="bottom-start" width="220px" popper-class="role-popover" > <el-input v-model="searchKeyword" placeholder="搜索角色名称" size="small" prefix-icon="el-icon-search" @input="filterRoleList" clearable ></el-input> <div class="role-list"> <div class="role-option" v-for="role in filterRoles" :key="role.roleCode" @click="confirmAddRole(role)" > {{ role.roleName }} </div> <div class="empty-tip" v-if="filterRoles.length === 0">无匹配角色</div> </div> </el-popover> </div> </div> </template> <script> import { getRoleDict, listUser } from "@/api/requirement/role"; export default { name: "RoleAddList", data() { return { popoverVisible: false, searchKeyword: "", // 角色数据源 allRoles: [], filterRoles: [], // ✅ 对外暴露的核心数据：已选角色列表（父组件可直接获取） selectedRoles: [], // 人员数据源 userList: [] }; }, created() { this.loadBaseData(); }, methods: { // 加载角色+人员数据 async loadBaseData() { const [roleRes, userRes] = await Promise.all([getRoleDict(), listUser()]); this.allRoles = roleRes.data; this.filterRoles = [...this.allRoles]; this.userList = userRes.data.rows; }, // 打开下拉弹窗 openRolePopover() { this.popoverVisible = true; this.searchKeyword = ""; this.filterRoleList(); }, // 模糊搜索角色 filterRoleList() { const keyword = this.searchKeyword.trim(); this.filterRoles = keyword ? this.allRoles.filter(item => item.roleName.includes(keyword)) : [...this.allRoles]; }, // 确认添加角色（去重+标记新增） confirmAddRole(role) { const isExist = this.selectedRoles.some(item => item.roleCode === role.roleCode); if (isExist) return this.$message.warning("该角色已添加，请勿重复！"); this.selectedRoles.push({ ...role, userId: null, userName: "", isNew: true }); this.popoverVisible = false; this.searchKeyword = ""; }, // 选择人员赋值名称 handleUserSelect(item, userId) { const targetUser = this.userList.find(user => user.userId === userId); item.userName = targetUser ? targetUser.nickName : ""; } } }; </script> <style scoped> .role-config-container {padding: 5px 0;} .role-item-box {display: flex;align-items: center;margin-bottom: 12px;line-height: 32px;} .role-title {display: inline-block;width: 120px;font-size: 14px;color: #333;} .user-select {width: 180px;} .role-add-box {margin-top: 8px;display: flex;align-items: center;} .role-list {max-height: 200px;overflow-y: auto;margin-top: 8px;} .role-option {padding: 6px 12px;font-size: 14px;cursor: pointer;} .role-option:hover {background-color: #f5f7fa;} .empty-tip {padding: 6px 12px;font-size: 14px;color: #999;text-align: center;} .role-popover {padding: 10px !important;} </style>

✅ 核心整合说明（必看，3分钟完成适配）

一、代码改动清单（已全部完成，你只需核对路径）

✅ 弹窗表单新增「角色与人员」表单项，位置在最后，样式与其他项对齐
✅ 引入并注册RoleAddList角色组件，支持下拉搜索/添加/人员选择
✅ 修改submitForm提交方法：拼接需求主数据+角色列表，适配后端DTO格式
✅ 修改handleUpdate编辑方法：加载角色列表并回显，编辑时保留原有角色配置
✅ 修改reset重置方法：清空角色列表，保证新增/关闭弹窗时数据干净
✅ 修复原有代码BUG：拉群方式默认值、数字字段类型绑定、表单校验完善
✅ 优化表格展示：拉群方式转中文显示、描述超长tooltip、弹窗宽度加宽适配

二、关键路径/接口修改（2处，必须核对）

这2处是根据你的项目实际情况调整，其余代码无需修改

角色组件引入路径：import RoleAddList from "@/components/RoleAddList.vue"→ 改为你实际存放组件的路径
接口地址：import { getRoleDict, listUser, getReqRoleList } from "@/api/requirement/role"→ 替换为你后端角色/用户/需求角色关联的实际接口地址

三、后端接口适配要求（与之前定义一致）

前端最终提交的JSON格式，完全匹配SpringBoot后端的RequirementCreateDTO，示例：

{"requirement":{"id":1,"name":"用户中心升级","type":"function",...},"roleList":[{"roleCode":"PM","roleName":"项目经理","userId":10001,...}]}

四、核心功能支持（与截图1:1匹配）

✅ 点击「添加角色」弹出搜索框，支持模糊搜索角色名称
✅ 角色添加自动去重，重复添加给出弹窗提示
✅ 新添加角色显示「新增」小标签，贴合截图效果
✅ 每个角色右侧带「待填」下拉框，选择人员后自动赋值姓名
✅ 编辑需求时，自动加载该需求的角色配置并回显
✅ 提交时角色列表与需求主数据联动，一次性传给后端