eln_web/src/views/business/comps/template/TemplateTable.vue

<template>
  <div class="template-table">
    <component ref="templateComponent" :sn="sn" :is="getTemplateComponent()" :templateData="templateData"
      :fillType="fillType">
    </component>
    <SubPackageDialog ref="subPackageDialogRef"></SubPackageDialog>
    <TagPrintDialog ref="tagPrintDialogRef"></TagPrintDialog>
    <SelectReagentDialog ref="selectReagentDialogRef" />
    <SelectInstrumentDialog ref="selectInstrumentDialogRef" />
    <SelectMixReagentDialog ref="selectMixReagentDialogRef"/>
    <EditSign ref="editSignRef" @cancel="handleEditSignCancel" @callback="handleEditSignCallback" />
  </div>
</template>

<script>
import { EventBus } from "@/utils/eventBus";
import { debounce } from 'lodash-es'
import SubPackageDialog from "./dialog/SubPackageDialog.vue";//分装弹窗
import TagPrintDialog from "./dialog/PrintTagDialog.vue";//标签打印弹窗
import SelectReagentDialog from "./dialog/SelectReagentDialog.vue";//选择试剂弹窗
import SelectInstrumentDialog from "./dialog/SelectInstrumentDialog.vue";//选择仪器弹窗
import SelectMixReagentDialog from "./dialog/SelectMixReagentDialog.vue";//选择试剂/供试品/给药制剂弹窗
import EditSign from "./dialog/EditSign.vue";//电子签名弹窗

//色谱
import SP001 from "./comps/sp/SP001.vue";
import SP003 from "./comps/sp/SP003.vue";
import SP00456 from "./comps/sp/SP00456.vue";
import SP007 from "./comps/sp/SP007.vue";
//色谱生物样品分析方法学样品制备表-10个类似
import SP008 from "./comps/sp/SP008.vue";
import SP009 from "./comps/sp/SP009.vue";
import SP0019 from "./comps/sp/SP0019.vue";
import SP0020 from "./comps/sp/SP0020.vue";
import SP0021 from "./comps/sp/SP0021.vue";

import Demo from "./comps/sp/Demo.vue";
//供试品
import GSP001 from "./comps/gsp/GSP001.vue";
import GSP002 from "./comps/gsp/GSP002.vue";
import GSP003 from "./comps/gsp/GSP003.vue";
import GSP004 from "./comps/gsp/GSP004.vue";
import GSP005 from "./comps/gsp/GSP005.vue";
import GSP009 from "./comps/gsp/GSP009.vue";
import GSP010 from "./comps/gsp/GSP010.vue";
import GSP015 from "./comps/gsp/GSP015.vue";

//试验物质配制计划表/麻精药领取申请单/毒麻药品配制记录表
import SYWZPZJHB from "./comps/gsp/SYWZPZJHB.vue";
import MJYLQSQD from "./comps/gsp/MJYLQSQD.vue";
import DMYPPZJLB from "./comps/gsp/DMYPPZJLB.vue";

// PCR
//PCR001-使用SP001
import PCR002 from "./comps/pcr/PCR002.vue";
import PCR003 from "./comps/pcr/PCR003.vue";
import PCR004 from "./comps/pcr/PCR004.vue";
import PCR005 from "./comps/pcr/PCR005.vue";
import PCR007 from "./comps/pcr/PCR007.vue";
import PCR008 from "./comps/pcr/PCR008.vue";
import PCR009 from "./comps/pcr/PCR009.vue";
import PCR010 from "./comps/pcr/PCR010.vue";
import PCR011 from "./comps/pcr/PCR011.vue";
import PCR012 from "./comps/pcr/PCR012.vue";

//LBA
// LBA001-使用SP001
import LBA002 from "./comps/lba/LBA002.vue";
import LBA003 from "./comps/lba/LBA003.vue";
import LBA004 from "./comps/lba/LBA004.vue";
// LBA005-使用SP456
import LBA006 from "./comps/lba/LBA006.vue";
// LBA007-使用SP456
import LBA008 from "./comps/lba/LBA008.vue";

//ADA
// ADA001-使用SP001
// ADA002-使用LBA002
// ADA003-使用LBA003
// ADA004-使用LBA004
// ADA005-使用SP456
// ADA006-使用LBA006
// ADA007-使用SP456

//样品
// YP001-使用SP001
import YP002 from "./comps/yp/YP002.vue";
import YP003 from "./comps/yp/YP003.vue";
import YP004 from "./comps/yp/YP004.vue";
import YP005 from "./comps/yp/YP005.vue";

//细胞
import XB001 from "./comps/xb/XB001.vue";

//动技
import DJ001 from "./comps/dj/DJ001.vue";
import DJ002 from "./comps/dj/DJ002.vue";
import DJ003 from "./comps/dj/DJ003.vue";

//病理
import BL001 from "./comps/bl/BL001.vue";
import BL002 from "./comps/bl/BL002.vue";

//毒理
// DL001-SYWZPZJHB
// DL002-使用SP001
import DL003 from './comps/dl/DL003.vue'
import DL004 from './comps/dl/DL004.vue'
import DL005 from './comps/dl/DL005.vue'
import DL006 from './comps/dl/DL006.vue'
import DL007 from './comps/dl/DL007.vue'
import DL008 from './comps/dl/DL008.vue'
import DL009 from './comps/dl/DL009.vue'
import DL010 from './comps/dl/DL010.vue'
import DL011 from './comps/dl/DL011.vue'
import DL012 from './comps/dl/DL012.vue'
import DL013 from './comps/dl/DL013.vue'
import DL014 from './comps/dl/DL014.vue'
import DL015 from './comps/dl/DL015.vue'
import DL016 from "./comps/dl/DL016.vue";
import DL017 from "./comps/dl/DL017.vue";
import DL018 from "./comps/dl/DL018.vue";
import DL019 from "./comps/dl/DL019.vue";
import DL020 from "./comps/dl/DL020.vue";
import DL021 from "./comps/dl/DL021.vue";
import DL022 from "./comps/dl/DL022.vue";
import DL023 from "./comps/dl/DL023.vue";
import DL024 from "./comps/dl/DL024.vue";


export default {
  name: "TemplateTable",
  components: {
    Demo,
    SubPackageDialog, TagPrintDialog, SelectReagentDialog, SelectInstrumentDialog, SelectMixReagentDialog, EditSign,
    //试验物质配制计划表/麻精药领取申请单/毒麻药品配制记录表
    MJYLQSQD, SYWZPZJHB, DMYPPZJLB,
    //供试品
    GSP001,GSP002, GSP003,GSP004,GSP005,GSP009, GSP010,GSP015,
    //色谱
    SP001, SP003, SP00456,SP007, SP008, SP009,SP0019,SP0020,SP0021,
    // PCR
    PCR002, PCR003, PCR004, PCR005,PCR007, PCR008, PCR009,PCR010, PCR011, PCR012,
    //LBA
    LBA002,
    LBA003,
    LBA004,
    LBA006,
    LBA008,
    //样品
    YP002,
    YP003,
    YP004,
    YP005,
    // 毒理
    DL003,
    DL004,
    DL005,
    DL006,
    DL007,
    DL008,
    DL009,
    DL010,
    DL011,
    DL012,
    DL013,
    DL014,
    DL015,
    DL016,
    DL017,
    DL018,
    DL019,
    DL020,
    DL021,
    DL022,
    DL023,
    DL024,
    //细胞
    XB001,
    //动技
    DJ001,
    DJ002,
    DJ003,
    //病理
    BL001,
    BL002
  },
  data() {
    return {
      componentMap: null,
    }
  },
  methods: {
    getTemplateComponent() {
      if (!this.sn) return 'Demo';
      let componentName = this.componentMap[this.sn] || 'Demo';
      return componentName;
    },
    handleEditSignCancel(e) {
      EventBus.$emit('edit-sign-cancel', e);
    },

  },
  props: {
    sn: {
      type: String,
      default: '',
    },
    fillType: {
      type: String,
      default: 'preFill',
    },
    templateData: {
      type: Object,
      default: () => { },
    },
    emitName: {
      type: String,
      default: 'onModifyRecord',
    },
  },
  computed: {

    templateComponentMap() {
      if (!this.componentMap) {
        this.componentMap = {
          //色谱
          'SP001': 'SP001',
          'SP002': 'SP001',
          'SP003': 'SP003',
          'SP004': 'SP00456',
          'SP005': 'SP00456',
          'SP006': 'SP00456',
          'SP007': 'SP007',
          'SP008': 'SP008',
          'SP009': 'SP009',
          'SP010': 'SP008',
          'SP011': 'SP008',
          'SP012': 'SP008',
          'SP013': 'SP008',
          'SP014': 'SP008',
          'SP015': 'SP008',
          'SP016': 'SP008',
          'SP017': 'SP008',
          'SP018': 'SP008',
          'SP019': 'SP0019',
          'SP020': 'SP0020',
          'SP021': 'SP0021',
          //供试品

          'GSP001': 'GSP001',
          'GSP002': 'GSP002',
          'GSP003': 'GSP003',
          'GSP004': 'GSP004',
          'GSP005': 'GSP005',
          'GSP006': 'GSP002',
          'GSP007': 'SP00456',
          'GSP008': 'GSP002',
          'GSP009': 'GSP009',
          'GSP010': 'GSP010',
          'GSP015': 'GSP015',
          'GSP011': 'GSP009',
          'GSP012': 'GSP002',
          'GSP013': 'GSP002',
          'GSP014': 'GSP002',
          //试验物质配制计划表/麻精药领取申请单/毒麻药品配制记录表
          'SYWZPZJHB': 'SYWZPZJHB',
          'MJYLQSQD': 'MJYLQSQD',
          'DMYPPZJLB': 'DMYPPZJLB',
          //PCR
          'PCR001': 'SP001',
          'PCR002': 'SP00456',
          'PCR003': 'SP00456',
          'PCR004': 'SP00456',
          'PCR005': 'PCR005',
          'PCR006': 'SP0020',
          'PCR007': 'PCR007',
          'PCR008': 'PCR008',
          'PCR009': 'PCR009',
          'PCR010': 'PCR010',
          'PCR011': 'PCR011',
          'PCR012': 'PCR012',
          'PCR013': 'SP00456',
          //LBA
          'LBA001': 'SP001',
          'LBA002': 'LBA002',
          'LBA003': 'LBA003',
          'LBA004': 'LBA004',
          'LBA005': 'SP00456',
          'LBA006': 'LBA006',
          'LBA007': 'SP00456',
          'LBA008': 'LBA008',
          //ADA
          'ADA001': 'SP001',
          'ADA002': 'LBA002',
          'ADA003': 'LBA003',
          'ADA004': 'LBA004',
          'ADA005': 'SP00456',
          'ADA006': 'LBA006',
          'ADA007': 'SP00456',
          //样品
          'YP001': 'SP001',
          'YP002': 'YP002',
          'YP003': 'YP003',
          'YP004': 'YP004',
          'YP005': 'YP005',
          //细胞
          'XB001': 'XB001',
          //动技
          'DJ001': 'DJ001',
          'DJ002': 'DJ002',
          'DJ003': 'DJ003',
          //病理
          'BL001': 'BL001',
          'BL002': 'BL002',
          //毒理
          //DL001-SYWZPZJHB
          'DL002': 'SP001',
          'DL003': 'DL003',
          'DL004': 'DL004',
          'DL005': 'DL005',
          'DL006': 'DL006',
          'DL007': 'DL007',
          'DL008': 'DL008',
          'DL009': 'DL009',
          'DL010': 'DL010',
          'DL011': 'DL011',
          'DL012': 'DL012',
          'DL013': 'DL013',
          'DL014': 'DL014',
          'DL015': 'DL015',
          'DL016': 'DL016',
          'DL017': 'DL017',
          'DL018': 'DL018',
          'DL019': 'DL019',
          'DL020': 'DL020',
          'DL021': 'DL021',
          'DL022': 'DL022',
          'DL023': 'DL023',
          'DL024': 'DL024',
        }
      }
      return this.componentMap || "Demo"
    }
  },
  watch: {
    sn: {
      immediate: true,
      handler(v) {
        console.log(v, "sn")
      }
    },
    templateData: {
      immediate: true,
      deep: true,
      handler(v) {
        if (v) {
          if (v.zdxgjl) {
            this.zdxgjl = JSON.parse(v.zdxgjl) || [];
          }
          if (v.submittedCodes) {
            this.submittedCodes = JSON.parse(v.submittedCodes) || [];
          }
          if (v.fhyjjl) {
            this.fhyjjl = JSON.parse(v.fhyjjl) || [];
          }
          if (v.zdgxjl) {//qc勾选记录
            this.fieldCheckObj = JSON.parse(v.zdgxjl) || {};
          }
        }
      }
    }
  },
  provide() {
    return {
      //分发给子组件的fillType
      templateData: this.templateData,
      templateFillType: this.fillType,
      getZdxgjl: () => this.zdxgjl,
      getSubmittedCodes: () => this.submittedCodes,
      getFhyjjl: () => this.fhyjjl,
      getFieldCheckObj: () => this.fieldCheckObj,
      //更新提交记录
      updateZdxgjl: (data) => {
        this.zdxgjl.unshift(data);
      },
      //更新已提交数据的codes
      updateSubmittedCodes: (code) => {
        if(!this.submittedCodes.includes(code)){
          this.submittedCodes.unshift(code);
          return
        }
      },
      //更新复核意见记录
      updateFhyjjl: (data) => {
        this.fhyjjl.unshift(data);
      },
      //替换复核意见记录
      replaceFhyjjl: (data) => {
        this.fhyjjl = data;
      },
      //更新字段检查对象
      updateFieldCheckObj: (data) => {
        this.fieldCheckObj = { ...this.fieldCheckObj, ...data };
      },

    }
  },
  data() {
    return {
      info: {},
      zdxgjl: [],
      fhyjjl: [],
      fieldCheckObj: {},
      currentEditSignUuid: null, // 当前请求EditSign的HandleFormItem的uuid
      latestParams: {},//用于存储最新的params
      hasCustomTable: false,//是否有自定义表格
      submittedCodes: [],//用于记录已提交数据的codes
    };
  },
  created() {
    this.debouncedEmit = debounce(this.emitToParent, 100)
  },
  mounted() {
    EventBus.$on('onModifyRecord', this.handleModyfyRecord);
    //分装弹窗
    EventBus.$on("showSubPackageDialog", (data) => {
      this.$refs.subPackageDialogRef.show(data)
    })
    //标签打印弹窗
    EventBus.$on("showTagPrintDialog", (data) => {
      this.$refs.tagPrintDialogRef.show(data)
    })
    //选择仪器弹窗
    EventBus.$on("showSelectInstrumentDialog", (data) => {
      this.$refs.selectInstrumentDialogRef.show(data.studyFormId, data)
    })
    //选择试剂弹窗
    EventBus.$on("showSelectReagentDialog", (data) => {
      this.$refs.selectReagentDialogRef.show(data.studyFormId, data)
    })
    //选择试剂/供试品/给药制剂弹窗
    EventBus.$on("showSelectMixReagentDialog", (data) => {
      this.$refs.selectMixReagentDialogRef.show(data.studyFormId, data,this.templateData.studyId)
    })
    EventBus.$on("hideSelectMixReagentDialog", (data) => {
      this.$refs.selectMixReagentDialogRef.hide()
    })
    //显示电子签名弹窗
    EventBus.$on("showEditSignDialog", (data) => {
      this.currentEditSignUuid = data.uuid;
      this.$refs.editSignRef.show();
    })
  },
  beforeDestroy() {
    // 记得移除监听，避免内存泄漏
    EventBus.$off('onModifyRecord');
    EventBus.$off("showSubPackageDialog");
    EventBus.$off("showTagPrintDialog");
    EventBus.$off("showSelectReagentDialog");
    EventBus.$off("showSelectInstrumentDialog");
    EventBus.$off("showSelectMixReagentDialog");
    EventBus.$off("showEditSignDialog");
    EventBus.$off("hideSelectMixReagentDialog");
    this.debouncedEmit.cancel()
  },
  methods: {
    handleModyfyRecord(data) {
      const { source } = data;
      if (source === "customTable") {
        this.latestParams = data;
        // delete this.latestParams.source
        this.hasCustomTable = true
        // 取消之前的等待
        this.debouncedEmit.cancel()
        this.emitToParent()
      }else if(!source  && !this.hasCustomTable){
        this.latestParams = data
        this.debouncedEmit()
      }
    },
    emitToParent() {
      if (this.latestParams) {
        console.log(this.latestParams,"this.latestParams")
        this.$emit(this.emitName, this.latestParams)
      }
    },
    // 处理电子签名取消事件
    handleEditSignCancel() {
      if (this.currentEditSignUuid) {
        EventBus.$emit('onEditSignCancel', { uuid: this.currentEditSignUuid });
        EventBus.$emit('onFormEditSignCancel', { uuid: this.currentEditSignUuid });
        this.currentEditSignUuid = null;
      }
    },
    // 处理电子签名确认回调事件
    handleEditSignCallback(data) {
      if (this.currentEditSignUuid) {
        EventBus.$emit('onEditSignCallback', { uuid: this.currentEditSignUuid, data });
        this.currentEditSignUuid = null;
      }
    },
    async getFormData() {
      if (this.fillType === "actFill") {
        //检查是否有未填写的复核意见
        const flag = this.fhyjjl.every((item) => !!item.content && !!item.reply)
        console.log(this.fhyjjl, flag, "flag")
        if (!flag) {
          this.$message.error("疑问项还未回复，请回复后再提交");
          return;
        }
      }
      return await this.$refs.templateComponent.getFormData();
    },
    getResource() {
      return this.$refs.templateComponent.getResource();
    },
    getYqResource() {
      return this.$refs.templateComponent.getYqResource();
    },
    getJcbList() {
      return this.$refs.templateComponent.getJcbList();
    },
    getXbxj() {
      return this.$refs.templateComponent.getXbxj();
    },
    getFilledFormData() {
      return this.$refs.templateComponent.getFilledFormData();
    },
    getTemplateComponent() {
      return this.templateComponentMap[this.sn]
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.template-table {
  background: #fff;
  padding: 10px 10px;
  width: 100%;
}
</style>