修复清空历史订单时消失又出现问题

package.json

@@ -115,6 +115,7 @@
     "vite-plugin-mock-dev-server": "^1.8.3",
     "vite-plugin-strip-code": "^1.1.0",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-devtools": "^8.1.0",
     "vue-eslint-parser": "^9.4.3",
     "vue-tsc": "^2.2.0"
   },

src/store/modules/carts.ts

@@ -850,6 +850,11 @@ export const useCartsStore = defineStore("carts", () => {
 
   let $initParams = {} as ApifoxModel;
 
+
+  // 标志位，表示是否正在清空历史订单
+  const isClearingOldOrder = ref(false);
+
+
   async function init(initParams: ApifoxModel | undefined, $oldOrder: any | undefined) {
     console.log('cart.init.initParams', initParams);
     console.log('cart.init.$oldOrder', $oldOrder);
@@ -990,8 +995,15 @@ export const useCartsStore = defineStore("carts", () => {
         concocatSocket({ ...$initParams, table_code: table_code.value });
       }
 
+      // WebSocket 监听 product_update 消息
       if (msg.operate_type === "product_update") {
-        init($initParams, oldOrder.value,);
+        if (isClearingOldOrder.value) {
+          console.log("忽略 product_update 消息，因为正在清空历史订单");
+          isClearingOldOrder.value = false; // 重置标志位
+          return;
+        }
+        console.log("处理 product_update 消息");
+        init($initParams, oldOrder.value); // 重新初始化
       }
 
       if (msg.type === "bc") {
@@ -1036,6 +1048,8 @@ export const useCartsStore = defineStore("carts", () => {
     newUserDiscount.value = {}
   }
 
+
+
   return {
     disconnect,
     dinnerType,
@@ -1097,7 +1111,7 @@ export const useCartsStore = defineStore("carts", () => {
     getAllGoodsList,
     vipUser,
     changeTableInfo,
-    tableInfo,
+    tableInfo, isClearingOldOrder,
     clearHistory
   };
 });

src/views/tool/Instead/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="box" v-loading="!carts.isLinkFinshed" element-loading-text="购物车连接初始化中，请稍等……">
+  <div
+    class="box"
+    v-loading="!carts.isLinkFinshed"
+    element-loading-text="购物车连接初始化中，请稍等……"
+  >
     <div class="content">
       <div class="top">
         <div class="left u-flex u-col-center">
@@ -9,15 +13,21 @@
               <el-button type="primary" v-if="!carts.vipUser.id">选择用户</el-button>
 
               <div v-else class="flex cur-pointer">
-                <img v-if="carts.vipUser.headImg && carts.vipUser.headImg != 'null'" class="headimg"
+                <img
-                  :src="carts.vipUser.headImg" alt="" />
+                  v-if="carts.vipUser.headImg && carts.vipUser.headImg != 'null'"
+                  class="headimg"
+                  :src="carts.vipUser.headImg"
+                  alt=""
+                />
                 <div v-else class="headimg flex flex-x-y-center">
                   <i class="el-icon-user"></i>
                 </div>
                 <div>
                   <div class="u-flex">
                     <div class="ft-13 color-000 no-wrap">{{ carts.vipUser.nickName }}</div>
-                    <div class="vip" v-if="carts.vipUser.isVip">{{ carts.vipUser.memberLevelName }}</div>
+                    <div class="vip" v-if="carts.vipUser.isVip">
+                      {{ carts.vipUser.memberLevelName }}
+                    </div>
                   </div>
                   <div style="margin-top: 2px" class="no-wrap color-666 ft-12">
                     余额：{{ carts.vipUser.amount }}
@@ -26,11 +36,19 @@
               </div>
             </div>
             <el-popover placement="right" width="333" trigger="click" ref="refTable">
-              <el-input placeholder="请输入内容" prefix-icon="search" v-model="tableSearchText"
+              <el-input
-                @input="tablesearchInput"></el-input>
+                placeholder="请输入内容"
+                prefix-icon="search"
+                v-model="tableSearchText"
+                @input="tablesearchInput"
+              ></el-input>
               <div style="max-height: 398px; overflow-y: scroll" class="u-m-t-12">
-                <div class="u-flex u-row-between u-p-t-8 table-item u-p-b-8 u-p-r-30" v-for="(item, index) in tableList"
+                <div
-                  :key="index" @click="tableClick(item, index)">
+                  class="u-flex u-row-between u-p-t-8 table-item u-p-b-8 u-p-r-30"
+                  v-for="(item, index) in tableList"
+                  :key="index"
+                  @click="tableClick(item, index)"
+                >
                   <span>{{ item.name }}</span>
                   <span :style="{ color: returnTableColor(item.status) }">
                     {{ returnTableLabel(item.status) }}
@@ -41,14 +59,21 @@
                 </div>
               </div>
               <template #reference>
-                <el-button>{{ carts.tableInfo.name ? "桌台号：" + carts.tableInfo.name : "选择桌号" }}</el-button>
+                <el-button>
+                  {{ carts.tableInfo.name ? "桌台号：" + carts.tableInfo.name : "选择桌号" }}
+                </el-button>
               </template>
             </el-popover>
             <el-button type="warning" @click="refQuanHexiaoOpen">扫码验券</el-button>
           </div>
         </div>
         <div class="right">
-          <el-input placeholder="请输入商品名称" v-model="goods.query.name" clearable @change="getGoods">
+          <el-input
+            placeholder="请输入商品名称"
+            v-model="goods.query.name"
+            clearable
+            @change="getGoods"
+          >
             <template #suffix>
               <el-icon class="el-input__icon">
                 <search />
@@ -62,16 +87,24 @@
           <div class="diners">
             <!-- 就餐类型 -->
             <el-button-group v-model="diners.sel" style="width: 100%; display: flex">
-              <el-button :class="{ active: index == diners.sel }" v-for="(item, index) in diners.list"
+              <el-button
-                :disabled="dinerDisabled(item, index)" @click="changeDinersSel(index)" :key="index">
+                :class="{ active: index == diners.sel }"
+                v-for="(item, index) in diners.list"
+                :disabled="dinerDisabled(item, index)"
+                @click="changeDinersSel(index)"
+                :key="index"
+              >
                 {{ item.label }}
               </el-button>
             </el-button-group>
           </div>
 
           <div class="u-flex u-font-14 clear u-m-t-10 perpoles">
-            <div @click="showDinerNumber" class="u-flex u-p-r-14 u-m-r-14"
+            <div
-              style="border-right: 1px solid #ebebeb; line-height: 1">
+              @click="showDinerNumber"
+              class="u-flex u-p-r-14 u-m-r-14"
+              style="border-right: 1px solid #ebebeb; line-height: 1"
+            >
               <span>就餐人数：{{ perpole || "-" }} 位</span>
               <el-icon>
                 <ArrowRight />
@@ -82,19 +115,39 @@
             </el-button>
           </div>
           <!-- 购物车 -->
-          <cartsList @editNote="showNote(true)" @createOrder="createOrder" @hideOrder="hideOrder"
+          <cartsList
-            @clearOldOrder="clearOldOrder" :showOrder="showOrder" :goodsList="carts.goods" :dinerType="diners.sel"
+            @editNote="showNote(true)"
-            :perpole="perpole" :remark="remark" :table="carts.tableInfo" ref="refCart"></cartsList>
+            @createOrder="createOrder"
+            @hideOrder="hideOrder"
+            @clearOldOrder="clearOldOrder"
+            :showOrder="showOrder"
+            :goodsList="carts.goods"
+            :dinerType="diners.sel"
+            :perpole="perpole"
+            :remark="remark"
+            :table="carts.tableInfo"
+            ref="refCart"
+          ></cartsList>
         </div>
         <div class="center">
           <!-- 购物车控制操作按钮 -->
-          <Controls @noteClick="showNote" @packClick="showPack" @changePriceClick="showChangePrice"
+          <Controls
-            @return="refReturnCartShow" @rottable="rottableShow" @changeCartNumberShow="refChangeNumberShow" />
+            @noteClick="showNote"
+            @packClick="showPack"
+            @changePriceClick="showChangePrice"
+            @return="refReturnCartShow"
+            @rottable="rottableShow"
+            @changeCartNumberShow="refChangeNumberShow"
+          />
         </div>
         <div class="right">
           <template v-if="!showOrder">
             <div class="flex categoty u-col-center">
-              <div class="show_more_btn" :class="{ showAll: category.showAll }" @click="toggleShowAll">
+              <div
+                class="show_more_btn"
+                :class="{ showAll: category.showAll }"
+                @click="toggleShowAll"
+              >
                 <div class="flex">
                   <div class="flex showmore">
                     <el-icon color="#fff">
@@ -105,8 +158,16 @@
                 </div>
               </div>
               <div class="flex categorys" :class="{ 'flex-wrap': category.showAll }">
-                <div v-for="(item, index) in category.list" :key="index" @click="changeCategoryId(item)">
+                <div
-                  <el-tag size="large" :type="goods.query.categoryId === item.id ? 'primary' : 'info'" effect="dark">
+                  v-for="(item, index) in category.list"
+                  :key="index"
+                  @click="changeCategoryId(item)"
+                >
+                  <el-tag
+                    size="large"
+                    :type="goods.query.categoryId === item.id ? 'primary' : 'info'"
+                    effect="dark"
+                  >
                     {{ item.name }}
                   </el-tag>
                 </div>
@@ -120,13 +181,25 @@
                 </el-icon>
                 <div class="u-m-t-10">临时菜</div>
               </div>
-              <GoodsItem :item="item" @itemClick="goodsClick(item)" v-for="item in carts.goods" :key="item.id">
+              <GoodsItem
-              </GoodsItem>
+                :item="item"
+                @itemClick="goodsClick(item)"
+                v-for="item in carts.goods"
+                :key="item.id"
+              ></GoodsItem>
             </div>
           </template>
           <!-- 订单信息展示 -->
-          <Order ref="refOrder" :orderInfo="carts.oldOrder" @chooseUser="showChooseUser" @paysuccess="refresh"
+          <Order
-            :table="carts.tableInfo" :perpole="perpole" v-else :user="user"></Order>
+            ref="refOrder"
+            :orderInfo="carts.oldOrder"
+            @chooseUser="showChooseUser"
+            @paysuccess="refresh"
+            :table="carts.tableInfo"
+            :perpole="perpole"
+            v-else
+            :user="user"
+          ></Order>
         </div>
       </div>
     </div>
@@ -141,7 +214,11 @@
     <!-- 临时菜 -->
     <addLingShiCai ref="refAddLingShiCai" @confirm="addLingShiCaiConfirm"></addLingShiCai>
     <!-- 改价 -->
-    <changePrice ref="refChangePrice" :useVipPrice="carts.useVipPrice" @confirm="changePriceConfirm"></changePrice>
+    <changePrice
+      ref="refChangePrice"
+      :useVipPrice="carts.useVipPrice"
+      @confirm="changePriceConfirm"
+    ></changePrice>
     <!-- 称重商品 -->
     <change-weight ref="refChangeWeight" @confirm="changeWeightConfirm"></change-weight>
     <!-- 可选套餐 -->
@@ -355,7 +432,7 @@ async function createOrder(key) {
       placeNum: carts.oldOrder.placeNum * 1 + 1,
       waitCall: false,
       vipPrice: user.value.id && user.value.isVip,
-      limitRate: carts.limitDiscountRes
+      limitRate: carts.limitDiscountRes,
     });
     clearTimeout(loadingTimer);
     loading.close();
@@ -418,13 +495,13 @@ async function clearOldOrderCallback() {
       showOrder.value = false;
       return;
     }
-    console.log('清空历史订单回调', res);
+    console.log("清空历史订单回调", res);
 
     if (res.data !== null) {
-      console.log('还有历史订单数据');
+      console.log("还有历史订单数据");
       carts.setOldOrder(res);
     } else {
-      console.log('历史订单没数据了');
+      console.log("历史订单没数据了");
       carts.oldOrder = {
         detailMap: [],
         originAmount: 0,
@@ -432,17 +509,20 @@ async function clearOldOrderCallback() {
       carts.setOldOrder({
         detailMap: [],
         originAmount: 0,
-      }, 9);
+      });
       // carts.clearHistory();
       // resetOldOrder();
     }
+    carts.clearOldOrderCallback = false;
   } catch (error) {
     console.log(error);
+    carts.clearOldOrderCallback = false;
   }
 }
 // 取消历史订单
 async function clearOldOrder(params) {
   try {
+    carts.isClearingOldOrder = true;
     const res1 = params.placeNum
       ? await orderApi.rmPlaceOrder(params)
       : await orderApi.cancelOrder(params);
@@ -509,7 +589,7 @@ async function getTableDetail(params) {
   const res = await tableApi.get(params);
   return res;
 }
-function tablesearchInput() { }
+function tablesearchInput() {}
 //返回桌台状态颜色
 function returnTableColor(key) {
   const item = $status[key];
@@ -528,7 +608,7 @@ async function tableClick(item) {
     carts.setOldOrder(res);
   }
   table.value = item;
-  carts.changeTableInfo(item)
+  carts.changeTableInfo(item);
   carts.changeTable(item.tableCode);
   refTable.value.hide();
 }
@@ -748,12 +828,20 @@ function clearCarts() {
   });
 }
 function addCarts(item, isWeight = false) {
-  console.log('index.addCarts===', item);
+  console.log("index.addCarts===", item);
   if (isWeight) {
-    carts.add({ pack_number: diners.sel ? 1 : 0, ...item, is_time_discount: item.isLimitDiscount ? 1 : 0 });
+    carts.add({
+      pack_number: diners.sel ? 1 : 0,
+      ...item,
+      is_time_discount: item.isLimitDiscount ? 1 : 0,
+    });
     return;
   }
-  carts.add({ pack_number: diners.sel ? item.number : 0, ...item, is_time_discount: item.isLimitDiscount ? 1 : 0 });
+  carts.add({
+    pack_number: diners.sel ? item.number : 0,
+    ...item,
+    is_time_discount: item.isLimitDiscount ? 1 : 0,
+  });
 }
 
 watch(
@@ -806,7 +894,7 @@ onMounted(async () => {
     }
     if (res.tableCode) {
       table.value = { tableCode: res.tableCode };
-      carts.changeTableInfo(res)
+      carts.changeTableInfo(res);
     }
     if (res.userId) {
       const userRes = await shopUserApi.get({ userId: res.userId });
@@ -818,11 +906,11 @@ onMounted(async () => {
       const tableRes = await tableApi.get({ tableCode: res.tableCode });
       if (tableRes.tableCode) {
         table.value = tableRes || {};
-        carts.changeTableInfo(tableRes)
+        carts.changeTableInfo(tableRes);
       }
     }
     if (res) {
-      console.log('res31231231331-=====--', res);
+      console.log("res31231231331-=====--", res);
 
       carts.setOldOrder(res);
       showOrder.value = key == "isPayOrder" ? true : false;
@@ -833,7 +921,7 @@ onMounted(async () => {
     const tableRes = await tableApi.get({ tableCode: tableCode });
     if (tableRes.tableCode) {
       table.value = tableRes || {};
-      carts.changeTableInfo(tableRes)
+      carts.changeTableInfo(tableRes);
     }
   }
   console.log(table.value);
@@ -882,7 +970,7 @@ function refresh() {
   showOrder.value = false;
   user.value = {};
   table.value = {};
-  carts.changeTableInfo({})
+  carts.changeTableInfo({});
   router.replace(route.path);
   carts.dataReset();
   carts.init();
@@ -1141,4 +1229,4 @@ $pl: 30px;
   margin-left: 10px;
   font-size: 10px;
 }
-</style>
+</style>

vite.config.ts

@@ -15,6 +15,9 @@ import { name, version, engines, dependencies, devDependencies } from "./package
 
 import stripCode from 'vite-plugin-strip-code'; // 导入插件
 
+
+import vueDevTools from 'vite-plugin-vue-devtools'
+
 // 平台的名称、版本、运行所需的 node 版本、依赖、构建时间的类型提示
 const __APP_INFO__ = {
   pkg: { name, version, engines, dependencies, devDependencies },
@@ -114,7 +117,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         // 注意：标记可以自定义，只要前后一致即可
         start_comment: 'DEV-START', // 开始标记（自定义）
         end_comment: 'DEV-END'     // 结束标记（自定义）
-      })
+      }),
+      // vueDevTools()
     ],
     // 预加载项目必需的组件
     optimizeDeps: {