heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/storagelog/printDialog.vue

<template>
  <Dialog
    title="打印预览"
    v-model="dialogVisible"
    width="1000"
    top="0%"
    :before-close="(doClose) => beforeDialogClose(doClose)"
  >
    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>

    <!-- 打印预览 -->
    <div class="print-wrap page" ref="print">
      <div id="qrCodeContainer"></div>
    </div>
    <template #footer>
      <el-button @click="onPrint" type="primary">打印</el-button>
      <el-button @click="outopen">取消</el-button>
    </template>
  </Dialog>
  <printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
</template>

<script setup lang="ts">
import QRCode from 'qrcode'
import printFinalDialog from './printFinalDialog.vue';
import {getIntDictOptions} from "@/utils/dict";
const dialogVisible = ref(false)
let clauseId = null;
const startPageNum = ref(0);
const endPageNum = ref(0);
const printref = ref()
const onPrint = () => {
  printref.value.open(cnenList.value)

}

function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
  outopen()
}

const outopen = () => {
  dialogVisible.value = false
}

const printCodeName = ref([])
const datavals = ref([])
const cnenList = ref([])
const bomCodes = ref('')

const open = async (vals) => {
  const sortedVals = [...vals].sort((a, b) => {
    return b.id - a.id;
  });

  cnenList.value = sortedVals;
  datavals.value = []
  printCodeName.value = []

  sortedVals.forEach((item) => {
    console.log(item.id)
    const row1 = {
      code: item.matCode,
      name: item.matName == null ? '' : item.matName,
      spec: item.matSpec == null ? '' : item.matSpec,
      rg: item.rgName == null ? '' : item.rgName,
      pg: item.pnName == null ? '' : item.pnName,
      //amount: item.amount == null ? '' : item.amount
    }
    printCodeName.value.push(row1)
  })

  dialogVisible.value = true

  var i = 0;
  await Promise.all(
    printCodeName.value.map(async (item) => {

      const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
      const qrCodeData = await QRCode.toDataURL(formattedDate ,{
        errorCorrectionLevel: 'H'
      })
      const qrCodeElement = document.getElementById('qrCodeContainer')
      if (qrCodeElement) {
        (qrCodeElement.innerHTML +=
          `<div style="width: 90mm; height: 60mm;  box-sizing: border-box; font-family: monospace; position: relative; background-color: white; color: black;">
            <div style="font-size: 11px; margin-bottom: 1mm;">
              <span style="display: inline-block; width: 100%; border-bottom: 1px solid black; padding-bottom: 0.2mm;">物料编码: ${item.code}</span>
            </div>
            <div style="display: flex; align-items: center;">
              <span style="white-space: nowrap; margin-right: 1mm;">简&thinsp;称:</span>
              <span style="flex-grow: 1; border-bottom: 1px solid black; padding-bottom: 0.2mm;">${item.name}</span>
            </div>
            <div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;">
              <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 13mm; margin-right: 1mm;">
                <span style="            width: 52mm;
            white-space: pre-wrap;
            word-break: break-all;
            overflow-wrap: anywhere;
            text-indent: -15.8mm;
            padding-left: 15.8mm;
            font-size: 11px;
            line-height: 1.2;          min-height: calc(14px * 1.2 * 2);
          display: -webkit-box;
          -webkit-line-clamp: 2;
          margin-left: -2.5mm;
          -webkit-box-orient: vertical;
          overflow: hidden;">规&thinsp;格: ${item.spec}</span>
                <span style=" width: 52mm;
            white-space: pre-wrap;
            word-break: break-all;
            overflow-wrap: anywhere;
            text-indent: -15.8mm;
            padding-left: 15.8mm;
            font-size: 11px;
            margin-left: -2.5mm;
            line-height: 1.2;">库&thinsp;区: ${item.rg}</span>
                <span style=" width: 52mm;
            white-space: pre-wrap;
            word-break: break-all;
            overflow-wrap: anywhere;
            text-indent: -15.8mm;
            padding-left: 15.8mm;
            font-size: 11px;
            margin-left: -2.5mm;
            line-height: 1.2;">库&thinsp;位: ${item.pg}</span>
              </div>
              <div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
                <img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
              </div>
            </div>
          </div>`)
        if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
          qrCodeElement.innerHTML +=
            `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">

          </div>`
        }
      }
    })
  )
}

defineExpose({ open })
</script>

<style scoped lang="scss">
/* 预览样式 - 仅用于屏幕显示 */
.page {
  width: 100mm;
  min-height: 60mm;
  margin: auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: white;
  color: white;
  padding: 2mm;
  box-sizing: border-box;

  /* 临时隐藏下划线，打印时会显示 */
  .code-line span, .name-underline {
    display: none;
  }
}

/* 确保打印样式优先 */
@media print {
  .page {
    background-color: black !important;
    color: white !important;

    .code-line span, .name-underline {
      display: inline-block;
    }
  }
}
</style>