kd-aiot-frontend-wt/src/views/bpm/handleTask/components/saleOrder/entrustedReceive/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"
        type="sourceBizNo"
        ref="componentRef"
        v-bind="activeNameProps"
      />
    </keep-alive>
  </div>
</template>

<script>
  import { getPSaleEntrustedReceiveDetailAPI } from '@/api/bpm/components/saleManage/entrustedReceive';
  import { deepClone } from '@/components/FormGenerator/utils/index';
  export default {
    name: 'boxTabPage',
    components: {
      tab1: () => import('./detailDialog.vue'),
      tab2: () => import('@/views/bpm/stockManagement/storage.vue'),
      tab3: () => import('@/views/bpm/stockManagement/quality.vue'),
      tab4: () => import('@/views/bpm/stockManagement/details.vue')
    },
    props: {
      taskDefinitionKey: {
        type: String,
        default: ''
      },
      activeComp: {
        type: String,
        default: ''
      },
      permissionType: {
        type: String,
        default: 'view'
      },
      businessId: {
        type: String,
        default: ''
      }
    },
    data() {
      let activeName;
      return {
        isUpload: false,
        form: {},
        activeName: 'tab1',
        cKey: 1,
        tabOption: [
          {
            label: '收货单详情',
            name: 'tab1',
            isShow: true
          }
        ]
      };
    },
    computed: {
      activeNameProps() {
        switch (this.activeName) {
          case 'tab1':
            return {
              taskDefinitionKey: this.taskDefinitionKey,
              activeComp: this.activeComp,
              businessId: this.businessId,
              infoData: this.form,
              permissionType: this.permissionType
            };
          case 'tab2':
            return {
              form: this.form,
              bizType: 7,
              sourceBizNo: this.form.code,
              saleProductList: this.form.productList
            };
          case 'tab3':
            return {
              taskDefinitionKey: this.taskDefinitionKey,
              businessId: this.form.code
            };
          case 'tab4':
            return {
              businessId: this.form.code,
              isUpload: this.isUpload
            };
        }
      }
    },
    async created() {
      await this.getSendSaleOrderDetail(this.businessId);
      switch (this.taskDefinitionKey) {
        case 'storeManagerApprove':
          this.tabOption.push({
            label: '入库',
            name: 'tab2',
            isShow: true
          });
          break;
        case 'qualityInspection':
          this.tabOption.push({
            label: '入库质检',
            name: 'tab3',
            isShow: true
          });
          break;
        case 'QCLeaderApprove':
          this.tabOption.push({
            label: '入库详情',
            name: 'tab4',
            isShow: true
          });
          this.isUpload = false;
          break;
        case 'qualityInspectionFeedback':
          this.tabOption.push({
            label: '质检详情',
            name: 'tab4',
            isShow: true
          });
          this.isUpload = true;
          break;
      }
    },
    methods: {
      isValidComponent(componentName) {
        const validComponents = ['tab1', 'tab2', 'tab3', 'tab4'];
        return validComponents.includes(componentName);
      },
      handleClick(val) {
        console.log(val.name);
        this.activeName = val.name;
        if (val.name == 'tab2') {
          this.$emit('activeCompChange', 'inoutBound');
          // setTimeout(() => {
          //   console.log(this.$refs.componentRef);
          //   this.$refs.componentRef.pickerSuccess(this.form);
          // }, 500);
        } else {
          this.$emit('activeCompChange', 'inoutBoundView');
        }
      },
      async getTableValue() {
        console.log(this.$refs.componentRef);
        return {
          form: this.$refs.componentRef.form,
          returnStorageData: this.$refs.componentRef.getReturnStorage
            ? await this.$refs.componentRef.getReturnStorage()
            : '',
          isAllChecked:
            this.$refs.componentRef.getStatus &&
            this.$refs.componentRef.getStatus(),
          qualityInspector:
            (this.$refs.componentRef.getQualityFile &&
              this.$refs.componentRef.getQualityFile()) ||
            {}
        };
      },
      //发货单详情
      async getSendSaleOrderDetail(id) {
        const data = await getPSaleEntrustedReceiveDetailAPI(id);
        if (data) {
          this.form = deepClone(data);
          this.form.supplierId = data.contactId;
          this.form.supplierName = data.contactName;
          this.form.productList = this.form.productList.map((item) => {
            item.supplierMark = item.customerMark;
            return item;
          });
          console.log(this.form);
        }
      }
    }
  };
</script>
<style scoped lang="scss"></style>