You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
610 lines
17 KiB
610 lines
17 KiB
<template>
|
|
<div class="step-container">
|
|
<el-button v-if="isShowAddStep()" type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button>
|
|
<div class="step-list">
|
|
<div v-for="(step, index) in steps" :key="step.id" class="step-list-item">
|
|
|
|
|
|
<div class="step-content">
|
|
<span class="step-title">{{ index + 1 }}</span>
|
|
<HandleFormItem type="select" placeholder="请选择" class="step-type-select" :item="stepSelectConfig"
|
|
v-model="step.type" @change="onTypeChange(index)" />
|
|
|
|
<!-- 根据步骤类型显示对应的表单 -->
|
|
<!-- 根据步骤类型显示对应的表单 -->
|
|
<component class="flex1" :is="getStepComponent(step.type)" :formData="step.formData"
|
|
@update="onFormUpdate(index, $event)" :ref="'stepCompRef_' + index">
|
|
</component>
|
|
<div class="step-header-item">
|
|
<el-popconfirm
|
|
@confirm="removeStep(index)"
|
|
title="确定删除当前步骤吗？"
|
|
>
|
|
<el-button type="text" slot="reference" icon="el-icon-delete"
|
|
class="delete-btn"></el-button>
|
|
</el-popconfirm>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HandleFormItem from './HandleFormItem.vue';
|
|
import Czdd from './StepComponents/ry/czdd.vue';//溶液-操作地点
|
|
import Czhj from './StepComponents/ry/czhj.vue';//溶液-操作方法
|
|
import Xzrq from './StepComponents/ry/xzrq.vue';//溶液-选择容器
|
|
import Jrry from './StepComponents/ry/jrry.vue';//溶液-加入溶液
|
|
import Tpjydd from './StepComponents/ry/tpjydd.vue';//溶液-天平校验(单点)
|
|
import Tpjysd from './StepComponents/ry/tpjysd.vue';//溶液-天平校验(双点)
|
|
import Qywz from './StepComponents/ry/qywz.vue';//溶液-取用物质
|
|
import Clfcz from './StepComponents/ry/clfcz.vue';//溶液-称量（非传值）
|
|
import Clcz from './StepComponents/ry/clcz.vue';//溶液-称量（传值）
|
|
import Bdtj from './StepComponents/ry/bdtj.vue';//溶液-标定（体积）
|
|
import Bdzl from './StepComponents/ry/bdzl.vue';//溶液-标定（质量）
|
|
import Tjphcz from './StepComponents/ry/tjphcz.vue';//溶液-调节PH(传值)
|
|
import Tjphfcz from './StepComponents/ry/tjphfcz.vue';//溶液-调节PH(非传值)
|
|
import Lx from './StepComponents/ry/lx.vue';//溶液-离心
|
|
import Hwhy from './StepComponents/ry/hwhy.vue';//溶液-恒温混匀
|
|
import Zyhy from './StepComponents/ry/zyhy.vue';//溶液-振摇混匀
|
|
import Wxhy from "./StepComponents/ry/wxhy.vue";//溶液-涡旋混匀
|
|
import Ddhy from "./StepComponents/ry/ddhy.vue";//溶液-颠倒混匀
|
|
import Ym from "./StepComponents/ry/ym.vue";//溶液-研磨
|
|
import Jb from "./StepComponents/ry/jb.vue";//溶液-搅拌
|
|
import Jrjb from "./StepComponents/ry/jrjb.vue";//溶液-加热搅拌
|
|
import Cs from "./StepComponents/ry/cs.vue";//溶液-超声
|
|
import Sy from "./StepComponents/ry/sy.vue";//溶液-水浴
|
|
import Dc from "./StepComponents/ry/dc.vue";//溶液-氮吹
|
|
import Jd from "./StepComponents/ry/jd.vue";//溶液-解冻
|
|
import Jz from "./StepComponents/ry/jz.vue";//溶液-静置
|
|
import Glzd from "./StepComponents/ry/glzd.vue";//溶液-过滤(自动)
|
|
import Glsd from "./StepComponents/ry/glsd.vue";//溶液-过滤(手动)
|
|
import Fy from "./StepComponents/ry/fy.vue";//溶液-孵育
|
|
import Qcyy from "./StepComponents/ry/qcyy.vue";//溶液-取出原药
|
|
import Frdrq from "./StepComponents/ry/frdrq.vue";//溶液-复溶(多容器)
|
|
import Fr from "./StepComponents/ry/fr.vue";//溶液-复溶
|
|
import Hb from "./StepComponents/ry/hb.vue";//溶液-合并
|
|
import Rs from "./StepComponents/ry/rs.vue";//溶液-染色
|
|
import Js from "./StepComponents/ry/js.vue";//溶液-计数
|
|
import Mj from "./StepComponents/ry/mj.vue";//溶液-灭菌
|
|
import Fs from "./StepComponents/ry/fs.vue";//溶液-复苏
|
|
import Fb from "./StepComponents/ry/fb.vue";//溶液-封板
|
|
|
|
|
|
|
|
const stepTypes = [
|
|
{ label: '操作地点', value: 'czdd' },
|
|
{ label: '操作方法', value: 'czhj' },
|
|
{ label: '选择容器', value: 'xzrq' },
|
|
{ label: '加入溶液', value: 'jrry' },
|
|
{ label: '天平校验(单点)', value: 'tpjydd' },
|
|
{ label: '天平校验(双点)', value: 'tpjysd' },
|
|
{ label: '取用物质', value: 'qywz' },
|
|
{ label: '称量(非传值)', value: 'clfcz' },
|
|
{ label: '称量(传值)', value: 'clcz' },
|
|
{ label: '标定(体积)', value: 'bdtj' },
|
|
{ label: '标定(质量)', value: 'bdzl' },
|
|
{ label: '调节PH(传值)', value: 'tjphcz' },
|
|
{ label: '调节PH(非传值)', value: 'tjphfcz' },
|
|
{ label: '离心', value: 'lx' },
|
|
{ label: '恒温混匀', value: 'hwhy' },
|
|
{ label: '振摇混匀', value: 'zyhy' },
|
|
{ label: '涡旋混匀', value: 'wxhy' },
|
|
{ label: '颠倒混匀', value: 'ddhy' },
|
|
{ label: '研磨', value: 'ym' },
|
|
{ label: '搅拌', value: 'jb' },
|
|
{ label: '加热搅拌', value: 'jrjb' },
|
|
{ label: '超声', value: 'cs' },
|
|
{ label: '水浴', value: 'sy' },
|
|
{ label: '氮吹', value: 'dc' },
|
|
{ label: '解冻', value: 'jd' },
|
|
{ label: '静置', value: 'jz' },
|
|
{ label: '过滤(自动)', value: 'glzd' },
|
|
{ label: '过滤(手动)', value: 'glsd' },
|
|
{ label: '孵育', value: 'fy' },
|
|
{ label: '取出原药', value: 'qcyy' },
|
|
{ label: '复溶(多容器)', value: 'frdrq' },
|
|
{ label: '复溶', value: 'fr' },
|
|
{ label: '合并', value: 'hb' },
|
|
{ label: '染色', value: 'rs' },
|
|
{ label: '计数', value: 'js' },
|
|
{ label: '灭菌', value: 'mj' },
|
|
{ label: '复苏', value: 'fs' },
|
|
{ label: '封板', value: 'fb' },
|
|
|
|
];
|
|
|
|
export default {
|
|
inject: ['templateFillType'],
|
|
name: 'Step',
|
|
props: {
|
|
formData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
stepSelectConfig: {
|
|
options: stepTypes,
|
|
fillType: "preFill",
|
|
placeholder: "请选择步骤类型"
|
|
},
|
|
steps: [],
|
|
stepId: 1,
|
|
componentMap: null
|
|
}
|
|
},
|
|
components: {
|
|
HandleFormItem,
|
|
Czdd,
|
|
Czhj,
|
|
Xzrq,
|
|
Jrry,
|
|
Tpjydd,
|
|
Tpjysd,
|
|
Qywz,
|
|
Clfcz,
|
|
Clcz,
|
|
Bdtj,
|
|
Bdzl,
|
|
Tjphcz,
|
|
Tjphfcz,
|
|
Lx,
|
|
Hwhy,
|
|
Zyhy,
|
|
Wxhy,
|
|
Ddhy,
|
|
Ym,
|
|
Jb,
|
|
Jrjb,
|
|
Cs,
|
|
Sy,
|
|
Dc,
|
|
Jd,
|
|
Jz,
|
|
Glzd,
|
|
Glsd,
|
|
Fy,
|
|
Qcyy,
|
|
Frdrq,
|
|
Fr,
|
|
Hb,
|
|
Rs,
|
|
Js,
|
|
Mj,
|
|
Fs,
|
|
Fb,
|
|
},
|
|
computed: {
|
|
stepComponentMap() {
|
|
if (!this.componentMap) {
|
|
this.componentMap = {
|
|
'czdd': 'Czdd',
|
|
'czhj': 'Czhj',
|
|
'xzrq': 'Xzrq',
|
|
'jrry': 'Jrry',
|
|
'tpjydd': 'Tpjydd',
|
|
'tpjysd': 'Tpjysd',
|
|
'qywz': 'Qywz',
|
|
'clfcz': 'Clfcz',
|
|
'clcz': 'Clcz',
|
|
'bdtj': 'Bdtj',
|
|
'bdzl': 'Bdzl',
|
|
'tjphcz': 'Tjphcz',
|
|
'tjphfcz': 'Tjphfcz',
|
|
'lx': 'Lx',
|
|
'hwhy': 'Hwhy',
|
|
'zyhy': 'Zyhy',
|
|
'wxhy': 'Wxhy',
|
|
'ddhy': 'Ddhy',
|
|
'ym': 'Ym',
|
|
'jb': 'Jb',
|
|
'jrjb': 'Jrjb',
|
|
'sy': 'Sy',
|
|
'cs': 'Cs',
|
|
'dc': 'Dc',
|
|
'jd': 'Jd',
|
|
'jz': 'Jz',
|
|
'glzd': 'Glzd',
|
|
'glsd': 'Glsd',
|
|
'fy': 'Fy',
|
|
'qcyy': 'Qcyy',
|
|
'frdrq': 'Frdrq',
|
|
'fr': 'Fr',
|
|
'hb': 'Hb',
|
|
'rs': 'Rs',
|
|
'js': 'Js',
|
|
'mj': 'Mj',
|
|
'fs': 'Fs',
|
|
'fb': 'Fb',
|
|
}
|
|
}
|
|
return this.componentMap
|
|
}
|
|
},
|
|
|
|
created() {
|
|
// // 初始化步骤数据
|
|
// if (this.value && this.value.length > 0) {
|
|
// this.steps = this.value.map((step) => ({
|
|
// id: this.stepId++,
|
|
// type: step.type || '',
|
|
// formData: step.formData || {}
|
|
// }))
|
|
// } else {
|
|
// // 默认添加一个步骤
|
|
// this.addStep()
|
|
// }
|
|
},
|
|
watch: {
|
|
// steps: {
|
|
// handler(newVal) {
|
|
// this.$emit('input', newVal.map(step => ({
|
|
// type: step.type,
|
|
// formData: step.formData
|
|
// })))
|
|
// },
|
|
// deep: true
|
|
// },
|
|
formData: {
|
|
handler(newVal) {
|
|
if (!newVal || newVal.length === 0) return
|
|
this.steps = newVal;
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
isShowAddStep() {
|
|
return this.templateFillType === 'preFill';
|
|
},
|
|
addStep() {
|
|
try {
|
|
this.steps.push({
|
|
id: this.stepId++,
|
|
type: '',
|
|
formData: {}
|
|
})
|
|
this.$emit('step-added', this.steps.length)
|
|
} catch (error) {
|
|
console.error('添加步骤失败:', error)
|
|
this.$message.error('添加步骤失败，请重试')
|
|
}
|
|
},
|
|
|
|
removeStep(index) {
|
|
|
|
if (this.steps.length > 1) {
|
|
const removedStep = this.steps.splice(index, 1)[0]
|
|
this.$emit('step-removed', { index, step: removedStep, remaining: this.steps.length })
|
|
} else {
|
|
this.$message.warning('至少需要保留一个步骤')
|
|
}
|
|
},
|
|
|
|
onTypeChange(index) {
|
|
// 切换步骤类型时重置表单数据，并确保数据更新
|
|
const oldType = this.steps[index].type
|
|
this.$set(this.steps[index], 'formData', {})
|
|
// 可选：添加类型变化的回调
|
|
this.$emit('step-type-changed', {
|
|
index,
|
|
newType: this.steps[index].type,
|
|
oldType
|
|
})
|
|
},
|
|
|
|
onFormUpdate(stepIndex, formData) {
|
|
this.steps[stepIndex].formData = formData
|
|
},
|
|
|
|
getStepComponent(type) {
|
|
// 使用计算属性中的映射，提高性能
|
|
return this.stepComponentMap[type]
|
|
},
|
|
|
|
// 公共方法：获取所有步骤数据
|
|
getFormData() {
|
|
return new Promise(async (resolve, reject) => {
|
|
// 检查是否有步骤数据
|
|
if (this.steps.length === 0) {
|
|
// this.$message.error(this.$t('template.common.addStepError'))
|
|
reject({ errorType: "step" });
|
|
return
|
|
}
|
|
|
|
try {
|
|
const stepData = await Promise.all(
|
|
this.steps.map(async (step, index) => {
|
|
const stepComponentRef = this.$refs[`stepCompRef_${index}`];
|
|
if (stepComponentRef && stepComponentRef.length > 0) {
|
|
try {
|
|
const stepFormData = await stepComponentRef[0].getFormData();
|
|
return { type: step.type, formData: stepFormData }
|
|
} catch (error) {
|
|
// 如果某个步骤的getFormData方法失败，抛出错误
|
|
throw error;
|
|
}
|
|
} else {
|
|
// 如果没有找到组件引用，返回原始数据
|
|
return { type: step.type, formData: step.formData }
|
|
}
|
|
})
|
|
);
|
|
resolve({ stepData });
|
|
} catch (error) {
|
|
reject(error);
|
|
}
|
|
})
|
|
},
|
|
getStepResource(){
|
|
const sj = [];
|
|
let yq = [];
|
|
const stepData = this.steps.map((step, index) => {
|
|
const stepComponentRef = this.$refs[`stepCompRef_${index}`];
|
|
if(stepComponentRef && stepComponentRef.length > 0){
|
|
const {sjResource,yqResource} = this.$refs[`stepCompRef_${index}`][0]?.getSjResource();
|
|
if(sjResource && sjResource.length > 0){
|
|
sj.push(...sjResource);
|
|
}
|
|
if(yqResource && yqResource.length > 0){
|
|
yq.push(...yqResource);
|
|
}
|
|
}
|
|
})
|
|
|
|
// 对sj数组根据type和value值去重，并将yl按单位换算后累加
|
|
const uniqueSj = [];
|
|
const sjMap = new Map();
|
|
|
|
// 体积单位转换为基本单位L的倍数
|
|
const volumeUnits = {
|
|
'pL': 1e-12,
|
|
'nL': 1e-9,
|
|
'uL': 1e-6,
|
|
'mL': 1e-3,
|
|
'L': 1
|
|
};
|
|
|
|
// 质量单位转换为基本单位g的倍数
|
|
const massUnits = {
|
|
'pg': 1e-12,
|
|
'ng': 1e-9,
|
|
'ug': 1e-6,
|
|
'mg': 1e-3,
|
|
'g': 1,
|
|
'kg': 1e3
|
|
};
|
|
|
|
for(const item of sj) {
|
|
const key = `${item.type}_${item.value}`;
|
|
console.log(item,"item")
|
|
if(sjMap.has(key)) {
|
|
// 如果已存在相同type和value的项，累加yl值
|
|
const existingItem = sjMap.get(key);
|
|
console.log(existingItem,"existingItem")
|
|
// 根据类型选择合适的单位转换
|
|
let currentItemYlInBaseUnit, existingItemYlInBaseUnit;
|
|
if(item.type === '1') {
|
|
// 体积单位转换
|
|
const currentItemYl = isNaN(parseFloat(item.yl)) ? 0 : parseFloat(item.yl);
|
|
const existingItemYl = isNaN(parseFloat(existingItem.yl)) ? 0 : parseFloat(existingItem.yl);
|
|
currentItemYlInBaseUnit = currentItemYl * volumeUnits[item.dw] || 0;
|
|
existingItemYlInBaseUnit = existingItemYl * volumeUnits[existingItem.dw] || 0;
|
|
} else if(item.type === '7') {
|
|
// 质量单位转换
|
|
const currentItemYl = isNaN(parseFloat(item.yl)) ? 0 : parseFloat(item.yl);
|
|
const existingItemYl = isNaN(parseFloat(existingItem.yl)) ? 0 : parseFloat(existingItem.yl);
|
|
currentItemYlInBaseUnit = currentItemYl * massUnits[item.dw] || 0;
|
|
existingItemYlInBaseUnit = existingItemYl * massUnits[existingItem.dw] || 0;
|
|
} else {
|
|
// 其他类型暂不处理单位转换，直接相加
|
|
const currentItemYl = isNaN(parseFloat(item.yl)) ? 0 : parseFloat(item.yl);
|
|
const existingItemYl = isNaN(parseFloat(existingItem.yl)) ? 0 : parseFloat(existingItem.yl);
|
|
currentItemYlInBaseUnit = currentItemYl || 0;
|
|
existingItemYlInBaseUnit = existingItemYl || 0;
|
|
}
|
|
|
|
// 计算总和
|
|
const totalYlInBaseUnit = currentItemYlInBaseUnit + existingItemYlInBaseUnit;
|
|
|
|
// 更新existingItem的yl值，保持使用第一个项目的单位作为基准单位
|
|
if(item.type === '1') {
|
|
existingItem.yl = (totalYlInBaseUnit / volumeUnits[existingItem.dw]).toString();
|
|
} else if(item.type === '7') {
|
|
existingItem.yl = (totalYlInBaseUnit / massUnits[existingItem.dw]).toString();
|
|
} else {
|
|
existingItem.yl = totalYlInBaseUnit.toString();
|
|
}
|
|
} else {
|
|
// 如果不存在，添加新项
|
|
sjMap.set(key, {...item});
|
|
}
|
|
}
|
|
|
|
// 将Map中的值转换回数组
|
|
sj.length = 0; // 清空原数组
|
|
for(const value of sjMap.values()) {
|
|
sj.push(value);
|
|
}
|
|
|
|
// 对yq数组根据value去重
|
|
yq = yq.filter((item, index, self) =>
|
|
self.findIndex(obj => obj.value === item.value) === index
|
|
);
|
|
|
|
console.log(sj,yq,"stepsResource")
|
|
return { sjResource: sj, yqResource: yq };
|
|
},
|
|
|
|
// 直接获取表单数据，不做校验
|
|
getFilledFormData() {
|
|
const stepData = this.steps.map((step, index) => {
|
|
const stepComponentRef = this.$refs[`stepCompRef_${index}`];
|
|
if(stepComponentRef && stepComponentRef.length > 0){
|
|
const stepFormData = this.$refs[`stepCompRef_${index}`][0]?.getFilledFormData();
|
|
return { type: step.type, formData: stepFormData }
|
|
}else{
|
|
return { type: step.type, formData: step.formData }
|
|
}
|
|
})
|
|
return { stepData }
|
|
},
|
|
|
|
// 公共方法：设置步骤数据
|
|
setStepData(data) {
|
|
if (Array.isArray(data)) {
|
|
this.steps = data.map(step => ({
|
|
id: this.stepId++,
|
|
type: step.type || '',
|
|
formData: step.formData || {}
|
|
}))
|
|
}
|
|
},
|
|
|
|
// 公共方法：重置所有步骤
|
|
resetSteps() {
|
|
this.steps = [{
|
|
id: this.stepId++,
|
|
type: '',
|
|
formData: {}
|
|
}]
|
|
this.$emit('steps-reset')
|
|
},
|
|
|
|
// 公共方法：获取指定步骤的数据
|
|
getStepDataByIndex(index) {
|
|
if (index >= 0 && index < this.steps.length) {
|
|
return {
|
|
type: this.steps[index].type,
|
|
formData: this.steps[index].formData
|
|
}
|
|
}
|
|
return null
|
|
},
|
|
|
|
// 公共方法：验证所有步骤
|
|
async validateSteps() {
|
|
const errors = []
|
|
for (let index = 0; index < this.steps.length; index++) {
|
|
const step = this.steps[index];
|
|
|
|
if (!step.type) {
|
|
errors.push(`步骤 ${index + 1}: 请选择步骤类型`)
|
|
continue;
|
|
}
|
|
|
|
// 获取当前步骤的组件实例
|
|
const stepComponentRef = this.$refs[`stepCompRef_${index}`];
|
|
if (stepComponentRef && stepComponentRef.length > 0) {
|
|
try {
|
|
// 调用子组件的getFormData方法进行验证（不抛出错误，只验证）
|
|
await stepComponentRef[0].validateAndMarkRed();
|
|
} catch (error) {
|
|
// validateAndMarkRed方法不应该抛出错误，但如果有的话捕获它
|
|
console.error(`步骤 ${index + 1} 验证时出错:`, error);
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
isValid: errors.length === 0,
|
|
errors
|
|
}
|
|
},
|
|
|
|
// 公共方法：批量导入步骤数据
|
|
importSteps(stepDataArray) {
|
|
if (Array.isArray(stepDataArray)) {
|
|
this.steps = stepDataArray.map((step, index) => ({
|
|
id: this.stepId++,
|
|
type: step.type || '',
|
|
formData: step.formData || {}
|
|
}))
|
|
this.$emit('steps-imported', this.steps.length)
|
|
}
|
|
},
|
|
|
|
// 公共方法：获取步骤统计信息
|
|
getStepStatistics() {
|
|
const stats = {
|
|
total: this.steps.length,
|
|
byType: {},
|
|
filled: 0
|
|
}
|
|
|
|
this.steps.forEach(step => {
|
|
// 统计各类型数量
|
|
if (step.type) {
|
|
stats.byType[step.type] = (stats.byType[step.type] || 0) + 1
|
|
}
|
|
|
|
// 统计已填写的步骤
|
|
if (step.type && Object.keys(step.formData).length > 0) {
|
|
stats.filled++
|
|
}
|
|
})
|
|
|
|
return stats
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.step-container {
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
margin-top: 24px;
|
|
padding: 24px;
|
|
border-radius: 5px 5px;
|
|
|
|
.step-header {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background: #f5f7fa;
|
|
border-radius: 6px;
|
|
}
|
|
.flex1 {
|
|
flex:1
|
|
}
|
|
.step-list {
|
|
.step-list-item {
|
|
margin-top: 10px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
.step-title {
|
|
margin-right: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.step-type-select {
|
|
width: 200px;
|
|
margin-right: 10px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.delete-btn {
|
|
color: #f56c6c;
|
|
|
|
&:hover {
|
|
color: #f78989;
|
|
}
|
|
|
|
&:disabled {
|
|
color: #c0c4cc;
|
|
}
|
|
}
|
|
|
|
.step-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|