优化新增本地打印交班小票

2024-06-14 11:41:46 +08:00 · 2024-06-14 11:41:46 +08:00 · 1439f12ee5
parent fde0ed0eaf
commit 1439f12ee5
9 changed files with 473 additions and 264 deletions
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
@ -1 +1,129 @@
-"use strict";const s=require("path"),e=require("electron");let t;e.app.whenReady().then(()=>{t=new e.BrowserWindow({title:"银收客",width:1024,height:768,fullscreenable:!0,fullscreen:!process.env.VITE_DEV_SERVER_URL,simpleFullscreen:!0,frame:!!process.env.VITE_DEV_SERVER_URL,webPreferences:{nodeIntegration:!0,contextIsolation:!1}}),process.env.VITE_DEV_SERVER_URL?t.loadURL(process.env.VITE_DEV_SERVER_URL):t.loadFile(s.resolve(__dirname,"../dist/index.html")),e.app.on("activate",()=>{e.BrowserWindow.getAllWindows().length===0&&createWindow()}),e.ipcMain.on("quitHandler",(r,n)=>{e.app.quit()}),e.ipcMain.on("getPrintList",()=>{t.webContents.getPrintersAsync().then(r=>{t.webContents.send("printList",r)})});const i=new e.BrowserWindow({show:!1,width:464,height:1726,webPreferences:{nodeIntegration:!0,contextIsolation:!1}});process.env.VITE_DEV_SERVER_URL?i.loadFile(s.join(__dirname,"../public/print.html")):i.loadFile(s.resolve(__dirname,"../dist/print.html")),e.ipcMain.on("printerInfoSync",(r,n)=>{i.webContents.send("getParams",n)}),e.ipcMain.on("printStart",(r,n)=>{console.log(n);let o=JSON.parse(n).deviceName;i.webContents.print({silent:!0,deviceName:o,pageSize:{width:58e3,height:216e3},scaleFactor:80,landscape:!1,margins:{marginType:"none",top:0,bottom:0,left:0,right:0},dpi:{horizontal:203,vertical:203}})})});e.app.on("window-all-closed",()=>{process.platform!=="darwin"&&e.app.quit()});
+"use strict";
+const path = require("path");
+const electron = require("electron");
+let win;
+electron.app.whenReady().then(() => {
+  win = new electron.BrowserWindow({
+    title: "银收客",
+    width: 1024,
+    height: 768,
+    fullscreenable: true,
+    fullscreen: process.env.VITE_DEV_SERVER_URL ? false : true,
+    simpleFullscreen: true,
+    frame: process.env.VITE_DEV_SERVER_URL ? true : false,
+    webPreferences: {
+      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+  if (process.env.VITE_DEV_SERVER_URL) {
+    win.loadURL(process.env.VITE_DEV_SERVER_URL);
+  } else {
+    win.loadFile(path.resolve(__dirname, "../dist/index.html"));
+  }
+  electron.app.on("activate", () => {
+    if (electron.BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+  electron.ipcMain.on("quitHandler", (_, msg) => {
+    electron.app.quit();
+  });
+  electron.ipcMain.on("getPrintList", () => {
+    win.webContents.getPrintersAsync().then((res) => {
+      win.webContents.send("printList", res);
+    });
+  });
+  const printWin = new electron.BrowserWindow({
+    show: false,
+    width: 464,
+    height: 1726,
+    webPreferences: {
+      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+  if (process.env.VITE_DEV_SERVER_URL) {
+    printWin.loadFile(path.join(__dirname, "../public/print.html"));
+  } else {
+    printWin.loadFile(path.resolve(__dirname, "../dist/print.html"));
+  }
+  electron.ipcMain.on("printerInfoSync", (event, arg) => {
+    printWin.webContents.send("getParams", arg);
+  });
+  electron.ipcMain.on("printStart", (event, arg) => {
+    console.log(arg);
+    const _parmas = JSON.parse(arg);
+    let name = _parmas.deviceName;
+    printWin.webContents.print({
+      silent: true,
+      deviceName: name,
+      pageSize: {
+        width: 58e3,
+        height: 216e3
+      },
+      scaleFactor: 80,
+      landscape: false,
+      margins: {
+        marginType: "none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      dpi: {
+        horizontal: 203,
+        vertical: 203
+      }
+    });
+  });
+  const workPrintWin = new electron.BrowserWindow({
+    show: false,
+    width: 464,
+    height: 1726,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+  if (process.env.VITE_DEV_SERVER_URL) {
+    workPrintWin.loadFile(path.join(__dirname, "../public/work_print.html"));
+  } else {
+    workPrintWin.loadFile(path.resolve(__dirname, "../dist/work_print.html"));
+  }
+  electron.ipcMain.on("printerWorkSync", (event, arg) => {
+    workPrintWin.webContents.send("getParams", arg);
+  });
+  electron.ipcMain.on("printWorkStart", (event, arg) => {
+    console.log(arg);
+    const _parmas = JSON.parse(arg);
+    let name = _parmas.deviceName;
+    workPrintWin.webContents.print({
+      silent: true,
+      deviceName: name,
+      pageSize: {
+        width: 58e3,
+        height: 216e3
+      },
+      scaleFactor: 80,
+      landscape: false,
+      margins: {
+        marginType: "none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      dpi: {
+        horizontal: 203,
+        vertical: 203
+      }
+    });
+  });
+});
+electron.app.on("window-all-closed", () => {
+  if (process.platform !== "darwin")
+    electron.app.quit();
+});
--- a/electron/main.js
+++ b/electron/main.js
@ -1,5 +1,11 @@
 import path from "path";
 import { app, BrowserWindow, ipcMain } from "electron";
+// import SerialPort from "serialport";
+
+// SerialPort.list().then(
+//   (ports) => ports.forEach(console.log),
+//   (err) => console.error(err)
+// );

 let win;
 app.whenReady().then(() => {
@ -100,58 +106,56 @@ app.whenReady().then(() => {
  });

  // 交班小票的窗口
-  // const workPrintWin = new BrowserWindow({
-  //   show: true,
-  //   width: 464,
-  //   height: 1726,
-  //   webPreferences: {
-  //     nodeIntegration: true,
-  //     contextIsolation: false,
-  //   },
-  // });
+  const workPrintWin = new BrowserWindow({
+    show: false,
+    width: 464,
+    height: 1726,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  });

-  // if (process.env.VITE_DEV_SERVER_URL) {
-  //   // 加载打印的html文件
-  //   workPrintWin.loadFile(path.join(__dirname, "../public/work_print.html"));
-  // } else {
-  //   workPrintWin.loadFile(path.resolve(__dirname, "../dist/work_print.html")); // 打包后使用文件路径访问应用
-  // }
-
-  // // 接收渲染进程发送的数据
-  // ipcMain.on("printerWorkSync", (event, arg) => {
-  //   workPrintWin.webContents.send("getParams", arg);
-  // });
-
-  // // 执行交班小票的打印操作
-  // ipcMain.on("printWorkStart", (event, arg) => {
-  //   console.log(arg);
-  //   const _parmas = JSON.parse(arg);
-  //   // console.log(_parmas)
-  //   let name = _parmas.deviceName;
-  //   printWin.webContents.print({
-  //     silent: true,
-  //     deviceName: name,
-  //     pageSize: {
-  //       width: 58000,
-  //       height: 216000,
-  //     },
-  //     scaleFactor: 80,
-  //     landscape: false,
-  //     margins: {
-  //       marginType: "none",
-  //       top: 0,
-  //       bottom: 0,
-  //       left: 0,
-  //       right: 0,
-  //     },
-  //     dpi: {
-  //       horizontal: 203,
-  //       vertical: 203,
-  //     },
-  //   });
-  // });
+  if (process.env.VITE_DEV_SERVER_URL) {
+    // 加载打印的html文件
+    workPrintWin.loadFile(path.join(__dirname, "../public/work_print.html"));
+  } else {
+    workPrintWin.loadFile(path.resolve(__dirname, "../dist/work_print.html")); // 打包后使用文件路径访问应用
+  }

+  // 接收渲染进程发送的数据
+  ipcMain.on("printerWorkSync", (event, arg) => {
+    workPrintWin.webContents.send("getParams", arg);
+  });

+  // 执行交班小票的打印操作
+  ipcMain.on("printWorkStart", (event, arg) => {
+    console.log(arg);
+    const _parmas = JSON.parse(arg);
+    // console.log(_parmas)
+    let name = _parmas.deviceName;
+    workPrintWin.webContents.print({
+      silent: true,
+      deviceName: name,
+      pageSize: {
+        width: 58000,
+        height: 216000,
+      },
+      scaleFactor: 80,
+      landscape: false,
+      margins: {
+        marginType: "none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      },
+      dpi: {
+        horizontal: 203,
+        vertical: 203,
+      },
+    });
+  });
 });

 app.on("window-all-closed", () => {
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "element-plus": "^2.4.3",
    "lodash": "^4.17.21",
    "pinia": "^2.1.7",
+    "serialport": "^12.0.0",
    "swiper": "^11.1.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
--- a/public/work_print.css
+++ b/public/work_print.css
@ -9,6 +9,10 @@ body {
  padding: 0 8mm;
 }

+.empty {
+  height: 20px;
+}
+
 .print_view {
  padding: 20px 0;
 }
--- a/public/work_print.html
+++ b/public/work_print.html
@ -1,8 +1,8 @@
 <!--
  ~ Copyright (c) 2023. Author Hubert Formin <2399270194@qq.com>
  -->
-  <!DOCTYPE html>
-  <html lang="en">
+<!DOCTYPE html>
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Print preview</title>
@ -12,52 +12,36 @@
  <body>
    <div id="app">
      <div class="print_view">
-          <div class="title t1">{{data.shop_name}}</div>
-          <div class="title t2">
-            交班小票
+        <div class="title t1">{{data.merchantName}}</div>
+        <div class="title t2">交班小票</div>
+        <div class="row">交班时间：{{data.startTime}}</div>
+        <div class="row">收银员：{{data.staff}}</div>
+        <div class="row">当班收入：{{data.totalAmount}}</div>
+        <div class="row" v-for="(item,index) in data.payInfos" :key="index">
+          &emsp;&emsp;{{item.payType }}：{{item.amount}}
        </div>
-          <div class="row">
-            交班时间:{{data.orderInfo && data.orderInfo.orderNo}}
+        <div class="row">会员数据</div>
+        <div class="row" v-for="(item,index) in data.memberData" :key="index">
+          &emsp;&emsp;{{item.deposit }}：{{item.amount}}
        </div>
-          <div class="row">收银员:【POS-1】1</div>
-          <table class="table">
-            <tr>
-              <td>品名</td>
-              <td>单价</td>
-              <td>数量</td>
-              <td>小计</td>
-            </tr>
-            <tr v-for="item in data.carts" :key="item.id">
-              <td>
-                <div>{{item.name}}</div>
-                <div class="sku">{{item.skuName}}</div>
-              </td>
-              <td>{{item.salePrice}}</td>
-              <td>{{item.number}}</td>
-              <td>{{item.totalAmount}}</td>
-            </tr>
-          </table>
-          <div class="row between">
-            <span>合计:</span>
-            <span>{{data.amount}}</span>
+        <div class="row">分类数据</div>
+        <div
+          class="row"
+          v-for="(item,index) in data.productCategories"
+          :key="index"
+        >
+          &emsp;&emsp;{{item.categoryName
+          }}&emsp;{{item.num}}&emsp;{{item.amount}}
        </div>
-          <!-- <div class="row between">
-            <span>合计:</span>
-            <span>30.00</span>
-          </div> -->
-          <div class="row between">
-            <span>原价:{{data.amount}}，节省了0</span>
-          </div>
-          <div class="row between">
-            <span>积分:</span>
-            <span>0</span>
-          </div>
-          <div class="row between">
-            <span>余额:</span>
-            <span>0.00</span>
-          </div>
-          <div class="row">备注:</div>
-          <div class="row">打印时间:{{data.printTime}}</div>
+        <div class="row">快捷收款金额：{{data.quickAmount}}</div>
+        <div class="row">退款金额：{{data.returnAmount}}</div>
+        <div class="row">总收入：{{data.totalAmount}}</div>
+        <div class="row">备用金：{{data.imprest}}</div>
+        <div class="row">应交金额：{{data.payable}}</div>
+        <div class="row">上交金额：{{data.handIn}}</div>
+        <div class="empty"></div>
+        <div class="row">总订单数：{{data.orderNum}}</div>
+        <div class="row">打印时间：{{data.printTime}}</div>
      </div>
    </div>
    <script type="module">
@ -79,7 +63,7 @@

              setTimeout(() => {
                ipcRenderer.send(
-                    "printStart",
+                  "printWorkStart",
                  JSON.stringify({ deviceName: data.value.deviceName })
                );
              }, 500);
@ -93,5 +77,4 @@
      }).mount("#app");
    </script>
  </body>
-  </html>
-  
+</html>
--- a/public/work_print.scss
+++ b/public/work_print.scss
@ -6,6 +6,9 @@
 body {
  padding: 0 8mm;
 }
+.empty {
+  height: 20px;
+}
 .print_view {
  padding: 20px 0;

--- a/src/api/work/index.js
+++ b/src/api/work/index.js
@ -1,4 +1,4 @@
-import request from "@/utils/request.js"
+import request from "@/utils/request.js";

 /**
 * 当前用户交班详情
@ -9,7 +9,7 @@ export function shopInfoqueryDuty(params) {
  return request({
    method: "get",
    url: "shopInfo/queryDuty",
-        params
+    params,
  });
 }

@ -22,12 +22,12 @@ export function shopinfoqueryDutyFlow(params) {
  return request({
    method: "get",
    url: "shopInfo/queryDutyFlow",
-        params
+    params,
  });
 }
+
 /**
 * 登出
-
 * @param {*} params
 * @returns
 */
@ -35,6 +35,19 @@ export function loginlogout(params) {
  return request({
    method: "post",
    url: "login/logout",
-        params
+    params,
+  });
+}
+
+/**
+ * 获取交班数据
+ * @param {*} params
+ * @returns
+ */
+export function handoverData(params) {
+  return request({
+    method: "get",
+    url: "/data/handoverData",
+    params,
  });
 }
--- a/src/views/member/index.vue
+++ b/src/views/member/index.vue
@ -3,7 +3,7 @@
        <div class="orderbox_left">
            <div class="demo_tabs" v-if="props.membershow == '0'">
                <div class="demo_tabs_div">
-                    <el-input v-model="tableData.phone" placeholder="请输入手机号或编号" @input="inputChange" clearable />
+                    <el-input v-model="tableData.phone" placeholder="请输入手机号" @input="inputChange" clearable />
                    <el-button style="margin-left: 10px;" type="primary" @click="memberaddshow = true">添加</el-button>
                </div>
            </div>
--- a/src/views/work/index.vue
+++ b/src/views/work/index.vue
@ -18,7 +18,7 @@
                        <div class="box_content_left_top_item">
                            <div class="box_content_left_top_item_top">
                                <div style="color:#ff5252; font-size: 30px;">
-                                    {{ infoData.orderNum || 0}}
+                                    {{ infoData.orderNum || 0 }}
                                </div>
                                <div style="margin-top: 6px; color: #666;">
                                    总订单
@ -26,7 +26,7 @@
                            </div>
                            <div class="box_content_left_top_item_top">
                                <div style="color:#ff5252; font-size: 30px;">
-                                    {{ infoData.amount || 0}}
+                                    {{ infoData.amount || 0 }}
                                </div>
                                <div style="margin-top: 6px; color: #666;">
                                    营业额
@ -36,7 +36,7 @@
                        <div class="box_content_left_top_item">
                            <div class="box_content_left_top_item_botton">
                                <div style=" font-size: 20px;">
-                                    {{ infoData.cashAmount|| 0}}
+                                    {{ infoData.cashAmount || 0 }}
                                </div>
                                <div style="margin-top: 6px;">
                                    现金支付
@ -47,7 +47,7 @@
                            </div>
                            <div class="box_content_left_top_item_botton">
                                <div style=" font-size: 20px;">
-                                    {{ infoData.returnAmount || 0}}
+                                    {{ infoData.returnAmount || 0 }}
                                </div>
                                <div style="margin-top: 6px;">
                                    退款金额
@ -60,9 +60,9 @@
                    </div>
                    <div class="box_content_left_bottom">
                        <el-table :data="infoData.detailList" style="width: 100%;" height="400px">
-                            <el-table-column prop="productName" label="商品名称"/>
-                            <el-table-column prop="skuName" label="规格名称"/>
-                            <el-table-column prop="num" label="商品数量"/>
+                            <el-table-column prop="productName" label="商品名称" />
+                            <el-table-column prop="skuName" label="规格名称" />
+                            <el-table-column prop="num" label="商品数量" />
                            <el-table-column prop="amount" label="商品金额" />
                        </el-table>
                    </div>
@ -89,7 +89,7 @@
                            终端名称：
                        </div>
                        <div class="box_content_right_tiemright">
-                            {{ infoData.equipment || '无'}}
+                            {{ infoData.equipment || '无' }}
                        </div>
                    </div>
                    <div class="box_content_right_tiem">
@ -97,7 +97,7 @@
                            备用金：
                        </div>
                        <div class="box_content_right_tiemright">
-                            {{ infoData.pettyCash || '无'}}
+                            {{ infoData.pettyCash || '无' }}
                        </div>
                    </div>
                    <div class="box_content_right_tiem">
@ -105,7 +105,7 @@
                            收营员：
                        </div>
                        <div class="box_content_right_tiemright">
-                            {{ infoData.userName || '无'}}
+                            {{ infoData.userName || '无' }}
                        </div>
                    </div>
                    <div class="box_content_right_tiembutton" :loading="loading" @click="exit">
@ -121,12 +121,18 @@
 </template>

 <script setup>
+import { ipcRenderer } from "electron";
+
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, dayjs } from 'element-plus'
-import { shopInfoqueryDuty, loginlogout } from '@/api/work/index.js'
+import { shopInfoqueryDuty, loginlogout, handoverData } from '@/api/work/index.js'
 import useStorage from '@/utils/useStorage'
 import { useRouter } from "vue-router";
+import { bySubType } from "@/api/device";
+import { useUser } from "@/store/user.js";
+
+const store = useUser();

 const router = useRouter();

@ -135,11 +141,75 @@ const dialogVisible = ref(true) //交班
 const infoData = ref({})
 const loading = ref(false);

+const printList = ref([]);
+const localPrintList = ref([])
+
+// 获取打印机状态
+async function bySubTypeAjax() {
+    try {
+        const res = await bySubType({
+            shopId: store.userInfo.shopId,
+            contentType: "local",
+            subType: "cash",
+        });
+        printList.value = res;
+    } 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
+    }
+}
+
 const exit = async () => {
    try {
+        if (printList.value.length) {
+            if (!checkLocalPrint(printList.value[0].config.deviceName)) {
+                ElMessage.error("本地打印机无法使用，请检查打印机是否正确连接");
+            } else {
+                // 获取交班打印小票数据
+                const data = await handoverData({
+                    id: infoData.value.id
+                })
+                data.deviceName = printList.value[0].config.deviceName
+                data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+                ipcRenderer.send("printerWorkSync", JSON.stringify(data));
+                // return
+                useStorage.clear()
+                ElMessage.success("交班成功");
+                setTimeout(() => {
+                    router.replace({
+                        name: "login",
+                    });
+                }, 1000);
+                loading.value = false;
+            }
+        } else {
            loading.value = true;
            let res = await loginlogout({
-            status:1
+                status: 1
            })
            useStorage.clear()
            ElMessage.success("交班成功");
@ -149,6 +219,7 @@ const exit = async () => {
                });
            }, 1000);
            loading.value = false;
+        }
    } catch (error) {
        loading.value = false;
    }
@ -166,6 +237,8 @@ const infoshopInfoqueryDutys = async () => {

 }
 onMounted(() => {
+    getPrintList()
+    bySubTypeAjax()
    infoshopInfoqueryDutys()
 })
 </script>