新增标签打印

2024-06-18 18:36:53 +08:00 · 2024-06-18 18:36:53 +08:00 · c86fff9691
parent 1439f12ee5
commit c86fff9691
14 changed files with 690 additions and 110 deletions
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
@ -122,6 +122,49 @@ electron.app.whenReady().then(() => {
      }
    });
  });
+  const tagPrintWin = new electron.BrowserWindow({
+    show: true,
+    width: 320,
+    height: 240,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+  if (process.env.VITE_DEV_SERVER_URL) {
+    tagPrintWin.loadFile(path.join(__dirname, "../public/tag_print.html"));
+  } else {
+    tagPrintWin.loadFile(path.resolve(__dirname, "../dist/tag_print.html"));
+  }
+  electron.ipcMain.on("printerTagSync", (event, arg) => {
+    tagPrintWin.webContents.send("getParams", arg);
+  });
+  electron.ipcMain.on("printTagStart", (event, arg) => {
+    console.log(arg);
+    const _parmas = JSON.parse(arg);
+    let name = _parmas.deviceName;
+    tagPrintWin.webContents.print({
+      silent: true,
+      deviceName: name,
+      pageSize: {
+        width: 4e4,
+        height: 3e4
+      },
+      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")
--- a/electron/main.js
+++ b/electron/main.js
@ -1,11 +1,6 @@
 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)
-// );
+// const SerialPort = require("serialport");

 let win;
 app.whenReady().then(() => {
@ -52,6 +47,16 @@ app.whenReady().then(() => {
    });
  });

+  // ipcMain.on("getSerialPort", () => {
+  //   SerialPort.SerialPort.list().then(
+  //     (ports) => {
+  //       console.log(ports);
+  //       win.webContents.send("seriaportList", ports);
+  //     },
+  //     (err) => console.error(err)
+  //   );
+  // });
+
  // 创建打印小票子窗口
  const printWin = new BrowserWindow({
    show: false,
@ -156,6 +161,58 @@ app.whenReady().then(() => {
      },
    });
  });
+
+  // 标签小票的窗口
+  const tagPrintWin = new BrowserWindow({
+    show: true,
+    width: 320,
+    height: 240,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  });
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    // 加载打印的html文件
+    tagPrintWin.loadFile(path.join(__dirname, "../public/tag_print.html"));
+  } else {
+    tagPrintWin.loadFile(path.resolve(__dirname, "../dist/tag_print.html")); // 打包后使用文件路径访问应用
+  }
+
+  // 接收渲染进程发送的数据
+  ipcMain.on("printerTagSync", (event, arg) => {
+    tagPrintWin.webContents.send("getParams", arg);
+  });
+
+  // 执行标签小票的打印操作
+  ipcMain.on("printTagStart", (event, arg) => {
+    console.log(arg);
+    const _parmas = JSON.parse(arg);
+    // console.log(_parmas)
+    let name = _parmas.deviceName;
+    tagPrintWin.webContents.print({
+      silent: true,
+      deviceName: name,
+      pageSize: {
+        width: 40000,
+        height: 30000,
+      },
+      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
@ -1,73 +1,73 @@
 {
-  "name": "vite-electron",
-  "private": true,
-  "version": "1.2.16",
-  "main": "dist-electron/main.js",
-  "scripts": {
-    "dev": "chcp 65001 && vite",
-    "build": "node ./addVersion.js && vite build && electron-builder",
-    "preview": "vite preview",
-    "build:win": "node ./addVersion.js && vite build && electron-builder --w"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.6.2",
-    "dayjs": "^1.11.10",
-    "electron-pos-printer": "^1.3.6",
-    "electron-pos-printer-vue": "^1.0.9",
-    "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"
-  },
-  "devDependencies": {
-    "@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",
-    "tree-kill": "^1.2.2",
-    "vite": "^5.0.0",
-    "vite-plugin-electron": "^0.15.4",
-    "vite-plugin-electron-renderer": "^0.14.5"
-  },
-  "build": {
-    "appId": "com.cashierdesktop.app",
-    "productName": "银收客",
-    "asar": true,
-    "files": [
-      "./dist/**/*",
-      "./dist-electron/**/*"
-    ],
-    "directories": {
-      "buildResources": "build",
-      "output": "release"
-    },
-    "win": {
-      "icon": "./public/logo.ico",
-      "target": [
-        {
-          "target": "nsis",
-          "arch": [
-            "ia32"
-          ]
-        }
-      ]
-    },
-    "nsis": {
-      "oneClick": false,
-      "allowElevation": true,
-      "allowToChangeInstallationDirectory": true,
-      "installerIcon": "./public/logo.ico",
-      "uninstallerIcon": "./public/logo.ico",
-      "installerHeaderIcon": "./public/logo.ico",
-      "createDesktopShortcut": true,
-      "createStartMenuShortcut": true
-    }
-  }
-}
+	"name": "vite-electron",
+	"private": true,
+	"version": "1.2.21",
+	"main": "dist-electron/main.js",
+	"scripts": {
+		"dev": "chcp 65001 && vite",
+		"build": "node ./addVersion.js && vite build && electron-builder",
+		"preview": "vite preview",
+		"build:win": "node ./addVersion.js && vite build && electron-builder --w"
+	},
+	"dependencies": {
+		"@element-plus/icons-vue": "^2.3.1",
+		"axios": "^1.6.2",
+		"dayjs": "^1.11.10",
+		"electron-pos-printer": "^1.3.6",
+		"electron-pos-printer-vue": "^1.0.9",
+		"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"
+	},
+	"devDependencies": {
+		"@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",
+		"tree-kill": "^1.2.2",
+		"vite": "^5.0.0",
+		"vite-plugin-electron": "^0.15.4",
+		"vite-plugin-electron-renderer": "^0.14.5"
+	},
+	"build": {
+		"appId": "com.cashierdesktop.app",
+		"productName": "银收客",
+		"asar": true,
+		"files": [
+			"./dist/**/*",
+			"./dist-electron/**/*"
+		],
+		"directories": {
+			"buildResources": "build",
+			"output": "release"
+		},
+		"win": {
+			"icon": "./public/logo.ico",
+			"target": [
+				{
+					"target": "nsis",
+					"arch": [
+						"ia32"
+					]
+				}
+			]
+		},
+		"nsis": {
+			"oneClick": false,
+			"allowElevation": true,
+			"allowToChangeInstallationDirectory": true,
+			"installerIcon": "./public/logo.ico",
+			"uninstallerIcon": "./public/logo.ico",
+			"installerHeaderIcon": "./public/logo.ico",
+			"createDesktopShortcut": true,
+			"createStartMenuShortcut": true
+		}
+	}
+}
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/tag_print.css
+++ b/public/tag_print.css
@ -0,0 +1,57 @@
+* {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 12px;
+  color: #000;
+}
+
+body {
+  padding: 2mm;
+}
+
+.print_view {
+  position: relative;
+}
+.print_view .ewm {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 99;
+}
+.print_view .header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.print_view .header .logo {
+  width: 90px;
+}
+.print_view .header .title {
+  margin-left: 6px;
+}
+.print_view .number_wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+.print_view .number_wrap .num {
+  font-size: 18px;
+  font-weight: bold;
+}
+.print_view .number_wrap .info {
+  margin-left: 12px;
+  padding-bottom: 4px;
+}
+.print_view .time {
+  font-weight: bold;
+}
--- a/public/tag_print.html
+++ b/public/tag_print.html
@ -0,0 +1,69 @@
+<!--
+  ~ Copyright (c) 2023. Author Hubert Formin <2399270194@qq.com>
+  -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Print preview</title>
+    <link rel="stylesheet" href="./tag_print.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="print_view">
+        <img
+          class="ewm"
+          src="data:image/png;base64,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"
+          alt=""
+        />
+        <div class="header">
+          <img class="logo" src="./logo.png" />
+          <!-- <span class="title">双屿Pisces</span> -->
+        </div>
+        <div class="number_wrap">
+          <div class="num">196</div>
+          <div class="info">座位号:B4</div>
+        </div>
+        <div class="shop_info">
+          <div class="name">[冰]美式抹茶拿铁焦糖</div>
+          <div class="text">【半塘 去冰 去咖啡液】</div>
+        </div>
+        <div class="time">2024-06-14 16:22:44</div>
+        <div class="tips">建议尽快享用，风味更佳</div>
+      </div>
+    </div>
+    <script type="module">
+      const { ipcRenderer } = require("electron");
+      import {
+        createApp,
+        ref,
+        onMounted,
+      } from "../node_modules/vue/dist/vue.esm-browser.js";
+
+      createApp({
+        setup() {
+          const data = ref({});
+
+          onMounted(() => {
+            ipcRenderer.on("getParams", (event, arg) => {
+              data.value = JSON.parse(arg);
+              console.log(data.value);
+
+              setTimeout(() => {
+                ipcRenderer.send(
+                  "printTagStart",
+                  JSON.stringify({ deviceName: data.value.deviceName })
+                );
+              }, 500);
+            });
+          });
+
+          return {
+            data,
+          };
+        },
+      }).mount("#app");
+    </script>
+  </body>
+</html>
--- a/public/tag_print.scss
+++ b/public/tag_print.scss
@ -0,0 +1,48 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: #000;
+}
+body {
+  padding: 2mm;
+}
+.print_view {
+  position: relative;
+  .ewm {
+    $size: 50px;
+    width: $size;
+    height: $size;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    .logo {
+      $size: 90px;
+      width: $size;
+    }
+    .title {
+      margin-left: 6px;
+    }
+  }
+  .number_wrap {
+    display: flex;
+    align-items: flex-end;
+    .num {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .info {
+      margin-left: 12px;
+      padding-bottom: 4px;
+    }
+  }
+  .time {
+    font-weight: bold;
+  }
+}
--- a/src/api/order/index.js
+++ b/src/api/order/index.js
@ -75,3 +75,29 @@ export function sendMessage(params) {
    params,
  });
 }
+
+/**
+ * 扫码叫号
+ * @param {*} params
+ * @returns
+ */
+export function scanSendMessage(params) {
+  return request({
+    method: "get",
+    url: "/order/scanSendMessage",
+    params,
+  });
+}
+
+/**
+ * 获取叫号记录
+ * @param {*} params
+ * @returns
+ */
+export function getsendMessage(params) {
+  return request({
+    method: "get",
+    url: "/order/getsendMessage",
+    params,
+  });
+}
--- a/src/components/callNumber.vue
+++ b/src/components/callNumber.vue
@ -0,0 +1,245 @@
+<!-- 取餐号组件 -->
+<template>
+    <el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
+        <!-- <el-input v-model="number" :placeholder="props.placeholder" readonly></el-input> -->
+        <el-input ref="inputRef" v-model="number" :placeholder="props.placeholder" clearable
+            @change="inputChange"></el-input>
+        <div class="tips">注意：扫码请确保输入口获得焦点</div>
+        <!-- <div class="keybord_wrap">
+            <div v-for="item in 9" :key="item">
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" disabled style="width: 100%;">.</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(0)">0</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" icon="CloseBold" style="width: 100%;" @click="delHandle"></el-button>
+            </div>
+        </div> -->
+        <div class="list" v-loading="tableData.loading">
+            <div class="item" v-for="item in tableData.list" :key="item.id">
+                <div class="top">
+                    <div class="left">
+                        {{ item.outCode }} - {{ item.productName }}
+                    </div>
+                    <div class="state s1" v-if="item.status == 0">
+                        叫号成功
+                    </div>
+                    <div class="state s2" v-if="item.status == 1">
+                        叫号失败
+                    </div>
+                </div>
+                <div class="btm">
+                    <div class="time">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+                    <div class="info" v-if="item.status == 1">
+                        {{ item.remark }}
+                    </div>
+                </div>
+            </div>
+            <el-empty description="暂无记录" :image-size="60" v-if="!tableData.list.length" />
+        </div>
+        <div class="page">
+            <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.pageSize" background
+                layout="total, prev, pager, next" :total="tableData.total" @current-change="handleCurrentChange" />
+        </div>
+        <div class="footer">
+            <el-button type="primary" style="width: 100%;" :loading="loading" @click="confirmHandle">确认</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import _ from "lodash";
+import dayjs from 'dayjs'
+import { onMounted, reactive, ref } from 'vue';
+import { useUser } from "@/store/user.js";
+import { scanSendMessage, getsendMessage } from '@/api/order/index'
+const store = useUser();
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '叫号取餐'
+    },
+    placeholder: {
+        type: String,
+        default: '请扫描取餐号'
+    }
+})
+
+const inputRef = ref(null)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const number = ref('')
+
+const tableData = reactive({
+    loading: false,
+    page: 1,
+    pageSize: 10,
+    total: 0,
+    list: []
+})
+
+const emit = defineEmits(['success'])
+
+function show() {
+    dialogVisible.value = true
+    setTimeout(() => {
+        inputRef.value.focus();
+    }, 500);
+}
+
+function opne() {
+    number.value = ''
+}
+
+// 输入
+function inputHandle(n) {
+    number.value += n
+}
+
+// 删除
+function delHandle() {
+    if (!number.value) return
+    number.value = number.value.substring(0, number.value.length - 1)
+}
+
+const inputChange = _.debounce(function (e) {
+    // console.log(e);
+    confirmHandle();
+}, 500);
+
+// 页码改变
+function handleCurrentChange() {
+    getsendMessageAjax()
+}
+
+// 获取叫号记录
+async function getsendMessageAjax() {
+    try {
+        tableData.loading = true
+        const res = await getsendMessage({
+            page: tableData.page,
+            pageSize: tableData.pageSize,
+            shopId: store.userInfo.shopId,
+            // shopId: 4,
+        })
+        tableData.loading = false
+        tableData.list = res.list
+        tableData.total = res.total
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+// 确认
+const confirmHandle = _.throttle(async function () {
+    try {
+        if (!number.value) return
+        loading.value = true
+        const res = await scanSendMessage({
+            outNumber: number.value,
+            shopId: store.userInfo.shopId,
+            // shopId: 4
+        })
+        loading.value = false
+        getsendMessageAjax()
+        setTimeout(() => {
+            inputRef.value.focus();
+        }, 500);
+    } catch (error) {
+        getsendMessageAjax()
+        loading.value = false
+        console.log(error);
+        setTimeout(() => {
+            inputRef.value.focus();
+        }, 500);
+    }
+}, 800, { leading: true, trailing: false })
+
+defineExpose({
+    show
+})
+
+onMounted(() => {
+    getsendMessageAjax()
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-input__inner) {
+    height: 60px;
+    font-size: 36px;
+}
+
+.page {
+    display: flex;
+    padding-bottom: 20px;
+}
+
+.tips {
+    padding-top: 4px;
+}
+
+.keybord_wrap {
+    padding: var(--el-font-size-base) 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    gap: var(--el-font-size-base);
+
+    :deep(.el-button--large) {
+        height: 60px;
+    }
+}
+
+.list {
+    height: 200px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow-y: auto;
+    padding: 0 14px;
+
+    .item {
+        padding: 16px 0;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid #ececec;
+        }
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+
+            .left {
+                color: #000;
+            }
+
+            .state {
+                &.s1 {
+                    color: var(--primary-color);
+                }
+
+                &.s2 {
+                    color: var(--el-color-error);
+                }
+            }
+        }
+
+        .btm {
+            display: flex;
+            justify-content: space-between;
+            padding-top: 4px;
+
+            .time {
+                color: #999;
+            }
+        }
+    }
+}
+</style>
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@ -21,16 +21,20 @@
        </div>
    </div>
    <!-- 更多 -->
-    <more ref="moreref"></more>
+    <more ref="moreref" @openCall="openCall"></more>
+    <!-- 叫号 -->
+    <callNumber ref="callNumberRef" />
 </template>

 <script setup>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import more from '@/components/more.vue'
+import callNumber from './callNumber.vue'

 const route = useRoute()
 const moreref = ref(null)
+const callNumberRef = ref(null)
 const menus = ref([
    {
        label: '收银',
@ -68,6 +72,10 @@ const menus = ref([
        icon: 'SwitchButton'
    }
 ])
+
+function openCall() {
+    callNumberRef.value.show()
+}
 </script>

 <style scoped lang="scss">
--- a/src/components/more.vue
+++ b/src/components/more.vue
@ -1,6 +1,6 @@
 <template>
    <div class="drawerbox">
-        <el-drawer size="50%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
+        <el-drawer size="60%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
            <div class="drawerbox_box">
                <div class="drawerbox_bo_top">
                    <div class="drawerbox_bo_top_left">
@ -9,7 +9,7 @@
                        </div>
                        <div class="drawerbox_bo_top_left_tow" style="margin-top: 10px;">
                            收银员：{{ store.userInfo.userCode }} <span style="color: #666;">登录：{{
-            store.userInfo.loginTime }}</span>
+                                store.userInfo.loginTime }}</span>
                        </div>
                    </div>
                    <!-- <div class="drawerbox_bo_top_ring">
@ -32,7 +32,7 @@
                    <div class="drawerbox_bo_box_itemb_felx">
                        <div class="drawerbox_bo_box_itembox">
                            <div class="drawerbox_bo_box_icon">
-                                <el-icon size="40" style="margin:30px;">
+                                <el-icon size="40">
                                    <Setting />
                                </el-icon>
                            </div>
@ -40,9 +40,19 @@
                                设置
                            </div>
                        </div>
+                        <div class="drawerbox_bo_box_itembox" @click="openCallHandle">
+                            <div class="drawerbox_bo_box_icon">
+                                <el-icon size="40">
+                                    <Bell />
+                                </el-icon>
+                            </div>
+                            <div class="drawerbox_bo_box_icontext">
+                                叫号
+                            </div>
+                        </div>
                        <div class="drawerbox_bo_box_itembox" @click="router.push({ name: 'device_list' })">
                            <div class="drawerbox_bo_box_icon">
-                                <el-icon size="40" style="margin:30px;">
+                                <el-icon size="40">
                                    <TurnOff />
                                </el-icon>
                            </div>
@ -52,7 +62,7 @@
                        </div>
                        <div class="drawerbox_bo_box_itembox" @click="screenref.shows()">
                            <div class="drawerbox_bo_box_icon">
-                                <el-icon size="40" style="margin:30px;">
+                                <el-icon size="40">
                                    <Switch />
                                </el-icon>
                            </div>
@ -86,6 +96,8 @@ import packageData from '../../package.json'

 const router = useRouter()

+const emit = defineEmits(['openCall'])
+
 const store = useUser()
 const screenref = ref(null)

@ -95,6 +107,12 @@ function show() {
    dialogVisible.value = true
 }

+// 打开叫号弹窗
+function openCallHandle() {
+    dialogVisible.value = false
+    emit('openCall')
+}
+
 defineExpose({
    show
 })
@ -165,26 +183,25 @@ defineExpose({

            .drawerbox_bo_box_itemb_felx {
                display: flex;
+                flex-wrap: wrap;
                justify-content: flex-start;
-                padding: 0 20px;
-
-                .drawerbox_bo_box_itembox:nth-child(1) {
-                    margin-left: 0px;
-
-                }

                .drawerbox_bo_box_itembox {
                    width: 20%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
-                    margin-left: 40px;
+                    margin-right: 20px;
+                    margin-bottom: 30px;

                    .drawerbox_bo_box_icon {
                        border-radius: 6px;
                        background: #2196f3;
                        width: 100px;
                        height: 100px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
                    }

                    .drawerbox_bo_box_icontext {
--- a/src/router/index.js
+++ b/src/router/index.js
@ -6,6 +6,7 @@ const routes = [
  {
    path: "/",
    name: "home",
+    // component: test,
    component: home,
  },
  {
--- a/src/views/home/test.vue
+++ b/src/views/home/test.vue
@ -1,20 +1,36 @@
 <template>
-    <el-button @click="chooseSerial">打印</el-button>
+    <!-- <el-button @click="chooseSerial">获取串口列表</el-button> -->
+    <el-button @click="printTag">打印标签</el-button>
 </template>

 <script setup>
 import { ipcRenderer } from 'electron'
+import { onMounted } from 'vue';
+
+// 打印标签小票
+const printTag = () => {
+    ipcRenderer.send('printerTagSync', JSON.stringify({
+        deviceName: 'Xprinter XP-365B123'
+    }))
+}

 //选择串口设备
 const chooseSerial = async () => {
-    let printNum = localStorage.getItem('printNum')
-    if (!printNum) {
-        printNum = 1
-        localStorage.setItem('printNum', printNum)
-    } else {
-        printNum++
-        localStorage.setItem('printNum', printNum)
-    }
-    ipcRenderer.send('printStart', printNum)
+    // let printNum = localStorage.getItem('printNum')
+    // if (!printNum) {
+    //     printNum = 1
+    //     localStorage.setItem('printNum', printNum)
+    // } else {
+    //     printNum++
+    //     localStorage.setItem('printNum', printNum)
+    // }
+    // ipcRenderer.send('printStart', printNum)
+    ipcRenderer.send('getSerialPort')
 };
+
+onMounted(() => {
+    ipcRenderer.on('seriaportList', (e, a) => {
+        console.log('seriaportList', a);
+    })
+})
 </script>
--- a/src/views/member/components/add.vue
+++ b/src/views/member/components/add.vue
@ -6,8 +6,8 @@
                <span>{{ dayjs(item.create_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </div>
            <div class="dialog_footer_right">
-                <span :class="{ active: checkIn(item.biz_code) }">
-                    <template v-if="checkIn(item.biz_code)">+</template>
+                <span :class="{ active: item.type == '+' }">
+                    <template v-if="item.type == '+'">+</template>
                    <template v-else>-</template>
                    ￥{{ formatDecimal(item.amount) }}
                </span>
@ -29,13 +29,6 @@ const props = defineProps({
        default: {}
    }
 })
-
-// 检测是否包含In
-function checkIn(str) {
-    let reg = RegExp(/In/)
-    return str.match(reg)
-}
-
 </script>

 <style scoped lang="scss">