From 069ef85293bb4baa74dd9251e8b3fd8cc4355410 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期四, 15 五月 2025 15:21:10 +0800
Subject: [PATCH] 实验方案管理详情和中止
---
laboratory/src/views/dataManagement/schemeManagement/addPlan.vue | 428 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 273 insertions(+), 155 deletions(-)
diff --git a/laboratory/src/views/dataManagement/schemeManagement/addPlan.vue b/laboratory/src/views/dataManagement/schemeManagement/addPlan.vue
index 23a85df..969c483 100644
--- a/laboratory/src/views/dataManagement/schemeManagement/addPlan.vue
+++ b/laboratory/src/views/dataManagement/schemeManagement/addPlan.vue
@@ -2,70 +2,90 @@
<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">
@@ -78,11 +98,23 @@
</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">
@@ -91,7 +123,8 @@
</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">
@@ -101,7 +134,8 @@
</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">
@@ -110,15 +144,17 @@
<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>
@@ -128,17 +164,18 @@
步骤{{ 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">
@@ -159,9 +196,9 @@
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",
@@ -209,93 +246,23 @@
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) {
// 处理实验材料数据
@@ -309,19 +276,19 @@
// 先获取所有动态组件的数据
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) => {
@@ -358,7 +325,7 @@
// 提交时间，使用 moment 格式化为指定格式
commitTime: moment().format('YYYY-MM-DD HH:mm:ss'),
};
- console.log('formData 提交数据',formData)
+ console.log('formData 提交数据', formData)
// 调用添加接口
add(formData).then(res => {
@@ -389,7 +356,7 @@
// 先获取所有动态组件的数据
this.$refs.materialComponent.submit();
this.$refs.equipmentComponent.submit();
-
+
// 获取所有步骤内容 - 添加错误检查
this.stepList.forEach((step, index) => {
const stepContentRef = this.$refs['stepContent' + index];
@@ -490,7 +457,7 @@
this.$refs.addStepDialog.setStepName(this.stepList[index].stepName);
},
handleStepContentSubmit(index, content) {
- console.log('步骤内容',content)
+ console.log('步骤内容', content)
this.stepList[index].content = content;
},
getAllEditorContent() {
@@ -616,6 +583,144 @@
},
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
+ }));
},
},
};
@@ -926,7 +1031,20 @@
.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>
\ No newline at end of file
--
Gitblit v1.7.1