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

<template>
  <div class="content-height p20">
    <div>
      <div class="content-detail mt40">
        <div class="basic-details">
          <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
        </div>
        <div class="mt20">
          <el-form label-width="110px">
            <el-col :span="8">
              <el-form-item label="调拨名称">
                <span>{{ infoData.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调拨单号">
                <span>{{ infoData.id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                <span>{{ infoData.allotName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <span>{{ infoData.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调拨类型">
                <span>{{
                  allocationType.filter((item) => item.code == infoData.type)[0]
                    ?.label
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调出库">
                <span>{{ infoData.sourceWarehouse }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调入库">
                <span>{{ infoData.targetWarehouse }}</span>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
      <div class="content-detail mt20">
        <HeaderTitle title="调拨明细" size="16px"></HeaderTitle>
        <div class="mt20">
          <!-- <AssetsCell
            v-for="(item, index) in detailList"
            :key="index"
            :item="item"
            type="detail"
          /> -->
          <el-table
            ref="table"
            :data="detailList"
            tooltip-effect="dark"
            :max-height="500"
            border
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="调出仓库"
              prop="warehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出库区"
              prop="areaName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出货架"
              prop="goodsShelfName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出货位"
              prop="goodsAllocationName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入仓库"
              prop="targetWarehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入库区"
              prop="targetAreaName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入货架"
              prop="targetGoodsShelfName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入货位"
              prop="targetGoodsAllocationName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="牌号"
              prop="brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="packingQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="单位"
              prop="packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import { allocationType } from '@/utils/dict/warehouse';

  export default {
    props: {
      businessId: {
        default: ''
      },
      taskDefinitionKey: {
        default: ''
      }
    },
    data() {
      return {
        allocationType,
        detailList: [],
        infoData: {}
      };
    },
    created() {
      console.log(this.taskDefinitionKey);
      console.log(this.allocationType);
      this._getDetail();
    },
    methods: {
      async _getDetail() {
        const res = await storageApi.getAllotDetailList({
          applyId: this.businessId
        });
        const data = await storageApi.getAllotDetail(this.businessId);
        this.infoData = data;
        console.log('this.infoData-------', this.infoData);
        // 库内调拨
        this.detailList = res.map((item) => {
          return {
            ...item,
            categoryCode: this.infoData.categoryCode,
            categoryName: this.infoData.categoryName,
            brandNum: this.infoData.brandNum,
            categoryModel: this.infoData.model,
            specification: this.infoData.specification
          };
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .p20 {
    padding: 20px;
  }
  .mt40 {
    margin-top: 40px;
  }

  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .content-height {
    height: auto;
    background: #fff;
  }
</style>