From 0c9660562a03191d44fc779a889d3da0dc624b6d Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 25 七月 2025 10:47:19 +0800
Subject: [PATCH] 修改弹窗ui和客户反馈
---
laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue | 840 ++++++++++++++++++++++++++---------------------------------
1 files changed, 372 insertions(+), 468 deletions(-)
diff --git a/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue b/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue
index d31d6ae..a44242e 100644
--- a/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue
+++ b/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue
@@ -1,42 +1,39 @@
<template>
<div>
- <el-dialog
- title="实验方案详情"
- :visible.sync="visible"
- width="80%"
- :close-on-click-modal="false"
- @close="handleClose"
- >
+ <el-dialog title="实验方案详情" :visible="dialogVisible" width="90%" top="5vh" :close-on-click-modal="false" @close="handleClose">
<div class="approval-dialog">
<!-- 左侧审批内容 -->
<div class="approval-content">
<Card class="approval-content-card">
<template style="position: relative">
- <el-form
- ref="form"
- :model="form"
- :rules="rules"
- inline
- label-position="top"
- :disabled="type === 'view'"
- >
+ <el-form ref="form" :model="form" :rules="rules" inline label-position="top">
<div class="header-title" style="margin-bottom: 38px">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>所属实验调度</div>
+ <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="handleStopExperiment" type="danger"
+ v-if='form.status != 2 && form.status != 3 && form.status != 4 && userRole == 3'>
+ 申请终止实验</el-button>
</div>
</div>
- <Table :data="groupTableData" :total="0" :height="null">
- <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 :data="dispatchData" :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">
@@ -46,72 +43,37 @@
</div>
</div>
- <div class="add-group">
- <span>组别列表</span>
- </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="groupName"
- label="组别"
- ></el-table-column>
- <el-table-column prop="remark" label="备注"></el-table-column>
- </Table>
+ <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: 20px">
- <el-form-item prop="testTime" label="试验时间">
- <el-date-picker
- v-model="form.testTime"
- type="datetime"
- placeholder="选择日期时间"
- value-format="yyyy-MM-dd HH:mm:ss"
- />
+ <div style="padding-left: 25px;margin-top: 28px;">
+ <el-form-item prop="experimentDate" label="试验日期">
+ <el-date-picker v-model="form.experimentDate" type="datetime" :disabled="true" placeholder="选择日期时间">
+ </el-date-picker>
</el-form-item>
</div>
+
<div class="add-group">
- <div>*</div>
<span>实验人员</span>
</div>
<div class="member-list">
- <div v-for="item in 3" :key="item" class="member-list-card">
+ <div class="member-list-card">
<div class="member-item">
- <div class="member-title">
- {{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
- </div>
- <div
- :class="
- item == 1 || item == 2 || item == 3
- ? 'member-name-box'
- : 'flex1'
- "
- >
- <div
- :class="
- item == 1 || item == 2 || item == 3
- ? 'member-name-box'
- : 'member-name-box-2'
- "
- >
- <div
- v-for="i in memberList(item)"
- :key="i"
- class="member-name"
- >
- 张三
+ <div class="member-title">实验员</div>
+ <div class="flex">
+ <div class="member-name-box-2">
+ <div v-for="i in selectedParticipants" :key="i.id" class="member-name">
+ {{ i.nickName }}
</div>
</div>
- </div>
- <div class="member-change" v-if="type !== 'view'">
- <div class="member-change-btn">修改</div>
</div>
</div>
</div>
@@ -123,12 +85,10 @@
<div>一、实验目的</div>
</div>
</div>
- <AiEditor
- ref="purposeEditor"
- v-model="form.purpose"
- height="200px"
- placeholder="请输入实验目的..."
- />
+ <div class="content-box">
+ <AiEditor ref="purposeEditor" :readOnly="true" :value="form.experimentObjective" height="400px"
+ placeholder="请输入实验目的..." />
+ </div>
<div class="header-title" style="margin-bottom: 38px">
<div class="header-title-left">
@@ -136,12 +96,10 @@
<div>二、工艺参数及路线</div>
</div>
</div>
- <AiEditor
- ref="processEditor"
- v-model="form.process"
- height="200px"
- placeholder="请输入工艺参数及路线..."
- />
+ <div class="content-box">
+ <AiEditor ref="processEditor" :readOnly="true" :value="form.experimentParamRoute" height="400px"
+ placeholder="请输入工艺参数及路线..." />
+ </div>
<div class="header-title" style="margin-bottom: 38px">
<div class="header-title-left">
@@ -149,14 +107,10 @@
<div>三、实验材料及设备</div>
</div>
</div>
- <ViewDynamicComponent
- title="实验材料"
- :components="form.materialsAndEquipment || []"
- />
- <ViewDynamicComponent
- title="实验所用设备"
- :components="form.materialsAndEquipment || []"
- />
+ <DynamicComponent ref="materialComponent" title="实验材料" :dialogCanEdit="false"
+ :dataSource="form.experimentMaterial" :editable="false" />
+ <DynamicComponent ref="equipmentComponent" title="实验所用设备" :dialogCanEdit="false"
+ :dataSource="form.experimentDevice" :editable="false" />
<div class="header-title" style="margin-bottom: 38px">
<div class="header-title-left">
@@ -165,53 +119,44 @@
</div>
</div>
- <div class="step-list" v-for="(item, idx) in form.operationSteps" :key="idx">
+ <div class="step-list" v-for="(item, idx) in stepList" :key="idx">
<div class="step-list-item">
<div class="step-list-item-title">
步骤{{ idx + 1 }}：{{ item.stepName }}
</div>
</div>
- <ViewDynamicComponent
- :ref="'stepContent' + idx"
- :components="[item]"
- />
+ <DynamicComponent :dialogCanEdit="false" :ref="'stepContent' + idx" :dataSource="item.content"
+ :editable="false" />
</div>
</el-form>
</template>
</Card>
</div>
<!-- 右侧审批流程 -->
- <div class="approval-flow" v-if="type === 'view'">
+ <div class="approval-flow" v-if="showApprovalFlow">
<div class="flow-content">
- <approval-process
- :status="form.status"
- :submit-time="form.createTime"
- :approver="form.approver"
- :approve-time="form.approveTime"
- />
+ <approval-process :processData="approvalProcessData" />
</div>
</div>
</div>
</el-dialog>
- <SignatureCanvas
- :visible="signatureDialogVisible"
- @confirm="handleSignatureConfirm"
- />
+ <SignatureCanvas :visible="signatureDialogVisible" @confirm="handleSignatureConfirm" />
</div>
</template>
<script>
import ApprovalProcess from "@/components/approvalProcess";
import SignatureCanvas from "@/components/SignatureCanvas.vue";
-import ViewDynamicComponent from "@/components/DynamicComponent/ViewDynamicComponent.vue";
-import AiEditor from "@/components/AiEditor/index.vue";
+import DynamicComponent from "@/components/DynamicComponent";
+import AiEditor from "@/components/AiEditor";
+import { getDetail, getGroupByDispatchId } from "../service";
export default {
name: "ApprovalDialog",
components: {
ApprovalProcess,
SignatureCanvas,
- ViewDynamicComponent,
+ DynamicComponent,
AiEditor,
},
props: {
@@ -230,221 +175,88 @@
},
data() {
return {
+ dialogVisible: false,
form: {
- planName: "",
- planCode: "",
- stage: "",
- testDate: "",
- testName: "",
- testCode: "",
- testTime: "",
- creator: "",
- createTime: "",
- approvalComment: "",
- status: "approved",
- approver: "",
- approveTime: "",
- materialsAndEquipment: [
- {
- id: 1,
- type: "richText",
- data: {
- content:
- "<p>1. 实验材料说明</p><p>2. 设备使用说明</p><p>3. 安全注意事项</p>",
- },
- },
- {
- id: 2,
- type: "customTable",
- data: {
- headers: [
- { name: "材料名称", type: "text" },
- { name: "规格", type: "text" },
- { name: "数量", type: "text" },
- { name: "用途", type: "text" },
- ],
- rows: [
- {
- 材料名称: "催化剂A",
- 规格: "工业级",
- 数量: "100g",
- 用途: "反应催化剂",
- updateTime: "2024-01-01 12:00:00",
- },
- {
- 材料名称: "溶剂B",
- 规格: "分析纯",
- 数量: "500ml",
- 用途: "反应溶剂",
- updateTime: "2024-01-01 12:00:00",
- },
- ],
- },
- },
- {
- id: 3,
- type: "fileUpload",
- data: {
- fileList: [
- {
- name: "材料安全说明书.pdf",
- url: "https://example.com/msds.pdf",
- },
- {
- name: "设备操作手册.docx",
- url: "https://example.com/manual.docx",
- },
- ],
- },
- },
- {
- id: 4,
- type: "imageGallery",
- data: {
- images: [
- {
- url: "https://example.com/equipment1.jpg",
- title: "实验设备1",
- description: "主要反应设备",
- },
- {
- url: "https://example.com/equipment2.jpg",
- title: "实验设备2",
- description: "辅助设备",
- },
- ],
- },
- },
- ],
- operationSteps: [
- {
- id: 7,
- type: "richText",
- data: {
- content:
- "<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>",
- },
- },
- {
- id: 8,
- type: "customTable",
- data: {
- headers: [
- { name: "步骤", type: "text" },
- { name: "操作内容", type: "text" },
- { name: "操作人", type: "user" },
- { name: "操作图片", type: "image" },
- ],
- rows: [
- {
- 步骤: "步骤1",
- 操作内容: "称取催化剂",
- 操作人: ["1"],
- 操作图片: [{ url: "https://example.com/step1.jpg" }],
- updateTime: "2024-01-01 12:00:00",
- },
- {
- 步骤: "步骤2",
- 操作内容: "加入溶剂",
- 操作人: ["2"],
- 操作图片: [{ url: "https://example.com/step2.jpg" }],
- updateTime: "2024-01-01 12:00:00",
- },
- ],
- },
- },
- ],
+ projectName: "", // 项目课题方案名称
+ projectCode: "", // 项目课题方案编号
+ experimentCode: "", // 实验编号
+ experimentName: "", // 实验名称
+ experimentDate: "", // 实验日期
+ experimentMaterial: [], // 实验材料
+ experimentDevice: [], // 实验设备
+ experimentObjective: "", // 实验目的
+ experimentParamRoute: "", // 工艺参数及路线
+ createBy: "", // 创建人
+ createTime: "", // 创建时间
+ status: "", // 状态
+ approver: "", // 审批人
+ approveTime: "", // 审批时间
},
rules: {
- planName: [
- {
- required: true,
- message: "请输入项目课题方案名称",
- trigger: "blur",
- },
- ],
- planCode: [
- {
- required: true,
- message: "请输入项目课题方案编号",
- trigger: "blur",
- },
- ],
- stage: [{ required: true, message: "请输入项目阶段", trigger: "blur" }],
- testDate: [
- { required: true, message: "请选择试验日期", trigger: "change" },
- ],
- testName: [
- { required: true, message: "请输入实验名称", trigger: "blur" },
- ],
- testCode: [
- { required: true, message: "请输入实验编号", trigger: "blur" },
- ],
testTime: [
{ required: true, message: "请选择试验时间", trigger: "change" },
],
},
imgSrc: "",
signatureDialogVisible: false,
- status: "1",
remark: "",
- groupTableData: [],
- taskTableData: [],
+ groupData: [],
+ dispatchData: [], // 实验调度数据
+ stepList: [],
+ selectedParticipants: [], // 实验参与人员
+ showApprovalFlow: false,
+ approvalProcessData: [],
+ userRole: '',
};
},
- computed: {
- dialogTitle() {
- return this.type === "approve" ? "确认实验调度" : "实验调度详情";
- },
- },
watch: {
+ visible: {
+ handler(val) {
+ this.dialogVisible = val;
+ if (val && this.data && this.data.id) {
+ // 弹窗打开时，确保数据已获取
+ this.getPlanDetail(this.data.id);
+ const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+ this.userRole = userInfo.roleType || '';
+ }
+ },
+ immediate: true,
+ },
data: {
handler(val) {
- if (val) {
- // 深拷贝数据，避免直接修改props
- this.form = JSON.parse(
- JSON.stringify({
- ...this.form,
- ...val,
- // 确保这些字段存在，如果不存在则使用默认值
- materialsAndEquipment: val.materialsAndEquipment || [],
- operationSteps: val.operationSteps || [],
- })
- );
- console.log("接收到的数据：", this.form);
+ if (val && val.id) {
+ // 当接收到数据且有ID时，调用获取详情接口
+ this.getPlanDetail(val.id);
}
},
immediate: true,
deep: true,
},
- visible: {
- handler(val) {
- if (val && this.type === "view") {
- // 当弹窗打开且是查看模式时，获取详情数据
- this.getPlanDetail();
- }
- },
- immediate: true,
- },
},
methods: {
- memberList(i) {
- switch (i) {
- case 1:
- return [1];
- case 2:
- return [1];
- case 3:
- return [1, 2, 3, 4, 5, 6, 7, 8];
- case 4:
- return [1, 2, 3, 4, 5, 6, 7, 8];
- default:
- break;
- }
+ handleStopExperiment() {
+ this.$router.push("/dataManagement/scheme-management/stop-experiment?id=" + this.data.id);
+ },
+ getStatusType(status) {
+ const statusMap = {
+ "-1": "info",
+ "1": "warning",
+ "2": "success",
+ "3": "info"
+ };
+ return statusMap[status] || "info";
+ },
+ getStatusText(status) {
+ const statusMap = {
+ "-1": "草稿箱",
+ "1": "待确认",
+ "2": "已确认",
+ "3": "已封存"
+ };
+ return statusMap[status] || "未知";
},
handleClose() {
- this.$emit("update:visible", false);
- this.form.approvalComment = "";
+ this.$emit('update:visible', false);
},
handleApprove() {
if (!this.form.approvalComment) {
@@ -466,139 +278,191 @@
status: "rejected",
});
},
- memberList(item) {
- return item === 1 ? 2 : item === 2 ? 3 : 1;
- },
openSignature() {
this.signatureDialogVisible = true;
},
handleSignatureConfirm(imageData) {
- console.log("imageData imageData", imageData);
this.signatureDialogVisible = false;
this.imgSrc = imageData;
-
- // 这里处理签名确认后的逻辑
- // this.$confirm('确认该实验调度吗？', '提示', {
- // confirmButtonText: '确定',
- // cancelButtonText: '取消',
- // type: 'warning'
- // }).then(() => {
- // // 这里可以将签名图片数据(imageData)连同其他数据一起提交到后端
- // this.$message.success('确认成功');
- // this.signatureDialogVisible = false;
- // this.getTableData();
- // }).catch(() => {
- // this.signatureDialogVisible = false;
- // });
},
// 获取方案详情
- async getPlanDetail() {
+ async getPlanDetail(id) {
try {
- // TODO: 替换为实际的接口调用
- // const { data } = await this.$api.getPlanDetail({ planCode: this.data.planCode });
+ const res = await getDetail({ id });
+ if (!res) {
+ this.$message.error('获取方案详情失败');
+ this.handleClose();
+ return;
+ }
+ if (res.stopReason) {
+ this.showApprovalFlow = true;
+ //中止实验申请
+ let processData = [];
+ processData.push({
+ type: "primary",
+ mode: "list",
+ fields: [
+ { label: "提交人：", value: res.updateBy || "" },
+ { label: "提交时间：", value: res.createTime || "" },
+ ],
+ });
+ if (res.status == 4 || res.status == 3) {
+ processData.push({
+ type: 'primary',
+ mode: "list",
+ fields: [
+ {
+ label: "审核结果：",
+ value:
+ res.status == 3
+ ? "通过"
+ : res.status == 4
+ ? "驳回"
+ : "待审批",
+ },
+ { label: "审批意见：", value: res.auditRemark || "" },
+ { label: "审核人：", value: res.auditPersonName || "" },
+ { label: "审核时间：", value: res.auditTime || "" },
+ ],
+ });
+ } else {
+ processData.push({
+ type: "warning",
+ mode: "list",
+ fields: [
+ { label: "等待审核" },
+ ],
+ });
+ }
+ this.approvalProcessData = processData;
+ }
- // 模拟接口返回数据
- const mockDetailData = {
- planCode: this.data.planCode,
- planName: "2024年度实验室设备升级方案",
- stage: "设备升级实验",
- testDate: "2024-03-15",
- testTime: "2024-03-15 14:00:00",
- tester: "张三",
- creator: "张三",
- createTime: "2024-03-15",
- status: "pending",
- approver: "李四",
- approveTime: "2024-03-16",
- materialsAndEquipment: [
- {
- id: 1,
- type: "richText",
- data: {
- content:
- "<p>1. 实验材料说明</p><p>2. 设备使用说明</p><p>3. 安全注意事项</p>",
- },
- },
- {
- id: 2,
- type: "customTable",
- data: {
- headers: [
- { name: "材料名称", type: "text" },
- { name: "规格", type: "text" },
- { name: "数量", type: "text" },
- { name: "用途", type: "text" },
- ],
- rows: [
- {
- 材料名称: "催化剂A",
- 规格: "工业级",
- 数量: "100g",
- 用途: "反应催化剂",
- updateTime: "2024-01-01 12:00:00",
- },
- {
- 材料名称: "溶剂B",
- 规格: "分析纯",
- 数量: "500ml",
- 用途: "反应溶剂",
- updateTime: "2024-01-01 12:00:00",
- },
- ],
- },
- },
- {
- id: 3,
- type: "fileUpload",
- data: {
- fileList: [
- {
- name: "材料安全说明书.pdf",
- url: "https://example.com/msds.pdf",
- },
- {
- name: "设备操作手册.docx",
- url: "https://example.com/manual.docx",
- },
- ],
- },
- },
- {
- id: 4,
- type: "imageUpload",
- data: {
- images: [
- {
- url: "https://example.com/equipment1.jpg",
- title: "实验设备1",
- description: "主要反应设备",
- },
- {
- url: "https://example.com/equipment2.jpg",
- title: "实验设备2",
- description: "辅助设备",
- },
- ],
- },
- },
- ],
- operationSteps: [
- {
- id: 4,
- type: "richText",
- data: {
- content:
- "<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>",
- },
- },
- ],
- };
-
- // 更新表单数据
+ // 填充基本表单数据
this.form = {
...this.form,
- ...mockDetailData,
+ projectName: res.projectName,
+ projectCode: res.projectCode,
+ experimentCode: res.experimentCode,
+ experimentName: res.experimentName,
+ experimentDate: res.experimentDate,
+ createBy: res.createBy,
+ createTime: res.createTime,
+ status: res.status,
+ experimentObjective: res.experimentObjective || '',
+ experimentParamRoute: res.experimentParamRoute || '',
};
+
+ // 构建实验调度数据
+ if (res.experimentDispatch) {
+ this.dispatchData = [res.experimentDispatch];
+ }
+
+ // 填充组别数据
+ if (res.dispatchId) {
+ try {
+ const groupRes = await getGroupByDispatchId({ dispatchId: res.dispatchId });
+ if (groupRes) {
+ this.groupData = groupRes || [];
+ }
+ } catch (err) {
+ console.error('获取组别列表失败:', err);
+ }
+ }
+
+ // 填充实验材料和设备
+ if (res.experimentMaterial) {
+ try {
+ const materialData = typeof res.experimentMaterial === 'string'
+ ? JSON.parse(res.experimentMaterial)
+ : res.experimentMaterial;
+ this.form.experimentMaterial = materialData;
+
+ // 为DynamicComponent设置初始数据
+ // this.$nextTick(() => {
+ // if (this.$refs.materialComponent) {
+ // this.$refs.materialComponent.setInitialData(materialData);
+ // }
+ // });
+ } catch (err) {
+ console.error('解析实验材料数据失败:', err);
+ }
+ }
+
+ if (res.experimentDevice) {
+ try {
+ const deviceData = typeof res.experimentDevice === 'string'
+ ? JSON.parse(res.experimentDevice)
+ : res.experimentDevice;
+ this.form.experimentDevice = deviceData;
+
+ // 为DynamicComponent设置初始数据
+ this.$nextTick(() => {
+ // if (this.$refs.equipmentComponent) {
+ // this.$refs.equipmentComponent.setInitialData(deviceData);
+ // }
+ });
+ } catch (err) {
+ console.error('解析实验设备数据失败:', err);
+ }
+ }
+
+ // 填充实验步骤
+ if (res.experimentStepRecord) {
+ try {
+ const stepsData = typeof res.experimentStepRecord === 'string'
+ ? JSON.parse(res.experimentStepRecord)
+ : res.experimentStepRecord;
+
+ this.stepList = (stepsData || []).map(step => ({
+ stepName: step.stepName,
+ content: step.content
+ }));
+
+ // 设置步骤内容的初始数据
+ this.$nextTick(() => {
+ // 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);
+ // }
+ // }
+ // });
+ });
+ } catch (err) {
+ console.error('解析实验步骤数据失败:', err);
+ this.stepList = [];
+ }
+ }
+
+ // 设置实验人员
+ if (res.experimentSchemePersons) {
+ try {
+ const participantsData = typeof res.experimentSchemePersons === 'string'
+ ? JSON.parse(res.experimentSchemePersons)
+ : res.experimentSchemePersons;
+
+ this.selectedParticipants = participantsData || [];
+ } catch (err) {
+ console.error('解析实验人员数据失败:', err);
+ this.selectedParticipants = [];
+ }
+ }
+
+
+
+
+ // 更新编辑器内容
+ this.$nextTick(() => {
+ if (this.$refs.purposeEditor) {
+ this.$refs.purposeEditor.setContent(this.form.experimentObjective);
+ }
+ if (this.$refs.processEditor) {
+ this.$refs.processEditor.setContent(this.form.experimentParamRoute);
+ }
+ });
+
} catch (error) {
console.error("获取方案详情失败：", error);
this.$message.error("获取方案详情失败");
@@ -614,24 +478,57 @@
border-bottom: 1px solid #e4e7ed;
}
+::v-deep .el-dialog__body {
+ // padding: 20px;
+
+ max-height: 80vh;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 1200px) {
+ ::v-deep .el-dialog__body {
+ max-height: none;
+ overflow: auto;
+ }
+}
+
.approval-dialog {
display: flex;
- height: 60vh;
+ min-height: 60vh;
+ max-height: 78vh;
+ padding: 20px;
+ overflow: hidden;
+
+ @media screen and (max-width: 1200px) {
+ flex-direction: column;
+ height: auto;
+
+ .approval-content,
+ .approval-flow {
+ width: 100%;
+ margin-right: 0;
+ margin-bottom: 20px;
+ height: 50vh;
+ }
+ }
.approval-content {
- flex: 1;
+ flex: 7;
margin-right: 20px;
background: #ffffff;
box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
border-radius: 10px;
+ overflow-y: auto;
}
.approval-flow {
- padding: 40px 20px;
- width: 405px;
+ flex: 3;
+ max-width: 305px;
+ padding: 20px 0px;
background: #ffffff;
box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
border-radius: 10px;
+ overflow-y: auto;
.flow-title {
font-size: 16px;
@@ -656,7 +553,7 @@
}
.approval-content-card {
- height: calc(100% - 100px) !important;
+ height: calc(100% - 10px) !important;
box-shadow: none !important;
}
@@ -762,7 +659,7 @@
}
.groupTable {
- width: 65%;
+ width: 85%;
padding-left: 40px;
}
@@ -779,41 +676,33 @@
margin-left: 38px;
.member-list-card {
- width: 280px;
- height: 300px;
+ width: 340px;
+ height: 400px;
border-radius: 8px;
border: 1px solid #dcdfe6;
&:nth-child(1) {
- background: linear-gradient(
- to bottom,
- rgba(4, 156, 154, 0.2) 0%,
- rgba(5, 242, 194, 0) 70%
- );
+ background: linear-gradient(to bottom,
+ rgba(4, 156, 154, 0.2) 0%,
+ rgba(5, 242, 194, 0) 70%);
}
&:nth-child(2) {
- background: linear-gradient(
- to bottom,
- rgba(5, 160, 193, 0.2) 0%,
- rgba(5, 242, 194, 0) 70%
- );
+ background: linear-gradient(to bottom,
+ rgba(5, 160, 193, 0.2) 0%,
+ rgba(5, 242, 194, 0) 70%);
}
&:nth-child(3) {
- background: linear-gradient(
- to bottom,
- rgba(255, 77, 79, 0.2) 0%,
- rgba(255, 242, 194, 0) 70%
- );
+ background: linear-gradient(to bottom,
+ rgba(255, 77, 79, 0.2) 0%,
+ rgba(255, 242, 194, 0) 70%);
}
&:nth-child(4) {
- background: linear-gradient(
- to bottom,
- rgba(250, 199, 20, 0.21) 0%,
- rgba(255, 242, 194, 0) 70%
- );
+ background: linear-gradient(to bottom,
+ rgba(250, 199, 20, 0.21) 0%,
+ rgba(255, 242, 194, 0) 70%);
}
.member-item {
@@ -891,11 +780,13 @@
.step-list {
background: #eff8fa;
padding: 20px;
+
.step-list-item {
display: flex;
justify-content: space-between;
padding: 25px;
background: #ffffff;
+
.step-list-item-title {
font-weight: 500;
font-size: 14px;
@@ -907,13 +798,26 @@
}
}
-.dialog-footer {
- align-items: center;
+.content-box {
+ padding: 0 25px;
+ margin-bottom: 20px;
+ width: 65%;
display: flex;
- justify-content: center;
- button {
- width: 150px;
+ .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