|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="tools" style="width: 100%;height:80px;margin: 0 auto ">
|
|
|
+ <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
|
|
|
@@ -8,8 +8,8 @@
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
- @pagination="generateEmployeeCodeList"
|
|
|
- :page-sizes="[9]"
|
|
|
+ @pagination="flowCardListApi"
|
|
|
+ :page-sizes="[5,10,30]"
|
|
|
/>
|
|
|
</div>
|
|
|
<div style="width: 200px;height: 40px">
|
|
|
@@ -18,26 +18,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="base" id="printView" >
|
|
|
- <div class="box" style="page-break-after:always;margin-bottom: 10px">
|
|
|
- <div class="ygmboxfj">
|
|
|
- <!--卡片-->
|
|
|
- <div class="ygmbox" v-for="(item,index) in listDate">
|
|
|
- <div class="ygmbox_top">
|
|
|
- <div class="tpdiv">
|
|
|
- <img :src="item.images" style="width: 180px;height: 180px" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="ygmbox_bottom">
|
|
|
- <table class="ygmbox_bottom_table">
|
|
|
- <tr>
|
|
|
- <td class="xingming">姓名</td>
|
|
|
- <td class="xingmingValue">{{item.personnelName}}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="gdName">工段</td>
|
|
|
- <td class="gdValue">{{item.processName}}</td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
+ <!-- <div class="box" style="page-break-after:always;margin-top: 10px;">-->
|
|
|
+ <!-- <div class="bj" v-for="(item,index) in listDate" style="margin-top: 20px">-->
|
|
|
+ <!-- <div class="erweima"><img :src="item.base46MaD" alt=""></div>-->
|
|
|
+ <!-- <div class="xh">{{item.serialNumber}}</div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <div class="fj">
|
|
|
+ <div class="abc" v-for="(item,index) in listDate" >
|
|
|
+ <div class="label-container">
|
|
|
+ <div class="content-inner">
|
|
|
+ <div id="qrcode1"><img :src="item.base46MaD" :alt="item.serialNumber"></div>
|
|
|
+ <div class="order-number">{{item.serialNumber}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,18 +39,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {generateEmployeeCodeList} from "@/api/amichi/planTask/planTaskDetails.js";
|
|
|
-import Table from "@/views/dragform/tableList.vue";
|
|
|
+import {listInfoRkK} from "@/api/amichi/planTask/planTaskDetails.js";
|
|
|
|
|
|
export default {
|
|
|
name: "rkadyPrint",
|
|
|
- components: {Table},
|
|
|
data () {
|
|
|
return {
|
|
|
queryParams:{
|
|
|
pageNum: 1,
|
|
|
- pageSize: 9,
|
|
|
- userIds:[],
|
|
|
+ pageSize: 30,
|
|
|
+ orderNumberList:[],
|
|
|
},
|
|
|
total:0,
|
|
|
listDate:[],
|
|
|
@@ -91,24 +81,68 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ getNextOrderNumber(index) {
|
|
|
+ if (index < this.listDate.length - 1) {
|
|
|
+ return this.listDate[index + 1];
|
|
|
+ } else {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
//渲染表格内容
|
|
|
- async generateEmployeeCodeList(){
|
|
|
- let res = await generateEmployeeCodeList(this.queryParams)
|
|
|
+ async flowCardListApi(){
|
|
|
+ let res = await listInfoRkK(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(){
|
|
|
- this.queryParams.userIds =this.$route.query.orderNumberSTwo;
|
|
|
- console.log(this.queryParams.userIds,"1111111111111");
|
|
|
- // let obj={"userIds":this.queryParams.orderNumberList}
|
|
|
- // console.log(obj)
|
|
|
- this.generateEmployeeCodeList();
|
|
|
+ // 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();
|
|
|
},
|
|
|
}
|
|
|
|
|
|
@@ -117,123 +151,118 @@ export default {
|
|
|
::v-deep .pagination-container {
|
|
|
margin-top: -10px;
|
|
|
}
|
|
|
+body {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #2c2b2b;
|
|
|
+}
|
|
|
+
|
|
|
+.fj {
|
|
|
+ width: 220mm; /* 足够放下5个标签的宽度 */
|
|
|
+ margin: 20px auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.abc {
|
|
|
+ width: 40mm;
|
|
|
+ height: 30mm;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.label-container {
|
|
|
+ width: 38mm;
|
|
|
+ height: 28mm;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px dashed #000;
|
|
|
+ page-break-after: always;
|
|
|
+}
|
|
|
+
|
|
|
+.content-inner {
|
|
|
+ transform: rotate(270deg);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 38mm;
|
|
|
+ height: 28mm;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#qrcode1, #qrcode2, #qrcode3, #qrcode4, #qrcode5 {
|
|
|
+ width: 24mm;
|
|
|
+ height: 24mm;
|
|
|
+ margin: 0;
|
|
|
+ position: relative;
|
|
|
+ top: -0.5mm;
|
|
|
+}
|
|
|
+
|
|
|
+.order-number {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ right: -8mm;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%) rotate(90deg);
|
|
|
+ line-height: 1.2;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+
|
|
|
@media print {
|
|
|
- /* 隐藏页眉页脚 */
|
|
|
- @page {
|
|
|
- margin: 0 auto;
|
|
|
- size: auto;
|
|
|
- .box{
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+ .fj {
|
|
|
+ width: 40mm;
|
|
|
+ margin: 0;
|
|
|
+ gap: 0;
|
|
|
}
|
|
|
- html {
|
|
|
- zoom: 100%; /* 缩放比例设置 */
|
|
|
+
|
|
|
+ @page {
|
|
|
+ size: 40mm 30mm;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
- .noprint {
|
|
|
- display: none; /* 隐藏打印区域不需要打印的内容 */
|
|
|
+
|
|
|
+ body {
|
|
|
+ width: 40mm;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
-}
|
|
|
-.base {
|
|
|
- .page-break {
|
|
|
+
|
|
|
+ .abc {
|
|
|
+ width: 40mm;
|
|
|
+ height: 30mm;
|
|
|
+ margin: 0;
|
|
|
page-break-after: always;
|
|
|
- position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 0px;
|
|
|
}
|
|
|
|
|
|
- .tools {
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .label-container {
|
|
|
+ border: 1px dashed #000;
|
|
|
+ transform: scale(0.95);
|
|
|
}
|
|
|
|
|
|
- .box {
|
|
|
- font-size: 21px;
|
|
|
- width: 800px;
|
|
|
- //border: 1px solid red;
|
|
|
- margin-bottom: 10px;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- .ygmboxfj {
|
|
|
- width: 800px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- //border: 1px solid red;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .ygmbox {
|
|
|
- width: 240px;
|
|
|
- height: 315px;
|
|
|
- border: 2px solid black;
|
|
|
- margin-top: 20px;
|
|
|
- //overflow: hidden;
|
|
|
- margin-left: 19px;
|
|
|
- .ygmbox_top {
|
|
|
- //overflow: hidden;
|
|
|
- width: 180px;
|
|
|
- height: 180px;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 30px;
|
|
|
-
|
|
|
- .tpdiv {
|
|
|
- width: 180px;
|
|
|
- height: 180px;
|
|
|
- //border: 1px solid gold;
|
|
|
- margin-top: 27px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .content-inner {
|
|
|
+ transform: rotate(270deg);
|
|
|
+ }
|
|
|
|
|
|
- .ygmbox_bottom {
|
|
|
- width: 240px;
|
|
|
- height: 86px;
|
|
|
- //background-color: red;
|
|
|
- margin-top: 26px;
|
|
|
-
|
|
|
- .ygmbox_bottom_table {
|
|
|
- width: 99%;
|
|
|
- text-align: center;
|
|
|
- border-left: 0px;
|
|
|
- border-right: 0px;
|
|
|
- border-bottom: 0px;
|
|
|
-
|
|
|
- tr {
|
|
|
- td {
|
|
|
- height: 38px;
|
|
|
- }
|
|
|
-
|
|
|
- .xingming {
|
|
|
- width: 30%;
|
|
|
- border-top: 2px solid black;
|
|
|
- border-bottom: 2px solid black;
|
|
|
- border-right: 2px solid black
|
|
|
- }
|
|
|
-
|
|
|
- .xingming {
|
|
|
- width: 30%;
|
|
|
- border-top: 2px solid black;
|
|
|
- border-bottom: 2px solid black;
|
|
|
- border-right: 2px solid black
|
|
|
- }
|
|
|
-
|
|
|
- .xingmingValue {
|
|
|
- width: 40%;
|
|
|
- border-top: 2px solid black;
|
|
|
- border-bottom: 2px solid black
|
|
|
- }
|
|
|
-
|
|
|
- .gdName {
|
|
|
- width: 20%;
|
|
|
- border-right: 2px solid black
|
|
|
- }
|
|
|
-
|
|
|
- .gdValue {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .order-number {
|
|
|
+ display: block;
|
|
|
+ position: static;
|
|
|
+ transform: none;
|
|
|
+ margin-top: 2mm;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 17px;
|
|
|
+ background: none;
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
