| | |
| | | <Card> |
| | | <template style="position: relative"> |
| | | <el-form ref="form" :model="form" :rules="rules" inline label-position="top"> |
| | | <div class="header-title" style="margin-bottom: 38px; justify-content: space-between"> |
| | | <div v-if="!isEdit"> |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | | <div style="display: flex; align-items: center; gap: 13px"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | |
| | | <el-button @click="showScheduling = true" class="el-icon-plus" type="primary"> |
| | | 选择实验调度</el-button> |
| | | </div> |
| | | <el-button @click="handleStopExperiment" type="danger"> |
| | | 申请终止实验</el-button> |
| | | </div> |
| | | <!-- //换到详情弹窗 --> |
| | | <!-- <el-button @click="handleStopExperiment" type="danger"> |
| | | 申请终止实验</el-button> --> |
| | | <Table :data="groupTableData" :total="0" :height="null" class="groupTable"> |
| | | <el-table-column type="index" label="序号" width="80"></el-table-column> |
| | | <el-table-column prop="projectName" label="所属项目课题方案"></el-table-column> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <template v-if="groupData && groupData.length > 0"> |
| | | <div class="add-group"> |
| | | <span>组别列表</span> |
| | | <!-- <el-button type="primary" class="el-icon-plus" @click="handleAddGroup">添加组别</el-button> --> |
| | | </div> |
| | | |
| | | <Table :data="groupData" :total="0" :height="null" class="groupTable"> |
| | |
| | | <el-table-column prop="groupName" label="组别"></el-table-column> |
| | | <el-table-column prop="remark" label="备注"></el-table-column> |
| | | </Table> |
| | | </template> |
| | | |
| | | <div style="padding-left: 25px;margin-top: 28px;"> |
| | | <el-form-item prop="experimentDate" label="试验日期"> |
| | | |
| | | <el-date-picker |
| | | v-model="form.experimentDate" |
| | | type="datetime" |
| | | placeholder="选择日期时间"> |
| | | <el-date-picker v-model="form.experimentDate" type="datetime" :disabled="isEdit" placeholder="选择日期时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <div v-else> |
| | | <div class="header-title" style="margin-bottom: 18px"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>所属项目课题方案</div> |
| | | </div> |
| | | </div> |
| | | <div class="content-box"> |
| | | <div class="content-box-left"> |
| | | <div>项目课题方案名称:{{ groupTableData && groupTableData.length > 0 ? groupTableData[0].projectName : '' }}</div> |
| | | <div>实验编号:{{ groupTableData && groupTableData.length > 0 ? groupTableData[0].experimentCode : '' }}</div> |
| | | </div> |
| | | <div class="content-box-right"> |
| | | <div>项目课题方案编号: {{ groupTableData && groupTableData.length > 0 ? groupTableData[0].projectCode : '' }}</div> |
| | | <div>实验名称: {{ groupTableData && groupTableData.length > 0 ? groupTableData[0].experimentName : '' }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="add-group"> |
| | | <div class="add-group" v-if="!isEdit"> |
| | | <div>*</div> |
| | | <span>参加人员</span> |
| | | <el-button type="primary" class="el-icon-plus" @click="addMember">选择参加人员</el-button> |
| | | </div> |
| | | <div class="add-group" v-else><span>实验人员</span> </div> |
| | | <div class="member-list"> |
| | | <div class="member-list-card"> |
| | | <div class="member-item"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="member-change"> |
| | | <div class="member-change-btn" @click="handleEditMember">修改</div> |
| | | <div class="member-change-btn" @click="handleEditMember" v-if="!isEdit">修改</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <template v-if="groupData && groupData.length > 0 && isEdit"> |
| | | <div class="add-group"> |
| | | <span>组别列表</span> |
| | | </div> |
| | | |
| | | <Table :data="groupData" :total="0" :height="null" class="groupTable"> |
| | | <el-table-column type="index" label="序号" width="80"></el-table-column> |
| | | <el-table-column prop="groupName" label="组别"></el-table-column> |
| | | <el-table-column prop="remark" label="备注"></el-table-column> |
| | | </Table> |
| | | </template> |
| | | |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | | <div class="header-title-left"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="content-box"> |
| | | <AiEditor ref="purposeEditor" :value="editorContents.purpose" height="200px" placeholder="请输入实验目的..." /> |
| | | <AiEditor ref="purposeEditor" :readOnly="isEdit" :value="editorContents.purpose" height="200px" |
| | | placeholder="请输入实验目的..." /> |
| | | </div> |
| | | |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="content-box"> |
| | | <AiEditor ref="processEditor" :value="editorContents.process" height="200px" placeholder="请输入工艺参数及路线..." /> |
| | | <AiEditor ref="processEditor" :readOnly="isEdit" :value="editorContents.process" height="200px" |
| | | placeholder="请输入工艺参数及路线..." /> |
| | | </div> |
| | | |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | |
| | | <div>三、实验材料及设备</div> |
| | | </div> |
| | | </div> |
| | | <DynamicComponent ref="materialComponent" title="实验材料" :participants="participantsData" @submit="handleMaterialSubmit" /> |
| | | <DynamicComponent ref="equipmentComponent" title="实验所用设备" :participants="participantsData" @submit="handleEquipmentSubmit" /> |
| | | <DynamicComponent ref="materialComponent" title="实验材料" :participants="participantsData" |
| | | @submit="handleMaterialSubmit" :dataSource="form.experimentMaterial" :editable="!isEdit" /> |
| | | <DynamicComponent ref="equipmentComponent" title="实验所用设备" :participants="participantsData" |
| | | @submit="handleEquipmentSubmit" :dataSource="form.experimentDevice" :editable="!isEdit" /> |
| | | |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>四、实验操作步骤记录</div> |
| | | </div> |
| | | <el-button @click="handleAddStep" class="el-icon-plus" type="primary"> |
| | | <el-button @click="handleAddStep" class="el-icon-plus" type="primary" v-if="!isEdit"> |
| | | 添加步骤</el-button> |
| | | </div> |
| | | |
| | |
| | | 步骤{{ idx + 1 }}:{{ item.stepName }} |
| | | </div> |
| | | <div class="step-list-item-control"> |
| | | <div class="controlBtn edit" @click="handleEditStep(idx)"> |
| | | <div class="controlBtn edit" @click="handleEditStep(idx)" v-if="!isEdit"> |
| | | <img src="@/assets/public/edit.png" alt="编辑" class="edit-icon" /> |
| | | 编辑 |
| | | </div> |
| | | <div class="controlBtn delete" @click="handleDeleteStep(idx)"> |
| | | <div class="controlBtn delete" @click="handleDeleteStep(idx)" v-if="!isEdit"> |
| | | <img src="@/assets/public/delete.png" alt="删除" class="delete-icon" /> |
| | | 删除 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <DynamicComponent :ref="'stepContent' + idx" @submit="(content) => handleStepContentSubmit(idx, content)" /> |
| | | <DynamicComponent :ref="'stepContent' + idx" @submit="(content) => handleStepContentSubmit(idx, content)" |
| | | :dataSource="item.content" :editable="!isEdit" /> |
| | | </div> |
| | | |
| | | <div class="add-project-footer"> |
| | |
| | | import DynamicComponent from "@/components/DynamicComponent"; |
| | | import AddStep from "./components/add-step.vue"; |
| | | import AiEditor from "@/components/AiEditor"; |
| | | import { getGroupByDispatchId,getParticipantsByDispatchId } from "./service"; |
| | | import { getGroupByDispatchId, getParticipantsByDispatchId, getDetail } from "./service"; |
| | | import moment from 'moment'; |
| | | import { add } from "./service"; |
| | | import { add,update } from "./service"; |
| | | |
| | | export default { |
| | | name: "AddProject", |
| | |
| | | taskTableData: [], |
| | | participantsData: [], |
| | | selectedParticipants: [], |
| | | isEdit: false, // 是否为编辑模式 |
| | | editId: null, // 编辑的ID |
| | | viewMaterialData: [], // 查看模式的材料数据 |
| | | viewEquipmentData: [], // 查看模式的设备数据 |
| | | // 状态映射表 |
| | | statusTypeMap: { |
| | | "-1": "info", |
| | | "1": "warning", |
| | | "2": "success", |
| | | "3": "info" |
| | | }, |
| | | statusTextMap: { |
| | | "-1": "草稿箱", |
| | | "1": "待确认", |
| | | "2": "已确认", |
| | | "3": "已封存" |
| | | } |
| | | }; |
| | | }, |
| | | methods: { |
| | | confirmAddRow() { |
| | | // 处理添加行的逻辑 |
| | | console.log('添加行'); |
| | | }, |
| | | submitForm() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid) { |
| | | console.log("submit!"); |
| | | async created() { |
| | | // 检查是否为编辑模式 |
| | | if (this.$route.query.type === 'edit' && this.$route.query.id) { |
| | | this.isEdit = true; |
| | | this.editId = this.$route.query.id; |
| | | await this.loadEditData(); |
| | | } |
| | | }); |
| | | }, |
| | | methods: { |
| | | // ===== 人员相关方法 ===== |
| | | addMember() { |
| | | this.$refs.selectMember.open(this.participantsData, []); |
| | | }, |
| | | memberList(i) { |
| | | const roleTypes = { |
| | | 1: '工艺工程师', |
| | | 2: '化验师', |
| | | 3: '实验员' |
| | | }; |
| | | handleMemberSubmit(selectedMembers) { |
| | | this.selectedParticipants = selectedMembers; |
| | | this.$refs.selectMember.close(); |
| | | }, |
| | | handleEditMember() { |
| | | this.$refs.selectMember.open(this.participantsData, this.selectedParticipants); |
| | | }, |
| | | |
| | | return this.selectedParticipants.filter(member => member.roleType === i) || []; |
| | | }, |
| | | handleAddGroup() { |
| | | this.$refs.addGroupDialog.open(); |
| | | }, |
| | | handleEditGroup(row) { |
| | | this.$refs.addGroupDialog.open(row); |
| | | }, |
| | | handleDeleteGroup(row) { |
| | | this.$confirm("确认删除该组别吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | const index = this.groupTableData.findIndex((item) => item === row); |
| | | if (index > -1) { |
| | | this.groupTableData.splice(index, 1); |
| | | this.$message.success("删除成功"); |
| | | } |
| | | }) |
| | | .catch(() => { }); |
| | | }, |
| | | handleGroupSubmit(form) { |
| | | const index = this.groupTableData.findIndex( |
| | | (item) => item.groupName === form.groupName |
| | | ); |
| | | if (index > -1) { |
| | | this.groupTableData.splice(index, 1, form); |
| | | } else { |
| | | this.groupTableData.push(form); |
| | | } |
| | | }, |
| | | handleAddTask() { |
| | | this.$refs.addTaskDialog.open(); |
| | | }, |
| | | handleEditTask(row) { |
| | | this.$refs.addTaskDialog.open(row); |
| | | }, |
| | | handleDeleteTask(row) { |
| | | this.$confirm("确认删除该任务吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | const index = this.taskTableData.findIndex((item) => item === row); |
| | | if (index > -1) { |
| | | this.taskTableData.splice(index, 1); |
| | | this.$message.success("删除成功"); |
| | | } |
| | | }) |
| | | .catch(() => { }); |
| | | }, |
| | | handleTaskSubmit(form) { |
| | | const index = this.taskTableData.findIndex( |
| | | (item) => item.taskName === form.taskName |
| | | ); |
| | | if (index > -1) { |
| | | this.taskTableData.splice(index, 1, form); |
| | | } else { |
| | | this.taskTableData.push(form); |
| | | } |
| | | }, |
| | | handleMaterialSubmit(data) { |
| | | // 处理实验材料数据 |
| | | this.form.experimentMaterial = data; |
| | | }, |
| | | handleEquipmentSubmit(data) { |
| | | // 处理实验设备数据 |
| | | this.form.experimentDevice = data; |
| | | }, |
| | | handleSave() { |
| | | // 先获取所有动态组件的数据 |
| | | this.$refs.materialComponent.submit(); |
| | | this.$refs.equipmentComponent.submit(); |
| | | |
| | | // 获取所有步骤内容 - 添加错误检查 |
| | | this.stepList.forEach((step, index) => { |
| | | const stepContentRef = this.$refs['stepContent' + index]; |
| | | console.log('stepContentRef',stepContentRef) |
| | | const editor = Array.isArray(stepContentRef) ? stepContentRef[0] : stepContentRef; |
| | | if (editor && typeof editor.submit === 'function') { |
| | | editor.submit(); |
| | | } |
| | | }); |
| | | console.log('材料数据',this.form.experimentMaterial) |
| | | console.log('设备数据',this.form.experimentDevice) |
| | | console.log('步骤数据',this.form.stepList) |
| | | |
| | | // 然后进行表单校验 |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid && this.validateContent()) { |
| | | // 构建提交数据 |
| | | const formData = { |
| | | ...this.form, |
| | | // 实验日期,使用 moment 格式化为指定格式 |
| | | experimentDate: moment(this.form.experimentDate).format('YYYY-MM-DD HH:mm:ss'), |
| | | // 实验调度ID,从选中的调度数据中获取 |
| | | dispatchId: this.groupTableData[0]?.id, |
| | | // 实验设备,转换为JSON字符串 |
| | | experimentDevice: this.form.experimentDevice, |
| | | // 实验材料,转换为JSON字符串 |
| | | experimentMaterial: this.form.experimentMaterial, |
| | | // 实验目的,从富文本编辑器获取内容 |
| | | experimentObjective: this.$refs.purposeEditor.getContent(), |
| | | // 工艺参数及路线,从富文本编辑器获取内容 |
| | | experimentParamRoute: this.$refs.processEditor.getContent(), |
| | | // 实验方案人员,包含用户ID、昵称和角色类型 |
| | | experimentSchemePersons: this.selectedParticipants.map(person => ({ |
| | | userId: person.userId, // 用户ID |
| | | nickName: person.nickName, // 用户昵称 |
| | | roleType: person.roleType, // 角色类型 |
| | | commitTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
| | | })), |
| | | // 实验步骤记录,转换为JSON字符串,包含步骤名称和内容 |
| | | experimentStepRecord: this.stepList.map(step => ({ |
| | | stepName: step.stepName, // 步骤名称 |
| | | content: step.content // 步骤内容 |
| | | })), |
| | | // 状态:1=已发送 |
| | | status: 1, |
| | | // 提交时间,使用 moment 格式化为指定格式 |
| | | commitTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
| | | }; |
| | | console.log('formData 提交数据',formData) |
| | | |
| | | // 调用添加接口 |
| | | add(formData).then(res => { |
| | | if (res.code === 200) { |
| | | this.$message.success('保存成功'); |
| | | this.$router.go(-1) |
| | | // 可以在这里添加跳转逻辑 |
| | | } else { |
| | | this.$message.error(res.msg || '保存失败'); |
| | | } |
| | | }).catch(err => { |
| | | this.$message.error('保存失败'); |
| | | console.error('保存失败:', err); |
| | | }); |
| | | } else { |
| | | // 获取第一个错误字段 |
| | | const firstError = this.$refs.form.fields.find(field => field.validateState === 'error'); |
| | | if (firstError) { |
| | | // 滚动到错误字段 |
| | | this.$nextTick(() => { |
| | | firstError.$el.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | handleSaveDraft() { |
| | | // 先获取所有动态组件的数据 |
| | | this.$refs.materialComponent.submit(); |
| | | this.$refs.equipmentComponent.submit(); |
| | | |
| | | // 获取所有步骤内容 - 添加错误检查 |
| | | this.stepList.forEach((step, index) => { |
| | | const stepContentRef = this.$refs['stepContent' + index]; |
| | | if (stepContentRef && typeof stepContentRef.submit === 'function') { |
| | | stepContentRef.submit(); |
| | | } |
| | | }); |
| | | |
| | | // 然后进行表单校验 |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid && this.validateContent()) { |
| | | // 构建草稿数据 |
| | | const formData = { |
| | | ...this.form, |
| | | // 实验日期,使用 moment 格式化为指定格式 |
| | | experimentDate: moment(this.form.experimentDate).format('YYYY-MM-DD HH:mm:ss'), |
| | | // 实验调度ID,从选中的调度数据中获取 |
| | | dispatchId: this.groupTableData[0]?.id, |
| | | // 实验设备,转换为JSON字符串 |
| | | experimentDevice: JSON.stringify(this.form.experimentDevice), |
| | | // 实验材料,转换为JSON字符串 |
| | | experimentMaterial: JSON.stringify(this.form.experimentMaterial), |
| | | // 实验目的,从富文本编辑器获取内容 |
| | | experimentObjective: this.$refs.purposeEditor.getContent(), |
| | | // 工艺参数及路线,从富文本编辑器获取内容 |
| | | experimentParamRoute: this.$refs.processEditor.getContent(), |
| | | // 实验方案人员,包含用户ID、昵称和角色类型 |
| | | experimentSchemePersons: this.selectedParticipants.map(person => ({ |
| | | userId: person.userId, // 用户ID |
| | | nickName: person.nickName, // 用户昵称 |
| | | roleType: person.roleType // 角色类型 |
| | | })), |
| | | // 实验步骤记录,转换为JSON字符串,包含步骤名称和内容 |
| | | experimentStepRecord: JSON.stringify(this.stepList.map(step => ({ |
| | | stepName: step.stepName, // 步骤名称 |
| | | content: step.content // 步骤内容 |
| | | }))), |
| | | // 状态:-1=草稿箱 |
| | | status: -1, |
| | | // 提交时间,使用 moment 格式化为指定格式 |
| | | commitTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
| | | }; |
| | | |
| | | // 调用添加接口 |
| | | add(formData).then(res => { |
| | | if (res.code === 200) { |
| | | this.$message.success('草稿保存成功'); |
| | | // 可以在这里添加跳转逻辑 |
| | | } else { |
| | | this.$message.error(res.msg || '草稿保存失败'); |
| | | } |
| | | }).catch(err => { |
| | | this.$message.error('草稿保存失败'); |
| | | console.error('草稿保存失败:', err); |
| | | }); |
| | | } else { |
| | | // 获取第一个错误字段 |
| | | const firstError = this.$refs.form.fields.find(field => field.validateState === 'error'); |
| | | if (firstError) { |
| | | // 滚动到错误字段 |
| | | this.$nextTick(() => { |
| | | firstError.$el.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | // ===== 步骤相关方法 ===== |
| | | handleAddStep() { |
| | | this.$refs.addStepDialog.open(); |
| | | }, |
| | | handleStepSubmit(stepData) { |
| | | if (this.editingStepIndex > -1) { |
| | | // 编辑现有步骤 |
| | | this.stepList[this.editingStepIndex].stepName = stepData.stepName; |
| | | this.editingStepIndex = -1; |
| | | } else { |
| | | // 添加新步骤 |
| | | this.stepList.push({ |
| | | stepName: stepData.stepName, |
| | | content: null, |
| | | }); |
| | | } |
| | | }, |
| | | handleEditStep(index) { |
| | | this.editingStepIndex = index; |
| | | this.$refs.addStepDialog.open(true); |
| | | this.$refs.addStepDialog.setStepName(this.stepList[index].stepName); |
| | | }, |
| | | handleDeleteStep(index) { |
| | | this.$confirm("确认删除该步骤吗?删除后步骤内容将无法恢复", "警告", { |
| | |
| | | }) |
| | | .catch(() => { }); |
| | | }, |
| | | handleEditStep(index) { |
| | | this.editingStepIndex = index; |
| | | this.$refs.addStepDialog.open(true); |
| | | this.$refs.addStepDialog.setStepName(this.stepList[index].stepName); |
| | | }, |
| | | handleStepContentSubmit(index, content) { |
| | | console.log('步骤内容',content) |
| | | this.stepList[index].content = content; |
| | | }, |
| | | |
| | | // ===== 材料设备相关方法 ===== |
| | | handleMaterialSubmit(data) { |
| | | this.form.experimentMaterial = data; |
| | | }, |
| | | handleEquipmentSubmit(data) { |
| | | this.form.experimentDevice = data; |
| | | }, |
| | | |
| | | // ===== 保存提交相关方法 ===== |
| | | handleSave() { |
| | | this.submitData(1); |
| | | }, |
| | | handleSaveDraft() { |
| | | this.submitData(-1); |
| | | }, |
| | | submitData(status) { |
| | | // 先获取所有动态组件的数据 |
| | | this.$refs.materialComponent.submit(); |
| | | this.$refs.equipmentComponent.submit(); |
| | | |
| | | // 获取所有步骤内容 |
| | | const stepContentRefs = Object.keys(this.$refs) |
| | | .filter(key => key.startsWith('stepContent')) |
| | | .map(key => this.$refs[key]); |
| | | |
| | | stepContentRefs.forEach((ref) => { |
| | | const editor = Array.isArray(ref) ? ref[0] : ref; |
| | | if (editor && typeof editor.submit === 'function') { |
| | | editor.submit(); |
| | | } |
| | | }); |
| | | |
| | | // 进行表单校验 |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid && this.validateContent()) { |
| | | // 获取富文本编辑器内容 |
| | | const experimentObjective = this.$refs.purposeEditor.getContent(); |
| | | const experimentParamRoute = this.$refs.processEditor.getContent(); |
| | | |
| | | // 构建实验步骤记录数据 |
| | | const experimentStepRecord = this.stepList.map(step => ({ |
| | | stepName: step.stepName, |
| | | content: step.content |
| | | })); |
| | | |
| | | // 构建提交数据 |
| | | const formData = { |
| | | ...this.form, |
| | | experimentDate: moment(this.form.experimentDate).format('YYYY-MM-DD HH:mm:ss'), |
| | | dispatchId: this.groupTableData && this.groupTableData.length > 0 ? this.groupTableData[0]?.id : '', |
| | | experimentObjective, |
| | | experimentParamRoute, |
| | | experimentSchemePersons: this.selectedParticipants.map(person => ({ |
| | | userId: person.userId, |
| | | nickName: person.nickName, |
| | | roleType: person.roleType, |
| | | commitTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
| | | })), |
| | | status, |
| | | commitTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
| | | }; |
| | | |
| | | // 统一转换JSON字符串 |
| | | formData.experimentStepRecord = JSON.stringify(experimentStepRecord); |
| | | formData.experimentDevice = JSON.stringify(this.form.experimentDevice); |
| | | formData.experimentMaterial = JSON.stringify(this.form.experimentMaterial); |
| | | |
| | | // 编辑模式下添加id参数 |
| | | if (this.isEdit && this.editId) { |
| | | formData.id = this.editId; |
| | | } |
| | | |
| | | // 根据是否为编辑模式调用不同接口 |
| | | const apiCall = this.isEdit ? update(formData) : add(formData); |
| | | |
| | | apiCall.then(res => { |
| | | if (res.code === 200) { |
| | | this.$message.success(status === 1 ? '保存成功' : '草稿保存成功'); |
| | | if (status === 1) { |
| | | this.$router.go(-1); |
| | | } |
| | | } else { |
| | | this.$message.error(res.msg || (status === 1 ? '保存失败' : '草稿保存失败')); |
| | | } |
| | | }).catch(err => { |
| | | this.$message.error(status === 1 ? '保存失败' : '草稿保存失败'); |
| | | console.error(status === 1 ? '保存失败:' : '草稿保存失败:', err); |
| | | }); |
| | | } else { |
| | | // 获取第一个错误字段并滚动到该位置 |
| | | const firstError = this.$refs.form.fields.find(field => field.validateState === 'error'); |
| | | if (firstError) { |
| | | this.$nextTick(() => { |
| | | firstError.$el.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | getAllEditorContent() { |
| | | return { |
| | |
| | | }; |
| | | }, |
| | | validateContent() { |
| | | // // 校验实验调度 |
| | | // if (!this.groupTableData || this.groupTableData.length === 0) { |
| | | // this.$message.error("请选择实验调度"); |
| | | // return false; |
| | | // } |
| | | // 校验实验调度 |
| | | if (!this.groupTableData || this.groupTableData.length === 0) { |
| | | this.$message.error("请选择实验调度"); |
| | | return false; |
| | | } |
| | | |
| | | // // 校验实验日期 |
| | | // if (!this.form.experimentDate) { |
| | | // this.$message.error("请填写实验日期"); |
| | | // return false; |
| | | // } |
| | | // 校验实验日期 |
| | | if (!this.form.experimentDate) { |
| | | this.$message.error("请填写实验日期"); |
| | | return false; |
| | | } |
| | | |
| | | // // 校验参与人员 |
| | | // if (!this.selectedParticipants || this.selectedParticipants.length === 0) { |
| | | // this.$message.error("请选择参与人员"); |
| | | // return false; |
| | | // } |
| | | // 校验参与人员 |
| | | if (!this.selectedParticipants || this.selectedParticipants.length === 0) { |
| | | this.$message.error("请选择参与人员"); |
| | | return false; |
| | | } |
| | | |
| | | // // 校验实验目的 |
| | | // const purpose = this.$refs.purposeEditor.getContent(); |
| | | // if (!purpose || purpose === '<p></p>' || purpose.trim() === '<p></p>') { |
| | | // this.$message.error("请填写实验目的"); |
| | | // return false; |
| | | // } |
| | | // 校验实验目的 |
| | | const purpose = this.$refs.purposeEditor.getContent(); |
| | | if (!purpose || purpose === '<p></p>' || purpose.trim() === '<p></p>') { |
| | | this.$message.error("请填写实验目的"); |
| | | return false; |
| | | } |
| | | |
| | | // // 校验工艺参数及路线 |
| | | // const process = this.$refs.processEditor.getContent(); |
| | | // if (!process || process === '<p></p>' || process.trim() === '<p></p>') { |
| | | // this.$message.error("请填写工艺参数及路线"); |
| | | // return false; |
| | | // } |
| | | // 校验工艺参数及路线 |
| | | const process = this.$refs.processEditor.getContent(); |
| | | if (!process || process === '<p></p>' || process.trim() === '<p></p>') { |
| | | this.$message.error("请填写工艺参数及路线"); |
| | | return false; |
| | | } |
| | | |
| | | // 校验实验材料 |
| | | if (!this.form.experimentMaterial) { |
| | |
| | | } |
| | | |
| | | // 校验每个步骤是否都有内容 |
| | | for (let i = 0; i < this.stepList.length; i++) { |
| | | if (!this.stepList[i].content) { |
| | | this.$message.error(`请完善第${i + 1}个步骤的内容`); |
| | | const invalidStep = this.stepList.findIndex(step => !step.content); |
| | | if (invalidStep !== -1) { |
| | | this.$message.error(`请完善第${invalidStep + 1}个步骤的内容`); |
| | | return false; |
| | | } |
| | | } |
| | | |
| | | return true; |
| | |
| | | this.$router.push("/dataManagement/scheme-management/stop-experiment"); |
| | | }, |
| | | getStatusType(status) { |
| | | const statusMap = { |
| | | "-1": "info", |
| | | "1": "warning", |
| | | "2": "success", |
| | | "3": "info" |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | return this.statusTypeMap[status] || "info"; |
| | | }, |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | "-1": "草稿箱", |
| | | "1": "待确认", |
| | | "2": "已确认", |
| | | "3": "已封存" |
| | | }; |
| | | return statusMap[status] || "未知"; |
| | | return this.statusTextMap[status] || "未知"; |
| | | }, |
| | | handleSchedulingSubmit(data) { |
| | | this.groupTableData = data; |
| | | if (data && data.length > 0) { |
| | | this.groupTableData = data || []; |
| | | if (data && data.length > 0 && data[0].id) { |
| | | getGroupByDispatchId({ dispatchId: data[0].id }).then(res => { |
| | | if (res) { |
| | | this.groupData = res || []; |
| | |
| | | handleSchedulingClose() { |
| | | this.showScheduling = false; |
| | | }, |
| | | handleMemberSubmit(selectedMembers) { |
| | | this.selectedParticipants = selectedMembers; |
| | | this.$refs.selectMember.close(); |
| | | // ===== 数据加载方法 ===== |
| | | async loadEditData() { |
| | | try { |
| | | const res = await getDetail({ id: this.editId }); |
| | | if (!res) { |
| | | this.$message.error('获取详情失败'); |
| | | return; |
| | | } |
| | | |
| | | console.log('编辑数据', res); |
| | | const data = res; |
| | | |
| | | // 填充基本表单数据 |
| | | this.form.experimentDate = data.experimentDate; |
| | | |
| | | // 填充实验调度信息 |
| | | if (data.experimentDispatch?.id) { |
| | | this.form.dispatchId = data.experimentDispatch.id; |
| | | this.groupTableData = [{ ...data.experimentDispatch }]; |
| | | |
| | | // 获取组别信息 |
| | | try { |
| | | const groupRes = await getGroupByDispatchId({ dispatchId: data.experimentDispatch.id }); |
| | | this.groupData = groupRes || []; |
| | | } catch (err) { |
| | | console.error('获取组别列表失败:', err); |
| | | } |
| | | } |
| | | |
| | | // 填充参与人员 |
| | | this.selectedParticipants = Array.isArray(data.experimentSchemePersons) |
| | | ? data.experimentSchemePersons |
| | | : JSON.parse(data.experimentSchemePersons || '[]'); |
| | | |
| | | // 填充富文本编辑器内容 |
| | | this.editorContents.purpose = data.experimentObjective || ''; |
| | | this.editorContents.process = data.experimentParamRoute || ''; |
| | | |
| | | // 填充实验材料和设备 |
| | | try { |
| | | this.form.experimentMaterial = typeof data.experimentMaterial === 'string' |
| | | ? JSON.parse(data.experimentMaterial) |
| | | : data.experimentMaterial; |
| | | } catch (err) { |
| | | console.error('解析实验材料数据失败:', err); |
| | | this.form.experimentMaterial = []; |
| | | } |
| | | |
| | | try { |
| | | this.form.experimentDevice = typeof data.experimentDevice === 'string' |
| | | ? JSON.parse(data.experimentDevice) |
| | | : data.experimentDevice; |
| | | } catch (err) { |
| | | console.error('解析实验设备数据失败:', err); |
| | | this.form.experimentDevice = []; |
| | | } |
| | | |
| | | // 填充实验步骤 |
| | | try { |
| | | const stepsData = typeof data.experimentStepRecord === 'string' |
| | | ? JSON.parse(data.experimentStepRecord) |
| | | : data.experimentStepRecord; |
| | | |
| | | this.stepList = (stepsData || []).map(step => ({ |
| | | stepName: step.stepName, |
| | | content: step.content |
| | | })); |
| | | } catch (err) { |
| | | console.error('解析实验步骤数据失败:', err); |
| | | this.stepList = []; |
| | | } |
| | | |
| | | // 等待组件渲染完成后设置编辑器内容 |
| | | this.$nextTick(() => { |
| | | // 设置富文本编辑器内容 |
| | | if (this.$refs.purposeEditor) { |
| | | this.$refs.purposeEditor.setContent(this.editorContents.purpose); |
| | | } |
| | | if (this.$refs.processEditor) { |
| | | this.$refs.processEditor.setContent(this.editorContents.process); |
| | | } |
| | | |
| | | // 设置动态组件的初始数据 |
| | | if (!this.isEdit) { |
| | | if (this.$refs.materialComponent && this.form.experimentMaterial) { |
| | | this.$refs.materialComponent.setInitialData(this.form.experimentMaterial); |
| | | } |
| | | if (this.$refs.equipmentComponent && this.form.experimentDevice) { |
| | | this.$refs.equipmentComponent.setInitialData(this.form.experimentDevice); |
| | | } |
| | | |
| | | // 设置步骤内容的初始数据 |
| | | this.stepList.forEach((step, index) => { |
| | | const stepContentRef = this.$refs['stepContent' + index]; |
| | | if (stepContentRef && step.content) { |
| | | const editor = Array.isArray(stepContentRef) ? stepContentRef[0] : stepContentRef; |
| | | if (editor?.setInitialData) { |
| | | editor.setInitialData(step.content); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | } catch (error) { |
| | | this.$message.error('获取详情失败'); |
| | | console.error('获取详情失败:', error); |
| | | } |
| | | }, |
| | | handleEditMember() { |
| | | this.$refs.selectMember.open(this.participantsData, this.selectedParticipants); |
| | | // 转换数据格式为ViewDynamicComponent需要的格式 |
| | | convertToViewFormat(data) { |
| | | if (!data || !Array.isArray(data)) return []; |
| | | |
| | | return data.map(item => ({ |
| | | id: item.id || Math.random().toString(36).substr(2, 9), |
| | | type: item.type, |
| | | data: item.data |
| | | })); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | |
| | | .content-box { |
| | | padding: 0 25px; |
| | | margin-bottom: 30px; |
| | | margin-bottom: 20px; |
| | | width: 65%; |
| | | display: flex; |
| | | .content-box-left{ |
| | | flex: 1; |
| | | div{ |
| | | padding: 10px 0; |
| | | } |
| | | } |
| | | .content-box-right{ |
| | | flex: 1; |
| | | div{ |
| | | padding: 10px 0; |
| | | } |
| | | } |
| | | } |
| | | </style> |