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

<template>
  <div class="template-table">
    <!-- <SP001 v-if="sn == 'SP0012'" />
    <SWYPFXRYPZB v-if="sn == 'SP001'" /> -->
    <component ref="templateComponent" :is="getTemplateComponent()" :templateData="templateData" :fillType="fillType">
    </component>
  </div>
</template>

<script>
import { EventBus } from "@/utils/eventBus"
//色谱
import SP001 from './comps/sp/SP001';
import SWYPFXRYPZB from "./comps/sp/SWYPFXRYPZB.vue";
import SWYPFXCBYPZB from "./comps/sp/SWYPFXCBYPZB.vue";
import SWYPBQGZYZBB from "./comps/sp/SWYPBQGZYZBB.vue";
import SWYPNBGZYZBB from "./comps/sp/SWYPNBGZYZBB.vue";
//色谱生物样品分析方法学样品制备表-10个类似
import ZQDYJMD from "./comps/sp/SWYPFXFFXYPZBB/ZQDYJMD.vue";
import QXWDX from "./comps/sp/SWYPFXFFXYPZBB/QXWDX.vue";
import Demo from "./comps/sp/Demo.vue";
//公用
import SYWZPZJHB from "./comps/gy/SYWZPZJHB.vue";
import MJYLQSQD from "./comps/gy/MJYLQSQD.vue";

export default {
  name: "TemplateTable",
  components: {
    MJYLQSQD, SYWZPZJHB,
    SP001, SWYPFXRYPZB, Demo, SWYPFXCBYPZB, SWYPBQGZYZBB, SWYPNBGZYZBB,ZQDYJMD,QXWDX
  },
  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': 'SWYPFXRYPZB',
          'SP002': 'SWYPFXCBYPZB',
          'SP003': 'SWYPBQGZYZBB',
          'SP004': 'SWYPNBGZYZBB',
          'SP008': 'ZQDYJMD',
          'SP010': 'QXWDX',
          'SYWZPZJHB': 'SYWZPZJHB',
          'MJYLQSQD': 'MJYLQSQD',
        }
      }
      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.fhyjjl) {
            this.fhyjjl = JSON.parse(v.fhyjjl) || [];
          }
          if (v.zdgxjl) {
            this.fieldCheckObj = JSON.parse(v.zdgxjl) || {};
            console.log(this.fieldCheckObj,v.zdgxjl,"v.zdgxjl")
          }
        }
      }
    }
  },
  provide() {
    return {
      //分发给子组件的fillType
      templateFillType: this.fillType,
      getZdxgjl: () => this.zdxgjl ,
      getFhyjjl: () => this.fhyjjl,
      getFieldCheckObj: () => this.fieldCheckObj,
      //更新提交记录
      updateZdxgjl: (data) => {
        this.zdxgjl.unshift(data);
      },
      //更新复核意见记录
      updateFhyjjl: (data) => {
        this.fhyjjl.unshift(data);
      },
      //替换复核意见记录
      replaceFhyjjl: (data) => {
        this.fhyjjl = data;
      },
      //更新字段检查对象
      updateFieldCheckObj: (data) => {
        this.fieldCheckObj = { ...this.fieldCheckObj, ...data };
      },

    }
  },
  data() {
    return {
      info: {},
      zdxgjl: [],
      fhyjjl: [],
      fieldCheckObj: {},
    };
  },
  mounted() {
    EventBus.$on('onModifyRecord', (data) => {
      this.$emit(this.emitName, data)
    })
  },
  beforeDestroy() {
    // 记得移除监听，避免内存泄漏
    EventBus.$off('onModifyRecord')
  },
  methods: {
    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();
    },
    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>