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

<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabOption"
        :label="item.label"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component
        v-if="activeName && isValidComponent(activeName)"
        :is="activeName"
        ref="componentRef"
        v-bind="activeNameProps"
      />
    </keep-alive>
  </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/outbound2.vue')
    },
    props: {
      taskDefinitionKey: {
        type: String,
        default: ''
      },
      activeComp: {
        type: String,
        default: ''
      },
      permissionType: {
        type: String,
        default: 'view'
      },
      businessId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {},
        activeName: 'tab1',
        cKey: 1
      };
    },
    computed: {
      tabOption() {
        let list = [
          {
            label: '发货单详情',
            name: 'tab1',
            isShow: true
          },
          {
            label: '出库',
            name: 'tab2',
            isShow: true
          }
        ];
        return list.filter((item) => item.isShow);
      },
      activeNameProps() {
        switch (this.activeName) {
          case 'tab1':
            return {
              businessId: this.businessId
            };
          case 'tab2':
            return {
              form: this.form,
              bizType: 7,
              sourceBizNo: this.form.code
            };
        }
      }
    },
    async created() {
      this.form = await getPurchaseOutSourceSendDetailAPI(this.businessId);
      console.log(this.form, 'sssssssssssssssssssssssssssssss');
    },
    methods: {
      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.componentRef.getReturnStorage
            ? await this.$refs.componentRef.getReturnStorage()
            : ''
        };
      }
    }
  };
</script>
<style scoped lang="scss"></style>