kd-aiot-frontend-wt/src/views/bpm/handleTask/components/selectedCollectionOutbound/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>
    <component
      v-if="activeName && isValidComponent(activeName)"
      :is="activeName"
      :key="cKey"
      ref="componentRef"
      :taskDefinitionKey="taskDefinitionKey"
      :activeComp="activeComp"
      :businessId="businessId"
      :infoData="form"
      :permissionType="permissionType"
    />
  </div>
</template>

<script>
  import { getPickOrderById } from '@/api/pda';
  export default {
    name: 'boxTabPage',
    components: {
      tab1: () => import('./detailDialog.vue'),
      tab2: () => import('./outsourcingOutbound.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);
      }
    },
    async created() {
      this.getPickOrderDetail();
    },
    methods: {
      isValidComponent(componentName) {
        const validComponents = ['tab1', 'tab2'];
        return validComponents.includes(componentName);
      },
      handleClick(val) {
        this.activeName = val.name;
      },
      async getTableValue() {
        console.log(this.$refs.componentRef);
        return {
          form: this.form,
          returnStorageData: this.$refs.componentRef.getReturnStorage
            ? await this.$refs.componentRef.getReturnStorage()
            : ''
        };
      },
      getPickOrderDetail() {
        getPickOrderById(this.businessId).then((data) => {
          data.detailList = data.detailList.map((item) => {
            item.code = data.code;
            return item;
          });
          this.form = data;
          console.log(this.form);
        });
      }
    }
  };
</script>
<style scoped lang="scss"></style>