mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/amichi/print/rkadyPrint.vue

<template>
  <div>
    <div class="tools" style="width: 100%;height:80px;margin: 0 auto">
      <div style="width:800px;height:80px;display: flex; justify-content: space-between; align-items: center;margin: 0 auto">
        <div style="width: 800px;height: 40px">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="flowCardListApi"
            :page-sizes="[5,10,20]"
          />
        </div>
        <div style="width: 200px;height: 40px">
          <el-button type="primary" icon="el-icon-search"  size="mini"  v-print="printViewInfo">打印</el-button>
        </div>
      </div>
    </div>
    <div class="base" id="printView" >
      <div class="box" style="page-break-after:always;"  v-for="(item,index) in listDate" v-if="index%2==0">
        <div class="left"  style="margin-top: 15px">
          <div class="top">
            <table border="2px" class="left-top-table">
              <tr>
                <td rowspan="2" style="width: 30%;">
                  <div class="titleBox" style="position: relative;">
                    <div class="erweima" ><img :src="item.base46MaD" alt=""></div>
                  </div>
                </td>
                <td style="width: 30%;">订单号</td>
                <td style="width: 40%;">{{item.orderNumber}}</td>
              </tr>
              <tr>
                <td style="width: 20%;">产品编号</td>
                <td style="width: 30%;">{{item.serialNumber}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="right"  style="margin-left: 15px;margin-top: 15px">
          <div class="top" v-if="index+1<listDate.length">
            <table border="2px" class="right-top-table">
              <tr>
                <td rowspan="2" style="width: 30%;">
                  <div class="titleBox" style="position: relative;">
                    <div class="erweima" ><img :src="item.base46MaD" alt=""></div>
                  </div>
                </td>
                <td style="width: 30%;">订单号</td>
                <td style="width: 40%;">{{item.orderNumber}}</td>
              </tr>
              <tr>
                <td style="width: 20%;">产品编号</td>
                <td style="width: 30%;">{{item.serialNumber}}</td>
              </tr>
            </table>
          </div  >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {flowCardList} from "@/api/amichi/planTask/planTaskDetails.js";

export default {
  name: "rkadyPrint",
  data () {
    return {
      queryParams:{
        pageNum: 1,
        pageSize: 5,
        orderNumberList:[],
      },
      total:0,
      listDate:[],
      dialogVisible: false,
      msg: "打印",
      printViewInfo: {
        id: "printView", //打印区域的唯一的id属性
        // popTitle: '配置页眉标题', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
        // extraHead: '打印，印刷', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
        // previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
        // previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback (that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
        previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
        beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: '',
        isDataLoaded: false,
      }
    }
  },
  methods: {
    getNextOrderNumber(index) {
      if (index < this.listDate.length - 1) {
        return this.listDate[index + 1];
      } else {
        return 0
      }
    },

    //渲染表格内容
    async flowCardListApi(){
      let res = await flowCardList(this.queryParams)
      if (res.code == 200) {
        this.listDate = res.rows;
        this.total = res.total;
        this.isDataLoaded = true;
        this.$nextTick(()=>{
          this.adjustFontSize();
          this.adjustFontSizebzxsm()
        })

      }
    },

    adjustFontSize() {
      const element = this.$refs.bzx;
      if (!element) return; // 如果元素不存在，直接返回

      for (let i=0;i<element.length;i++) {
        const maxHeight = 115;
        let currentFontSize = 21;
        while (element[i].scrollHeight > maxHeight && currentFontSize > 8) {
          currentFontSize -= 0.5; // 每次减少0.5px
          element[i].style.fontSize = `${currentFontSize}px`;
        }
      }
      console.log(element[0].style)
    },
    adjustFontSizebzxsm() {
      const element = this.$refs.bzxsm;
      console.log(element.length)
      if (!element) return; // 如果元素不存在，直接返回
      for (let i=0;i<element.length;i++){
        const maxHeight = 50;
        let currentFontSize = 21;
        while (element[i].scrollHeight > maxHeight && currentFontSize > 8) {
          currentFontSize -= 0.5; // 每次减少0.5px
          element[i].style.fontSize = `${currentFontSize}px`;
        }
      }

      console.log(element[0].style)
    }
  },
  mounted() {
    // this.adjustFontSize();
  },
  created(){
    // console.log(this.$route.query.orderNumberS)
    // this.queryParams.orderNumberList =this.$route.query.orderNumberS;
    this.queryParams.orderNumberList =this.$route.query.orderNumberSTwo;
    // console.log(this.queryParams.orderNumberList)
    this.flowCardListApi();
  },
}

</script>
<style media="print" scoped>
::v-deep .pagination-container {
  margin-top: -10px;
}

.bzx{
  width: 454px;
  max-height: 115px;
  overflow: hidden;
  font-size: 21px;
}
.bs{
  height: 115px;
  min-height: 115px;
}
.bzxsm{
  width: 180px;
  max-height: 50px;
  overflow: hidden;
  font-size: 21px;
}
@media print {

  /* 隐藏页眉页脚 */
  @page {
    size: auto;
    margin: 3mm;
    .box{
      margin-top: 10px;
    }
  }
  html {
    zoom: 90%; /* 缩放比例设置 */
  }
  .noprint {
    display: none; /* 隐藏打印区域不需要打印的内容 */
  }
}
.base{
  .heg{
    height: 30px;
  }
  .heg td{
    height: 30px;
  }
  .jc{
    font-weight: bold;
    font-size: 50px;
  }
  .page-break {
    page-break-after: always;
    position: relative;
  }
  .tools {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  *{
    margin: 0 auto;
    padding: 0;
  }
  .box{
    font-size: 21px;
    width: 800px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: start;
    margin-bottom: 10px;
  }
  td{
    text-align: center;

  }
  .left{
    width: 48%;
  }
  .right{
    width: 48%;
  }
  .left-top-table{
    width: 100%;
    border: 2px solid black;
    border-collapse: collapse;
    color: black;
    font-weight: bold;
  }
  .left-top-table tr td{
    padding: 4px 4px;
    word-wrap:break-word;
    word-break:break-all;
    color: black;
    font-weight: bold;
  }
  .right-top-table{
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
    color: black;
    font-weight: bold;
    color: black;
    font-weight: bold;
  }
  .right-top-table tr td{
    padding: 4px 4px;
    word-wrap:break-word;
    word-break:break-all;
    color: black;
    font-weight: bold;
  }
  .erweima{
    width: 100px;
    height: 80px;;
    background-color: red;
    margin-top: 8px;
  }
  .titleBox{
    display: flex;
    color: black;
    width: 100%;
    height: 120px;
    font-weight: bold;
  }

  .left-top-table .titleBox .xh{
    position: relative;
  }
  .left-top-table .titleBox .xh span{
    position: absolute;
    width: 80px;
    left: -421px;
    top: 80px;
  }
  .left-top-table .titleBox .time span{
    position: absolute;
    left: 290px;
    top: 75px;
  }
  .right-top-table .titleBox .time span{
    position: absolute;
    left: 290px;
    top: 82px;
  }
  .titleBox .time span i{
    font-style: normal;
  }
  .titleBox .title{
    margin-left: 60px;
    margin-top: 7px;
    font-family: 'Courier New', Courier, monospace;
  }
  .abc{
    color: rebeccapurple;
    font-size: 15px;
    /* word-wrap: break-word; */
    /* white-space: pre-wrap; */
  }
  .right-top-table .titleBox .xh{
    position: relative;
  }
  .right-top-table .titleBox .xh span{
    position: absolute;
    width: 80px;
    left: -424px;
    top: 80px;
  }

  .right-top-table .titleBox .time span{
    position: absolute;
    left: 290px;
    top: 82px;
  }
  .right-top-table .titleBox .time span{
    position: absolute;
    left: 290px;
    top: 82px;
  }
  .left-top-table td{
    border: 3px solid black;
  }
  .right-top-table td{
    border: 3px solid black;
  }
  .right-top-table td{
    border: 3px solid black;
  }
  .right-top-table td{
    border: 3px solid black;
  }
}
</style>