kd-aiot-frontend-wms/src/views/warehouseManagement/stockLedger/batchDetails.vue

<template>
  <div class="page">
    <!--    <div class="page-title">
      <PageHeader :title="`批次号${baseInfo.batchNum || ''}`"></PageHeader>
    </div> -->
    <div class="content-detail">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="zero">
          <BaseInfo :baseInfo="baseInfo" ref="baseInfoRef"></BaseInfo>
          <warehouseConfigVue ref="warehouseConfigRef"></warehouseConfigVue>
        </el-tab-pane>
        <el-tab-pane label="库存明细" name="first">
          <WarehouseDetail
            :baseInfo="baseInfo"
            :baseParams="baseParams"
            :stockList="stockList"
          ></WarehouseDetail>
        </el-tab-pane>
        <el-tab-pane label="批次明细" name="pcmx">
          <BatchDetail></BatchDetail>
        </el-tab-pane>
        <el-tab-pane label="入库单" name="second" lazy>
          <InWarehouse :baseInfo="baseInfo" :baseParams="baseParams"
        /></el-tab-pane>
        <el-tab-pane label="调拨记录" name="third" lazy>
          <InventoryAllocation :baseInfo="baseInfo" :baseParams="baseParams" />
        </el-tab-pane>
        <el-tab-pane label="出库单" name="fourth" lazy>
          <OutWarehouse :baseInfo="baseInfo" :baseParams="baseParams"
        /></el-tab-pane>
        <el-tab-pane label="报损报溢" name="fifth" lazy>
          <ReportLoss :baseInfo="baseInfo" :baseParams="baseParams" />
        </el-tab-pane>
        <el-tab-pane
          label="质检单"
          name="sixth"
          lazy
          v-if="baseInfo.assetType == 3"
        ></el-tab-pane>
      </el-tabs>

      <template v-if="activeName === 'sixth'">
        <img class="certificate" :src="certificate" />
      </template>
    </div>
  </div>
</template>

<script>
  import BaseInfo from './components/details/BaseInfo.vue';
  import OutWarehouse from './components/details/OutWarehouse.vue';
  import InWarehouse from './components/details/InWarehouse.vue';
  import ReportLoss from './components/details/ReportLoss.vue';
  import InventoryAllocation from './components/details/InventoryAllocation.vue';
  import WarehouseDetail from './components/details/WarehouseDetail.vue';
  import BatchDetail from './components/details/BatchDetail.vue';
  import warehouseConfigVue from './components/details/warehouseConfig.vue';

  // import PageHeader from '@/components/PageHeader'
  import BatchDetailDialog from './components/BatchDetailDialog.vue';
  import {
    getCateInfo,
    getDetails,
    ledgerdetailPage,
    ledgerPage
  } from '@/api/classifyManage/itemInformation';
  export default {
    components: {
      // PageHeader,
      BaseInfo,
      BatchDetailDialog,
      InWarehouse,
      OutWarehouse,
      InventoryAllocation,
      ReportLoss,
      BatchDetail,
      WarehouseDetail,
      warehouseConfigVue
    },
    data() {
      return {
        activeName: 'zero',
        tableData: {
          first: [],
          second: [],
          third: [],
          fourth: [],
          fifth: []
        },
        certificate: '',
        stockList: []
      };
    },
    computed: {
      dimension() {
        return this.$route.query.dimension;
      },
      baseInfo() {
        return {};
        // this.$store.state.stockManagement.stockLedgerBaseInfo[
        //   this.$route.query.key
        // ] || {}
      },
      tableColumn() {
        return this.tableColumnConfig[this.activeName] || [];
      },
      baseParams() {
        return {
          inventoryCode: this.baseInfo.assetCode,
          // // name: this.baseInfo.assetName,
          // // warehousingType: _warehousingType(this.baseInfo.assetType)
          // //   .warehousingType,
          batchNum: this.baseInfo.batchNum
        };
      }
    },
    created() {
      this.getDetailInfo(this.$route.query);
    },
    methods: {
      async getDetailInfo(row) {
        const res = await getDetails(row.assetId);
        this.$nextTick(() => {
          console.log(res);
          this.$refs.baseInfoRef.getDetailInfoAugr(res.category);
          this.$refs.warehouseConfigRef.getDetailInfoAugr(res.categoryWms);
        });
        const rep = await ledgerdetailPage({
          pageNum: 1,
          size: -1,
          ledgerId: row.id
        });
        this.stockList = rep.list;
        // const ledger = await ledgerPage({
        //   pageNum: 1,
        //   size: -1,
        //   inLedgerId: row.id
        // });
      },
      handleCellClick(row) {
        this.$refs.batchDetailRef.open(this.activeName, {
          ...row,
          batchNum: this.baseInfo.batchNum
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    background: #fff;
    padding: 10px;
    margin: 10px 0 10px 0;
    height: calc(100vh - 80px);
    padding: 10px;
    overflow-y: auto;
  }
  .page-title {
  }
  .content-detail {
    padding: 20px;
  }

  .certificate {
    height: 65vh;
    display: block;
    margin: 10px auto;
  }
</style>