代客下单增加台桌切换

当台桌切换时重新获取取餐码，购物车数据，订单数据，就餐人数

src/api/table.js

@@ -9,7 +9,10 @@ export function tbShopTableGet(params) {
   return request({
     url: `/api/tbShopTable`,
     method: "get",
-    params
+    params:{
+      shopId: localStorage.getItem("shopId"),
+      ...params
+    }
   });
 }
 

src/views/table/components/keyboard.vue

@@ -119,7 +119,7 @@ export default {
       if (this.number.length <= 1) {
         return (this.number = this.isCanEmpty ? "" : "0");
       }
-      this.number = this.number.substring(0, this.number.length - 1);
+      this.number = `${this.number}`.substring(0, this.number.length - 1);
     },
     keyboradConfirm() {
       this.$emit("confirm", this.number);

src/views/table/components/table-diancan-components/choose-diners-number.vue

@@ -6,8 +6,8 @@
           isCanEmpty
           v-model="number"
           @clear="clear"
-          :max="99"
-          maxTips="最多99位"
+          :max="max"
+          :maxTips=" '最多'+max+'位'"
         >
           <div slot="clear">清空</div>
           <div slot="input" class="u-p-l-20 u-p-r-20 u-flex w-full">
@@ -37,6 +37,12 @@
 import keyBoard from "../keyboard.vue";
 export default {
   components: { keyBoard },
+  props:{
+    max:{
+      type:Number,
+      default:99
+    }
+  },
   data() {
     return {
       number: "",
@@ -47,9 +53,11 @@ export default {
   },
   watch: {
     number(newval) {
-      if (newval >= 99) {
-        this.number = 99;
-        this.$message("最多只能选择99位就餐人数");
+      console.log(newval)
+      console.log(this.max)
+      if (newval >this.max) {
+        this.number = this.max;
+        this.$message("最多只能选择"+this.max+"位就餐人数");
       }
       console.log(newval);
       // 使用正则表达式匹配正整数
@@ -68,6 +76,11 @@ export default {
       this.number = "";
     },
     confirm() {
+      console.log(this.number)
+      console.log(this.max)
+      if (this.number >this.max) {
+        return this.$message("最多只能选择"+this.max+"位就餐人数");
+      }
       if (!this.number) {
         return this.$message("请选择就餐人数");
       }

src/views/table/components/table-diancan.vue

@@ -281,21 +281,19 @@
                 </div>
               </template>
               <!-- 餐位费 -->
-              <template v-if="order.seatFee&&order.seatFee.totalAmount>0">
-                  <div class="carts_list_title">
-                    餐位费
-                  </div>
-                  <cart-item
-                    @itemClick="changeOrderOldSel"
-                    :canChangeNumber="false"
-                    key="seatFee"
-                    :index="0"
-                    :item="order.seatFee"
-                    isSeatFee
-                    :selIndex="order.old.selIndex"
-                    :placeNum="-1"
-                    :selPlaceNum="order.selPlaceNum"
-                  ></cart-item>
+              <template v-if="order.seatFee && order.seatFee.totalAmount > 0">
+                <div class="carts_list_title">餐位费</div>
+                <cart-item
+                  @itemClick="changeOrderOldSel"
+                  :canChangeNumber="false"
+                  key="seatFee"
+                  :index="0"
+                  :item="order.seatFee"
+                  isSeatFee
+                  :selIndex="order.old.selIndex"
+                  :placeNum="-1"
+                  :selPlaceNum="order.selPlaceNum"
+                ></cart-item>
               </template>
               <div class="order_remark" v-if="note.content">
                 订单备注： {{ note.content }}
@@ -759,7 +757,9 @@
                   </div>
                   <div class="detail_form_item">
                     <div class="left">餐位费/附加费</div>
-                    <div class="right">￥{{order.seatFee.totalAmount|to2}}</div>
+                    <div class="right">
+                      ￥{{ order.seatFee.totalAmount | to2 }}
+                    </div>
                   </div>
                   <div class="detail_form_item">
                     <div class="left">总价</div>
@@ -1048,6 +1048,7 @@
     <choose-diners-number
       ref="refChooseDinersNumber"
       @confirm="chooseDinersNumberConfirm"
+      :max="table.maxCapacity || 99"
     ></choose-diners-number>
 
     <return-cart
@@ -1089,6 +1090,7 @@ import {
   $choseCount,
   $returnCart,
   $printOrder,
+  tbShopTableGet
 } from "@/api/table";
 import { tbShopCategoryGet } from "@/api/shop";
 import {
@@ -1098,7 +1100,6 @@ import {
   returnReverseVal,
 } from "./util.js";
 import $status from "../status.js";
-import { tbShopTableGet } from "@/api/table";
 export default {
   components: {
     returnCart,
@@ -1340,9 +1341,6 @@ export default {
       const cartNumber = this.order.list.reduce((a, b) => {
         return a + b.number * 1;
       }, 0);
-      console.log(oldNumber);
-      console.log(cartNumber);
-
       return oldNumber + cartNumber;
     },
     selGoodsHide() {
@@ -1377,7 +1375,7 @@ export default {
   },
   watch: {
     perpole(newval) {
-      if (newval) {
+      if (newval&&this.table.tableId) {
         $choseCount({
           masterId: this.masterId,
           tableId: this.table.tableId,
@@ -1388,14 +1386,17 @@ export default {
       }
     },
     table(oldval, newval) {
-      if (oldval && newval) {
-        console.log(oldval, newval);
-        $choseTable({
-          orderId: 4462,
-          oldTableId: oldval.tableId,
-          newTableId: newval.tableId,
-        });
-      }
+      if(oldval&&newval) {
+        this.onTableChange()
+      } 
+      // if (oldval && newval) {
+      //   console.log(oldval, newval);
+      //   $choseTable({
+      //     orderId: 4462,
+      //     oldTableId: oldval.tableId,
+      //     newTableId: newval.tableId,
+      //   });
+      // }
     },
     masterId: function (val) {
       console.log(val);
@@ -1531,6 +1532,22 @@ export default {
     // this.refToggle("refDiscount", true);
   },
   methods: {
+    //台桌变化时重新获取取餐号、购物车数据，如果是正在结账状态，创建订单到待支付页面
+    async onTableChange() {
+      const res = await this.getMasterId();
+      this.masterId = res.masterId;
+      this.getCart();
+      if (this.isCreateOrder) {
+        this.toCreateOrder(true);
+      }
+    },
+    // 获取台桌详情
+    async getTableDetail(){
+      const res=await tbShopTableGet({
+        qrcode:this.table.tableId
+      })
+      console.log(res)
+    },
     //打印制作单
     printOrder() {
       this.$confirm("是否打印当前台桌菜品", "提示", {
@@ -1566,7 +1583,7 @@ export default {
         const { content, total } = await tbShopTableGet({
           shopId: localStorage.getItem("shopId"),
         });
-        this.tableList = content;
+        this.tableList = content.filter(v=>v.status!='closed');
       } catch (error) {
         console.log(error);
       }
@@ -2429,21 +2446,18 @@ export default {
     },
     //获取购物车数据
     async getCart() {
-      this.order.list = [];
-      this.order.old.list = [];
+      console.log(this.table)
       const res = await getCart({
         ...this.order.query,
         masterId: this.masterId,
         tableId: this.table.tableId,
       });
-      this.order.seatFee=res.seatFee;
-      for (let i in res.records) {
-        if (res.records[i].placeNum == 0) {
-          this.order.list = res.records[i].info;
-        } else {
-          this.order.old.list.push(res.records[i]);
-        }
-      }
+      this.order.seatFee=res.seatFee?res.seatFee:this.order.seatFee;
+      this.perpole=res.seatFee?res.seatFee.totalNumber:1;
+      const nowCart=res.records.find((v) => v.placeNum == 0);
+      this.order.list=nowCart?nowCart.info:[];
+      const oldCart=res.records.filter((v) => v.placeNum != 0);
+      this.order.old.list=oldCart?oldCart:[];
       // if (this.key|| res.records.length) {
       //   this.order.old.list = res.records;
       // } else {

src/views/table/components/table-edit.vue

@@ -17,6 +17,12 @@
           <el-form-item label="客座数">
               <el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
           </el-form-item>
+          <el-form-item label="清台管理">
+        <el-radio-group v-model="form.autoClear">
+          <el-radio-button :label="0">手动清台</el-radio-button>
+          <el-radio-button :label="1">自动清台</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
           <el-form-item label="网络预定开关">
               <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
           </el-form-item>
@@ -66,7 +72,9 @@ export default {
               isPredate: 1,
               type: 2,
               perhour: 0,
-              amount: 0
+              amount: 0,
+        autoClear: 1,
+
           },
           rules: {
               areaId: [

src/views/table/status.js

@@ -27,12 +27,8 @@ export default {
     //   label: "开台中",
     //   type: "#67C23A",
     // },
-    wait:{
-        label: "待清台",
-        type: "rgb(250,202,14)",
-    },
     cleaning: {
-        label: "台桌清理中",
-        type: "#909399",
+        label: "待清台",
+        type: "#FAAD14",
     }
 }

src/views/table/table_list.vue

@@ -42,18 +42,15 @@
       </div>
     </div>
     <div class="u-flex u-p-b-15 u-font-14">
-         <div class="state u-m-r-24" v-for="(item,key) in status" :key="key">
-           <span
-             class="dot"
-             :style="{
-               backgroundColor: status[key]
-                 ? status[key].type
-                 : '',
-             }"
-           ></span>
-           {{ item.label }}
-       </div>
-
+      <div class="state u-m-r-24" v-for="(item, key) in status" :key="key">
+        <span
+          class="dot"
+          :style="{
+            backgroundColor: status[key] ? status[key].type : '',
+          }"
+        ></span>
+        {{ item.label }}
+      </div>
     </div>
     <div class="head-container">
       <div class="table_list" v-loading="loading">
@@ -61,12 +58,16 @@
           class="item"
           v-for="item in tableList"
           :key="item.id"
-          :class="[item.status]"
+          :style="{ 'background-color': status[item.status].type }"
         >
           <div class="new-top flex u-row-between">
             <div class="u-flex u-flex-1 u-p-r-10">
-              <span class="name u-line-1 " style="max-width: 50px;"> {{ item.name }}</span>
-              <span class="u-font-14 u-line-1">丨{{areaMap[item.areaId]||''}}</span>
+              <span class="name u-line-1" style="max-width: 50px">
+                {{ item.name }}</span
+              >
+              <span class="u-font-14 u-line-1"
+                >丨{{ areaMap[item.areaId] || "" }}</span
+              >
             </div>
             <el-dropdown trigger="click" @command="tableComman($event, item)">
               <i class="el-icon-more cur-pointer color-fff"></i>
@@ -83,8 +84,8 @@
             </el-dropdown>
           </div>
           <div class="box">
-          <div class="top">
-            <!-- <div class="row row1">
+            <div class="top">
+              <!-- <div class="row row1">
               <span>{{ item.name }}</span>
               <div class="state">
                 <span
@@ -99,7 +100,7 @@
               </div>
             </div> -->
 
-            <!-- <div class="row">
+              <!-- <div class="row">
               <el-tag type="warning" size="mini">{{
                 item.type == 0 ? "低消" : "计时"
               }}</el-tag>
@@ -108,58 +109,83 @@
               }}</el-tag>
             </div> -->
 
-            <!-- <div class="row">
+              <!-- <div class="row">
               <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
             </div> -->
-            <div class="u-font-18 font-600 total-price" >
-              <span class="color-fff" v-if="item.status != 'using'">|</span>
-              <span v-else>
-                ¥{{item.totalAmount||0}}「{{item.productNum}}件」
-              </span>
-            </div>
-            <div class="row btn-group">
-              <template v-if="item.status == 'idle'">
-                <el-button
-                  type="primary"
-                  :disabled="!item.tableId || item.status === 'closed'"
-                  @click="diancanShow(item)"
-                  >点餐</el-button
-                >
-              </template>
-              <template v-else>
-                <template v-if="item.status == 'using'">
+              <div class="u-font-18 font-600 total-price">
+                <span class="color-fff" v-if="item.status != 'using'">|</span>
+                <span v-else>
+                  ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
+                </span>
+              </div>
+              <div class="row btn-group">
+                <template v-if="item.status == 'idle'">
                   <el-button
+                    type="primary"
                     :disabled="!item.tableId || item.status === 'closed'"
-                    @click="diancanShow(item, 'isAddGoods')"
-                    >加菜</el-button
+                    @click="diancanShow(item)"
+                    >点餐</el-button
                   >
-                  <el-button
-                    type="danger"
-                    :disabled="!item.tableId || item.status === 'closed'"
-                    @click="diancanShow(item, 'isPayOrder')"
-                    >结账</el-button
-                  >
-                </template>
-                <template v-else-if="item.status == 'closed'">
-                  <el-button type="info" disabled>已关台</el-button>
                 </template>
                 <template v-else>
-                  <el-button type="info" disabled>点餐</el-button>
+                  <template v-if="item.status == 'using'">
+                    <el-button
+                      :disabled="!item.tableId || item.status === 'closed'"
+                      @click="diancanShow(item, 'isAddGoods')"
+                      >加菜</el-button
+                    >
+                    <el-button
+                      type="danger"
+                      :disabled="!item.tableId || item.status === 'closed'"
+                      @click="diancanShow(item, 'isPayOrder')"
+                      >结账</el-button
+                    >
+                  </template>
+                  <template v-else-if="item.status == 'closed'">
+                    <el-button type="info" disabled>已关台</el-button>
+                  </template>
+                  <template v-else-if="item.status == 'cleaning'">
+                    <el-button
+                      type="info"
+                      @click="cleanTableHandle(item)"
+                      :style="{
+                        backgroundColor: status[item.status].type,
+                        borderColor: status[item.status].type,
+                      }"
+                      >清台</el-button
+                    >
+                  </template>
+                  <template v-else>
+                    <el-button type="info" disabled>点餐</el-button>
+                  </template>
                 </template>
-              </template>
+              </div>
             </div>
-
-          </div>
-          <div class="u-flex u-col-bottom bottom  u-row-between color-666" :class="{'opacity-0':item.status == 'closed'}" >
-            <div class="u-flex u-col-center">
-              <img style="width: 16px;height: 16px;filter: contrast(0.5);" src="@/assets/images/perpole.png" alt="">
-            <span class="u-m-t-4 u-font-12 u-m-l-2">{{item.useNum||0}}/{{ item.maxCapacity }}</span>
+            <div
+              class="u-flex u-col-bottom bottom u-row-between color-666"
+              :class="{ 'opacity-0': item.status == 'closed' }"
+            >
+              <div class="u-flex u-col-center">
+                <img
+                  style="width: 16px; height: 16px; filter: contrast(0.5)"
+                  src="@/assets/images/perpole.png"
+                  alt=""
+                />
+                <span class="u-m-t-4 u-font-12 u-m-l-2"
+                  >{{ item.useNum || 0 }}/{{ item.maxCapacity }}</span
+                >
+              </div>
+              <div class="u-flex" v-if="item.status == 'using'">
+                <img
+                  style="width: 16px; height: 16px; filter: contrast(0.5)"
+                  src="@/assets/images/shalou.png"
+                  alt=""
+                />
+                <span class="u-m-t-4 u-font-12">{{
+                  item.durationTime | formatTime
+                }}</span>
+              </div>
             </div>
-            <div class="u-flex" v-if="item.status == 'using'">
-              <img style="width: 16px;height: 16px;filter: contrast(0.5);"  src="@/assets/images/shalou.png" alt="">
-            <span class="u-m-t-4 u-font-12 ">{{item.durationTime|formatTime}}</span>
-            </div>
-          </div>
           </div>
         </div>
         <div class="empty_wrap">
@@ -198,6 +224,7 @@ import {
   tbShopAreaGet,
   tbShopAreaDelete,
   tbShopTableDelete,
+  tbShopTable,
 } from "@/api/table";
 import dayjs from "dayjs";
 export default {
@@ -205,7 +232,9 @@ export default {
     addEara,
     addTable,
     downloadTableCode,
-    tableDiancan,chooseDinersNumber,tableEdit
+    tableDiancan,
+    chooseDinersNumber,
+    tableEdit,
   },
   data() {
     return {
@@ -215,19 +244,29 @@ export default {
       total: 0,
       tableList: [],
       status: $status,
-      selTable:'',//当前选中的桌台
-      areaMap:{}
+      selTable: "", //当前选中的桌台
+      areaMap: {},
     };
   },
   mounted() {
     this.tbShopAreaGet();
   },
-  filters:{
-    formatTime(time){
-      return dayjs(time).format('HH小时mm分');
-    }
+  filters: {
+    formatTime(time) {
+      return dayjs(time).format("HH小时mm分");
+    },
   },
   methods: {
+    // 清台
+    async cleanTableHandle(item) {
+      const res = await tbShopTable({
+        ...item,
+        status:'idle',
+        qrcode: item.tableId,
+        shopId: localStorage.getItem("shopId"),
+      },'put');
+      this.tbShopTableGet();
+    },
     tableComman(command, item) {
       if (command == "edit") {
         return this.$refs.editTable.show(item);
@@ -253,18 +292,17 @@ export default {
     diancanShow(item, key) {
       //key isAddGoods 加菜
       //key isPayOrder结账
-      console.log(item)
-      this.selTable=item
-      const num=item.useNum||0
-      if(item.useNum<=0){
-        return this.$refs.refChooseDinersNumber.open()
+      this.selTable = item;
+      const num = item.useNum || 0;
+      if (item.useNum <= 0) {
+        return this.$refs.refChooseDinersNumber.open();
       }
-      this.$refs.diancan.open(item, key,num);
+      this.$refs.diancan.open(item, key, num);
     },
-    chooseDinersNumberConfirm(num){
+    chooseDinersNumberConfirm(num) {
       //就餐人数
-      console.log(num)
-      this.$refs.diancan.open( this.selTable, undefined,num);
+      console.log(num);
+      this.$refs.diancan.open(this.selTable, undefined, num);
     },
     tabClick() {
       this.tbShopTableGet();
@@ -320,10 +358,10 @@ export default {
           shopId: localStorage.getItem("shopId"),
         });
         this.tabs = content;
-        this.areaMap=content.reduce((prve,cur)=>{
-          prve[cur.id]=cur.name
-          return prve
-        },{})
+        this.areaMap = content.reduce((prve, cur) => {
+          prve[cur.id] = cur.name;
+          return prve;
+        }, {});
         this.tbShopTableGet();
       } catch (error) {
         console.log(error);
@@ -339,9 +377,9 @@ export default {
 }
 </style>
 <style scoped lang="scss">
-  .opacity-0{
-    opacity: 0;
-  }
+.opacity-0 {
+  opacity: 0;
+}
 .icon {
   margin-left: 10px;
 }
@@ -354,18 +392,18 @@ export default {
   min-width: 60px;
   text-align: center;
 }
-   .state {
-     display: flex;
-     align-items: center;
+.state {
+  display: flex;
+  align-items: center;
 
-     .dot {
-       $size: 8px;
-       width: $size;
-       height: $size;
-       border-radius: 50%;
-       margin-right: $size;
-     }
-   }
+  .dot {
+    $size: 8px;
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    margin-right: $size;
+  }
+}
 .table_list {
   display: flex;
   flex-wrap: wrap;
@@ -383,7 +421,7 @@ export default {
   }
 
   .item {
-    padding: 1px ;
+    padding: 1px;
     overflow: hidden;
     border: 1px solid #ddd;
     display: flex;
@@ -392,7 +430,7 @@ export default {
     border-radius: 6px;
     background-color: #1890ff;
     max-width: 172px;
-        min-width: 160px;
+    min-width: 160px;
     &.using {
       background-color: rgb(250, 85, 85);
     }
@@ -400,7 +438,7 @@ export default {
       background-color: rgb(221, 221, 221);
       filter: grayscale(1);
     }
-    .total-price{
+    .total-price {
       line-height: 35px;
       height: 35px;
     }
@@ -416,12 +454,12 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .box{
+    .box {
       background-color: #fff;
-      border-radius:3px 3px 6px 6px;
+      border-radius: 3px 3px 6px 6px;
     }
-    .bottom{
-      border-top:  1px solid #F7F7FA;;
+    .bottom {
+      border-top: 1px solid #f7f7fa;
       padding: 6px 15px;
     }
     .top {
@@ -437,12 +475,9 @@ export default {
           font-size: 12px;
         }
 
-
         &.row1 {
           justify-content: space-between;
           font-size: 14px;
-
-
         }
       }
     }