优化小票打印

2024-07-31 18:14:23 +08:00
parent 49cabfed21
commit f393299f0f
11 changed files with 88 additions and 161 deletions
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@@ -49,8 +49,6 @@ import more from '@/components/more.vue'
 import callNumber from './callNumber.vue'
 import work from '@/views/work/index.vue'

-const emits = defineEmits(['connectWsHandle'])
-
 const socketStore = useSocket()

 const route = useRoute()
@@ -108,7 +106,7 @@ function openCall() {
 // 手动重新连接ws
 function connectWsHandle() {
    if (socketStore.online) return
-    emits('connectWsHandle')
+    window.onload()
 }

 defineExpose({
--- a/src/components/lodop/invoicePrint.js
+++ b/src/components/lodop/invoicePrint.js
@@ -3,6 +3,7 @@ import getLodop from "./LodopFuncs.js";
 * 打印订单发票
 */
 export default (data) => {
+  console.log("data.deviceName===", data.deviceName);
  let LODOP = getLodop();
  LODOP.PRINT_INIT("打印小票");
  // 设置打印纸大小D
@@ -13,13 +14,14 @@ export default (data) => {
  LODOP.SET_PRINTER_INDEX(data.deviceName);
  // 文字内容
  let html = `
-    <div style="padding-left: 20px;">
        <div style="height: 100px;"></div>
        <div style="width: 100%;font-size: 16px;display:flex;justify-content:center;">
            请使用微信扫码下载发票，二维码有效期30天，超过自动失效
        </div>
-        <div style="height: 50px;"></div>
-    </div>
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
  `;

  setTimeout(() => {
--- a/src/components/lodop/lodopPrintWork.js
+++ b/src/components/lodop/lodopPrintWork.js
@@ -3,6 +3,7 @@ import getLodop from "./LodopFuncs.js";
 * 打印交班小票
 */
 export default (data) => {
+  console.log("data.deviceName===", data.deviceName);
  let LODOP = getLodop();
  LODOP.PRINT_INIT("打印小票");
  // 设置打印纸大小D
@@ -17,7 +18,7 @@ export default (data) => {
        <div style="font-size: 16px;display: flex; justify-content:center;margin-top:6px;">
          交班小票
        </div>
-        <div style="margin-top: 30px;font-size: 12px;">
+        <div style="font-size: 12px;margin-top:50px;">
          当班时间：${data.startTime}
        </div>
        <div style="font-size: 12px;">
@@ -91,9 +92,8 @@ export default (data) => {
        <div style="font-size: 12px;margin-top: 4px;">商品数据</div>
        <table class="table" style="width: 100%;">
          <tr>
-            <td style="font-size: 12px;width:50%;">商品</td>
+            <td style="font-size: 12px;width:75%;">商品</td>
            <td style="font-size: 12px;width:25%;">数量</td>
-            <td style="font-size: 12px;width:25%;">总计</td>
          </tr>
      `;

@@ -102,13 +102,10 @@ export default (data) => {
    for (let item of data.productInfos) {
      tableBody += `
            <tr>
-              <td style="font-size: 12px;width:50%;">
+              <td style="font-size: 12px;width:75%;">
                <div>${item.productName}</div>
              </td>
              <td style="font-size: 12px;width:25%;">${item.num}</td>
-              <td style="font-size: 12px;width:25%;">
-                ${item.amount}
-              </td>
            </tr>
      `;
    }
@@ -141,18 +138,17 @@ export default (data) => {
          <span>应交金额：</span>
          <span>${data.payable}</span>
        </div>
-        <div style="font-size: 12px;">
-          <span>上交金额：</span>
-          <span>${data.handIn}</span>
-        </div>
        <div style="margin-top: 20px; font-size: 12px;">
          <span>总订单数：</span>
          <span>${data.orderNum}</span>
        </div>
-        <div style="padding-bottom: 50px;font-size: 12px;">
+        <div style="font-size: 12px;">
          打印时间：${data.printTime}
        </div>
-        <div style="height: 50px;"></div>
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
  `;

  let lastHtml = `${html}${payInfos}${memberTitle}${memberData}${productCategoriesTabHead}${productCategoriesTableBody}${tabHead}${tableBody}${str}`;
--- a/src/components/lodop/receiptPrint.js
+++ b/src/components/lodop/receiptPrint.js
@@ -3,6 +3,8 @@ import getLodop from "./LodopFuncs.js";
 * 打印订单小票
 */
 export default (data) => {
+  console.log(data);
+  console.log("data.deviceName===", data.deviceName);
  let LODOP = getLodop();
  LODOP.PRINT_INIT("打印小票");
  // 设置打印纸大小D
@@ -14,12 +16,14 @@ export default (data) => {
  let t2 = (100 - t1) / 3;
  let html = `
        <div style="font-size: 30px;display:flex;justify-content:center;">
-        ${data.shop_name}
+          ${data.shop_name}
        </div>
        <div style="font-size: 16px;display: flex; justify-content:center;margin-top:6px;">
-          结算单【${data.orderInfo.masterId ? data.orderInfo.masterId : ""}】
+          ${data.isBefore ? "预" : ""}结算单【${
+    data.orderInfo.masterId ? data.orderInfo.masterId : ""
+  }】
        </div>
-        <div style="font-size: 16px;display: flex; justify-content:center;margin-top:6px;">
+        <div style="font-size: 16px;display: flex; justify-content:center;margin-top:20px;">
          ${data.orderInfo.outNumber ? data.orderInfo.outNumber : ""}
        </div>
        <div style="margin-top: 30px;font-size: 12px;">
@@ -31,7 +35,9 @@ export default (data) => {
        <div style="margin-top: 4px;font-size: 12px;">
          收银员：${data.loginAccount}
        </div>
-        <div style="margin-top: 6px;margin-bottom: 6px;border-bottom:1px dashed #000;"></div>
+        <div style="margin-top: 6px;margin-bottom: 6px;width: 100%">
+          <hr/>
+        </div>
        <table class="table" style="width: 100%;">
          <tr>
            <td style="font-size: 12px;width:${t1}%;">品名</td>
@@ -47,7 +53,11 @@ export default (data) => {
          <tr>
            <td style="font-size: 12px;width:${t1}%;">
              <div>${item.name}</div>
-              <div class="sku">规格：${item.skuName || ""}</div>
+              ${
+                item.skuName
+                  ? `<div class="sku">规格：${item.skuName}</div>`
+                  : ""
+              }
            </td>
            <td style="font-size: 12px;width:${t2}%;">${item.salePrice}</td>
            <td style="font-size: 12px;width:${t2}%;">${item.number}</td>
@@ -60,7 +70,9 @@ export default (data) => {

  let str = `
        </table>
-        <div style="margin-top: 6px; border-bottom:1px dashed #000;"></div>
+        <div style="margin-top: 6px;margin-bottom: 6px;width: 100%">
+          <hr/>
+        </div>
        <div style="margin-top: 6px; font-size: 22px;display:flex;justify-content: space-between;">
          <span>应收</span>
          <span>￥${data.amount}</span>
@@ -69,12 +81,17 @@ export default (data) => {
          <span>余额：</span>
          <span>0.00</span>
        </div>
-        <div style="margin-top: 6px; border-bottom:1px dashed #000;"></div>
-        <div style="margin-top: 4px; font-size: 12px;">备注：${data.remark}</div>
-        <div style="margin-top: 4px; padding-bottom: 50px;font-size: 12px;">
+        <div style="margin-top: 6px;margin-bottom: 6px;width: 100%">
+          <hr/>
+        </div>
+        <div style="margin-top: 4px; font-size: 16px;font-weight: bold;">备注：${data.remark}</div>
+        <div style="margin-top: 4px; font-size: 12px;">
          打印时间：${data.printTime}
        </div>
-        <div style="height: 50px;"></div>
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
  `;

  let lastHtml = `${html}${table}${str}`;
--- a/src/store/print.js
+++ b/src/store/print.js
@@ -125,15 +125,11 @@ export const usePrint = defineStore({
      }, 800);
    },
    // 添加小票打印对列表数据
-    pushReceiptData(props) {
-      if (
-        this.deviceNoteList.length &&
-        this.checkLocalPrint(this.deviceNoteList[0].config.deviceName)
-      ) {
-        console.log(props);
-
+    pushReceiptData(props, isDevice = true) {
+      console.log("pushReceiptData===", props);
+      if (!isDevice) {
+        // 测试打印，无需校验本地打印机
        const store = useUser();
-        props.deviceName = this.deviceNoteList[0].config.deviceName;
        props.shop_name = store.userInfo.shopName;
        props.loginAccount = store.userInfo.loginAccount;
        props.createdAt = dayjs(props.createdAt).format("YYYY-MM-DD HH:mm:ss");
@@ -146,7 +142,28 @@ export const usePrint = defineStore({
        this.receiptList.push(props);
        this.startReceiptPrint();
      } else {
-        console.log("订单小票：没有小票打印机");
+        if (
+          this.deviceNoteList.length &&
+          this.checkLocalPrint(this.deviceNoteList[0].config.deviceName)
+        ) {
+          const store = useUser();
+          props.deviceName = this.deviceNoteList[0].config.deviceName;
+          props.shop_name = store.userInfo.shopName;
+          props.loginAccount = store.userInfo.loginAccount;
+          props.createdAt = dayjs(props.createdAt).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+          props.printTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+          if (!props.orderInfo.masterId) {
+            props.orderInfo.masterId = props.orderInfo.tableName;
+          }
+          props.orderInfo.outNumber = props.outNumber;
+
+          this.receiptList.push(props);
+          this.startReceiptPrint();
+        } else {
+          console.log("订单小票：没有小票打印机");
+        }
      }
    },
    // 开始打印小票
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -57,7 +57,14 @@ export const useSocket = defineStore({

      if (this.ws == null) {
        console.log("创建新的ws连接");
-        this.ws = new ReconnectingWebSocket(wsUrl);
+
+        const protocols = []; // 可选的子协议数组
+        const options = {
+          // 自动重新连接的选项（可选）
+          connectionTimeout: 1000,
+          maxRetries: 100,
+        };
+        this.ws = new ReconnectingWebSocket(wsUrl, protocols, options);
      } else {
        console.log("重新连接ws");
        this.wsReconnect();
--- a/src/views/device/add.vue
+++ b/src/views/device/add.vue
@@ -178,12 +178,12 @@ const printData = reactive({
    }
  ],
  amount: '30.00',
-  remark: '',
+  remark: '给我多放点辣椒，谢谢老板',
  orderInfo: {
    masterId: '#002',
    orderNo: '202404021023542223445'
  },
-  deviceName: form.value.config.deviceName,
+  deviceName: '',
  createdAt: '2024-04-02 10:15',
  printTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
 });
@@ -203,8 +203,9 @@ function printHandle() {
    return;
  }
  printDataLoading.value = true
+  printData.deviceName = form.value.config.deviceName
  printData.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-  printStore.pushReceiptData(printData)
+  printStore.pushReceiptData(printData, false)
  setTimeout(() => {
    printDataLoading.value = false
  }, 1500)
--- a/src/views/home/components/settleAccount.vue
+++ b/src/views/home/components/settleAccount.vue
@@ -125,6 +125,7 @@ const printHandle = _.throttle(async function () {
    const data = {
      shop_name: store.userInfo.shopName,
      loginAccount: store.userInfo.loginAccount,
+      isBefore: true,
      carts: props.cart,
      amount: props.amount,
      remark: props.remark,
--- a/src/views/work/index.vue
+++ b/src/views/work/index.vue
@@ -212,10 +212,12 @@ const exit = async () => {
        data = await handoverData({
            id: infoData.value.id
        })
+
        data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        data.printShop = isPrint.value
        printStore.printWork(data)

+        // return
        await loginlogout({
            status: 1
        })