| | |
| | | <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 style="display: flex; align-items: center; gap: 13px"> |
| | | <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" /> |
| | | <div>所属实验调度</div> |
| | | </div> |
| | | <el-button @click="showScheduling = true" class="el-icon-plus" type="primary"> |
| | | 选择实验调度</el-button> |
| | | </div> |
| | | </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> |
| | | <el-table-column prop="experimentCode" label="实验编号"></el-table-column> |
| | | <el-table-column prop="experimentName" label="实验名称"></el-table-column> |
| | | <el-table-column prop="experimentDate" label="通知时间"></el-table-column> |
| | | <el-table-column prop="experimentStartTime" label="实验开始时间"></el-table-column> |
| | | <el-table-column prop="experimentEndTime" label="实验结束时间"></el-table-column> |
| | | <el-table-column prop="participantsName" label="参加人员"></el-table-column> |
| | | <el-table-column prop="status" label="状态"> |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="getStatusType(scope.row.status)"> |
| | | {{ getStatusText(scope.row.status) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | </Table> |
| | | |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>所属实验调度</div> |
| | | <span>基础信息</span> |
| | | </div> |
| | | <el-button @click="showScheduling = true" class="el-icon-plus" type="primary"> |
| | | 选择实验调度</el-button> |
| | | </div> |
| | | <el-button @click="handleStopExperiment" type="danger"> |
| | | 申请终止实验</el-button> |
| | | </div> |
| | | <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> |
| | | <el-table-column prop="experimentCode" label="实验编号"></el-table-column> |
| | | <el-table-column prop="experimentName" label="实验名称"></el-table-column> |
| | | <el-table-column prop="experimentDate" label="通知时间"></el-table-column> |
| | | <el-table-column prop="experimentStartTime" label="实验开始时间"></el-table-column> |
| | | <el-table-column prop="experimentEndTime" label="实验结束时间"></el-table-column> |
| | | <el-table-column prop="participantsName" label="参加人员"></el-table-column> |
| | | <el-table-column prop="status" label="状态"> |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="getStatusType(scope.row.status)"> |
| | | {{ getStatusText(scope.row.status) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | </Table> |
| | | |
| | | <div class="header-title" style="margin-bottom: 38px"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <span>基础信息</span> |
| | | <template v-if="groupData && groupData.length > 0"> |
| | | <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 style="padding-left: 25px;margin-top: 28px;"> |
| | | <el-form-item prop="experimentDate" label="试验日期"> |
| | | |
| | | <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[0].projectName }}</div> |
| | | <div>实验编号:{{ groupTableData[0].experimentCode }}</div> |
| | | </div> |
| | | <div class="content-box-right"> |
| | | <div>项目课题方案编号: {{ groupTableData[0].projectCode }}</div> |
| | | <div>实验名称: {{ groupTableData[0].experimentName }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <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 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> |
| | | |
| | | <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> |
| | | </el-form-item> |
| | | </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> |
| | | <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: [], // 查看模式的设备数据 |
| | | }; |
| | | }, |
| | | 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: { |
| | | confirmAddRow() { |
| | | // 处理添加行的逻辑 |
| | | console.log('添加行'); |
| | | }, |
| | | submitForm() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid) { |
| | | console.log("submit!"); |
| | | } |
| | | }); |
| | | }, |
| | | addMember() { |
| | | this.$refs.selectMember.open(this.participantsData, []); |
| | | }, |
| | | memberList(i) { |
| | | const roleTypes = { |
| | | 1: '工艺工程师', |
| | | 2: '化验师', |
| | | 3: '实验员' |
| | | }; |
| | | |
| | | 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.$refs.materialComponent.submit(); |
| | | this.$refs.equipmentComponent.submit(); |
| | | |
| | | |
| | | // 获取所有步骤内容 - 添加错误检查 |
| | | this.stepList.forEach((step, index) => { |
| | | const stepContentRef = this.$refs['stepContent' + index]; |
| | | console.log('stepContentRef',stepContentRef) |
| | | 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) |
| | | console.log('材料数据', this.form.experimentMaterial) |
| | | console.log('设备数据', this.form.experimentDevice) |
| | | console.log('步骤数据', this.form.stepList) |
| | | |
| | | // 然后进行表单校验 |
| | | this.$refs.form.validate((valid) => { |
| | |
| | | // 提交时间,使用 moment 格式化为指定格式 |
| | | commitTime: moment().format('YYYY-MM-DD HH:mm:ss'), |
| | | }; |
| | | console.log('formData 提交数据',formData) |
| | | console.log('formData 提交数据', formData) |
| | | |
| | | // 调用添加接口 |
| | | add(formData).then(res => { |
| | |
| | | // 先获取所有动态组件的数据 |
| | | this.$refs.materialComponent.submit(); |
| | | this.$refs.equipmentComponent.submit(); |
| | | |
| | | |
| | | // 获取所有步骤内容 - 添加错误检查 |
| | | this.stepList.forEach((step, index) => { |
| | | const stepContentRef = this.$refs['stepContent' + index]; |
| | |
| | | this.$refs.addStepDialog.setStepName(this.stepList[index].stepName); |
| | | }, |
| | | handleStepContentSubmit(index, content) { |
| | | console.log('步骤内容',content) |
| | | console.log('步骤内容', content) |
| | | this.stepList[index].content = content; |
| | | }, |
| | | getAllEditorContent() { |
| | |
| | | }, |
| | | handleEditMember() { |
| | | this.$refs.selectMember.open(this.participantsData, this.selectedParticipants); |
| | | }, |
| | | // 加载编辑数据 |
| | | async loadEditData() { |
| | | try { |
| | | const res = await getDetail({ id: this.editId }); |
| | | console.log('编辑数据', res); |
| | | if (res) { |
| | | const data = res; |
| | | |
| | | // 填充基本表单数据 |
| | | this.form.experimentDate = data.experimentDate; |
| | | |
| | | // 填充实验调度信息 |
| | | if (data.experimentDispatch && data.experimentDispatch.id) { |
| | | this.form.dispatchId = data.experimentDispatch.id; |
| | | |
| | | // 获取组别信息 |
| | | try { |
| | | const groupRes = await getGroupByDispatchId({ dispatchId: data.experimentDispatch.id }); |
| | | if (groupRes) { |
| | | this.groupData = groupRes || []; |
| | | } |
| | | } catch (err) { |
| | | console.error('获取组别列表失败:', err); |
| | | } |
| | | |
| | | // 构建调度表格数据 |
| | | this.groupTableData = [{ ...data.experimentDispatch }]; |
| | | } |
| | | |
| | | // 填充参与人员 |
| | | if (data.experimentSchemePersons) { |
| | | this.selectedParticipants = Array.isArray(data.experimentSchemePersons) |
| | | ? data.experimentSchemePersons |
| | | : JSON.parse(data.experimentSchemePersons || '[]'); |
| | | } |
| | | |
| | | // 填充富文本编辑器内容 |
| | | this.editorContents.purpose = data.experimentObjective || ''; |
| | | this.editorContents.process = data.experimentParamRoute || ''; |
| | | |
| | | // 填充实验材料和设备(编辑模式下转换为查看格式) |
| | | if (data.experimentMaterial) { |
| | | try { |
| | | const materialData = typeof data.experimentMaterial === 'string' |
| | | ? JSON.parse(data.experimentMaterial) |
| | | : data.experimentMaterial; |
| | | this.form.experimentMaterial = materialData; |
| | | |
| | | } catch (err) { |
| | | console.error('解析实验材料数据失败:', err); |
| | | this.viewMaterialData = []; |
| | | } |
| | | } |
| | | |
| | | if (data.experimentDevice) { |
| | | try { |
| | | const deviceData = typeof data.experimentDevice === 'string' |
| | | ? JSON.parse(data.experimentDevice) |
| | | : data.experimentDevice; |
| | | this.form.experimentDevice = deviceData; |
| | | |
| | | } catch (err) { |
| | | console.error('解析实验设备数据失败:', err); |
| | | this.viewEquipmentData = []; |
| | | } |
| | | } |
| | | |
| | | // 填充实验步骤(编辑模式下步骤内容也要转换为查看格式) |
| | | if (data.experimentStepRecord) { |
| | | 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 && typeof editor.setInitialData === 'function') { |
| | | editor.setInitialData(step.content); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | } else { |
| | | this.$message.error(res.msg || '获取详情失败'); |
| | | // this.$router.go(-1); |
| | | } |
| | | } catch (error) { |
| | | this.$message.error('获取详情失败'); |
| | | console.error('获取详情失败:', error); |
| | | // this.$router.go(-1); |
| | | } |
| | | }, |
| | | |
| | | // 转换数据格式为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> |