大屏

liuying

2024-12-01 6db85a1b10d891a3871775c2c555fd681cb7da34

 LA24030_LuLiPackageLine_Web/src/components/printTableCkd.vue

@@ -1,90 +1,84 @@
<!--打印内容 -->
<template>
      <div id="printContent" class="printContent">
         <div class="printWp" v-for="(itemW, indexW) in deltailList" :key="indexW">
            <!-- <div class="t1">{{Name[0]}}&nbsp; &nbsp; &nbsp; &nbsp;{{Name[1]}}&nbsp; &nbsp; &nbsp; &nbsp;{{Name[2]}}</div> -->
            <div class="t1">{{ Name }}</div>
            <div class="header_pt">
               <div class="box1">
                  <img class="imgL" src="http://localhost:8888/src/assets/logo-mini.png" alt="" />
                  <!-- <img class="imgL" src="@/assets/logo.png" alt="" /> -->
                  <div class="t2">
                     <p class="text1">
                        鲁丽木业股份有限公司
                     </p>
                  </div>
               </div>
               <div class="box-t1">
                  <div>
                     单号：<span>{{ itemTitle.orderNo }}</span>
                  </div>
                  <div>
                     <div>
                        <span> {{ DateToday }}</span>
                     </div>
                  </div>
                  <div class="t4">
                  </div>
               </div>
            </div>
   <div id="printContent" class="printContent">
	

            <div class="tableBox">
               <table cellspacing="0" cellpadding="0">
                  <tr class="middle_first">
                     <td class="middle_tree">编号</td>
                     <td class="middle_one">批次</td>
                     <td class="middle_two">订单号</td>
                     <td class="middle_four">包装号</td>
                     <td class="middle_one">部件条码</td>
                  </tr>
                  <tr class="middle_first" v-for="(item, index) in itemW" :key="index">
                     <td class="middle_tree">{{ item.num }}</td>
			
                     <td class="middle_one">
                        <div>
                           {{ item.planNo }}
                        </div>
                     </td>
                     <td class="middle_two">
                        <div>
                           {{ item.orderId }}
                        </div>
                     </td>
                     <td class="middle_four">
                        <div>
                           {{ item.packageCode }}
                        </div>
                     </td>
                     <td class="middle_one">
                        <div>
                           {{ item.upi }}
                        </div>
                     </td>
                  </tr>
               </table>
   <div class="ermbox">
                  <div class="t40">
                     销售订单号：<span>{{ itemTitle.info16 }}</span>
                  </div>
                  <div  class="imgL">
      <canvas ref="qrcodeCanvas"></canvas>
   </div>
                  <div class="t41">
                     生产订单号：<span>{{ itemTitle.info5 }}</span>
                  </div>
               </div>

      <div class="printWp" v-for="(itemW, indexW) in deltailList" :key="indexW">
         <div class="t1">{{ Name }}</div>
         <div class="header_pt">
            <div class="box1">
				

               <!-- <img class="imgL" src="http://localhost:8888/src/assets/logo-mini.png" alt="" /> -->
               <!-- <img class="imgL" src="@/assets/logo.png" alt="" /> -->
               <!-- <div class="t2">
                  <p class="text1">鲁丽木业股份有限公司</p>
               </div> -->
            </div>
            <!-- <br /> <br /> -->
            <!-- <div class="box-t2">
        <div>供货方确认：牧野汽车装备（武汉）有限公司 </div>
        <div> 签收人（代收人）： </div>
      </div> -->
            <!-- 姓名 电话 地址 -->
            <!-- <div class="box-t2">
        <div>姓名&电话：</div>
        <div> 日期： </div>
      </div> -->
            <!-- <div class="box-t2 box-t2R">
        <div>地址：</div>
      </div> -->
            <span class="pageNum">{{ indexW + 1 }}</span>
            <div class="box-t1">
               <div>
                  打印时间：<span>{{ DateToday }}</span>
               </div>
               <div>
                  缺料总数量：<span>{{ deltailList.length }}</span>
               </div>
            </div>
         </div>

         <div class="tableBox">
            <table cellspacing="0" cellpadding="0">
               <tr class="middle_first">
                  <td class="middle_tree">编号</td>
                  <td class="middle_two">批次</td>
                  <td class="middle_two">部件名称</td>
                  <td class="middle_four">尺寸</td>
                  <td class="middle_one">部件条码</td>
               </tr>
               <tr class="middle_first" v-for="(item, index) in itemW" :key="index">
                  <td class="middle_tree">{{ item.num }}</td>
                  <td class="middle_two">
                     <div>
                        {{ item.planNo }}
                     </div>
                  </td>
                  <td class="middle_two">
                     <div>
                        {{ item.detailName  }}
                     </div>
                  </td>
                  <td class="middle_four">
                     <div>
                        {{ item.info16 }}
                     </div>
                  </td>
                  <td class="middle_one">
                     <div>
                        {{ item.upi }}
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         <span class="pageNum">{{ indexW + 1 }}</span>
      </div>
   </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, computed, defineExpose, defineEmits, markRaw, defineProps } from 'vue';
import { ref, nextTick, computed, defineExpose, defineEmits, markRaw, defineProps, onMounted } from 'vue';
import printJS from 'print-js';
// import { formatUtcToData } from "@/utils/formate";

import QRCode from 'qrcode';
const Name = ref([]);
const DateToday = ref('');
const itemTitle: any = ref({});
@@ -96,12 +90,21 @@
   }
   return data;
};

const qrcodeCanvas = ref<HTMLCanvasElement | null>(null);

// };
const printHd = (name: string, itemSubTitle: any, deltailListArr: any) => {
   console.log('打印条数8888==' + deltailListArr.length);
   Name.value = name;
   debugger;

   // if(itemSubTitle && itemSubTitle.length>0){
   //   itemTitle.value = itemSubTitle[0]
   // }
   itemTitle.value.orderNo = deltailListArr[0].orderNo;
   itemTitle.value.info5 = deltailListArr[0].info5;
   itemTitle.value.info16 = deltailListArr[0].info16;

   deltailListArr.forEach((item, index) => {
      item.num = index + 1;
   });
@@ -117,6 +120,13 @@

   // console.log(itemSubTitle)
   // console.log(deltailListArr)
   if (deltailListArr[0].info5) {
      debugger
      nextTick(() => {
      QRCode.toCanvas(qrcodeCanvas.value, deltailListArr[0].info5, { width: 150 });
   });// 在组件挂载时生成二维码
   }

   nextTick(() => {
      printJS({
         printable: 'printContent', // 要打印的元素的 ID
@@ -143,20 +153,26 @@
   position: relative;
}

.imgL {
   width: 140px;
}

.t1 {
   text-align: center;
   font-size: 30px !important;
   font-size: 20px !important;
   font-weight: bold;
   border: 1px solid transparent;
   padding-bottom: 119px;
}

.ermbox {
   position: absolute;
   top: 10px;
   left: 20px;	
}

.imgL {

}
.printContent {
   position: relative;
   z-index: -1;
   z-index: 999;
   font-size: 12px;
}

@@ -171,10 +187,15 @@
   display: block;
}

.printContent .t4 {
   text-align: right;
.ermbox span {
   font-weight: 700;
}

.t40 {
   font-size: 12px;
}
.t41 {
   font-size: 16px;
}
.printContent table {
   padding: 10px 0;
}
@@ -251,12 +272,27 @@
   bottom: 0;
}


    `,
         scanStyles: false, // 是否扫描当前的 CSS 样式
      });
   });


};



// onMounted(async () => {
//     if (qrcodeCanvas.value) {
//         try {
//             await QRCode.toCanvas(qrcodeCanvas.value, "7777", { width: 100 });
//         } catch (err) {
//             console.error('生成二维码出错:', err);
//         }
//     } else {
//         console.error('qrcodeCanvas未定义');
//     }
// });

// 暴露方法
defineExpose({ printHd });
@@ -282,20 +318,26 @@
   position: relative;
}

.imgL {
   width: 140px;
}

.t1 {
   text-align: center;
   font-size: 30px !important;
   font-size: 20px !important;
   font-weight: bold;
   border: 1px solid transparent;
   padding-bottom: 119px;
}

.ermbox {
   position: absolute;
   top: 10px;
   left: 20px;	
}

.imgL {

}
.printContent {
   position: relative;
   z-index: -1;
   z-index: -999;
   font-size: 12px;
}

@@ -310,10 +352,15 @@
   display: block;
}

.printContent .t4 {
   text-align: right;
.ermbox span {
   font-weight: 700;
}

.t40 {
   font-size: 12px;
}
.t41 {
   font-size: 16px;
}
.printContent table {
   padding: 10px 0;
}