新增标签打印

2024-06-18 18:36:53 +08:00
parent 1439f12ee5
commit c86fff9691
14 changed files with 690 additions and 110 deletions
--- 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">