要实现“新建需求”功能

要实现“新建需求”功能，我们可以基于Vue（Element UI）+ Spring Boot（若依框架）做前后端分离开发，以下是完整实现方案：

一、后端（Spring Boot + 若依）

1. 数据库表设计

需要2张核心表：需求主表+需求角色关联表（关联角色与人员）。

-- 1. 需求主表CREATETABLE`requirement`(`id`bigintNOTNULLAUTO_INCREMENTCOMMENT'需求ID',`name`varchar(200)NOTNULLCOMMENT'需求名称',`type`varchar(50)NOTNULLCOMMENT'需求类型（字典值：如功能/优化）',`description`textCOMMENT'需求描述',`business_line`varchar(100)DEFAULTNULLCOMMENT'业务线',`priority`varchar(20)DEFAULTNULLCOMMENT'优先级（字典值：高/中/低）',`expected_delivery_time`datetimeDEFAULTNULLCOMMENT'预计交付时间',`function_point`decimal(10,2)DEFAULTNULLCOMMENT'功能点数估值',`follower_id`bigintDEFAULTNULLCOMMENT'关注人ID（关联sys_user）',`pull_group_type`varchar(20)DEFAULT'no'COMMENT'拉群方式：auto=自动拉群/no=不拉群/bind=绑定现有群',`iteration_id`bigintDEFAULTNULLCOMMENT'规划迭代ID（关联迭代表）',`version_id`bigintDEFAULTNULLCOMMENT'规划版本ID（关联版本表）',`is_draft`tinyintDEFAULT'0'COMMENT'是否草稿：0=否 1=是',`create_by`varchar(64)DEFAULT''COMMENT'创建人',`create_time`datetimeDEFAULTNULLCOMMENT'创建时间',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='需求主表';-- 2. 需求角色关联表（对应“角色与人员”）CREATETABLE`requirement_role`(`id`bigintNOTNULLAUTO_INCREMENTCOMMENT'主键ID',`requirement_id`bigintNOTNULLCOMMENT'关联需求ID',`role_code`varchar(50)NOTNULLCOMMENT'角色编码（如RD/UX Writer）',`role_name`varchar(100)NOTNULLCOMMENT'角色名称',`user_id`bigintDEFAULTNULLCOMMENT'负责人ID（关联sys_user）',`user_name`varchar(64)DEFAULTNULLCOMMENT'负责人姓名',PRIMARYKEY(`id`),UNIQUEKEY`uk_req_role`(`requirement_id`,`role_code`)COMMENT'同一需求同一角色唯一')ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='需求角色关联表';

2. 实体类 & DTO

// 需求主表实体@Data@TableName("requirement")publicclassRequirement{@TableId(type=IdType.AUTO)privateLongid;privateStringname;privateStringtype;privateStringdescription;privateStringbusinessLine;privateStringpriority;privateDateexpectedDeliveryTime;privateBigDecimalfunctionPoint;privateLongfollowerId;privateStringpullGroupType;privateLongiterationId;privateLongversionId;privateIntegerisDraft;privateStringcreateBy;privateDatecreateTime;}// 需求角色关联实体@Data@TableName("requirement_role")publicclassRequirementRole{@TableId(type=IdType.AUTO)privateLongid;privateLongrequirementId;privateStringroleCode;privateStringroleName;privateLonguserId;privateStringuserName;}// 新增需求的提交DTO（主数据+角色列表）@DatapublicclassRequirementCreateDTO{privateRequirementrequirement;privateList<RequirementRole>roleList;}

3. 后端业务逻辑（Service + Controller）

// Service层：保存需求（主数据+角色关联）@ServicepublicclassRequirementServiceextendsServiceImpl<RequirementMapper,Requirement>{@ResourceprivateRequirementRoleServicerequirementRoleService;@Transactional(rollbackFor=Exception.class)publicvoidsaveRequirement(RequirementCreateDTOdto){// 1. 保存需求主表Requirementrequirement=dto.getRequirement();requirement.setIsDraft(0);// 非草稿this.save(requirement);// 2. 保存角色关联表（绑定需求ID）List<RequirementRole>roleList=dto.getRoleList();if(CollUtil.isNotEmpty(roleList)){roleList.forEach(role->role.setRequirementId(requirement.getId()));requirementRoleService.saveBatch(roleList);}}}// Controller层：提供新增/下拉选项接口@RestController@RequestMapping("/api/requirement")publicclassRequirementController{@ResourceprivateRequirementServicerequirementService;// 新建需求@PostMapping("/create")publicAjaxResultcreate(@RequestBodyRequirementCreateDTOdto){requirementService.saveRequirement(dto);returnAjaxResult.success("需求创建成功");}// 获取下拉选项（需求类型、业务线等）@GetMapping("/options")publicAjaxResultgetOptions(){RequirementOptionsDTOoptions=newRequirementOptionsDTO();// 从若依字典表获取枚举选项（如需求类型）options.setTypeList(dictService.selectDictDataByType("requirement_type"));options.setPriorityList(dictService.selectDictDataByType("requirement_priority"));// 业务线、迭代、版本从关联表查询（示例）options.setBusinessLineList(businessLineService.list());returnAjaxResult.success(options);}}

二、前端（Vue + Element UI）

1. 新建需求组件（RequirementCreate.vue）

复用之前的角色添加组件，实现“角色与人员”的动态添加：

<template> <el-dialog title="新建需求" :visible.sync="dialogVisible" width="60%" > <el-form ref="formRef" :model="form" label-width="120px" :rules="rules"> <!-- 需求名称 --> <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 v-for="item in options.typeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" /> </el-select> </el-form-item> <!-- 描述 --> <el-form-item label="描述"> <el-input v-model="form.description" type="textarea" rows="4" placeholder="请输入需求描述" /> </el-form-item> <!-- 业务线/优先级/预计交付时间 --> <el-form-item label="业务线"> <el-select v-model="form.businessLine" placeholder="请选择" /> </el-form-item> <el-form-item label="优先级"> <el-select v-model="form.priority" placeholder="请选择"> <el-option v-for="item in options.priorityList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" /> </el-select> </el-form-item> <el-form-item label="预计交付时间"> <el-date-picker v-model="form.expectedDeliveryTime" type="date" placeholder="请选择" /> </el-form-item> <!-- 功能点数 --> <el-form-item label="需求功能点数估值"> <el-input v-model.number="form.functionPoint" placeholder="请输入" /> </el-form-item> <!-- 需求相关人员 --> <el-form-item label="关注人"> <el-select v-model="form.followerId" placeholder="请选择"> <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" /> </el-select> </el-form-item> <!-- 拉群方式 --> <el-form-item label="拉群方式选择"> <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="角色与人员"> <role-add-list ref="roleRef" /> </el-form-item> <!-- 规划迭代/版本 --> <el-form-item label="规划迭代"> <el-select v-model="form.iterationId" placeholder="请选择" /> </el-form-item> <el-form-item label="规划版本"> <el-select v-model="form.versionId" placeholder="请选择" /> </el-form-item> <!-- 连续创建 --> <el-form-item> <el-checkbox v-model="isContinuous">连续创建</el-checkbox> </el-form-item> </el-form> <template #footer> <el-button @click="handleClose">取消</el-button> <el-button type="primary" @click="saveDraft">存草稿</el-button> <el-button type="primary" @click="handleSubmit">确认创建</el-button> </template> </el-dialog> </template> <script> import RoleAddList from "@/components/RoleAddList"; // 复用角色添加组件 import { createRequirement, getRequirementOptions, listUser } from "@/api/requirement"; export default { components: { RoleAddList }, props: { dialogVisible: Boolean }, data() { return { form: { name: "", type: "", description: "", businessLine: "", priority: "", expectedDeliveryTime: null, functionPoint: null, followerId: null, pullGroupType: "no", iterationId: null, versionId: null }, rules: { name: [{ required: true, message: "请输入需求名称", trigger: "blur" }], type: [{ required: true, message: "请选择需求类型", trigger: "change" }] }, options: {}, // 下拉选项（需求类型/优先级等） userList: [], // 系统用户列表 isContinuous: false }; }, created() { this.loadOptions(); }, methods: { // 加载下拉选项 async loadOptions() { const optRes = await getRequirementOptions(); this.options = optRes.data; this.userList = (await listUser({ pageSize: 200 })).data.rows; }, // 提交需求 async handleSubmit() { this.$refs.formRef.validate(async (valid) => { if (valid) { // 获取角色列表（从子组件） const roleList = this.$refs.roleRef.roleList; // 构造提交数据 const dto = { requirement: this.form, roleList }; await createRequirement(dto); this.$message.success("需求创建成功"); // 连续创建则重置表单 this.isContinuous ? this.resetForm() : this.handleClose(); } }); }, // 存草稿 saveDraft() { this.form.isDraft = 1; this.handleSubmit(); // 复用提交逻辑，标记为草稿 }, // 重置表单 resetForm() { this.$refs.formRef.resetFields(); this.$refs.roleRef.roleList = []; }, // 关闭弹窗 handleClose() { this.resetForm(); this.$emit("update:dialogVisible", false); } } }; </script>

三、核心逻辑说明

1. 数据关联：

   • 需求主表关联系统用户（关注人）、迭代/版本表（规划项）；
   • 角色与人员通过requirement_role表关联需求和用户，复用之前的角色选择组件。

2. 前端交互：

   • 表单项与form对象双向绑定，通过Element UI组件实现下拉、单选、文本输入；
   • “角色与人员”复用之前的RoleAddList组件，动态添加角色并选择负责人。

3. 草稿功能：

   • 通过is_draft字段标记草稿，提交时区分正式需求/草稿。