优化标签小票打印

src/views/device/add_label.vue

@@ -76,27 +76,32 @@
       </div>
       <div class="menu_wrap">
         <div class="print_view">
-          <div class="title t1 blod">#A9 #A9</div>
-          <div class="row blod">
-            <span>甜橙马黛茶</span>
-            <span style="margin-left: 30px">1</span>
+          <canvas class="ewm" ref="canvasRef"></canvas>
+          <div class="header">
+            <img class="logo" src="../../assets/prinnt_label_logo.png" />
+            <!-- <span class="title">双屿Pisces</span> -->
           </div>
-          <div class="row blod">加奶、加珍珠</div>
-          <div class="row blod" style="margin-top: 10px">
-            <span>03-08 16:58</span>
-            <span style="margin-left: 30px">￥28</span>
+          <div class="number_wrap">
+            <div class="num" v-if="printData.outNumber">{{ printData.outNumber }}</div>
+            <div class="info" v-if="printData.masterId">座位号：{{ printData.masterId }}</div>
           </div>
-          <div class="btn_wrap">
-            <div class="btn">
-              <el-button plain style="width: 100%" @click="printHandle">
-                打印测试小票
-              </el-button>
-            </div>
-            <div class="btn">
-              <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
-                保存
-              </el-button>
-            </div>
+          <div class="shop_info">
+            <div class="name">{{ printData.name }}</div>
+            <div class="text" v-if="printData.skuName">【{{ printData.skuName }}】</div>
+          </div>
+          <div class="time">{{ printData.createdAt }}</div>
+          <div class="tips">建议尽快享用，风味更佳 {{ printData.count }}</div>
+        </div>
+        <div class="btn_wrap">
+          <div class="btn">
+            <el-button plain style="width: 100%" @click="printHandle">
+              打印测试小票
+            </el-button>
+          </div>
+          <div class="btn">
+            <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
+              保存
+            </el-button>
           </div>
         </div>
       </div>
@@ -114,6 +119,7 @@ import { tbPrintMachinePost, tbPrintMachineDetail } from "@/api/device";
 import { useUser } from "@/store/user.js";
 import { Loading } from "element-plus/es/components/loading/src/service";
 import classify from "@/components/classify/index.vue";
+import QRCode from 'qrcode'
 
 const store = useUser();
 
@@ -145,6 +151,16 @@ const form = ref({
   shopId: store.userInfo.shopId,
 });
 
+const canvasRef = ref(null)
+const printData = ref({
+  deviceName: form.value.config.deviceName,
+  outNumber: '123',
+  name: '甜橙马黛茶',
+  skuName: '加奶、加珍珠',
+  masterId: '#A9',
+  createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss')
+})
+
 // 获取打印机列表
 function getPrintList() {
   ipcRenderer.send("getPrintList");
@@ -161,14 +177,7 @@ function printHandle() {
   }
   ipcRenderer.send(
     "printerTagSync",
-    JSON.stringify({
-      deviceName: form.value.config.deviceName,
-      outNumber: '123',
-      name: '甜橙马黛茶',
-      skuName: '加奶、加珍珠',
-      masterId: '#A9',
-      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss')
-    })
+    JSON.stringify(printData.value)
   );
 }
 
@@ -204,6 +213,11 @@ onMounted(() => {
   if (route.query.id) {
     tbPrintMachineDetailAjax(route.query.id);
   }
+
+  QRCode.toCanvas(canvasRef.value, printData.value.outNumber, function (error) {
+    if (error) console.error(error)
+    console.log('success!');
+  })
 });
 </script>
 
@@ -244,78 +258,59 @@ onMounted(() => {
     padding: 0 15px;
 
     .print_view {
+      position: relative;
+
+      .ewm {
+        $size: 50px;
+        width: $size;
+        height: $size;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 99;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+
+        .logo {
+          $size: 90px;
+          width: $size;
+        }
+
+        .title {
+          margin-left: 6px;
+        }
+      }
+
+      .number_wrap {
+        display: flex;
+        align-items: flex-end;
+
+        .num {
+          font-size: 18px;
+          font-weight: bold;
+        }
+
+        .info {
+          margin-left: 12px;
+          padding-bottom: 4px;
+        }
+      }
+
+      .time {
+        font-weight: bold;
+      }
+    }
+
+    .btn_wrap {
+      display: flex;
+      gap: 20px;
       padding: 20px 0;
 
-      .blod {
-        font-weight: 600;
-      }
-
-      .title {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 4px;
-
-        &.t1 {
-          font-size: 24px;
-        }
-
-        &.t2 {
-          margin-bottom: 15px;
-        }
-      }
-
-      .row {
-        margin-top: 2px;
-
-        &.between {
-          display: flex;
-          justify-content: space-between;
-        }
-      }
-
-      .btn_wrap {
-        display: flex;
-        gap: 20px;
-        padding: 20px 0;
-
-        .btn {
-          flex: 1;
-        }
-      }
-
-      .line {
-        margin: 10px 0;
-        border-bottom: 1px solid #ddd;
-      }
-
-      .table {
-        width: 100%;
-
-        tr {
-          width: 100%;
-          display: flex;
-
-          &:not(:last-child) {
-            margin-bottom: 10px;
-          }
-
-          td {
-            flex: 1;
-
-            &:nth-child(1) {
-              flex: 2;
-            }
-
-            &:not(:first-child) {
-              display: flex;
-              justify-content: flex-end;
-            }
-
-            .sku {
-              font-size: 14px;
-            }
-          }
-        }
+      .btn {
+        flex: 1;
       }
     }
   }

src/views/home/components/settleAccount.vue

@@ -169,27 +169,27 @@ function checkLocalPrint(deviceName) {
 
 // 检测是否打印标签小票
 function checkLabelPrint(props) {
-  console.log(props);
+  // console.log(props);
   if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
     ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接1");
   } else {
     let pids = printLabelList.value[0].config.categoryList.map(item => item.id)
     let labelList = []
-    let count = 0
-    let sum = 0
+    // let count = 0
+    // let sum = 0
+
+    // props.carts.map(item => {
+    //   if (pids.some(el => el == item.categoryId)) {
+    //     for (let i = 0; i < item.number; i++) {
+    //       sum++
+    //     }
+    //   }
+    // })
 
     props.carts.map(item => {
       if (pids.some(el => el == item.categoryId)) {
         for (let i = 0; i < item.number; i++) {
-          sum++
-        }
-      }
-    })
-
-    props.carts.map(item => {
-      if (pids.some(el => el == item.categoryId)) {
-        for (let i = 0; i < item.number; i++) {
-          count++
+          // count++
           labelList.push(
             {
               outNumber: props.outNumber,
@@ -198,7 +198,7 @@ function checkLabelPrint(props) {
               masterId: props.orderInfo.tableName,
               deviceName: printLabelList.value[0].config.deviceName,
               createdAt: dayjs(props.createdAt).format('YYYY-MM-DD HH:mm:ss'),
-              count: `${count}/${sum}`
+              // count: `${count}/${sum}`
             }
           )
         }
@@ -210,17 +210,18 @@ function checkLabelPrint(props) {
 }
 
 // 打印标签
-const printLabel = (list) => {
+const printLabel = _.throttle(function (list) {
   if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
     ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
   } else {
     for (let i = 0; i <= list.length - 1; i++) {
+      // ipcRenderer.send('printerTagSync', JSON.stringify(list[i]))
       setTimeout(() => {
         ipcRenderer.send('printerTagSync', JSON.stringify(list[i]))
-      }, i * 1000)
+      }, i * 800)
     }
   }
-}
+}, 1500, { leading: true, trailing: false })
 
 // 打印操作
 async function printHandle() {

src/views/order/index.vue

@@ -317,21 +317,21 @@ function checkLabelPrint(props) {
     } else {
         let pids = printLabelList.value[0].config.categoryList.map(item => item.id)
         let labelList = []
-        let count = 0
-        let sum = 0
+        // let count = 0
+        // let sum = 0
+
+        // props.skuInfos.map(item => {
+        //     if (pids.some(el => el == item.categoryId)) {
+        //         for (let i = 0; i < item.num; i++) {
+        //             sum++
+        //         }
+        //     }
+        // })
 
         props.skuInfos.map(item => {
             if (pids.some(el => el == item.categoryId)) {
                 for (let i = 0; i < item.num; i++) {
-                    sum++
-                }
-            }
-        })
-
-        props.skuInfos.map(item => {
-            if (pids.some(el => el == item.categoryId)) {
-                for (let i = 0; i < item.num; i++) {
-                    count++
+                    // count++
                     labelList.push(
                         {
                             outNumber: props.outNumber,
@@ -340,7 +340,7 @@ function checkLabelPrint(props) {
                             masterId: props.tableName,
                             deviceName: printLabelList.value[0].config.deviceName,
                             createdAt: dayjs(props.createAt).format('YYYY-MM-DD HH:mm:ss'),
-                            count: `${count}/${sum}`
+                            // count: `${count}/${sum}`
                         }
                     )
                 }
@@ -355,10 +355,13 @@ const printLabel = lodash.throttle(function (list) {
     if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
         ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
     } else {
+        console.log(list.length);
         for (let i = 0; i <= list.length - 1; i++) {
+            // console.log(list[i]);
+            // ipcRenderer.send('printerTagSync', JSON.stringify(list[i]))
             setTimeout(() => {
                 ipcRenderer.send('printerTagSync', JSON.stringify(list[i]))
-            }, i * 1000)
+            }, i * 800)
         }
     }
 }, 1500, { leading: true, trailing: false })