优化新增串口

2024-03-07 18:29:19 +08:00 · 2024-03-07 18:29:19 +08:00 · 58993e00ee
parent fc810fd02f
commit 58993e00ee
9 changed files with 186 additions and 188 deletions
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
@ -1,8 +1,13 @@
 "use strict";
-const electron = require("electron");
 const path = require("path");
+const electron = require("electron");
+const { SerialPort } = require("serialport");
+SerialPort.list().then((res) => {
+  console.log(res);
+});
+let win;
 electron.app.whenReady().then(() => {
-  const win = new electron.BrowserWindow({
+  win = new electron.BrowserWindow({
    title: "银收客",
    width: 1024,
    height: 768,
@ -46,15 +51,6 @@ electron.app.whenReady().then(() => {
  electron.ipcMain.on("printerInfoSync", (event, params) => {
    printWin.webContents.send("getParams", params);
  });
-  electron.ipcMain.on("printStart", () => {
-    printWin.webContents.printToPDF({}, (error, data) => {
-      if (!error && data) {
-        console.log("成功生成PDF");
-      } else {
-        console.error("无法生成PDF", error);
-      }
-    });
-  });
 });
 electron.app.on("window-all-closed", () => {
  if (process.platform !== "darwin")
--- a/electron/main.js
+++ b/electron/main.js
@ -1,8 +1,14 @@
+import path from "path";
 import { app, BrowserWindow, ipcMain } from "electron";
-import path from 'path'
+const { SerialPort } = require("serialport");

+SerialPort.list().then(res => {
+  console.log(res);
+});
+
+let win;
 app.whenReady().then(() => {
-  const win = new BrowserWindow({
+  win = new BrowserWindow({
    title: "银收客",
    width: 1024,
    height: 768,
@ -23,15 +29,15 @@ app.whenReady().then(() => {
    // 使用vite开发服务的url路径访问应用
    // win.webContents.openDevTools();
  } else {
-    win.loadFile(path.resolve(__dirname, '../dist/index.html')); // 打包后使用文件路径访问应用
+    win.loadFile(path.resolve(__dirname, "../dist/index.html")); // 打包后使用文件路径访问应用
  }

  app.on("activate", () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
-    };
+      createWindow();
+    }
  });

  ipcMain.on("quitHandler", (_, msg) => {
@ -46,37 +52,28 @@ app.whenReady().then(() => {
      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
      nodeIntegration: true,
      contextIsolation: false,
-    }
-  })
+    },
+  });

  if (process.env.VITE_DEV_SERVER_URL) {
    // 加载打印的html文件
    printWin.loadFile(path.join(__dirname, "../public/print.html"));
  } else {
-    printWin.loadFile(path.resolve(__dirname, '../dist/print.html')); // 打包后使用文件路径访问应用
+    printWin.loadFile(path.resolve(__dirname, "../dist/print.html")); // 打包后使用文件路径访问应用
  }

-  ipcMain.on('printerInfoSync', (event, params) => {
+  ipcMain.on("printerInfoSync", (event, params) => {
    // console.log(JSON.parse(params))
-    printWin.webContents.send('getParams', params)
-  })
+    printWin.webContents.send("getParams", params);
+  });

  // 执行打印操作
-  ipcMain.on('printStart', () => {
+  // ipcMain.on('printStart', () => {
  //   console.log('开始打印')
-
-    printWin.webContents.printToPDF({}, (error, data) => {
-      if (!error && data) {
-        console.log("成功生成PDF")
-      } else {
-        console.error("无法生成PDF", error)
-      }
-    })
-
  //   printWin.webContents.print({
  //     silent: true
  //   })
-  })
+  // })
 });

 app.on("window-all-closed", () => {
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "vite-electron",
  "private": true,
-	"version": "0.0.1",
+  "version": "0.0.2",
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "chcp 65001 && vite",
@ -14,9 +14,9 @@
    "axios": "^1.6.2",
    "dayjs": "^1.11.10",
    "element-plus": "^2.4.3",
-		"html2canvas": "^1.4.1",
    "lodash": "^4.17.21",
    "pinia": "^2.1.7",
+    "serialport": "^12.0.0",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
@ -24,6 +24,7 @@
    "@vitejs/plugin-vue": "^4.5.0",
    "electron": "^28.2.3",
    "electron-builder": "^24.13.3",
+    "electron-rebuild": "^3.2.9",
    "path": "^0.12.7",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
--- a/public/print.html
+++ b/public/print.html
@ -49,34 +49,37 @@

  <body>
    <div id="app">
-      <div class="html2cavas" style="position: fixed; top: -1000%; left: 0">
+      <div class="html2cavas">
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <pre>{{data.shop_name || '结账单位'}}</pre>
        <div class="header">
-          <div class="t1">{{data.shop_name || '结账单位'}}</div>
          <div class="t2">结账单</div>
        </div>
        <div class="time">开始时间： 2024/3/7 09:56:23</div>
        <div class="time">结束时间： 2024/3/8 13:11:07</div>
        <div class="thead">
-          <div class="item">品相</div>
-          <div class="item">数量</div>
-          <div class="item">单位</div>
-          <div class="item">单价</div>
-          <div class="item">小计</div>
-          <div class="item">注</div>
+          品相    数量    单位    单价   小计    注
        </div>
        <div class="tbody">
          <div v-for="item in data.carts" :key="item.id" class="tr">
-            <div class="item">{{item.name}}</div>
-            <div class="item">x{{item.number}}</div>
-            <div class="item">{{item.unitName}}</div>
-            <div class="item">{{item.salePrice}}</div>
-            <div class="item"></div>
-            <div class="item"></div>
+            {{item.name}}    x{{item.number}}    x{{item.number}}    {{item.unitName}}    {{item.salePrice}}    {{item.salePrice}}
          </div>
        </div>
        <div>优惠信息</div>
+        <div><br> </div>
        <div>赠送优惠：{{data.amount}}</div>
+        <div><br> </div>
        <div>结算方式</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
+        <div>---------------</div>
      </div>
    </div>
    <script type="module">
@ -86,7 +89,6 @@
        ref,
        onMounted,
      } from "../node_modules/vue/dist/vue.esm-browser.js";
-      import html2canvas from "../node_modules/html2canvas/dist/html2canvas.esm.js";

      createApp({
        setup() {
@ -94,16 +96,9 @@

          onMounted(() => {
            ipcRenderer.on("getParams", (event, arg) => {
-              console.log(arg);
+              // console.log(arg);
              data.value = JSON.parse(arg);
-              setTimeout(() => {
-                html2canvas(document.querySelector(".html2cavas")).then(
-                  function (canvas) {
-                    document.querySelector("#app").appendChild(canvas);
              ipcRenderer.send("printStart");
-                  }
-                );
-              }, 1000);
            });
          });

--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@ -180,12 +180,12 @@ const menus = ref([
        }

        &.more {
-            margin-top: 50px;
+            margin-top: 200px;
        }

        .icon {
            color: #999;
-            font-size: 26px;
+            font-size: 22px;
            margin-bottom: 4px;
        }

--- a/src/components/payCard/payCard.vue
+++ b/src/components/payCard/payCard.vue
@ -125,9 +125,9 @@ async function confirmOrder() {
                default:
                    break;
            }
+            payLoading.value = false
            ElMessage.success('支付成功')
            emit('paySuccess')
-            payLoading.value = false
        }
    } catch (error) {
        console.log(error)
--- a/src/components/payCard/scanModal.vue
+++ b/src/components/payCard/scanModal.vue
@ -1,10 +1,11 @@
 <!-- 扫码弹窗 -->

 <template>
-    <el-dialog title="扫码支付" width="800" v-model="dialogVisible" @open="reset">
+    <div class="dialog">
+        <el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset">
            <div class="content">
                <div class="left">
-                <el-image :src="icon"></el-image>
+                    <el-image :src="icon" style="width: 60px;height: 60px;"></el-image>
                </div>
                <div class="right" v-if="!userPayWait">
                    <div class="amount">
@ -46,6 +47,7 @@
                </div>
            </div>
        </el-dialog>
+    </div>
 </template>

 <script setup>
@ -86,11 +88,14 @@ async function submitHandle() {
            orderId: props.orderId,
            authCode: scanCode.value
        })
+        loading.value = false
+        scanCode.value = ''
        emits('success')
    } catch (error) {
        if (error.code === '100015') {
            userPayWait.value = true
        } else {
+            loading.value = false
            console.log(error)
        }
    }
@ -168,7 +173,7 @@ defineExpose({
 </script>

 <style scoped lang="scss">
-:deep(.el-dialog__body) {
+.dialog :deep(.el-dialog__body) {
    padding: 0 !important;
 }

@ -176,7 +181,7 @@ defineExpose({
    display: flex;

    .left {
-        width: 300px;
+        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
@ -185,7 +190,7 @@ defineExpose({

    .right {
        flex: 1;
-        padding: 0 var(--el-font-size-base);
+        padding: var(--el-font-size-base);

        .amount {
            display: flex;
@ -209,11 +214,11 @@ defineExpose({
        }

        .number_warp {
-            --h: 40px;
+            --h: 50px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: var(--h) var(--h) var(--h) var(--h);
-            gap: var(--el-font-size-base);
+            gap: 8px;

            .item {
                background-color: #dddddd;
--- a/src/components/skuModal.vue
+++ b/src/components/skuModal.vue
@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="goods.name" width="800" v-model="dialogVisible">
+    <el-dialog :title="goods.name" width="500" v-model="dialogVisible">
        <div class="header">选择规格</div>
        <div v-loading="loading">
            <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
@ -147,8 +147,9 @@ function show(item, t = 'shop') {
                        break;
                    case 'cart':
                        // 如果从购物车选择规格需要做选中效果
+                        const skus = goods.value.skuName.split(',')
                        arr.push({
-                            active: goods.value.skuName.includes(val),
+                            active: !!skus.find(item => item === val),
                            name: val
                        })
                        break;
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -293,11 +293,14 @@ async function queryCartAjax() {
 // 获取取餐码
 async function createCodeAjax() {
  try {
+    if (process.env.VITE_DEV_SERVER_URL) {
+      masterId.value = '#8'
+    } else {
      const res = await createCode({
        shopId: store.userInfo.shopId
      })
      masterId.value = res.code
-    // masterId.value = '#8'
+    }
    queryCartAjax()
  } catch (error) {
    console.log(error)
@ -430,10 +433,10 @@ onMounted(() => {
            align-items: center;

            .icon_item {
-              $size: 40px;
+              $size: 30px;
              width: $size;
              height: $size;
-              border-radius: 6px;
+              border-radius: 4px;
              background-color: #e2e2e2;
              display: flex;
              align-items: center;
@ -460,8 +463,8 @@ onMounted(() => {
    align-items: center;

    .selected {
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
      display: flex;
      align-items: center;
      position: relative;