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>
    <keep-alive>
      <component
        v-if="activeName && isValidComponent(activeName)"
        :is="activeName"
        :key="activeName"
        ref="componentRef"
        v-bind="activeNameProps"
      />
    </keep-alive>
  </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')
    },
    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,
        extractedList: [],
        wwType: ''
      };
    },
    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,
              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
            };
        }
      }
    },
    async created() {
      this.getPickOrderDetail();
    },
    methods: {
      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.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.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>