优化打印订单新增桌号和时间筛选

2024-07-16 09:13:02 +08:00
parent 38366601d4
commit 5e7935bb53
14 changed files with 355 additions and 67 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -171,8 +171,8 @@ const updateInfo = _.throttle(function () {
  // let info = navigator.connection
  console.log(isOnLine);
  // console.log(info);
-  if (store.userInfo && store.userInfo.shopId) {
-    if (isOnLine) {
+  if (store.userInfo && store.userInfo.shopId) { 
+    if (isOnLine) {  
      console.log('有网了重新连接ws~');
      socket.init();
    } else {
--- a/src/components/screen.vue
+++ b/src/components/screen.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog width="400" v-model="dialogVisible" style="padding: 0; " title="以锁屏" :close-on-click-modal="false" :show-close="false">
+    <el-dialog width="400" v-model="dialogVisible" style="padding: 0; " title="已锁屏" :close-on-click-modal="false" :show-close="false">
        <div class="drawerbox_box">
            <el-input v-model="loginName" placeholder="请输入登录账号" />
            <el-button style="width: 100%; margin-top: 20px;" type="primary" @click="loginNameclick">确认</el-button>
--- a/src/store/print.js
+++ b/src/store/print.js
@@ -58,7 +58,10 @@ export const usePrint = defineStore({
    },
    // 打印标签小票
    labelPrint(props) {
-      if (this.checkLocalPrint(this.deviceLableList[0].config.deviceName)) {
+      if (
+        this.deviceLableList.length &&
+        this.checkLocalPrint(this.deviceLableList[0].config.deviceName)
+      ) {
        let pids = this.deviceLableList[0].config.categoryList.map(
          (item) => item.id
        );
@@ -94,6 +97,8 @@ export const usePrint = defineStore({
        });
        // 执行打印操作
        this.startLabelPrint();
+      } else {
+        console.log("没有打印机");
      }
    },
    // 开始打印标签数据
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -14,6 +14,7 @@ export const useSocket = defineStore({
    ws: null, // websocket实例
    uuid: "", // 长连接唯一id
    heartbeatTimer: null, // 心跳计时器
+    orderList: [],
  }),
  actions: {
    // 创建uuid
@@ -92,7 +93,14 @@ export const useSocket = defineStore({
          // 接收订单消息，打印小票
          // printBill(data)
          // 打印标签小票
-          printStore.labelPrint(data);
+          if (!this.orderList.some((el) => el == data.orderInfo.orderNo)) {
+            console.log("打印", data);
+            printStore.labelPrint(data);
+            this.orderList.push(data.orderInfo.orderNo);
+            if (this.orderList.length > 30) {
+              this.orderList.splice(0, 1);
+            }
+          }
        } else if (data.type == "heartbeat") {
          console.log("接收心跳");
        }
--- a/src/views/device/add.vue
+++ b/src/views/device/add.vue
@@ -143,6 +143,9 @@ import { ElMessage } 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";
+import { usePrint } from "@/store/print.js";
+
+const printStore = usePrint();
 const store = useUser();

 const router = useRouter();
@@ -236,6 +239,9 @@ async function submitHandle() {
    await tbPrintMachinePost(form.value, form.value.id ? "put" : "post");
    Loading.value = false;
    ElMessage.success(form.value.id ? "编辑成功" : "添加成功");
+
+    printStore.init();
+
    router.back();
  } catch (error) {
    console.log(error);
--- a/src/views/device/add_label.vue
+++ b/src/views/device/add_label.vue
@@ -121,6 +121,9 @@ import { useUser } from "@/store/user.js";
 import { Loading } from "element-plus/es/components/loading/src/service";
 import classify from "@/components/classify/index.vue";
 import QRCode from 'qrcode'
+import { usePrint } from "@/store/print.js";
+
+const printStore = usePrint();

 const store = useUser();

@@ -193,6 +196,7 @@ async function submitHandle() {
    await tbPrintMachinePost(form.value, form.value.id ? "put" : "post");
    Loading.value = false;
    ElMessage.success(form.value.id ? "编辑成功" : "添加成功");
+    printStore.init();
    router.back();
  } catch (error) {
    console.log(error);
--- a/src/views/device/index.vue
+++ b/src/views/device/index.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>设备管理</el-text>
@@ -16,10 +13,7 @@
          <div class="item" v-for="item in list" :key="item.id">
            <div class="left">
              <div class="icon">
-                <el-image
-                  :src="icons[item.subType]"
-                  style="width: 40px; height: 40px"
-                ></el-image>
+                <el-image :src="icons[item.subType]" style="width: 40px; height: 40px"></el-image>
              </div>
              <div class="info">
                <div class="name">{{ item.name }}</div>
@@ -28,27 +22,16 @@
            </div>
            <div class="right">
              <div class="switch">
-                <el-switch
-                  v-model="item.status"
-                  inline-prompt
-                  active-text="开"
-                  inactive-text="关"
-                  :active-value="1"
-                  :inactive-value="0"
-                  width="90"
-                  @change="statusChange($event, item)"
-                />
+                <el-switch v-model="item.status" inline-prompt active-text="开" inactive-text="关" :active-value="1"
+                  :inactive-value="0" width="90" @change="statusChange($event, item)" />
              </div>
              <div class="editor">
-                <el-text
-                  type="primary"
-                  @click="
-                    router.push({
-                      name: deviceRoute[item.subType],
-                      query: { id: item.id },
-                    })
-                  "
-                >
+                <el-text type="primary" @click="
+                  router.push({
+                    name: deviceRoute[item.subType],
+                    query: { id: item.id },
+                  })
+                  ">
                  编辑
                </el-text>
                <el-text type="primary" @click="showDelete(item)">删除</el-text>
@@ -89,10 +72,7 @@
      <div class="menu_wrap">
        <div class="row" @click="router.push({ name: 'add_device' })">
          <div class="icon" style="background-color: var(--primary-color)">
-            <el-image
-              :src="icons.cash"
-              style="width: 36px; height: 36px"
-            ></el-image>
+            <el-image :src="icons.cash" style="width: 36px; height: 36px"></el-image>
          </div>
          <div class="info">
            <div class="name">添加小票打印机</div>
@@ -101,10 +81,7 @@
        </div>
        <div class="row" @click="router.push({ name: 'add_label' })">
          <div class="icon" style="background-color: #79c3d5">
-            <el-image
-              :src="icons.label"
-              style="width: 38px; height: 38px"
-            ></el-image>
+            <el-image :src="icons.label" style="width: 38px; height: 38px"></el-image>
          </div>
          <div class="info">
            <div class="name">添加标签打印机</div>
@@ -113,10 +90,7 @@
        </div>
        <div class="row">
          <div class="icon" style="background-color: #8fc783">
-            <el-image
-              :src="icons.kitchen"
-              style="width: 44px; height: 44px"
-            ></el-image>
+            <el-image :src="icons.kitchen" style="width: 44px; height: 44px"></el-image>
          </div>
          <div class="info">
            <div class="name">添加出品打印机</div>
@@ -131,11 +105,7 @@
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          :loading="delLoading"
-          @click="tbPrintMachineDeleteAjax"
-        >
+        <el-button type="primary" :loading="delLoading" @click="tbPrintMachineDeleteAjax">
          确定
        </el-button>
      </div>
@@ -154,6 +124,9 @@ import { useRouter } from "vue-router";
 import { useUser } from "@/store/user.js";
 import { ElMessage } from "element-plus";
 import icons from "./icons";
+import { usePrint } from "@/store/print.js";
+
+const printStore = usePrint();
 const store = useUser();

 const router = useRouter();
@@ -192,6 +165,7 @@ async function tbPrintMachineDeleteAjax() {
    dialogVisible.value = false;
    ElMessage.success("删除成功");
    tbPrintMachineGetAjax();
+    printStore.init();
  } catch (error) {
    console.log(error);
  }
@@ -220,9 +194,11 @@ onMounted(() => {
 .dialog_content {
  font-size: var(--el-font-size-base);
 }
+
 .dialog-footer {
  padding: 0 var(--el-font-size-base) var(--el-font-size-base);
 }
+
 .device_container {
  width: 100vw;
  height: 100vh;
--- a/src/views/order/components/add.vue
+++ b/src/views/order/components/add.vue
@@ -6,8 +6,8 @@

            <div class="demo_tabs_boxitem_one">
                <div class=""
-                    style="width: 100px; height: 70px;border-radius: 10px; background:rgb(186 200 239); display: flex; justify-content: center; align-items: center;">
-                    <div>{{ item.zdNo || "pos" }}</div>
+                    style="width: 100px; height: 70px;border-radius: 4px; background:rgb(186 200 239); display: flex; justify-content: center; align-items: center;">
+                    <div>{{ item.tableName || "pos" }}</div>
                </div>
                <!-- <el-image style="width: 100px; height: 70px;border-radius: 10px;" :src="item.imgUrl" fit="scale-down" /> -->
                <div class="demo_tabs_boxitem_oneone">
@@ -64,17 +64,15 @@ const clickitemboxshow = (e) => {
 <style scoped lang="scss">
 .demo_tabs_box {
    width: 100%;
-    padding: 10px 20px;
    height: 82%;
    overflow: auto;

    .demo_tabs_boxitem {
        width: 100%;
-        padding: 6px 16px;
-        border-radius: 6px;
+        padding: 10px 0;
        display: flex;
        justify-content: space-between;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid #ececec;
        position: relative;

        .demo_tabs_boxitem_oneyt {
--- a/src/views/order/components/dateRange.vue
+++ b/src/views/order/components/dateRange.vue
@@ -0,0 +1,78 @@
+<template>
+    <el-date-picker v-model="dateVlaue" type="daterange" :editable="false" :shortcuts="shortcuts" range-separator="至"
+        start-placeholder="开始时间" end-placeholder="结束时间" :clearable="false" @change="dateConfirm" />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { dayjs } from 'element-plus'
+
+const emits = defineEmits(['success'])
+
+const shortcuts = [
+    {
+        text: '今天',
+        value: () => {
+            return [
+                dayjs()
+                    .startOf("day"),
+                dayjs()
+                    .endOf("day")
+            ]
+        },
+    },
+    {
+        text: '本月',
+        value: () => {
+            return [
+                dayjs()
+                    .startOf("month"),
+                dayjs()
+                    .endOf("month")
+            ]
+        },
+    },
+    {
+        text: '最近三个月',
+        value: () => {
+            return [
+                dayjs()
+                    .add(-3, "M"),
+                dayjs()
+                    .endOf("month")
+            ]
+        },
+    },
+    {
+        text: '本年',
+        value: () => {
+            return [
+                dayjs()
+                    .startOf("year"),
+                dayjs()
+                    .endOf("year")
+            ]
+        },
+    },
+]
+
+const dateVlaue = ref([dayjs(), dayjs()])
+const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+
+// 确认选择时间
+function dateConfirm(value) {
+    // console.log(value);
+    emits('success', [
+        dayjs(value[0]).format(format[0]),
+        dayjs(value[1]).format(format[1]),
+    ])
+}
+
+onMounted(() => {
+    // 创建组件后执行一次时间传递
+    emits('success', [
+        dayjs(dateVlaue[0]).format(format[0]),
+        dayjs(dateVlaue[1]).format(format[1]),
+    ])
+})
+</script>
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -5,8 +5,9 @@
        <el-tab-pane label="全部" name="">
          <div class="demo_tabs_div">
            <el-input v-model="ordereData.orderNo" placeholder="请输入订单号查询" @input="inputChange" clearable
-              @focus="global.updateData(false)" @blur="global.updateData(true)" />
+              @focus="global.updateData(false)" @blur="global.updateData(true)" style="width: 50%;" />
            <!-- <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button> -->
+            <dateRange @success="dateConfirm" />
          </div>
          <add :loading="loadingboxshow" :ordereData="ordereData" @emititemboxshow="emititemboxshow"
            v-if="ordereData.list.length">
@@ -279,6 +280,7 @@ import add from "@/views/order/components/add.vue";
 import cashTable from "@/views/order/components/cashTable.vue";
 import { clearNoNum } from "@/utils";
 import md5 from "js-md5";
+import dateRange from './components/dateRange.vue'

 import { useGlobal } from "@/store/global.js";

@@ -313,6 +315,13 @@ const handlerecharge = () => {

 const buttonloading = ref(); //loading

+// 确认选择时间
+function dateConfirm(time) {
+  ordereData.startTime = time[0]
+  ordereData.endTime = time[1]
+  asyncorderfindOrder();
+}
+
 // 获取支付密码
 async function passwordSuccess(pwd) {
  try {
@@ -533,6 +542,8 @@ const ordereData = reactive({
  status: "",
  total: "",
  orderNo: "",
+  startTime: '',
+  endTime: ''
 });
 const asyncorderfindOrder = async () => {
  //获取流水
@@ -543,6 +554,8 @@ const asyncorderfindOrder = async () => {
      size: ordereData.size,
      page: ordereData.page,
      orderNo: ordereData.orderNo,
+      startTime: ordereData.startTime,
+      endTime: ordereData.endTime
    });
    ordereData.total = res.total;
    ordereData.list = res.list;
@@ -582,7 +595,6 @@ const callNumberHandle = async () => {

 onMounted(() => {
  // resetMembrform.value = { ...membrform.value }
-  asyncorderfindOrder();
 });
 </script>

@@ -643,6 +655,7 @@ onMounted(() => {
      .demo_tabs_div {
        padding: 0 20px;
        display: flex;
+        gap: 10px;
      }

      .demo_tabs_box {