kd-aiot-frontend-wms/src/views/warehouseManagement/stockManagement/components/printQRCode.vue

<template>
  <ele-modal
    title="入库物品"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="50%"
    @close="close"
  >
    <div
      id="printSection"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      "
    >
      <table
        border
        cellspacing="0"
        style="
          table-layout: auto;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
          margin-bottom: 20px;
        "
        v-for="row in rowList"
        :key="row.packageNo"
      >
        <tbody>
          <tr align="center">
            <template v-if="row.packageNo">
              <td>编码</td>
              <td colspan="3">{{ row?.packageNo ?? '' }}</td>
            </template>
            <template v-else>
              <td>编码</td>
              <td colspan="3">{{ row?.categoryCode ?? '' }}</td>
            </template>
          </tr>

          <tr align="center">
            <td>物料名称</td>
            <td colspan="3">{{ row?.categoryName ?? '' }}</td>
          </tr>

          <tr align="center">
            <td>批次号</td>
            <td>{{ row?.batchNo ?? '' }}</td>
            <td colspan="2" rowspan="4" class="qrcode">
              <ele-qr-code-svg :value="setCode(row)" :size="120" />
            </td>
          </tr>

          <tr align="center">
            <td>规格</td>
            <td>{{ row?.specification ?? '' }}</td>
          </tr>

          <tr align="center">
            <td>单件数量</td>
            <td
              >{{ row?.measureQuantity ?? '' }}{{ row?.measureUnit ?? '' }}
              /
              {{ row?.packingQuantity ?? '' }}{{ row?.packingUnit ?? '' }}</td
            >
          </tr>

          <tr align="center">
            <td>重量</td>
            <td>{{ row?.weight ? row?.weight + row?.weightUnit : '' }}</td>
          </tr>

          <tr align="center">
            <td>生产日期</td>
            <td>{{ row?.productionDate ?? '' }}</td>
            <td>序号</td>
            <td></td>
          </tr>

          <tr align="center">
            <td>供应商</td>
            <td colspan="3">{{ row?.supplierName ?? '' }}</td>
          </tr>

          <tr align="center">
            <td>到货时间</td>
            <td></td>
            <td>制单人</td>
            <td>{{ user?.info?.name ?? '' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { mapGetters } from 'vuex';
  import EleQrCodeSvg from 'ele-admin/es/ele-qr-code-svg';
  import { getOutInRecordsPage } from '@/api/warehouseManagement';
  export default {
    name: 'print',
    components: {
      EleQrCodeSvg
    },
    computed: {
      ...mapGetters(['user']),
      setCode() {
        return (row) => {
          //二维码类型是入库单in，入库单id，每个包装的编码，入库的物品类型
          const params = new URLSearchParams({
            inoutType: 'in',
            inId: this.$route.query.id,
            packageNo: row?.packageNo ?? '',
            assetType: this._props.assetType,
            batchNo: row?.batchNo ?? ''
          });
          return params.toString();
        };
      }
    },
    props: {
      assetType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        QRvisible: false,
        codeList: [],
        formData: {},
        rowList: [],
        row: {},
        text: '',
        type: '',
        inId: ''
      };
    },

    methods: {
      // 二维码有两种，可拆分包装层面的，不可拆分的
      open(row, type) {
        // row里有packageNo，则是包装的二维码，没有就是产品的二维码
        console.log(row);
        console.log(this.$route.query.id);
        this.rowList.push(row);
        // getSendSaleOrderrecordDetailSplit(id).then((data) => {
        //   if (JSON.stringify(data) != '{}') {
        //     this.formData = data;
        //     this.formData['carName'] = data.carList
        //       .map((item) => item.name)
        //       .toString();
        //     this.formData.projectName = data.saleOrderList?.[0]?.projectName;
        //     this.formData.driverNames = data.logisticTrakListNoteVOList
        //       .map((item) => item.driverName)
        //       .join(','); // 承运人
        //     this.codeList = data.productList;
        //     this.formData.markerName = this.user.info.name;
        //   }

        // });
        this.QRvisible = true;
      },

      async init(id) {
        console.log(id);

        const res = await getOutInRecordsPage({
          pageNum: 1,
          size: -1,
          outInId: id
        });

        this.rowList = res.list;
        this.QRvisible = true;
      },

      close() {
        this.rowList = [];
        this.QRvisible = false;
      },
      //获取当前日期函数
      getNowFormatDate() {
        let date = new Date(),
          obj = {
            year: date.getFullYear(), //获取完整的年份(4位)
            month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
            strDate: date.getDate(), // 获取当前日(1-31)
            week: '星期' + '日一二三四五六'.charAt(date.getDay()), //获取当前星期几(0 ~ 6,0代表星期天)
            hour: date.getHours(), //获取当前小时(0 ~ 23)
            minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
            second: date.getSeconds() //获取当前秒数(0 ~ 59)
          };
        Object.keys(obj).forEach((key) => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`;
        });
        // return `${obj.year}年${obj.month}月${obj.strDate}日 ${obj.hour}:${obj.minute}:${obj.second}`;
        return `${obj.year}-${obj.month}-${obj.strDate}`;
      },
      print() {
        const printSection = document.getElementById('printSection');
        console.log(printSection);

        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss">
  #printSection {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .table_box {
      width: 70%;
      table-layout: auto;
      word-break: break-all;
      word-wrap: break-word;
    }
    th,
    td {
      padding: 4px;
      vertical-align: bottom;
      position: relative;
    }
    .barCode {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .person {
      width: 70%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      > div {
        flex: 1;
      }
    }
  }
</style>

<style scoped lang="scss">
  @media print {
    .no-print {
      display: none;
    }
  }

  .qrcode {
    padding: 8px !important;
  }
</style>