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/views/device/add_label.vue
+++ b/src/views/device/add_label.vue
@@ -1,10 +1,7 @@
 <template>
  <div class="device_container">
    <div class="header" @click="router.back()">
-      <el-icon
-        style="position: relative; top: 2px; margin-right: 4px"
-        size="22"
-      >
+      <el-icon style="position: relative; top: 2px; margin-right: 4px" size="22">
        <ArrowLeft />
      </el-icon>
      <el-text>{{ form.id ? "编辑便签打印机" : "添加便签打印机" }}</el-text>
@@ -26,28 +23,15 @@
          </el-form-item>
          <el-form-item label="选择设备">
            <el-select v-model="form.config.deviceName">
-              <el-option
-                :label="item.name"
-                :value="item.name"
-                v-for="item in printList"
-                :key="item.name"
-              ></el-option>
+              <el-option :label="item.name" :value="item.name" v-for="item in printList" :key="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称">
-            <el-input
-              v-model="form.name"
-              placeholder="请输入设备名称"
-            ></el-input>
+            <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="打印份数">
            <el-select v-model="form.config.printerNum">
-              <el-option
-                :label="item"
-                :value="item"
-                v-for="item in 4"
-                :key="item"
-              ></el-option>
+              <el-option :label="item" :value="item" v-for="item in 4" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品模式">
@@ -58,16 +42,10 @@
          </el-form-item>
          <el-form-item label="商品分类">
            <div style="cursor: pointer" @click="classifyRef.show()">
-              <span
-                style="color: #409eff"
-                v-for="item in form.config.categoryList"
-              >
+              <span style="color: #409eff" v-for="item in form.config.categoryList">
                {{ item.name }},
              </span>
-              <span
-                style="color: #e65d6e"
-                v-if="!form.config.categoryList.length"
-              >
+              <span style="color: #e65d6e" v-if="!form.config.categoryList.length">
                请选择分类
              </span>
            </div>
@@ -115,12 +93,7 @@
              </el-button>
            </div>
            <div class="btn">
-              <el-button
-                type="primary"
-                style="width: 100%"
-                :loading="loading"
-                @click="submitHandle"
-              >
+              <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
                保存
              </el-button>
            </div>
@@ -129,17 +102,14 @@
      </div>
    </div>
  </div>
-  <classify
-    ref="classifyRef"
-    @success="(e) => (form.config.categoryList = e)"
-  />
+  <classify ref="classifyRef" @success="(e) => (form.config.categoryList = e)" />
 </template>

 <script setup>
 import { ipcRenderer } from "electron";
 import { onMounted, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { ElMessage } from "element-plus";
+import { ElMessage, dayjs } from "element-plus";
 import { tbPrintMachinePost, tbPrintMachineDetail } from "@/api/device";
 import { useUser } from "@/store/user.js";
 import { Loading } from "element-plus/es/components/loading/src/service";
@@ -190,8 +160,15 @@ function printHandle() {
    return;
  }
  ipcRenderer.send(
-    "printStart",
-    JSON.stringify({ deviceName: form.value.config.deviceName })
+    "printerTagSync",
+    JSON.stringify({
+      deviceName: form.value.config.deviceName,
+      outNumber: '123',
+      name: '甜橙马黛茶',
+      skuName: '加奶、加珍珠',
+      masterId: '#A9',
+      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss')
+    })
  );
 }

@@ -268,9 +245,11 @@ onMounted(() => {

    .print_view {
      padding: 20px 0;
+
      .blod {
        font-weight: 600;
      }
+
      .title {
        display: flex;
        justify-content: center;
--- a/src/views/home/test.vue
+++ b/src/views/home/test.vue
@@ -1,11 +1,241 @@
 <template>
    <!-- <el-button @click="chooseSerial">获取串口列表</el-button> -->
-    <el-button @click="printTag">打印标签</el-button>
+    <el-button @click="initWebSocket()">连接ws</el-button>
 </template>

 <script setup>
+import _ from 'lodash'
+import { bySubType } from "@/api/device";
+import { ElMessage } from "element-plus";
+import dayjs from 'dayjs'
 import { ipcRenderer } from 'electron'
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useUser } from "@/store/user.js";
+import useStorage from '@/utils/useStorage'
+const store = useUser();
+
+// 小票打印机列表
+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 = 'wss://wxcashiertest.sxczgkj.cn/client') {
+    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 >= 5) {
+            console.log('重连超过5次，不在连接');
+            clearInterval(reConnectTimer.value)
+            reConnectTimer.value = null
+            reConnectCount.value = 0
+            wsIsClose.value = true
+            ws.value.close()
+        } else {
+            reConnectCount.value++
+            initWebSocket(wsUrl)
+        }
+    }, 5000)
+}
+
+
+
+
+
+

 // 打印标签小票
 const printTag = () => {
@@ -25,12 +255,17 @@ const chooseSerial = async () => {
    //     localStorage.setItem('printNum', printNum)
    // }
    // ipcRenderer.send('printStart', printNum)
-    ipcRenderer.send('getSerialPort')
+    // ipcRenderer.send('getSerialPort')
+
 };

 onMounted(() => {
    ipcRenderer.on('seriaportList', (e, a) => {
        console.log('seriaportList', a);
    })
+
+    getPrintList();
+    bySubTypeAjax();
+    initWebSocket()
 })
 </script>
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -247,6 +247,120 @@ import { clearNoNum } from '@/utils'
 const store = useUser()
 const itemboxshow = ref(false)

+import { ipcRenderer } from 'electron'
+
+
+import { bySubType } from "@/api/device";
+
+
+// 小票打印机列表
+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 checkLabelPrint(props) {
+    // console.log(props);
+    // console.log(printLabelList.value);
+    if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
+        ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+    } else {
+        let pids = printLabelList.value[0].config.categoryList.map(item => item.id)
+        let labelList = []
+        props.skuInfos.map(item => {
+            if (pids.some(el => el == item.categoryId)) {
+                for (let i = 0; i < item.num; i++) {
+                    labelList.push(
+                        {
+                            outNumber: props.outNumber,
+                            name: item.productName,
+                            skuName: item.productSkuName,
+                            masterId: props.tableName,
+                            deviceName: printLabelList.value[0].config.deviceName,
+                            createdAt: dayjs(props.createAt).format('YYYY-MM-DD HH:mm:ss')
+                        }
+                    )
+                }
+            }
+        })
+        if (labelList.length) printLabel(labelList)
+    }
+}
+
+// 打印标签
+let labelCount = ref(0)
+let labelPrintTimer = ref(null)
+const printLabel = lodash.throttle(function (list) {
+    // console.log('printLabel===', list);
+    if (!checkLocalPrint(printLabelList.value[0].config.deviceName)) {
+        ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+    } else {
+        clearInterval(labelPrintTimer.value)
+        labelPrintTimer.value = null
+        labelCount.value = 0
+        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++
+            console.log(labelCount.value);
+            if (labelCount.value > list.length - 1) {
+                clearInterval(labelPrintTimer.value)
+                labelPrintTimer.value = null
+                labelCount.value = 0
+            }
+        }, 1000)
+    }
+}, 1500, { leading: true, trailing: false })
+
+
 const handleClick = (Name) => {//切换teb
    ordereData.status = Name.props.name
    asyncorderfindOrder()
@@ -303,23 +417,32 @@ const payreturnOrderclick = lodash.debounce(async () => { //搜索手机号

 const print = async (e) => {
    try {
-        await cloudPrinterprint({
-            type: e,
-            orderId: orderDetaildata.value.id,
-            ispre: false
-        })
-        ElMessage({
-            message: '成功打票',
-            type: 'success',
-        })
+        if (e == 'label' && printLabelList.value.length) {
+            checkLabelPrint(printLabelOrder.value)
+        } else {
+            await cloudPrinterprint({
+                type: e,
+                orderId: orderDetaildata.value.id,
+                ispre: false
+            })
+            ElMessage({
+                message: '成功打票',
+                type: 'success',
+            })
+        }
    } catch (error) {
-
+        console.log(error);
    }
 }

 const loadingboxshow = ref(false);
+// 要打印标签的订单数据
+const printLabelOrder = ref('')

 const emititemboxshow = async (e) => { //接收子组件值  并赋值给父组件
+    // console.log('emititemboxshow', e);
+    printLabelOrder.value = e
+
    loadingboxshow.value = true
    try {
        let res = await orderorderDetail({
@@ -453,6 +576,9 @@ const callNumberHandle = async () => {
 onMounted(() => {
    // resetMembrform.value = { ...membrform.value }
    asyncorderfindOrder()
+
+    getPrintList();
+    bySubTypeAjax();
 })
 </script>

--- a/src/views/work/index.vue
+++ b/src/views/work/index.vue
@@ -187,7 +187,18 @@ const exit = async () => {
    try {
        if (printList.value.length) {
            if (!checkLocalPrint(printList.value[0].config.deviceName)) {
-                ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+                loading.value = true;
+                let res = await loginlogout({
+                    status: 1
+                })
+                useStorage.clear()
+                ElMessage.success("交班成功");
+                setTimeout(() => {
+                    router.replace({
+                        name: "login",
+                    });
+                }, 1000);
+                loading.value = false;
            } else {
                // 获取交班打印小票数据
                const data = await handoverData({