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

<template>
  <el-dialog :visible.sync="visible" title="入库明细" width="70%">
    <div class="info">
      <div>入库单号 {{ info.bizNum }}</div>
      <div class="search-box">
        <el-input
          v-model="searchVal"
          size="small"
          v-if="dimension === 1"
          :placeholder="`搜索${assetTypeName}编码/批次号`"
        ></el-input>
        <el-input
          v-else
          size="small"
          v-model="searchVal"
          :placeholder="`搜索${assetTypeName}编码`"
        ></el-input>
        <!-- <el-button size="small" @click="handleCreateCode"
          >批量生成二维码</el-button
        > -->
      </div>
    </div>
    <el-table
      :data="showTableData"
      height="60vh"
      class="w100"
      border
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        :label="`${assetTypeName}编码`"
        prop="onlyCode"
      ></el-table-column>
      <el-table-column label="包装编码" prop="num"></el-table-column>
      <el-table-column label="最小包装单元" prop="" v-if="!baseInfo.isUnpack">
        <template slot-scope="{ row }">{{
          `${row.measurementUnit || ''}${row.unit}/${row.minPackUnit}`
        }}</template>
      </el-table-column>
      <el-table-column
        label="批次号"
        prop="batchNum"
        v-if="dimension == 1"
      ></el-table-column>
      <el-table-column label="生产日期" prop="manufactureTime">
        <template slot-scope="{ row }">{{
          row.manufactureTime || row.procurementTime
        }}</template></el-table-column
      >
      <el-table-column label="过期时间" prop="expirationTime"></el-table-column>
      <el-table-column label="货位" prop="" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{
            `${row.warehouseName}-${row.areaName}-${row.shelfCode}-${row.cargoSpaceCode}`
          }}
        </template>
      </el-table-column>
      <el-table-column type="selection"></el-table-column>
    </el-table>
    <QrPrint
      ref="QrPrint"
      @close="QrPrintClose"
      :config="barCodeConfig"
      :openBarCode.sync="openWindows"
    />
  </el-dialog>
</template>

<script>
// import { getWarehouseSceneDetail } from '@/api/stockManagement/stockLedger'
// import dictMixin from '@/mixins/dictMixins'
// import { batchBarPrint } from '@/api/ledgerAssets/booksList'
// import QrPrint from '@/components/print/printPDF.vue'

// 条码类型枚举
const codeTypeObj = {
  生产设备: 0,
  // 舟皿: '',
  周转车: 1,
  模具: 3,
  混合料: 4,
  混炼料: 5,
  破碎料: 6,
  返回料: 8,
  返工料: 9,
  备品备件: 10,
  车削料: 11,
  风管料: 12,
  地面料: 13
}
export default {
  // mixins: [dictMixin],
  // components: { QrPrint },
  props: {
    assetCode: String,
    baseInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      openWindows: false,
      visible: false,
      tableData: [],
      info: {},
      barCodeConfig: [],
      searchVal: '',
      selectList: []
    }
  },
  computed: {
    dimension () {
      return this.$route.query.dimension
    },
    showTableData () {
      return this.tableData.filter(item => {
        if (this.searchVal) {
          return (
            (item.onlyCode && item.onlyCode.indexOf(this.searchVal)) > -1 ||
            (item.batchNum &&
              this.dimension == 1 &&
              item.batchNum.indexOf(this.searchVal)) > -1
          )
        }
        return true
      })
    },
    assetTypeName () {
      return this.getDictValue('物品类型', this.baseInfo.assetType)
    }
  },
  created () {
    // this.requestDict('物品类型')
  },
  methods: {
    open ({ bizNum, batchNum }) {
      this.info = { bizNum, batchNum }
      this._getWarehouseSceneDetail(bizNum, batchNum)

      this.visible = true
    },

    async _getWarehouseSceneDetail (bizNum, batchNum) {
      const res = await getWarehouseSceneDetail({
        bizNum,
        batchNum,
        bizStatus: 1,
        inventoryCode: this.assetCode
      })
      if (res?.success) {
        this.tableData = res.data
      }
    },
    handleSelectionChange (val) {
      this.selectList = val
    },
    handleCreateCode () {
      console.log(this.baseInfo, 222)
      const classificationArr =
        this.baseInfo?.classificationUrl?.split('-') || []

      let index = 0
      let barType
      while (classificationArr[index]) {
        barType = codeTypeObj[classificationArr[index]]
        if (barType !== undefined) {
          break
        }
        index++
      }

      if (barType === undefined) {
        return this.$message.error('当前物品类型不支持生成二维码')
      }
      if (!this.selectList?.length) {
        return this.$message.error('请选择数据')
      }

      this.handlPrint(barType)
    },
    QrPrintClose () {
      this.barCodeConfig = []
    },
    async handlPrint (barType) {
      this.openWindows = true
      let params = this.selectList.map(item => {
        return {
          barType: barType,
          bizId: item.id
        }
      })
      let _this = this
      const res = await batchBarPrint(params)
      async function getResList () {
        for (const el of res.data) {
          const fontTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' }
          let item = el
          item.useModeList = item.useModeList.sort((a, b) => {
            return a.barAvg.substr(4) - b.barAvg.substr(4)
          })
          const useModeList = item.useModeList
          // 条码框数据
          _this.barCodeConfig.push({
            putType: el.putType,
            qrCode: el.qrCode,
            sizeLong: el.sizeLong,
            sizeWide:el.sizeWide,
            code1: useModeList[0].sampleData,
            code2: useModeList[1].sampleData,
            code3: useModeList[2].sampleData,
            code4: useModeList[3].sampleData,
            code5: useModeList[4].sampleData,
            code6: useModeList[5].sampleData,
            code7: useModeList[6].sampleData,
            code8: useModeList[7].sampleData,
            code9: useModeList[8].sampleData,
            code10: useModeList[9].sampleData,
            code11: useModeList[10].sampleData,
            code12: useModeList[11].sampleData,
            code13: useModeList[12].sampleData,
            code14: useModeList[13].sampleData,
            fontSizeCode1: useModeList[0].fontSize,
            fontSizeCode2: useModeList[1].fontSize,
            fontSizeCode3: useModeList[2].fontSize,
            fontSizeCode4: useModeList[3].fontSize,
            fontSizeCode5: useModeList[4].fontSize,
            fontSizeCode6: useModeList[5].fontSize,
            fontSizeCode7: useModeList[6].fontSize,
            fontSizeCode8: useModeList[7].fontSize,
            fontSizeCode9: useModeList[8].fontSize,
            fontSizeCode10: useModeList[9].fontSize,
            fontSizeCode11: useModeList[10].fontSize,
            fontSizeCode12: useModeList[11].fontSize,
            fontSizeCode13: useModeList[12].fontSize,
            fontSizeCode14: useModeList[13].fontSize,
            typefaceCode1: fontTypeObj[useModeList[0].fontType],
            typefaceCode2: fontTypeObj[useModeList[1].fontType],
            typefaceCode3: fontTypeObj[useModeList[2].fontType],
            typefaceCode4: fontTypeObj[useModeList[3].fontType],
            typefaceCode5: fontTypeObj[useModeList[4].fontType],
            typefaceCode6: fontTypeObj[useModeList[5].fontType],
            typefaceCode7: fontTypeObj[useModeList[6].fontType],
            typefaceCode8: fontTypeObj[useModeList[7].fontType],
            typefaceCode9: fontTypeObj[useModeList[8].fontType],
            typefaceCode10: fontTypeObj[useModeList[9].fontType],
            typefaceCode11: fontTypeObj[useModeList[10].fontType],
            typefaceCode12: fontTypeObj[useModeList[11].fontType],
            typefaceCode13: fontTypeObj[useModeList[12].fontType],
            typefaceCode14: fontTypeObj[useModeList[13].fontType]
          })
        }
      }
      getResList()
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  font-weight: bold;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>