kd-aiot-frontend-wt/src/views/bpm/handleTask/components/purchaseOrder/outSourceSend/boxTabPage.vue

<template>
  <div>
    <div v-for="item in tabOption" :label="item.label" :name="item.name">
      <div class="title"> {{ item.label }}</div>
      <component
        :is="item.name"
        :key="item.name"
        :ref="'componentRef' + item.name"
        v-if="form.id"
        v-bind="activeNameProps(item.name)"
      />
    </div>
  </div>
</template>
<script>
  import { getPurchaseOutSourceSendDetailAPI } from '@/api/bpm/components/purchasingManage/outSourceSend';
  export default {
    name: 'boxTabPage',
    components: {
      tab1: () => import('./detailDialog.vue'),
      tab2: () => import('@/views/bpm/outgoingManagement/outbound.vue'),
      tab3: () => import('@/views/bpm/outgoingManagement/details.vue')
    },
    props: {
      taskDefinitionKey: {
        type: String,
        default: ''
      },
      activeComp: {
        type: String,
        default: ''
      },
      permissionType: {
        type: String,
        default: 'view'
      },
      businessId: {
        type: String,
        default: ''
      },
      isView: ''
    },
    data() {
      return {
        form: {},
        activeName: 'tab1',
        cKey: 1
      };
    },
    computed: {
      tabOption() {
        let list = [
          {
            label: '发货单信息',
            name: 'tab1',
            isShow: true
          },
          {
            label: '出库单信息',
            name: this.isView ? 'tab3' : 'tab2',
            isShow: true
          }
        ];
        return list.filter((item) => item.isShow);
      }
    },
    async created() {
      this.form = await getPurchaseOutSourceSendDetailAPI(this.businessId);
    },
    methods: {
      activeNameProps(name) {
        switch (name) {
          case 'tab1':
            return {
              businessId: this.businessId
            };
          case 'tab2':
            return {
              form: this.form,
              bizType: 7,
              sourceBizNo: this.form.code,
            };
          case 'tab3':
            return {
              businessId: this.form.code
            };
        }
      },
      isValidComponent(componentName) {
        const validComponents = ['tab1', 'tab2'];
        return validComponents.includes(componentName);
      },
      handleClick(val) {
        this.activeName = val.name;
      },
      async getTableValue() {
        return {
          form: this.form,
          returnStorageData: this.$refs['componentReftab2'][0].getReturnStorage
            ? await this.$refs['componentReftab2'][0].getReturnStorage()
            : {}
        };
      }
    }
  };
</script>
<style scoped lang="scss">
  .title {
    font-size: 22px;
    font-weight: 800;
    margin-top: 15px;
  }
</style>