kcw-wx-web/src/views/base-data/point/print_kw_zy.vue

<template>
  <div style="background: #ffffff">
    <div class="button-container">
      <el-button  @click="yulandayin" style="width: 200px;height: 50px"  type="primary">自由货位标签预览</el-button>
    </div>
    <div id="printMe" v-for="(kw3,groupIndex) in kwfenzu" :key="groupIndex"  class="group-container">
      <div class="grid-container">
      <div
        v-for="k2 in kw3"
        class="label-item" >
        <table class="label-table">
          <tr style="height: 6mm">
            <td  class="td-item-value2" colspan="1" style="width: 46mm">{{ k2.areaName }}</td>
            <td  class="td-item" rowspan="2" style="width: 23mm;height: 20mm;">
              <vue-qrcode
                  :value="getQrContent(k2)"
                  :options="qrOptions"
                  tag="img"
                  class="qr-code"
              />
            </td>
          </tr>
          <tr style="height: 6mm">
            <td  class="td-item-value" colspan="1" style="background: #fcd700">{{ k2.code }}</td>
          </tr>
        </table>

      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { vPrint } from 'vue-print-next';
import { VuePrintNext } from 'vue-print-next';
import {pointPrintBiaoQianList} from "@/api/point";

import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  name: 'PointPrint',
  components: {
    VueQrcode
  },
  directives: {
    print: vPrint
  },
  computed: {

  },

  data() {
    return {
      kkkk2: [],
      kwfenzuAll: [],
      kwfenzu: [],
      qrOptions: {
        width: 60,          // 二维码宽度
        margin: 0,          // 边距
        errorCorrectionLevel: 'H' // 容错级别（高）
      },
      qrSize: 120, // 二维码尺寸
      // 示例数据 - 实际应用中可从API获取


    }
  },
  mounted() {
    this.getPrintList();
  },
  methods: {
    getQrContent(location) {
      // 自定义二维码内容，这里用箱种和品番组合
      return `${location.ewm}`;

      // 如果只需要箱种，可以直接用：
      // return location.boxType;
    },
    //获取点位表的数据
    yulandayin(){
      new VuePrintNext({
        el: '#printMe', /* 其他参数 */
        popTitle: '打印小物标签',
        preview: false,// 启用打印预览
        paperSize: 'A4',
        orientation: 'portrait'//'landscape'横向；'portrait'纵向
      });
    },
     getPrintList(){
      console.log('打印自由库位标签_BiaoQian_ZY')
       pointPrintBiaoQianList('_BiaoQian_ZY').then(res => {
        console.log(res)
        this.kkkk2=res;

        this.kwfenzu=[]
        for (let i = 0; i < this.kkkk2.length; i += 14) {
          this.kwfenzu.push(this.kkkk2.slice(i, i + 14));
        }
        console.log(kwfenzu)
      });
    }

  }
}


</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}
body {
  background: linear-gradient(35deg, #f5f7fa 0%, #e4edf5 100%);
  padding: 20px;
  min-height: 100vh;
}
.button-container {
  padding-top: 20px;
  display: flex;
  justify-content: center; /* 水平居中 */
}
.group-container{
  padding-top: 1mm;
  box-shadow: none;margin-bottom:0;padding: 0;border-radius: 0;
  page-break-after: always;
  break-after: page;
}
.label-item {
  display: flex;
  flex-wrap: wrap;

  background: #ffffff;
  justify-content: center;
}
.td-item{
  text-align: center;
  border: #000000 2px solid;
  font-size: 6pt;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.td-item-value{
  font-size: 22pt;
  font-weight: bold;
  text-align: center;
  border: #000000 2px solid;
}

.td-item-value2{
  font-size: 13pt;
  font-weight: bold;
  text-align: center;
  border: #000000 2px solid;
}

.td-item-value3{
  font-size: 9pt;
  font-weight: bold;
  text-align: center;
  border: #000000 2px solid;
}

.qr-code {
  padding: 1mm;
  width: 22mm;   /* 控制显示大小 */
  height: 22mm;
  image-rendering: crisp-edges; /* 保持清晰度 */
  display: block;
  margin: 0 auto;
}

.label-table {
  background: #00a0e9;

  width: 100mm;
  height: 40mm;
  background: #ffffff;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 4列 */
  grid-template-rows: repeat(7, 1fr);   /* 7行 */
  width: 100%;
  height: 100%;
  background: #ffffff;
  gap: 1mm 1mm; /* 标签之间的间隙 */
}

</style>