1.新增全部本地打印标签

2.优化订单重但标签小票
2024-06-21 13:56:16 +08:00
parent c86fff9691
commit 0b2b4b44d0
17 changed files with 2356 additions and 342 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,15 +22,28 @@
 </template>

 <script setup>
-import { ref, reactive, watch } from "vue";
+import { v4 as uuidv4 } from 'uuid'
+import { ref, reactive, watch, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import leftMenu from "@/components/leftMenu.vue";
+import useStorage from '@/utils/useStorage'
+import { useUser } from "@/store/user.js";
+import { bySubType } from "@/api/device";
+import { dayjs, ElMessage } from "element-plus";
+import { ipcRenderer } from 'electron'
+
+if (!useStorage.get('uuid')) {
+  useStorage.set('uuid', uuidv4())
+}
+
+const store = useUser();

 const route = useRoute();

 const includeList = reactive([]);
 const hideLeftMenu = ref(false);
 watch(route, (to) => {
+  // console.log(to);
  if (to.meta.keepAlive) {
    includeList.push(to.name);
  }
@@ -40,8 +53,27 @@ watch(route, (to) => {
  } else {
    hideLeftMenu.value = false;
  }
+  if (to.fullPath == '/login') {
+    if (ws.value != null) {
+      console.log('关闭ws');
+      ws.value.close()
+      wsIsClose.value = true
+    }
+  } else {
+    // 打开ws
+    console.log('打开ws');
+    openWs()
+  }
 });

+// 登录成功后开始连接ws
+function openWs() {
+  if (store.userInfo && store.userInfo.shopId && ws.value == null) {
+    bySubTypeAjax();
+    initWebSocket()
+  }
+}
+
 let transitionName = ref();
 let router = useRouter();
 router.beforeEach((to, from) => {
@@ -56,6 +88,229 @@ router.beforeEach((to, from) => {
    transitionName.value = "";
  }
 });
+
+// 小票打印机列表
+const printList = ref([]);
+// 标签打印机列表
+const printLabelList = ref([]);
+const localPrintList = ref([])
+
+// 获取打印机状态
+async function bySubTypeAjax() {
+  try {
+    const res1 = await bySubType({
+      shopId: store.userInfo.shopId,
+      contentType: "local",
+      subType: "cash",
+    });
+    const res2 = await bySubType({
+      shopId: store.userInfo.shopId,
+      contentType: "local",
+      subType: "label",
+    });
+    printList.value = res1;
+    printLabelList.value = res2;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+// 获取本地打印机列表
+function getPrintList() {
+  ipcRenderer.send("getPrintList");
+  ipcRenderer.on("printList", (event, arg) => {
+    localPrintList.value = arg;
+    // console.log(localPrintList.value);
+  });
+}
+
+// 检查本地打印机是否能正常使用
+function checkLocalPrint(deviceName) {
+  let print = ''
+  for (let item of localPrintList.value) {
+    if (item.name == deviceName) {
+      print = item
+    }
+  }
+
+  if (!print.name) {
+    return false
+  } else {
+    return true
+  }
+}
+
+// 打印小票
+function printBill(props) {
+  if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
+    ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+  } else {
+    const data = {
+      shop_name: store.userInfo.merchantName,
+      carts: props.carts,
+      amount: props.amount,
+      remark: props.remark,
+      orderInfo: props.orderInfo,
+      deviceName: printList.value[0].config.deviceName,
+      createdAt: dayjs(props.orderInfo.createdAt).format(
+        "YYYY-MM-DD HH:mm:ss"
+      ),
+      printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    };
+    ipcRenderer.send("printerInfoSync", JSON.stringify(data));
+  }
+}
+
+// 检测是否打印标签小票
+function checkLabelPrint(props) {
+  if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
+    ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+  } else {
+    let pids = printLabelList.value[0].config.categoryList.map(item => item.id)
+    let labelList = []
+    props.carts.map(item => {
+      if (pids.some(el => el == item.categoryId)) {
+        for (let i = 0; i < item.number; i++) {
+          labelList.push(
+            {
+              outNumber: props.outNumber,
+              name: item.name,
+              skuName: item.skuName,
+              masterId: props.orderInfo.tableName,
+              deviceName: printLabelList.value[0].config.deviceName,
+              createdAt: dayjs(props.createdAt).format('YYYY-MM-DD HH:mm:ss')
+            }
+          )
+        }
+      }
+    })
+
+    printLabel(labelList)
+  }
+}
+
+// 打印标签
+let labelCount = ref(0)
+let labelPrintTimer = ref(null)
+function printLabel(list) {
+  console.log(list);
+  if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
+    ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+  } else {
+    labelPrintTimer.value = setInterval(() => {
+      // console.log('labelCount', labelCount.value);
+      list[labelCount.value].count = `${list.length - labelCount.value}/${list.length}`
+      ipcRenderer.send('printerTagSync', JSON.stringify(list[labelCount.value]))
+      labelCount.value++
+      if (labelCount.value > list.length - 1) {
+        clearInterval(labelPrintTimer.value)
+        labelPrintTimer.value = null
+        labelCount.value = 0
+      }
+    }, 1000)
+  }
+}
+
+let ws = ref(null)
+let wsIsClose = ref(false)
+// 初始化websocket
+function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
+  wsIsClose.value = false
+  ws.value = new WebSocket(wsUrl);
+  console.log("websocket:", ws.value);
+
+  ws.value.onopen = function () {
+    console.log('wss连接成功');
+    // 清除心跳
+    clearInterval(heartbeatTimer.value)
+    heartbeatTimer.value = null
+    startheartbeat()
+
+    // 清除重连
+    clearInterval(reConnectTimer.value)
+    reConnectTimer.value = null
+    reConnectCount.value = 0
+
+    ws.value.send(JSON.stringify({
+      type: "connect",
+      shopId: store.userInfo.shopId,
+      clientId: useStorage.get('uuid')
+    }))
+  };
+
+  // 接收消息
+  ws.value.onmessage = function (e) {
+    // websocketonmessage(e);
+    let data = JSON.parse(e.data)
+    if (data.type == 'order') {
+      console.log('接收消息', data);
+      // 接收订单消息，打印小票
+      // printBill(data)
+
+      // 检测是否需要打印标签小票
+      checkLabelPrint(data)
+    }
+  };
+
+  // 连接发生错误
+  ws.value.onerror = function () {
+    console.log("WebSocket连接发生错误");
+
+    // 清除心跳
+    clearInterval(heartbeatTimer.value)
+    heartbeatTimer.value = null
+
+    // 手动关闭后不在执行自动连接任务
+    if (!wsIsClose.value) reConnect(wsUrl);
+  };
+
+  // 关闭
+  ws.value.onclose = function (e) {
+    console.log('ws关闭了', e);
+
+    // 清除心跳
+    clearInterval(heartbeatTimer.value)
+    heartbeatTimer.value = null
+
+    // 手动关闭后不在执行自动连接任务
+    if (!wsIsClose.value) reConnect(wsUrl);
+  };
+}
+
+// 启动心跳连接
+let heartbeatTimer = ref(null)
+function startheartbeat() {
+  heartbeatTimer.value = setInterval(() => {
+    ws.value.send(JSON.stringify({ type: 'heartbeat' }))
+  }, 10000)
+}
+
+// 重连最大次数5次
+let reConnectCount = ref(0)
+let reConnectTimer = ref(null)
+function reConnect(wsUrl) {
+  if (reConnectTimer.value != null) return
+  reConnectTimer.value = setInterval(() => {
+    // 自动连接超过5次不在连接，需手动出发
+    // console.log('reConnectCount.value===', reConnectCount.value);
+    // if (reConnectCount.value >= 100) {
+    //   console.log('重连超过5次，不在连接');
+    //   clearInterval(reConnectTimer.value)
+    //   reConnectTimer.value = null
+    //   reConnectCount.value = 0
+    //   wsIsClose.value = true
+    //   ws.value.close()
+    // } else {
+    // }
+    reConnectCount.value++
+    initWebSocket(wsUrl)
+  }, 5000)
+}
+
+onMounted(() => {
+  getPrintList();
+})
+
 </script>

 <style lang="scss">
@@ -87,28 +342,20 @@ router.beforeEach((to, from) => {
  --b-darker: calc(var(--b) * 0.8);

  --primary-color: rgb(var(--r), var(--g), var(--b));
-  --primary-color-hover: rgb(
-    var(--r-lighter3),
-    var(--g-lighter3),
-    var(--b-lighter3)
-  );
+  --primary-color-hover: rgb(var(--r-lighter3),
+      var(--g-lighter3),
+      var(--b-lighter3));
  --el-color-primary: var(--primary-color) !important;
  --el-button-hover-bg-color: var(--primary-color) !important;
-  --el-color-primary-light-3: rgb(
-    var(--r-lighter),
-    var(--g-lighter),
-    var(--b-lighter)
-  ) !important;
-  --el-color-primary-dark-2: rgb(
-    var(--r-darker),
-    var(--g-darker),
-    var(--b-darker)
-  ) !important;
-  --el-color-primary-light-5: rgb(
-    var(--r-lighter2),
-    var(--g-lighter2),
-    var(--b-lighter2)
-  ) !important;
+  --el-color-primary-light-3: rgb(var(--r-lighter),
+      var(--g-lighter),
+      var(--b-lighter)) !important;
+  --el-color-primary-dark-2: rgb(var(--r-darker),
+      var(--g-darker),
+      var(--b-darker)) !important;
+  --el-color-primary-light-5: rgb(var(--r-lighter2),
+      var(--g-lighter2),
+      var(--b-lighter2)) !important;

  --el-font-size-base: 16px !important;
  --el-message-close-size: var(--el-font-size-base) !important;
@@ -163,8 +410,7 @@ html {
  background-color: #555;
  margin-right: 0 !important;
  padding-bottom: 20px !important;
-  border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0
-    0;
+  border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
 }

 .el-dialog__title {
@@ -185,8 +431,7 @@ html {
 }

 .el-dialog__body {
-  padding: calc(var(--el-dialog-padding-primary) + 10px)
-    var(--el-dialog-padding-primary);
+  padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
 }

 .el-dialog__header {
@@ -274,7 +519,7 @@ html {
    display: flex;
    width: 200%;

-    & > div {
+    &>div {
      width: 50%;
    }