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

<template>
  <div>
    <div v-for="item in tabOption" :label="item.label" :name="item.name">
      <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 { deepClone } from '@/components/FormGenerator/utils/index';
  import { getPickOrderById } from '@/api/pda';
  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,
        extractedList: [],
        wwType: ''
      };
    },
    computed: {
      tabOption() {
        let list = [
          {
            label: '领料单详情',
            name: 'tab1',
            isShow: true
          },
          {
            label: '出库',
            name: this.isView ? 'tab3' : 'tab2',
            isShow: this.isView || this.taskDefinitionKey == 'storeman'
          }
        ];
        return list.filter((item) => item.isShow);
      }
    },
    async created() {
      this.getPickOrderDetail();
    },
    methods: {
      activeNameProps(activeName) {
        switch (activeName) {
          case 'tab1':
            return {
              businessId: this.businessId,
              form: this.form
            };
          case 'tab2':
            return {
              form: this.form,
              bizType: 11,
              sourceBizNo: this.form.code,
              detailList: this.form.detailList,
              type: '自选领用出库',
              wwType: this.wwType,
              extractedList: this.extractedList
            };
          case 'tab3':
            return {
              businessId: this.form.code
            };
        }
      },
      isValidComponent(componentName) {
        const validComponents = ['tab1', 'tab2'];
        return validComponents.includes(componentName);
      },
      handleClick(val) {
        this.activeName = val.name;
        if (val.name == 'tab2') {
          this.$emit('activeCompChange', 'inoutBound');
        } else {
          console.log('activeCompChange------------');
          this.$emit('activeCompChange', 'inoutBoundView');
        }
      },
      async getTableValue() {
        console.log(this.$refs['componentReftab2']);
        return {
          form: this.form,
          returnStorageData: this.$refs['componentReftab2'][0].getReturnStorage
            ? await this.$refs['componentReftab2'][0].getReturnStorage()
            : {}
        };
      },
      getPickOrderDetail() {
        getPickOrderById(this.businessId).then((data) => {
          data.detailList = data.detailList.map((item) => {
            item.code = data.code;
            return item;
          });
          this.wwType = data.type;
          this.extractedList = data.detailList.map((item) => ({
            taskId: item.taskId,
            workOrderId: item.workOrderId
          }));
          let categoryLevelTopIds = data.detailList.map(
            (item) => item.rootCategoryLevelId
          );
          let filterCategoryLevelTopIds = Array.from(
            new Set(categoryLevelTopIds)
          );
          data.categoryLevelTopId = filterCategoryLevelTopIds.join(',');
          this.form = deepClone(data);
        });
      }
    }
  };
</script>
<style scoped lang="scss"></style>