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="12">
            <el-form-item label="物品名称：" prop="categoryName">
              {{ form.categoryName }}
            </el-form-item>
            <el-form-item label="物品分类：" prop="categoryLevelName">
              {{ form.categoryLevelName }}
            </el-form-item>
            <el-form-item label="包装数量：" prop="totalPackage">
              {{ form.totalPackage }}
            </el-form-item>
            <el-form-item label="包装单位：" prop="packingUnit">
              {{ form.packingUnit }}
            </el-form-item>
            <el-form-item label="计量单位：" prop="totalCount">
              {{ form.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"
      v-if="activeComp == 'storage'"
      :inboundType="form.sourceType"
      type="sourceBizNo"
      @success="success"
    ></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 './productionWarehousing.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: {}
      };
    },
    async created() {
      await this.getDetailData(this.businessId);
      // if (this.taskDefinitionKey == 'storeman') {
      //   this.activeComp = 'storage';
      //   this.$emit('activeCompChange', 'storage');
      //   this.$nextTick(() => {
      //     this.$refs.add.pickerSuccess(this.form);
      //   });
      // }
    },

    methods: {
      changeActive(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) {
          this.form = data;
          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>