|
@@ -0,0 +1,365 @@
|
|
|
+<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>
|