kd-aiot-frontend-wms/src/views/warehouseManagement/stockLedger/components/details/BatchDetail.vue

<!-- 批次明细 -->
<template>
  <div class="detail-box">
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
    >
      <el-table-column width="80px" label="序号" type="index" />

      <el-table-column label="批次号" prop="batchNum" sortable>
        <template slot-scope="{ row }">
          <el-popover
            placement="bottom-start"
            title=""
            width="900"
            trigger="click"
          >
            <el-table
              :data="row.children"
              height="300"
              row-key="index"
              :header-cell-style="{
                background: '#EEEEEE',
                border: 'none'
              }"
              v-loading="row.loading"
            >
              <el-table-column width="80px" label="序号" type="index" />
              <el-table-column label="入库单号" prop="bizNum"></el-table-column>
              <el-table-column label="入库场景" prop="bizType">
                <template slot-scope="{ row }">
                  {{ getSceneState(+row.bizType) }}
                </template>
              </el-table-column>
              <el-table-column label="数量" prop="count"></el-table-column>
              <el-table-column
                label="包装单位"
                width="120"
                prop="packingUnit"
              ></el-table-column>
              <el-table-column
                label="最小包装单位"
                width="120"
                prop="minPackUnit"
              ></el-table-column>

              <el-table-column
                label="库位"
                prop=""
                min-width="150"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  {{ row.position }}
                </template>
              </el-table-column>
              <el-table-column
                label="入库时间"
                prop="updateTime"
              ></el-table-column>
              <el-table-column label="入库人" prop=""></el-table-column>
              <el-table-column label="条码" prop=""></el-table-column>
            </el-table>
            <el-link
              type="primary"
              slot="reference"
              @click.stop="handleExpand(row)"
              >{{ row.batchNum }}</el-link
            >
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="库存数量"
        prop="availableCountBase"
      ></el-table-column>

      <el-table-column label="计量单位" prop="measuringUnit"></el-table-column>
      <el-table-column label="重量单位" prop=""></el-table-column>
      <el-table-column label="包装数量" prop="packingUnit"></el-table-column>
      <el-table-column label="最小包装单元" prop=""></el-table-column>
      <el-table-column label="首次入库时间" prop="createTime"></el-table-column>
      <el-table-column label="最近出库时间" prop=""></el-table-column>
      <el-table-column label="质检单" prop="" v-if="baseInfo.assetType === 3">
        <template slot-scope="{ row }">
          <el-button type="text" @click="_getAnalysisCertificate(row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      :page.sync="page"
      :size.sync="size"
      @pagination="handlePageChange"
    />

    <el-dialog :visible.sync="certificateVisible" title="质检单" width="55vw">
      <div style="text-align: center; max-height: 80vh; overflow: auto">
        <img class="certificate" :src="certificate" style="width: 50vw" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination';
  // import { sceneState } from '@/utils/dict/index'
  // import { useDictLabel } from '@/utils/dict/index'
  // import {
  //   inWarehouseSceneDetail,
  //   getAnalysisCertificate,
  //   getDetail
  // } from '@/api/stockManagement/stockLedger'
  // import { imageView } from '@/utils/index'

  import { getBatchDetails } from '@/api/classifyManage/index';
  export default {
    components: { Pagination },
    props: {
      baseInfo: {
        type: Object,
        default: () => ({})
      },
      baseParams: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        searchForm: { batchNum: '', isZero: '' },
        tableData: [],
        size: 10,
        page: 1,
        total: 0,
        certificateVisible: false,
        certificate: ''
      };
    },
    created() {
      this.getList();
    },
    methods: {
      // getSceneState: useDictLabel(sceneState),
      //质检单  资产类型、资产编码以及批次号获取质检单
      async _getAnalysisCertificate(row) {
        if (row.certificate) {
          this.certificate = row.certificate;
          this.certificateVisible = true;

          return;
        }
        const res = await getAnalysisCertificate({
          code: this.baseInfo.assetType,
          ...this.baseParams,
          batchNum: row.batchNum
        });
        if (res?.success) {
          if (res.data?.length) {
            imageView(res.data[0]).then((res) => {
              this.certificate = res;
              this.$set(row, 'certificate', res);
              this.certificateVisible = true;
            });
          } else {
            this.$message.error('未上传质检单！');
          }
        }
      },
      // 批次入库详情
      async handleExpand(row) {
        if (!row.children?.length) {
          this.$set(row, 'loading', true);
          const res = await inWarehouseSceneDetail({
            ...this.baseParams,
            bizStatus: 1,
            batchNum: row.batchNum
          });
          if (res?.success) {
            this.$set(
              row,
              'children',
              res.data.map((item, index) => ({
                index: index + '' + Date.now(),
                ...item
              }))
            );
          }
          this.$set(row, 'loading', false);
        }
      },
      search() {
        this.page = 1;
        this.getList();
      },
      reset() {
        this.searchForm = {};
        this.search();
      },
      handlePageChange() {
        this.getList();
      },
      async getList() {
        const params = {
          size: this.size,
          page: this.page,
          ...this.baseParams,
          batchNum: this.baseParams.batchNum || this.searchForm.batchNum,
          isZero: this.searchForm.isZero,
          inventoryCode: this.baseInfo.assetCode,
          name: this.baseInfo.assetName,
          // dimension: +this.$route.query.dimension
          batchNo: this.$route.query.batchNo,
          categoryId: this.baseParams.categoryId
        };
        const res = await getBatchDetails(params);

        this.tableData = (res.data.list || []).map((item, index) => ({
          index: index + '' + Date.now(),
          ...item
        }));

        // this.total = res.count;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .detail-box {
    margin: 20px auto;
  }
</style>