eln_web/src/components/Template/Step.vue

<template>
	<div class="step-container">
		<el-button v-if="isShowAddStep()" type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button>
		<div class="step-list">
			<draggable v-model="steps"  ghost-class="ghost" handle=".drag-handle" @end="onDragEnd" :animation="200">
				<div v-for="(step, index) in steps" :key="step.id" class="step-list-item">
					<div class="step-content">
						<i class="el-icon-rank drag-handle" v-if="templateFillType === 'preFill'" style="cursor: move; margin-right: 10px; margin-top: 6px;"></i>
						<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" :sn="step.type" :is="getStepComponent(step.type)" :formData="step.formData"
							@update="onFormUpdate(index, $event)" :stepIndex = "prefixKey + index" :ref="'stepCompRef_' + index">
						</component>
						<div v-if="templateFillType === 'preFill'" 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>
			</draggable>
		</div>
	</div>
</template>

<script>
import draggable from 'vuedraggable';
import { duplicateResource,justUpdateFilledFormData } from '@/utils/index.js';
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 Zy from "./StepComponents/ry/zy.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";//溶液-封板
import Zlfz from "./StepComponents/ry/zlfz.vue";//溶液-质量分装

//罗开凡新增
import kbyq from "./StepComponents/ry/kbyq.vue";//溶液-空白仪器
import kbsjgsp from "./StepComponents/ry/kbsjgsp.vue";//溶液-空白（试剂/供试品）
import kb from "./StepComponents/ry/kb.vue";//溶液-空白
import jr from "./StepComponents/ry/jr.vue";//溶液-加热
import fz from "./StepComponents/ry/fz.vue";//溶液-分装
//罗开凡新增

//表配制
import jrry_b from './StepComponents/b/jrry_b.vue';//表配制-加入溶液
//表配制-离心：使用溶液-离心
import cl from './StepComponents/b/cl.vue';//表配制-称量
//表配制-超声：使用溶液-超声
//表配制-恒温混匀：使用溶液-恒温混匀
//表配制-振摇混匀：使用溶液-振摇混匀
//表配制-涡旋混匀：使用溶液-涡旋混匀
//表配制-颠倒混匀：使用溶液-颠倒混匀

//表配制-搅拌：使用溶液-搅拌
//表配制-加热搅拌：使用溶液-加热搅拌
//表配制-水浴：使用溶液-水浴
//表配制-正压：使用溶液-正压
//表配制-氮吹：使用溶液-氮吹
//表配制-过滤（自动）：使用溶液-过滤（自动）
//表配制-过滤（手动）：使用溶液-过滤（手动）
//表配制-静置：使用溶液-静置
//表配制-解冻：使用溶液-解冻
//表配制-孵育：使用溶液-孵育
//表配制-复溶：使用溶液-复溶


//生物样品分析
//生物样品分析-解冻：使用溶液-解冻
//生物样品分析-涡旋混匀：使用溶液-涡旋混匀
//生物样品分析-选择容器：使用溶液-选择容器
import jryp from './StepComponents/swypfx/jryp.vue';//生物样品分析-加入样品
//生物样品分析-衍生反应：使用溶液-离心
import hhspe from './StepComponents/swypfx/hhspe.vue';//生物样品分析-活化（SPE）
//生物样品分析-平衡（SPE）：使用溶液-活化（SPE）
//生物样品分析-上样（SPE）：使用溶液-活化（SPE）
//生物样品分析-淋洗（SPE）：使用溶液-活化（SPE）
//生物样品分析-洗脱（SPE）：使用溶液-活化（SPE）
import zyfc from './StepComponents/swypfx/zyfc.vue';//生物样品分析-转移（分层）
//生物样品分析-氮吹：使用溶液-氮吹
//生物样品分析-正压：使用溶液-正压
//生物样品分析-孵育：使用溶液-孵育
//生物样品分析-复溶：使用溶液-复溶



//色谱匀浆组织表
import jszz from './StepComponents/spyjzzb/jszz.vue';//色谱匀浆组织表-剪碎组织
//色谱匀浆组织表-称取组织：使用色谱匀浆组织表-剪碎组织
import jryjry from './StepComponents/spyjzzb/jryjry.vue';//色谱匀浆组织表-加入匀浆溶液
import ymyj from './StepComponents/spyjzzb/ymyj.vue';//色谱匀浆组织表-研磨匀浆
import yjyfz2 from './StepComponents/spyjzzb/yjyfz2.vue';//色谱匀浆组织表-匀浆液分装2
//色谱匀浆组织表-匀浆液分装3：使用色谱匀浆组织表-匀浆液分装2
import yjbc from './StepComponents/spyjzzb/yjbc.vue';//色谱匀浆组织表-匀浆保存
//色谱匀浆组织表-匀浆液混合：使用色谱匀浆组织表-剪碎组织
//色谱匀浆组织表-加入溶液：使用溶液-加入溶液
import fy_spyjzzb from './StepComponents/spyjzzb/fy_spyjzzb.vue';//色谱匀浆组织表-孵育
//色谱匀浆组织表-天平校验双点：使用溶液-天平校验双点
//色谱匀浆组织表-天平校验单点：使用溶液-天平校验单点
//色谱匀浆组织表-离心：使用溶液-离心
import jz_spyjzzb from './StepComponents/spyjzzb/jz_spyjzzb.vue';//色谱匀浆组织表-静置


//全血稳定性
//全血稳定性-颠倒混匀：使用溶液-颠倒混匀
//全血稳定性-恒温平衡：使用溶液-恒温混匀
import qxfz from './StepComponents/qxwdx/qxfz.vue';//全血稳定性-全血分装
import qxjz from './StepComponents/qxwdx/qxjz.vue';//全血稳定性-全血静置
import qxlx from './StepComponents/qxwdx/qxlx.vue';//全血稳定性-全血离心
//全血稳定性-全血取样：使用全血稳定性-全血静置
//全血稳定性-静置后离心：使用全血稳定性-全血离心


//样品分取
import fq2 from './StepComponents/ypfq/fq2.vue';//样品分取-分取2
//样品分取-分取3：使用样品分取-分取2
import hh from './StepComponents/ypfq/hh.vue';//样品分取-混合


//组织清洗
import qx from './StepComponents/zzqx/qx.vue';//组织清洗-清洗
import zc from './StepComponents/zzqx/zc.vue';//组织清洗-暂存
import qy from './StepComponents/zzqx/qy.vue';//组织清洗-弃液


//PCR
import sjjy from './StepComponents/pcr/sjjy.vue';//PCR-试剂加样
import jryp_pcr from './StepComponents/pcr/jryp_pcr.vue';//PCR-加入样品
import bzyp from './StepComponents/pcr/bzyp.vue';//PCR-补足样品
import jz_pcr from './StepComponents/pcr/jz_pcr.vue';//PCR-静置
import nscyp from './StepComponents/pcr/nscyp.vue';//PCR-NSC样品
import qrhy from './StepComponents/pcr/qrhy.vue';//PCR-轻柔混匀
//PCR-PE板位放置：使用PCR-轻柔混匀
import tgbwfz from './StepComponents/pcr/tgbwfz.vue';//PCR-天根板位放置
//PCR-罗氏板位放置：使用PCR-轻柔混匀
import tqsj from './StepComponents/pcr/tqsj.vue';//PCR-提取上机
import lssj from './StepComponents/pcr/lssj.vue';//PCR-罗氏上机
import yqzt from './StepComponents/pcr/yqzt.vue';//PCR-仪器暂停
import ecsj from './StepComponents/pcr/ecsj.vue';//PCR-二次上机
import czclcl from './StepComponents/pcr/czclcl.vue';//PCR-磁珠残留处理
import ypzy from './StepComponents/pcr/ypzy.vue';//PCR-样品转移
import hsypfz from './StepComponents/pcr/hsypfz.vue';//PCR-核酸样品分装
import ypbc from './StepComponents/pcr/ypbc.vue';//PCR-样品保存
import jd_pcr from './StepComponents/pcr/jd_pcr.vue';//PCR-解冻
import sjjyst from './StepComponents/pcr/sjjyst.vue';//PCR-试剂加样（手提）
import ddhy_pcr from './StepComponents/pcr/ddhy_pcr.vue';//PCR-颠倒混匀
import wxhy_pcr from './StepComponents/pcr/wxhy_pcr.vue';//PCR-涡旋混匀
import sy_pcr from './StepComponents/pcr/sy_pcr.vue';//PCR-水浴
import sslx from './StepComponents/pcr/sslx.vue';//PCR-瞬时离心
import xfzcl from './StepComponents/pcr/xfzcl.vue';//PCR-吸附柱处理
import lxdy from './StepComponents/pcr/lxdy.vue';//PCR-离心（倒液）
import xfzzysjg from './StepComponents/pcr/xfzzysjg.vue';//PCR-吸附柱转移（收集管）
import xfzzylxg from './StepComponents/pcr/xfzzylxg.vue';//PCR-吸附柱转移（离心管）
import xt from './StepComponents/pcr/xt.vue';//PCR-洗脱
import ecxt from './StepComponents/pcr/ecxt.vue';//PCR-二次洗脱
import lx_pcr from './StepComponents/pcr/lx.vue';//PCR-离心


//PCR分析核酸提取浓度测定表
import ndcd from './StepComponents/pcrfx/ndcd.vue';//PCR分析核酸提取浓度测定表-浓度测定


//PCR采集管称重记录表
import jrry_pcrcjg from './StepComponents/pcrcjg/jrry_pcrcjg.vue';//PCR采集管称重记录表-加入溶液


//PCR匀浆表(知管重、知组织重、常规)
import jszz_pcryj from './StepComponents/pcryj/jszz_pcryj.vue';//PCR采集管称重记录表-剪碎组织
import cqzz_pcryj from './StepComponents/pcryj/cqzz_pcryj.vue';//PCR采集管称重记录表-称取组织
import jryjry_pcryj from './StepComponents/pcryj/jryjry_pcryj.vue';//PCR采集管称重记录表-加入匀浆溶液
//PCR采集管称重记录表-研磨匀浆：使用色谱匀浆组织表-研磨匀浆
//PCR采集管称重记录表-水浴：使用PCR分析核酸提取样品处理表-水浴
//PCR采集管称重记录表-离心：使用PCR分析核酸提取样品处理表-水浴
//PCR采集管称重记录表-天平校验（双点）：使用溶液-天平校验（双点）
//PCR采集管称重记录表-天平校验（单点）：使用溶液-天平校验（单点）


//PCR分析样品处理表
import xs from './StepComponents/pcrfxyp/xs.vue';//PCR分析样品处理表-稀释
//PCR分析样品处理表-操作环境：使用溶液-操作环境
import sjjy_pcrfxyp from './StepComponents/pcrfxyp/sjjy_pcrfxyp.vue';//PCR分析样品处理表-试剂加样
import jryp_pcrfxyp from './StepComponents/pcrfxyp/jryp_pcrfxyp.vue';//PCR分析样品处理表-加入样品
import fmlx from './StepComponents/pcrfxyp/fmlx.vue';//PCR分析样品处理表-封膜离心
import pcrsj from './StepComponents/pcrfxyp/pcrsj.vue';//PCR分析样品处理表-PCR上机
import pbsz from './StepComponents/pcrfxyp/pbsz.vue';//PCR分析样品处理表-排版设置
import cbygxz from './StepComponents/pcrfxyp/cbygxz.vue';//PCR分析样品处理表-参比荧光选择
import yxpcry from './StepComponents/pcrfxyp/yxpcry.vue';//PCR分析样品处理表-运行PCR仪
import cdnsypfz from './StepComponents/pcrfxyp/cdnsypfz.vue';//PCR分析样品处理表-cDNA样品分装


//检测板配制
import bb from './StepComponents/jcb/bb.vue';//检测板配制-包被
//检测板配制-洗板：使用检测板配制-包被
//检测板配制-封闭：使用检测板配制-包被
import jy from './StepComponents/jcb/jy.vue';//检测板配制-加样
//检测板配制-中和：使用检测板配制-包被
//检测板配制-加检测试剂：使用检测板配制-包被
//检测板配制-酸解：使用检测板配制-包被
import sjjy_jcb from './StepComponents/jcb/sjjy_jcb.vue';//检测板配制-酸解加样
import zhfy from './StepComponents/jcb/zhfy.vue';//检测板配制-中和孵育
//检测板配制-二次酸解：使用检测板配制-包被
import xs_jcb from './StepComponents/jcb/xs_jcb.vue';//检测板配制-显色
//检测板配制-终止：使用检测板配制-包被
//检测板配制-检测：使用检测板配制-包被
import dbmby from './StepComponents/jcb/dbmby.vue';//检测板配制-读板（酶标仪）
//检测板配制-读板（化学发光系统）：使用检测板配制-读板（酶标仪）
import dbdhxfgxt from './StepComponents/jcb/dbdhxfgxt.vue';//检测板配制-读板（电化学发光系统）
import dbygxt from './StepComponents/jcb/dbygxt.vue';//检测板配制-读板（荧光系统）
import dzacl from './StepComponents/jcb/dzacl.vue';//检测板配制-读值（ACL）
import qb from './StepComponents/jcb/qb.vue';//检测板配制-取板
import jzks from './StepComponents/jcb/jzks.vue';//检测板配制-静置开始
import fyxks from './StepComponents/jcb/fyxks.vue';//检测板配制-孵育箱开始
import ycfyks from './StepComponents/jcb/ycfyks.vue';//检测板配制-摇床孵育开始
import ycks from './StepComponents/jcb/ycks.vue';//检测板配制-摇床开始
import js_jcb from './StepComponents/jcb/js_jcb.vue';//检测板配制-结束
//检测板配制-覆膜：使用检测板配制-读值（ACL）
//检测板配制-拍干：使用检测板配制-读值（ACL）
import czqx from './StepComponents/jcb/czqx.vue';//检测板配制-磁珠清洗
import czzx from './StepComponents/jcb/czzx.vue';//检测板配制-磁珠重悬
import ychy from './StepComponents/jcb/ychy.vue';//检测板配制-摇床混匀
import czzy from './StepComponents/jcb/czzy.vue';//检测板配制-磁珠转移
import sjbj from './StepComponents/jcb/sjbj.vue';//检测板配制-试剂标记


//细胞/菌株配制
import qxb from './StepComponents/xbjzpz/qxb.vue';//细胞/菌株配制-取细胞
import qjz from './StepComponents/xbjzpz/qjz.vue';//细胞/菌株配制-取菌株
import fr_xbjzpz from './StepComponents/xbjzpz/fr_xbjzpz.vue';//细胞/菌株配制-复溶
import lxqy from './StepComponents/xbjzpz/lxqy.vue';//细胞/菌株配制-离心（弃液）
import cd from './StepComponents/xbjzpz/cd.vue';//细胞/菌株配制-吹打
import xbzy from './StepComponents/xbjzpz/xbzy.vue';//细胞/菌株配制-细胞转移
import jzzy from './StepComponents/xbjzpz/jzzy.vue';//细胞/菌株配制-菌株转移
import dypyy from './StepComponents/xbjzpz/dypyy.vue';//细胞/菌株配制-倒原培养液
import xd from './StepComponents/xbjzpz/xd.vue';//细胞/菌株配制-洗涤
//细胞/菌株配制-消化：使用细胞/菌株配制-洗涤
//细胞/菌株配制-终止消化：使用细胞/菌株配制-洗涤
import copy from './StepComponents/xbjzpz/copy.vue';//细胞/菌株配制-CO2培养
import gc from './StepComponents/xbjzpz/gc.vue';//细胞/菌株配制-观察
import cdmd from './StepComponents/xbjzpz/cdmd.vue';//细胞/菌株配制-测定密度
//细胞/菌株配制-低渗：使用细胞/菌株配制-洗涤
//细胞/菌株配制-固定：使用细胞/菌株配制-洗涤
import cdxs from './StepComponents/xbjzpz/cdxs.vue';//细胞/菌株配制-传代/稀释


//细胞表单
import gc_xb from './StepComponents/xb/gc_xb.vue';//细胞表单-观察
import xdlc from './StepComponents/xb/xdlc.vue';//细胞表单-洗涤（2次）
import bzpyy from './StepComponents/xb/bzpyy.vue';//细胞表单-补足培养液
import xh_xb from './StepComponents/xb/xh_xb.vue';//细胞表单-消化
import jrrydh from './StepComponents/xb/jrrydh.vue';//细胞表单-加入溶液（多行）
//细胞表单-固定：使用细胞表单-消化
import rs_xb from './StepComponents/xb/rs_xb.vue';//细胞表单-染色
import bpqr from './StepComponents/xb/bpqr.vue';//细胞表单-破片确认
import dp from './StepComponents/xb/dp.vue';//细胞表单-滴片
import bprs from './StepComponents/xb/bprs.vue';//细胞表单-破片染色
import cx from './StepComponents/xb/cx.vue';//细胞表单-冲洗
import lg from './StepComponents/xb/lg.vue';//细胞表单-晾干



//Ames表单
import hygh from './StepComponents/ames/hygh.vue';//Ames表单-混匀固化
import hwzd from './StepComponents/ames/hwzd.vue';//Ames表单-恒温振荡
import jbcpyj from './StepComponents/ames/jbcpyj.vue';//Ames表单-加表层培养基


//配体结合分析样品/MRD稀释记录表
import xs_ptjhfxyp from './StepComponents/ptjhfxyp/xs_ptjhfxyp.vue';//体结合分析样品/MRD稀释记录表-稀释


import { public_templateStepList } from '@/api/business/public/public';


// 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: 'zy' },
// 	{ 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' },
// 	{ label: '质量分装', value: 'zlfz' },
	
// ];

export default {
	inject: ['templateFillType','templateData'],
	name: 'Step',
	props: {
		formData: {
			type: Array,
			default: () => []
		},
		prefixKey: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			stepSelectConfig: {
				options: [],
				fillType: "preFill",
				placeholder: "请选择步骤类型"
			},
			steps: [],
			stepId: 1,
			componentMap: null
		}
	},
	components: {
		draggable,
		HandleFormItem,
		Czdd,
		Czhj,
		Xzrq,
		Jrry,
		Tpjydd,
		Tpjysd,
		Qywz,
		Clfcz,
		Clcz,
		Bdtj,
		Bdzl,
		Tjphcz,
		Tjphfcz,
		Lx,
		Hwhy,
		Zyhy,
		Wxhy,
		Ddhy,
		Ym,
		Jb,
		Jrjb,
		Cs,
		Sy,
		Zy,
		Dc,
		Jd,
		Jz,
		Glzd,
		Glsd,
		Fy,
		Qcyy,
		Frdrq,
		Fr,
		Hb,
		Rs,
		Js,
		Mj,
		Fs,
		Fb,
		Zlfz,
		//罗开凡新增
		kbyq,
		kbsjgsp,
		kb,
		jr,
		fz,
		//罗开凡新增

		//表配制
		jrry_b,
		cl,

		//生物样品分析
		jryp,
		hhspe,
		zyfc,

		//色谱匀浆组织表
		jszz,
		jryjry,
		ymyj,
		yjyfz2,
		yjbc,
		fy_spyjzzb,
		jz_spyjzzb,

		//全血稳定性
		qxfz,
		qxjz,
		qxlx,

		//样品分取
		fq2,
		hh,

		//组织清洗
		qx,
		zc,
		qy,

		//PCR
		sjjy,
		jryp_pcr,
		bzyp,
		jz_pcr,
		nscyp,
		qrhy,
		tgbwfz,
		tqsj,
		lssj,
		yqzt,
		ecsj,
		czclcl,
		ypzy,
		hsypfz,

		ypbc,
		jd_pcr,
		sjjyst,
		ddhy_pcr,
		wxhy_pcr,
		sy_pcr,
		sslx,
		xfzcl,
		lxdy,
		xfzzysjg,
		xfzzylxg,
		xt,
		ecxt,
		lx_pcr,

		//PCR分析核酸提取浓度测定表
		ndcd,

		//PCR采集管称重记录表
		jrry_pcrcjg,
		
		
		//PCR匀浆表(知管重、知组织重、常规)
		jszz_pcryj,
		cqzz_pcryj,
		jryjry_pcryj,

		//PCR分析样品处理表
		xs,
		sjjy_pcrfxyp,
		jryp_pcrfxyp,
		fmlx,
		pcrsj,
		pbsz,
		cbygxz,
		yxpcry,
		cdnsypfz,

		//检测板配制
		bb,
		jy,
		sjjy_jcb,
		zhfy,
		xs_jcb,
		dbmby,
		dbdhxfgxt,
		dbygxt,
		dzacl,
		qb,
		jzks,
		fyxks,
		ycfyks,
		ycks,
		js_jcb,
		czqx,
		czzx,
		ychy,
		czzy,
		sjbj,

		//细胞/菌株配制
		qxb,
		qjz,
		fr_xbjzpz,
		lxqy,
		cd,
		xbzy,
		jzzy,
		dypyy,
		xd,
		copy,
		gc,
		cdmd,
		cdxs,

		//细胞表单
		gc_xb,
		xdlc,
		bzpyy,
		xh_xb,
		jrrydh,
		rs_xb,
		bpqr,
		dp,
		bprs,
		cx,
		lg,


		//Ames表单
		hygh,
		hwzd,
		jbcpyj,

		//配体结合分析样品/MRD稀释记录表
		xs_ptjhfxyp,
	},
	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',
					'zy': 'Zy',
					'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',
					'zlfz': 'Zlfz',

					//罗开凡新增
					'kbyq': 'kbyq',
					'kbsjgsp': 'kbsjgsp',
					'kb': 'kb',
					'jr': 'jr',
					'fz': 'fz',
					//罗开凡新增

					//标配配制
					'jrry_b': 'jrry_b',
					'cl': 'cl',
					'lx_b': 'Lx',
					'cs_b': 'Cs',
					'hwhy_b': 'Hwhy',
					'zyhy_b': 'Zyhy',
					'wxhy_b': 'Wxhy',
					'ddhy_b': 'Ddhy',

					'jb_b': 'Jb',
					'jrjb_b': 'Jrjb',
					'sy_b': 'Sy',
					'zy_b': 'Zy',
					'dc_b': 'Dc',
					'glzd_b': 'Glzd',
					'glsd_b': 'Glsd',
					'jz_b': 'Jz',
					'jd_b': 'Jd',
					'fy_b': 'Fy',
					'fr_b': 'Fr',

					//生物样品分析
					'jd_swypfx': 'Jd',
					'jryp': 'jryp',
					'ysfy': 'Lx',
					'hhspe': 'hhspe',

					'phspe': 'hhspe',
					'syspe': 'hhspe',
					'lxspe': 'hhspe',
					'xtspe': 'hhspe',
					'zyfc': 'zyfc',
					

					//色谱匀浆组织表
					'jszz':'jszz',
					'cqzz':'jszz',
					'jryjry':'jryjry',
					'ymyj':'ymyj',
					'yjyfz2':'yjyfz2',
					'yjyfz3':'yjyfz2',
					'yjbc':'yjbc',
					'yjyhh':'jszz',
					'fy_spyjzzb':'fy_spyjzzb',
					'jz_spyjzzb':'jz_spyjzzb',


					//全血稳定性
					'ddhy_qxwdx': 'Ddhy',
					'hwph':'Hwhy',
					'qxfz':'qxfz',
					'qxjz':'qxjz',
					'qxlx':'qxlx',
					'qxqy':'qxjz',
					'jzhlx':'qxlx',

					//样品分取
					'fq2':'fq2',
					'fq3':'fq2',
					'hh':'hh',
					
					//组织清洗
					'qx':'qx',
					'zc':'zc',
					'qy':'qy',

					//PCR
					'sjjy':'sjjy',
					'jryp_pcr':'jryp_pcr',
					'bzyp':'bzyp',
					'jz_pcr':'jz_pcr',
					'nscyp':'nscyp',
					'qrhy':'qrhy',
					'pebwfz':'qrhy',
					'tgbwfz':'tgbwfz',
					'lsbwfz':'qrhy',
					'tqsj':'tqsj',
					'lssj':'lssj',

					'yqzt':'yqzt',
					'ecsj':'ecsj',
					'czclcl':'czclcl',
					'ypzy':'ypzy',
					'hsypfz':'hsypfz',

					'ypbc':'ypbc',
					'jd_pcr':'jd_pcr',
					'sjjyst':'sjjyst',
					'ddhy_pcr':'ddhy_pcr',
					'wxhy_pcr':'wxhy_pcr',
					'sy_pcr':'sy_pcr',
					'sslx':'sslx',
					'xfzcl':'xfzcl',
					'lxdy':'lxdy',
					'xfzzysjg':'xfzzysjg',
					'xfzzylxg':'xfzzylxg',
					'xt':'xt',
					'ecxt':'ecxt',
					'lx_pcr':'lx_pcr',

					//PCR分析核酸提取浓度测定表
					'ndcd':'ndcd',

					//PCR采集管称重记录表
					'jrry_pcrcjg':'jrry_pcrcjg',

					//PCR匀浆表(知管重、知组织重、常规)
					'jszz_pcryj':'jszz_pcryj',
					'cqzz_pcryj':'cqzz_pcryj',
					'jryjry_pcryj':'jryjry_pcryj',


					//PCR分析样品处理表
					'xs':'xs',
					'sjjy_pcrfxyp':'sjjy_pcrfxyp',
					'jryp_pcrfxyp':'jryp_pcrfxyp',
					'fmlx':'fmlx',
					'pcrsj':'pcrsj',
					'pbsz':'pbsz',
					'cbygxz':'cbygxz',
					'yxpcry':'yxpcry',
					'cdnsypfz':'cdnsypfz',

					//检测板配制
					'bb':'bb',
					'xb':'bb',
					'fb_jcb':'bb',
					'jy':'jy',
					'zh':'bb',
					'jjcsj':'bb',
					'sj':'bb',
					'sjjy_jcb':'sjjy_jcb',
					'zhfy':'zhfy',
					'ecsj_jcb':'bb',
					'xs_jcb':'xs_jcb',
					'zz':'bb',
					'jc':'bb',
					'dbmby':'dbmby',
					'dbhxfgxt':'dbmby',
					'dbdhxfgxt':'dbdhxfgxt',
					'dbygxt':'dbygxt',
					'dzacl':'dzacl',
					'qb':'qb',
					'jzks':'jzks',
					'fyxks':'fyxks',
					'ycfyks':'ycfyks',
					'ycks':'ycks',
					'js_jcb':'js_jcb',
					'fm':'dzacl',
					'pg':'dzacl',
					'czqx':'czqx',
					'czzx':'czzx',
					'ychy':'ychy',
					'czzy':'czzy',
					'sjbj':'sjbj',

					//细胞/菌株配制
					'qxb':'qxb',
					'qjz':'qjz',
					'fr_xbjzpz':'fr_xbjzpz',
					'lxqy':'lxqy',
					'cd':'cd',
					'xbzy':'xbzy',
					'jzzy':'jzzy',
					'dypyy':'dypyy',
					'xd':'xd',
					'xh':'xd',
					'zzxh':'xd',
					'copy':'copy',
					'gc':'gc',
					'cdmd':'cdmd',
					'ds':'xd',
					'gd':'xd',
					'cdxs':'cdxs',
					//细胞表单
					'gc_xb':'gc_xb',
					'xdlc':'xdlc',
					'bzpyy':'bzpyy',
					'xh_xb':'xh_xb',
					'jrrydh':'jrrydh',
					'gd_xb':'xh_xb',
					'rs_xb':'rs_xb',
					'bpqr':'bpqr',
					'dp':'dp',
					'bprs':'bprs',
					'cx':'cx',
					'lg':'lg',

					//Ames表单
					'hygh':'hygh',
					'hwzd':'hwzd',
					'jbcpyj':'jbcpyj',

					//配体结合分析样品/MRD稀释记录表
					'xs_ptjhfxyp':'xs_ptjhfxyp',
				}
			}
			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()
		// }
		this.getStepList()
	},
	watch: {
		// steps: {
		// 	handler(newVal) {
		// 		this.$emit('input', newVal);
		// 	},
		// 	deep: true
		// },
		formData: {
			handler(newVal) {
				if (!newVal || newVal.length === 0) return
				this.steps = newVal;
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		onDragEnd(evt) {
			justUpdateFilledFormData();
		},

		getStepList(){
			public_templateStepList({templateId:this.templateData.templateId}).then(response => {
				let options = []
				_.forEach(response.data,(item)=>{
					options.push({ label: item.name, value: item.sn })
				})
                this.stepSelectConfig.options = options
            });
		},
		isShowAddStep() {
			return this.templateFillType === 'preFill';
		},
		addStep() {
			try {
				this.steps.push({
					id: this.stepId++,
					type: '',
					formData: {}
				})
				justUpdateFilledFormData();
				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]
				justUpdateFilledFormData();
				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 = [];
			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);
					}
				}
			})
			const resource = duplicateResource(sj, yq);
			return { sjResource: resource.sj, yqResource: resource.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 {
		padding-top: 10px;
		.step-list-item {
            page-break-inside: avoid;
			padding-top: 10px;
			border-radius: 6px;
			overflow: hidden;
			transition: background-color 0.2s;

			&:hover {
				// background-color: #f5f7fa;
			}

			&.ghost {
				background-color: transparent !important;
			}

			.drag-handle {
				color: #909399;
				transition: color 0.2s;

				&:hover {
					color: #409eff;
				}
			}

			.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>