kd-aiot-frontend-wt/src/views/bpm/handleTask/components/productionWarehousing/detailDialog.vue

<template>
  <div>
    <!-- <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="changeActive(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div> -->
    <div v-show="activeComp == 'main'">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <headerTitle title="入库单详情"></headerTitle>
        <el-row>
          <el-col :span="6">
            <el-form-item label="物品名称：" prop="categoryName">
              {{ form.categoryName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物品编码：" prop="categoryCode">
              {{ form.categoryCode }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物品分类：" prop="categoryLevelName">
              {{ form.categoryLevelName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包装数量：" prop="totalPackage">
              {{ totalPackage }}
            </el-form-item>
          </el-col>
            <!-- <el-form-item label="单位：" prop="packingUnit">
              {{ form.packingUnit }}
            </el-form-item> -->
          <el-col :span="6">
            <el-form-item label="计量数量：" prop="totalCount">
              {{ totalCount }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="车牌号：" prop="carNo">
              {{ form.carNo }}
            </el-form-item>

            <el-form-item label="收货单编码：" prop="receiveNo">
              {{ form.receiveNo }}
            </el-form-item>
            <el-form-item label="制单人：" prop="makerName">
              {{ form.makerName }}
            </el-form-item>
            <el-form-item prop="orderNo" label="订单编码：">
              {{ form.orderNo }}
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <keep-alive>
      <add
        ref="add"
        :form="form"
        :bizType="1"
        :sourceBizNo="form.code"
        :detailList="form.detailList"
      ></add>
    </keep-alive>
  </div>
</template>

<script>
  import { getStorageDetail } from '@/api/mes/index';
  import dictMixins from '@/mixins/dictMixins';
  import { reviewStatusEnum } from '@/enum/dict';

  import add from '@/views/bpm/stockManagement/storage.vue';

  export default {
    props: {
      businessId: {
        default: ''
      },
      taskId: {
        default: ''
      },
      taskDefinitionKey: {
        default: ''
      }
    },
    components: {
      add
    },
    mixins: [dictMixins],
    data() {
      return {
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '生产入库单详情' },
          { key: 'storage', name: '生产入库' }
        ],
        reviewStatusEnum,
        rules: {},
        form: {},
        detailData: {},
        totalPackage:'',
        totalCount:''
      };
    },
    async created() {
      await this.getDetailData(this.businessId);
    },

    methods: {
      changeActive(item) {
        console.log('item', item);
        this.activeComp = item.key;
        this.$emit('activeCompChange', item.key);
        // if (this.taskDefinitionKey == 'storeman' && item.key == 'storage') {
        //   this.$nextTick(() => {
        //     this.$refs.add.pickerSuccess(this.form);
        //   });
        // }
      },
      success() {
        this.$emit('handleClose');
      },
      async getTableValue() {
        return {
          form: this.form,
          returnStorageData:
            this.$refs.add && (await this.$refs.add.getReturnStorage())
        };
      },
      async getDetailData(id) {
        this.loading = true;
        const data = await getStorageDetail(id);
        console.log('data-----------', data);
        this.loading = false;
        if (data) {
          let categoryLevelTopIds = data.detailList.map(
            (item) => item.rootCategoryLevelId
          );
          let filterCategoryLevelTopIds = Array.from(
            new Set(categoryLevelTopIds)
          );
          data.categoryLevelTopId = filterCategoryLevelTopIds.join(',');
          this.form = data;
          this.totalPackage = this.form.detailList.length +this.form?.detailList[0]?.packingUnit;
          this.totalCount = this.form.totalCount +this.form?.detailList[0]?.measuringUnit;
          this.detailData = data;
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .ele-dialog-form {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .headbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .amount {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
</style>