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 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 Demo from "./comps/sp/Demo.vue";
export default {
  name: "TemplateTable",
  components: { 
    SP001,SWYPFXRYPZB ,Demo,SWYPFXCBYPZB,SWYPBQGZYZBB,
  },
  props: {
    sn: {
      type: String,
      default: '',
    },
    fillType: {
      type: String,
      default: 'preFill',
    },
    templateData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    
    templateComponentMap() {
      if (!this.componentMap) {
        this.componentMap = {
          'SP001': 'SWYPFXRYPZB',
          // 'SP002': 'SWYPFXCBYPZB',
          'SP002': 'SWYPBQGZYZBB',
          'SP003': 'SWYPBQGZYZBB',
          // 'SP001': 'Demo',
        }
      }
      return this.componentMap || "Demo"
    }
  },
  watch: {
    sn: {
      immediate: true,
      handler(v) {
        console.log(v,"sn")
      }
    }
  },
  data() {
    return {
      info: {},
    };
  },
  mounted() {
    console.log(this.fillType,"fillType")
  },
  methods: {
    async getFormData() {
      return await this.$refs.templateComponent.getFormData();
    },
    getTemplateComponent() {
      return this.templateComponentMap[this.sn] 
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.template-table {
  background: #fff;
  padding: 10px 10px;
}
</style>