代客下单增加退单,选择就餐人数，更改桌台， 修改样式

台桌列表增加改为批量增加

src/api/table.js

@@ -328,3 +328,50 @@ export function $payOrder(data) {
     }
   });
 }
+//退单
+
+export function $returnCart(data) {
+  return request({
+    url: '/api/place/returnCart',
+    method: "put",
+    data:{
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+// 选择台桌
+export function $choseTable(data) {
+  return request({
+    url: '/api/place/choseTable',
+    method: "put",
+    data:{
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+// 用餐人数
+
+export function $choseCount(data) {
+  return request({
+    url: '/api/place/choseCount',
+    method: "put",
+    data:{
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+
+// 批量生成台桌
+export function $fastCreateTable(data) {
+  return request({
+    url: '/api/tbShopTable/generate',
+    method: "post",
+    data:{
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}

src/views/table/components/addTable.vue

@@ -1,137 +1,221 @@
 <template>
-    <el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" :visible.sync="dialogVisible" @open="tbShopAreaGet" @close="reset">
+  <el-dialog
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+    :title="form.id ? '编辑台桌' : '添加台桌'"
-            <el-form-item label="选择区域" prop="areaId">
+    :visible.sync="dialogVisible"
-                <el-select v-model="form.areaId" placeholder="请选择区域">
+    @open="tbShopAreaGet"
-                    <el-option :label="item.name" :value="item.id" v-for="item in areaList" :key="item.id"></el-option>
+    @close="reset"
-                </el-select>
+  >
-            </el-form-item>
+    <el-form
-            <el-form-item label="台桌状态" prop="status" v-if="form.id">
+      ref="form"
-                <el-select v-model="form.status" placeholder="请选择台桌状态">
+      :model="form"
-                    <el-option :label="item.name" :value="item.value" v-for="item in status" :key="item.value"></el-option>
+      :rules="rules"
-                </el-select>
+      label-width="120px"
-            </el-form-item>
+      label-position="left"
-            <el-form-item label="台桌名称">
+    >
-                <el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
+      <el-form-item label="选择区域" prop="areaId">
-            </el-form-item>
+        <el-select v-model="form.areaId" placeholder="请选择区域">
-            <el-form-item label="客座数">
+          <el-option
-                <el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
+            :label="item.name"
-            </el-form-item>
+            :value="item.id"
-            <el-form-item label="网络预定开关">
+            v-for="item in areaList"
-                <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
+            :key="item.id"
-            </el-form-item>
+          ></el-option>
-            <el-form-item label="类型">
+        </el-select>
-                <el-radio-group v-model="form.type">
+      </el-form-item>
-                    <el-radio-button :label="0">低消</el-radio-button>
+      <el-form-item label="台桌状态" prop="status" v-if="form.id">
-                    <el-radio-button :label="2">计时</el-radio-button>
+        <el-select v-model="form.status" placeholder="请选择台桌状态">
-                </el-radio-group>
+          <el-option
-            </el-form-item>
+            :label="item.name"
-            <el-form-item label="最低消费" v-if="form.type == 0">
+            :value="item.value"
-                <el-input-number v-model="form.amount" :min="0" controls-position="right"></el-input-number>
+            v-for="item in status"
-            </el-form-item>
+            :key="item.value"
-            <el-form-item label="每小时收费" v-if="form.type == 2">
+          ></el-option>
-                <el-input-number v-model="form.perhour" :min="0" controls-position="right"></el-input-number>
+        </el-select>
-            </el-form-item>
+      </el-form-item>
-        </el-form>
+      <el-form-item label="台桌标识">
-        <span slot="footer" class="dialog-footer">
+        <div class="u-flex">
-            <el-button @click="dialogVisible = false">取 消</el-button>
+            <div class="u-flex" style="width: 57px;">
-            <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+                <el-input
-        </span>
+            v-model="form.sign"
-    </el-dialog>
+            placeholder="A"
+          ></el-input>
+            </div>
+      
+          <div class="u-flex u-m-l-30" >
+            <div class="u-flex">
+                <div class="u-m-r-4">起始</div>
+                <el-input v-model="form.start" style="width: 57px;" placeholder="请输入起始值" >
+          </el-input>
+
+            </div>
+           
+          <div
+            style="
+              background-color: #D9D9D9;
+              height: 1px;
+              width: 32px;
+              border-radius: 1px;
+            "
+            class="u-m-l-16 u-m-r-16"
+          ></div>
+          <div class="u-flex">
+            <span class="u-m-r-4">结束</span>
+            <el-input v-model="form.end" style="width: 57px;" placeholder="请输入结束值">
+                
+          </el-input>
+          </div>
+       
+          </div>
+       
+        </div>
+      </el-form-item>
+      <el-form-item label="客座数">
+        <el-input-number
+          v-model="form.capacity"
+          :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>
+      <el-form-item label="类型">
+        <el-radio-group v-model="form.type">
+          <el-radio-button :label="0">低消</el-radio-button>
+          <el-radio-button :label="2">计时</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="最低消费" v-if="form.type == 0">
+        <el-input-number
+          v-model="form.amount"
+          :min="0"
+          controls-position="right"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="每小时收费" v-if="form.type == 2">
+        <el-input-number
+          v-model="form.perhour"
+          :min="0"
+          controls-position="right"
+        ></el-input-number>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="onSubmitHandle"
+        >确 定</el-button
+      >
+    </span>
+  </el-dialog>
 </template>
 
 <script>
-import { tbShopTable, tbShopAreaGet } from '@/api/table'
+import { tbShopTable, tbShopAreaGet ,$fastCreateTable} from "@/api/table";
 export default {
-    data() {
+  data() {
-        return {
+    return {
-            dialogVisible: false,
+      dialogVisible: false,
-            resetForm: '',
+      resetForm: "",
-            loading: false,
+      loading: false,
-            status:[
+      status: [
-                {value:'pending',name:'挂单中'},
+        { value: "pending", name: "挂单中" },
-                {value:'using',name:'开台中'},
+        { value: "using", name: "开台中" },
-                {value:'paying',name:'结算中'},
+        { value: "paying", name: "结算中" },
-                {value:'idle',name:'空闲'},
+        { value: "idle", name: "空闲" },
-                {value:'subscribe',name:'预定'},
+        { value: "subscribe", name: "预定" },
-                {value:'closed',name:'关台'},
+        { value: "closed", name: "关台" },
-                // {value:'opening',name:'开台中'},
+        // {value:'opening',name:'开台中'},
-                {value:'cleaning',name:'台桌清理中'},
+        { value: "cleaning", name: "台桌清理中" },
-            ],
+      ],
-            form: {
+      form: {
-                id: '',
+        id: "",
-                name: '',
+        areaId: "",
-                areaId: '',
+        start:1,
-                maxCapacity: 0,
+        end:10,
-                isPredate: 1,
+        capacity: 0,
-                type: 2,
+        isPredate: 1,
-                perhour: 0,
+        type: 2,
-                amount: 0
+        perhour: 0,
-            },
+        amount: 0,
-            rules: {
+        autoClear: 1,
-                areaId: [
+      },
-                    {
+      rules: {
-                        required: true,
+        areaId: [
-                        message: '请选择区域',
+          {
-                        trigger: 'blur'
+            required: true,
-                    }
+            message: "请选择区域",
-                ]
+            trigger: "blur",
-            },
+          },
-            areaList: []
+        ],
+      },
+      areaList: [],
+    };
+  },
+  mounted() {
+    this.resetForm = { ...this.form };
+  },
+  methods: {
+    onSubmitHandle() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+          try {
+            let res = await $fastCreateTable(
+              {
+                ...this.form,
+                qrcode: this.form.tableId,
+                shopId: localStorage.getItem("shopId"),
+              },
+              this.form.id ? "put" : "post"
+            );
+            this.$emit("success", res);
+            this.close();
+            this.$notify({
+              title: "成功",
+              message: `${this.form.id ? "编辑" : "添加"}成功`,
+              type: "success",
+            });
+            this.loading = false;
+          } catch (error) {
+            this.loading = false;
+            console.log(error);
+          }
         }
+      });
     },
-    mounted() {
+    show(obj) {
-        this.resetForm = { ...this.form }
+      this.dialogVisible = true;
+      if (obj && obj.id) {
+        this.form = JSON.parse(JSON.stringify(obj));
+      }
     },
-    methods: {
+    close() {
-        onSubmitHandle() {
+      this.dialogVisible = false;
-            this.$refs.form.validate(async valid => {
+    },
-                if (valid) {
+    reset() {
-                    this.loading = true
+      this.form = { ...this.resetForm };
-                    try {
+    },
-                        let res = await tbShopTable({
+    // 获取区域
-                            ...this.form,
+    async tbShopAreaGet() {
-                            qrcode:this.form.tableId,
+      try {
-                            shopId: localStorage.getItem('shopId')
+        const { content } = await tbShopAreaGet({
-                        }, this.form.id ? 'put' : 'post')
+          shopId: localStorage.getItem("shopId"),
-                        this.$emit('success', res)
+        });
-                        this.close()
+        this.areaList = content;
-                        this.$notify({
+      } catch (error) {
-                            title: '成功',
+        console.log(error);
-                            message: `${this.form.id ? '编辑' : '添加'}成功`,
+      }
-                            type: 'success'
+    },
-                        });
+  },
-                        this.loading = false
+};
-                    } catch (error) {
-                        this.loading = false
-                        console.log(error)
-                    }
-                }
-            })
-        },
-        show(obj) {
-            this.dialogVisible = true
-            if (obj && obj.id) {
-                this.form = JSON.parse(JSON.stringify(obj))
-            }
-        },
-        close() {
-            this.dialogVisible = false
-        },
-        reset() {
-            this.form = { ...this.resetForm }
-        },
-        // 获取区域
-        async tbShopAreaGet() {
-            try {
-                const { content } = await tbShopAreaGet({
-                    shopId: localStorage.getItem('shopId')
-                })
-                this.areaList = content
-            } catch (error) {
-                console.log(error);
-            }
-        }
-    }
-}
 </script>

src/views/table/components/choose-user.vue

@@ -18,7 +18,7 @@
           </el-form-item> -->
           <el-form-item>
             <div class="flex gap-20">
-              <el-button type="success" @click="getTableData" size="medium"
+              <el-button  type="primary" @click="getTableData" size="medium"
                 >搜索</el-button
               >
               <!-- <el-button @click="resetHandle" size="medium">重置</el-button> -->
@@ -77,7 +77,7 @@
 
           <el-table-column label="操作" width="90" fixed="right">
             <template v-slot="scope">
-              <el-button type="success" size="mini" @click="choose(scope.row)">选择</el-button>
+              <el-button  type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
               <!-- <el-button type="text" @click="charge(scope.row)">充值</el-button> -->
             </template>
           </el-table-column>

src/views/table/components/pay-type.vue

@@ -9,7 +9,7 @@
             @click="changeSel(item)"
             v-for="(item, index) in list"
             :key="index"
-            :type="sel === item.payType ? 'success' : ''"
+            :type="sel === item.payType ? 'primary' : ''"
           >
             {{ item.payName }}
           </el-button>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex order-item relative"
-    :class="{ active: selIndex === index }"
+    :class="[isActive]"
     @click="itemClick"
   >
     <span class="absolute pack" v-if="item.isPack === 'true'"> 包 </span>
@@ -58,7 +58,21 @@
 <script>
 export default {
   props: {
-    //是否允许改变梳理
+    //是否是历史订单商品
+    isOld:{
+      type: Boolean,
+      default: false,
+    },
+    //第几次下单 1以及以上为历史订单  0为当前购物车
+    placeNum:{
+      type: [String,Number],
+      default: 0,
+    },
+    selPlaceNum:{
+      type: [String,Number],
+      default: -1,
+    },
+    //是否允许改变数量
     canChangeNumber: {
       type: Boolean,
       default: true,
@@ -85,6 +99,13 @@ export default {
       number: 0,
     };
   },
+  computed: {
+    isActive(){
+      const  isSel= (this.selIndex === this.index)&&(this.placeNum===this.selPlaceNum)
+      console.log(isSel)
+      return isSel?'active':'';
+    }
+  },
   watch: {
     "item.number": function (val) {
       this.number = val;
@@ -118,7 +139,7 @@ export default {
       this.$emit("changeOrderNumber", this.index, isReduce);
     },
     itemClick() {
-      this.$emit("itemClick", this.index,this.canChangeNumber);
+      this.$emit("itemClick", this.index,this.canChangeNumber,this.placeNum);
     },
   },
 };

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

@@ -1,7 +1,7 @@
 <template>
   <div class="select_desk">
     <el-dialog width="410px" title="就餐人数" :visible.sync="show">
-      <div class="select_desk_dialog  u-p-b-20">
+      <div class="select_desk_dialog u-p-b-20">
         <key-board
           isCanEmpty
           v-model="number"
@@ -24,7 +24,7 @@
         </key-board>
         <div class="confirm_btns">
           <el-button size="medium" @click="close">取消</el-button>
-          <el-button type="success" size="medium" @click="confirm"
+          <el-button  type="primary" size="medium" @click="confirm"
             >确定</el-button
           >
         </div>
@@ -51,7 +51,7 @@ export default {
         this.number = 99;
         this.$message("最多只能选择99位就餐人数");
       }
-      console.log(newval)
+      console.log(newval);
       // 使用正则表达式匹配正整数
       const regex = /^[1-9]\d*$/;
       // 如果输入的值不是正整数，则将其设置为上一个有效值
@@ -61,23 +61,26 @@ export default {
     },
   },
   methods: {
-    inputNumber(e){
+    inputNumber(e) {},
-    },
+    inputChange(e) {},
-    inputChange(e) {
-    },
     clear(e) {
       console.log(e);
       this.number = "";
     },
     confirm() {
+      if (!this.number) {
+        return this.$message("请选择就餐人数");
+      }
       this.$emit("confirm", this.number);
       this.close();
     },
-    open() {
+    open(number) {
+      this.number = number || "";
       this.show = true;
     },
     close() {
       this.show = false;
+      this.number = "";
     },
   },
   mounted() {},

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

@@ -46,7 +46,7 @@
 
         <div class="confirm_btns">
           <el-button size="medium" @click="close">取消</el-button>
-          <el-button type="success" size="medium" @click="confirm"
+          <el-button  type="primary" size="medium" @click="confirm"
             >确定</el-button
           >
         </div>

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

@@ -42,7 +42,7 @@
           </el-form-item>
           <div class="u-flex u-row-center u-m-t-50">
             <el-button size="medium" @click="close">取消</el-button>
-            <el-button size="medium" type="success" @click="confirm"
+            <el-button size="medium"  type="primary" @click="confirm"
               >确定</el-button
             >
           </div>

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

@@ -19,7 +19,7 @@
         :key="index"
         closable
         @close="delTag(index)"
-        type="success"
+         type="primary"
       >
         {{ tag }}
       </el-tag>
@@ -32,7 +32,7 @@
           取消
         </el-button>
         <el-button   size="medium"
-          type="success"
+           type="primary"
           @click="confirm">确定</el-button>
     </div>
   </el-dialog>

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

@@ -0,0 +1,109 @@
+<template>
+  <el-dialog title="撤单" width="410px" :visible.sync="show" @close="reset">
+    <div>
+      <div><span>撤单原因</span> <span class="color-red">*</span></div>
+    </div>
+
+    <div class="u-flex u-flex-wrap tags">
+      <div
+        class="tag"
+        v-for="(tag, index) in tags"
+        @click="changeSel(index)"
+        :key="index"
+        :class="{ active: tagSel == index }"
+      >
+        {{ tag }}
+      </div>
+    </div>
+    <div class="u-m-t-20">
+      <el-input
+        v-model="note"
+        size="medium"
+        placeholder="请输入自定义备注"
+      ></el-input>
+    </div>
+    <div class="u-m-t-20">
+      <el-checkbox v-model="isPrint" 
+        >打印退菜单</el-checkbox
+      >
+    </div>
+    <div slot="footer">
+      <el-button size="medium" @click="close"> 取消 </el-button>
+      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+  <script>
+export default {
+  data() {
+    return {
+        isPrint:false,
+      tagSel: -1,
+      show: false,
+      tags: ["人手不足", "店满无法招待", "顾客要求", "商品质量问题"],
+      note: "",
+    };
+  },
+
+  methods: {
+    changeSel(i) {
+      this.tagSel = i;
+    },
+    reset() {
+      this.note = "";
+    },
+    delTag(index) {
+      this.tags.splice(index, 1);
+    },
+    addNote(tag) {
+      if (this.note.length <= 0) {
+        return (this.note = tag);
+      }
+      this.note = tag + "," + this.note;
+    },
+    open(note) {
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+    },
+    confirm() {
+      this.$emit("confirm", this.note);
+      this.close();
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+::v-deep .el-tag {
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 35px;
+  height: 35px;
+}
+.tags {
+  .tag {
+    margin: 10px 10px 0 0;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 10px 13px;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+    &.active {
+      color: #1890ff;
+      background: #e8f4ff;
+      border-color: #a3d3ff;
+    }
+  }
+}
+</style>

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

@@ -37,7 +37,7 @@
             </el-form-item>
             <div class="u-flex u-row-center u-m-t-50">
               <el-button size="medium" @click="close">取消</el-button>
-              <el-button size="medium" type="success" @click="confirm"
+              <el-button size="medium"  type="primary" @click="confirm"
                 >确定</el-button
               >
             </div>

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

@@ -13,7 +13,7 @@
             {{ title }}
           </div>
           <el-dropdown @command="changePostPay">
-            <el-button plain type="success" size="mini">
+            <el-button plain type="primary" size="mini">
               {{ postPay ? "后付费" : "先付费" }}
               <i class="el-icon-caret-bottom"></i>
             </el-button>
@@ -96,7 +96,7 @@
       <div class="head-container search-box flex row-between" v-if="false">
         <div>
           <el-dropdown @command="changePostPay">
-            <el-button plain type="success" size="mini">
+            <el-button plain type="primary" size="mini">
               {{ postPay ? "后付费" : "先付费" }}
               <i class="el-icon-caret-bottom"></i>
             </el-button>
@@ -144,11 +144,11 @@
       </div>
       <div class="diancan" v-loading="loading">
         <div class="order">
-          <div class="relative">
+          <div class="relative u-flex u-flex-col u-row-between">
-            <div style="padding-right: 14px">
+            <div class="w-full" style="padding-right: 14px">
               <div class="choose-user flex">
                 <el-button
-                  type="success"
+                  type="primary"
                   v-if="vipUser.id === ''"
                   @click="refChooseUserOpen"
                   >选择用户</el-button
@@ -173,16 +173,41 @@
                   </div>
                 </template>
               </div>
-              <div class="flex row-between">
+              <div class="flex row-between table-list">
                 <!-- <div class="tableId" @click="chooseTableOpen"> -->
-                <div class="tableId" @click="chooseTableOpen">
+                <el-popover
-                  {{ table ? "桌台号：" + table.name : "桌台号/取餐号" }}
+                  placement="right"
-                </div>
+                  width="333"
+                  trigger="click"
+                  v-model="tableShow"
+                >
+                  <div style="max-height: 398px; overflow-y: scroll">
+                    <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"
+                      :key="index"
+                      @click="changeTable(item, index)"
+                    >
+                      <span> {{ item.name }}</span>
+                      <span :style="{ color: status[item.status].type }">
+                        {{
+                          status[item.status] ? status[item.status].label : ""
+                        }}</span
+                      >
+                    </div>
+                  </div>
+                  <div class="tableId" slot="reference">
+                    {{ table ? "桌台号：" + table.name : "桌台号/取餐号" }}
+                  </div>
+                </el-popover>
 
                 <div class="u-flex">
                   <div class="u-p-r-14 border-r u-m-r-14">
-                    <div class="u-flex cursor-pointer" @click="refToggle('refChooseDinersNumber',true)">
+                    <div
-                      <span>就餐人数：{{perpole}}位</span>
+                      class="u-flex cursor-pointer"
+                      @click="refToggle('refChooseDinersNumber', true, perpole)"
+                    >
+                      <span>就餐人数：{{ perpole }}位</span>
                       <span
                         class="el-icon-arrow-right diningPeople_cell_arrow"
                       ></span>
@@ -198,7 +223,67 @@
                 </div>
               </div>
             </div>
-            <div class="absolute bottom">
+
+            <div class="order-list-all" style="flex: 1; overflow-y: scroll">
+              <div class="list">
+                <!-- 当前购物车列表 -->
+                <template v-if="order.list.length">
+                  <cart-item
+                    @itemClick="changeOrderSel"
+                    @changeOrderNumber="changeOrderNumber"
+                    @cartGoodsNumberInput="cartGoodsNumberInput"
+                    @cartGoodsNumberChange="cartGoodsNumberChange"
+                    v-for="(item, index) in order.list"
+                    :key="index"
+                    :index="index"
+                    :item="item"
+                    :selPlaceNum="order.selPlaceNum"
+                    :selIndex="order.selIndex"
+                  ></cart-item>
+                </template>
+                <div v-if="order.gift.list.length">
+                  <div class="carts_list_title">以下是优惠菜品</div>
+                </div>
+
+                <div v-if="!order.list.length">
+                  <el-empty
+                    :image-size="50"
+                    description="点餐列表为空"
+                  ></el-empty>
+                </div>
+              </div>
+              <!-- 已下单菜品列表 -->
+              <template v-if="order.old.list.length">
+                <!-- <div class="carts_list_title">已下单菜品</div> -->
+                <div
+                  class="list"
+                  v-for="(orderItem, orderIndex) in order.old.list"
+                  :key="orderIndex"
+                >
+                  <div class="carts_list_title">
+                    第{{ orderItem.placeNum }}次下单
+                  </div>
+                  <cart-item
+                    @itemClick="changeOrderOldSel"
+                    :canChangeNumber="false"
+                    v-for="(item, index) in orderItem.info"
+                    :key="index"
+                    :index="index"
+                    :item="item"
+                    isOld
+                    :selIndex="order.old.selIndex"
+                    :placeNum="orderItem.placeNum"
+                    :selPlaceNum="order.selPlaceNum"
+                  ></cart-item>
+                </div>
+              </template>
+
+              <div class="order_remark" v-if="note.content">
+                订单备注： {{ note.content }}
+              </div>
+            </div>
+
+            <div class="w-full bottom">
               <div class="flex row-right youhui" v-if="giftLen">
                 <span> 已优惠￥{{ allGiftMoney | to2 }} </span>
                 <i class="el-icon-arrow-right"></i>
@@ -232,26 +317,10 @@
                   </button>
                 </template>
                 <template v-else>
-                  <!-- <el-dropdown
-                    split-button
-                    size="medium"
-                    type="success"
-                    @command="changeIsPrint"
-                  >
-                    {{ isPrint ? "下单并打印制作单" : "仅下单(不打印)" }}
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item :command="false"
-                        >仅下单(不打印)</el-dropdown-item
-                      >
-                      <el-dropdown-item :command="true"
-                        >下单并打印制作单</el-dropdown-item
-                      >
-                    </el-dropdown-menu>
-                  </el-dropdown> -->
                   <template v-if="postPay">
                     <div class="flex-1">
                       <el-button
-                        type="success"
+                        type="primary"
                         size="medium"
                         :disabled="!order.list.length"
                         @click="toCreateOrderDebounce(false)"
@@ -273,51 +342,6 @@
                 </template>
               </div>
             </div>
-            <div class="list">
-              <!-- 当前购物车列表 -->
-              <template v-if="order.list.length">
-                <cart-item
-                  @itemClick="changeOrderSel"
-                  @changeOrderNumber="changeOrderNumber"
-                  @cartGoodsNumberInput="cartGoodsNumberInput"
-                  @cartGoodsNumberChange="cartGoodsNumberChange"
-                  v-for="(item, index) in order.list"
-                  :key="index"
-                  :index="index"
-                  :item="item"
-                  :selIndex="order.selIndex"
-                ></cart-item>
-              </template>
-              <div v-if="order.gift.list.length">
-                <div class="carts_list_title">以下是优惠菜品</div>
-              </div>
-
-              <div v-if="!order.list.length">
-                <el-empty
-                  :image-size="50"
-                  description="点餐列表为空"
-                ></el-empty>
-              </div>
-            </div>
-            <!-- 已下单菜品列表 -->
-            <template v-if="order.old.list.length">
-              <div class="carts_list_title">已下单菜品</div>
-              <div class="list">
-                <cart-item
-                  @itemClick="changeOrderOldSel"
-                  :canChangeNumber="false"
-                  v-for="(item, index) in order.old.list"
-                  :key="index"
-                  :index="index"
-                  :item="item"
-                  :selIndex="order.old.selIndex"
-                ></cart-item>
-              </div>
-            </template>
-
-            <div class="order_remark" v-if="note.content">
-              订单备注： {{ note.content }}
-            </div>
           </div>
 
           <div class="controls">
@@ -413,6 +437,13 @@
             </div> -->
 
             <div class="btn" @click="refNoteShow">整单备注</div>
+            <div
+              class="btn"
+              :class="{ disabled: order.old.list.length <= 0 }"
+              @click="orderBtnsClick('returnCart')"
+            >
+              撤单
+            </div>
           </div>
         </div>
         <div class="goods">
@@ -441,12 +472,12 @@
                 >
                   <el-tag
                     size="medium"
-                    type="success"
+                    type="primary"
                     effect="dark"
                     v-if="goods.query.categoryId === item.id"
                     >{{ item.name }}</el-tag
                   >
-                  <el-tag size="medium" type="success" v-else effect="plain">{{
+                  <el-tag size="medium" type="info" v-else effect="plain">{{
                     item.name
                   }}</el-tag>
                 </div>
@@ -630,12 +661,12 @@
                 >
                 </pay-type>
                 <div style="margin-top: 20px">
-                  <el-button type="success" size="medium" @click="payOrder">
+                  <el-button type="primary" size="medium" @click="payOrder">
                     <span>立即支付</span>
                   </el-button>
                 </div>
                 <!-- <div class="flex row-right">
-                  <el-button size="medium" type="success" @click="payOrder"
+                  <el-button size="medium"  type="primary" @click="payOrder"
                     >确认支付</el-button
                   >
                 </div> -->
@@ -643,7 +674,7 @@
                 <div class="btn_group">
                   <div class="price_select">
                     <div class="pay_btns">
-                      <el-button size="medium" type="success">
+                      <el-button size="medium"  type="primary">
                         微信支付/支付宝
                       </el-button>
                       <el-button size="medium"> 余额支付 </el-button>
@@ -755,7 +786,7 @@
                 plain
                 :disabled="val.disabled"
                 @click="changeTagSel(index, val)"
-                :type="val.name === item.sel ? 'success' : ''"
+                :type="val.name === item.sel ? 'primary' : ''"
               >
                 {{ val.name }}
               </el-button>
@@ -804,7 +835,7 @@
               库存不足
             </button>
             <button
-              class="my-btn success flex-1"
+              class="my-btn primary flex-1"
               v-else
               :disabled="CanConfirm"
               @click="chooseSkuConfirm"
@@ -932,7 +963,7 @@
         <div style="margin-right: 20px">
           <el-button
             size="medium"
-            type="success"
+            type="primary"
             @click="confirmChoosePrveOrder"
             >确认此单</el-button
           >
@@ -976,7 +1007,15 @@
     <money-discount ref="refDiscount" @confirm="ChangeDiscount">
     </money-discount>
     <!-- 选择人数 -->
-    <choose-diners-number ref="refChooseDinersNumber" @confirm="chooseDinersNumberConfirm"></choose-diners-number>
+    <choose-diners-number
+      ref="refChooseDinersNumber"
+      @confirm="chooseDinersNumberConfirm"
+    ></choose-diners-number>
+
+    <return-cart
+      ref="refReturnCart"
+      @confirm="refReturnCartConfirm"
+    ></return-cart>
   </div>
 </template>
 
@@ -990,6 +1029,7 @@ import scanPay from "./table-diancan-components/scan-pay.vue";
 import moneyDiscount from "./table-diancan-components/discount.vue";
 import orderNote from "./table-diancan-components/note.vue";
 import chooseDinersNumber from "./table-diancan-components/choose-diners-number.vue";
+import returnCart from "./table-diancan-components/return-cart.vue";
 import moneyKeyboard from "./money-keyboard.vue";
 import dayjs from "dayjs";
 import {
@@ -1007,6 +1047,9 @@ import {
   $delOrder,
   $setUser,
   $payOrder,
+  $choseTable,
+  $choseCount,
+  $returnCart
 } from "@/api/table";
 import { tbShopCategoryGet } from "@/api/shop";
 import {
@@ -1015,8 +1058,11 @@ import {
   generateCombinations,
   returnReverseVal,
 } from "./util.js";
+import $status from "../status.js";
+import { tbShopTableGet } from "@/api/table";
 export default {
   components: {
+    returnCart,
     chooseUser,
     chooseTable,
     payType,
@@ -1029,8 +1075,12 @@ export default {
   },
   data() {
     return {
+      //台桌列表
+      tableList: [],
+      tableShow: false,
+      status: $status,
       //就餐人数
-      perpole:'',
+      perpole: "",
       //整体点餐页面loading
       loading: false,
       //台桌点餐页面打开时带来的参数 isAddGoods 加菜    isPayOrder结账
@@ -1093,6 +1143,10 @@ export default {
         payType: "",
         masterId: "",
         allPack: false,
+        //当前选中的购物车商品（包含历史订单）
+        selGoods:'',
+        selPlaceNum: -1, //第几次下单 0当前 1以及以上历史订单
+
         btns: [
           {
             text: "规格",
@@ -1224,7 +1278,10 @@ export default {
       const oldPrice = this.order.old.list
         .filter((v) => v.isGift !== "true")
         .reduce((a, b) => {
-          return a + b.number * b.salePrice;
+          const bTotal = b.info.reduce((prve, cur) => {
+            return prve + cur.number * cur.salePrice;
+          }, 0);
+          return a + bTotal;
         }, 0);
       const price = this.order.list
         .filter((v) => v.isGift !== "true")
@@ -1235,11 +1292,17 @@ export default {
     },
     allNumber() {
       const oldNumber = this.order.old.list.reduce((a, b) => {
-        return a + b.number * 1;
+        const bTotal = b.info.reduce((prve, cur) => {
+          return prve + cur.number * 1;
+        }, 0);
+        return a + bTotal;
       }, 0);
       const cartNumber = this.order.list.reduce((a, b) => {
         return a + b.number * 1;
       }, 0);
+      console.log(oldNumber);
+      console.log(cartNumber);
+
       return oldNumber + cartNumber;
     },
     selGoodsHide() {
@@ -1273,6 +1336,25 @@ export default {
     },
   },
   watch: {
+    perpole(newval) {
+      if (newval) {
+        $choseCount({
+          masterId: this.masterId,
+          tableId: this.table.tableId,
+          num: newval,
+        });
+      }
+    },
+    table(oldval, newval) {
+      if (oldval && newval) {
+        console.log(oldval, newval);
+        $choseTable({
+          orderId: 4462,
+          oldTableId: oldval.tableId,
+          newTableId: newval.tableId,
+        });
+      }
+    },
     masterId: function (val) {
       console.log(val);
     },
@@ -1314,30 +1396,6 @@ export default {
         this.prveOrde.show = false;
       }
     },
-    // 本地缓存版本
-    // "prveOrder.list.length": function (val) {
-    //   console.log(val);
-    //   if (val !== 0) {
-    //     this.prveOrder.selCart = this.prveOrder.list[this.prveOrder.sel].cart;
-    //     localStorage.setItem(
-    //       "orderList",
-    //       JSON.stringify(
-    //         this.prveOrder.list.map((v) => {
-    //           return { ...v, cart: JSON.stringify(v.cart) };
-    //         })
-    //       )
-    //     );
-    //   } else {
-    //     this.prveOrder.selCart = [];
-    //     localStorage.removeItem("orderList");
-    //   }
-    //   console.log(this.prveOrder.selCart);
-    // },
-    // "prveOrder.sel": function (val) {
-    //   this.prveOrder.selCart =
-    //     this.prveOrder.list.length !== 0 ? this.prveOrder.list[val].cart : [];
-    //   console.log(this.prveOrder.selCart);
-    // },
     "order.allPack": function (val) {
       console.log(val);
       if (this.order.list.length <= 0) {
@@ -1354,19 +1412,25 @@ export default {
       });
     },
     "order.selIndex": function (val, oldval) {
-      console.log(val);
+      let goods = this.order.list[val];
-      this.order.old.selIndex = -1;
+      const isOld = this.selPlaceNum > 0;
+      if (isOld) {
+        const item = this.order.list.find(
+          (v) => v.placeNum == this.selPlaceNum
+        );
+        const selItem = item.info[this.order.old.selIndex];
+        goods = selItem ? selItem : "";
+      }
+      console.log(goods);
       if (val === -1) {
-        // return (this.order.number = 1);
         this.order.cacheNumber = 1;
       } else {
-        this.order.cacheNumber = this.order.list[val].number;
+        this.order.cacheNumber = goods.number;
-        // this.order.number = this.order.list[val].number;
       }
     },
     "order.list.length": function (val) {
       if (val <= 0) {
-        this.order.selIndex = -1;
+        this.changeOrderSel(-1);
       }
       if (this.order.selIndex >= 0) {
         this.order.cacheNumber = this.order.list[this.order.selIndex].number;
@@ -1425,8 +1489,31 @@ export default {
     // this.refToggle("refDiscount", true);
   },
   methods: {
-    chooseDinersNumberConfirm(e){
+    //退单
-      this.perpole=e
+    refReturnCartConfirm() {
+      
+      $returnCart({
+        cartId: this.order.selGoods.id,
+        tableId: this.table.tableId
+      });
+    },
+    // 台桌列表
+    async getTable() {
+      try {
+        const { content, total } = await tbShopTableGet({
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.tableList = content;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    changeTable(item) {
+      this.table = item;
+      this.tableShow = false;
+    },
+    chooseDinersNumberConfirm(e) {
+      this.perpole = e;
     },
     //扫码支付弹窗确认
     scanPayConfirm(code) {
@@ -1772,6 +1859,8 @@ export default {
         );
         this.order.list = [];
         this.order.selIndex = -1;
+
+        this.changeOrderSel(-1);
         return;
       }
       if (key === "getOrder") {
@@ -1779,6 +1868,9 @@ export default {
         this.getPrveCart();
         return;
       }
+      if (key === "returnCart") {
+        this.refToggle("refReturnCart", true);
+      }
     },
     //选择挂单确认
     async confirmChoosePrveOrder() {
@@ -1895,7 +1987,7 @@ export default {
       this.isPrverOrder = false;
       this.order.masterId = "";
       this.order.list = [];
-      this.order.selIndex = -1;
+      this.changeOrderSel(-1);
       this.note.content = "";
       this.order.orderId = "";
       this.$nextTick(() => {
@@ -1913,7 +2005,7 @@ export default {
       });
       this.order.list.splice(this.order.selIndex, 1);
       const newval = this.order.selIndex - 1;
-      this.order.selIndex = newval <= 0 ? 0 : newval;
+      this.changeOrderSel(newval <= 0 ? 0 : newval);
 
       //  this.$message({
       //         type: "success",
@@ -1925,7 +2017,7 @@ export default {
       if (index < 0) {
         return;
       }
-      this.order.selIndex = index;
+      this.changeOrderSel(index);
       console.log(index);
       console.log(isReduce);
       const item = this.order.list[index];
@@ -1985,7 +2077,7 @@ export default {
             tableId: this.table.tableId,
           }).then((res) => {
             this.order.list = [];
-            this.order.selIndex = -1;
+            this.changeOrderSel(-1);
             this.$message({
               type: "success",
               message: "清除成功!",
@@ -2031,13 +2123,21 @@ export default {
     },
     //改变购物车菜品选中
     changeOrderSel(index) {
+      this.order.selPlaceNum = 0;
       this.order.selIndex = index;
+      this.order.selGoods=this.order.list[index];
       this.order.old.selIndex = -1;
     },
     //改变已下单菜品选中
-    changeOrderOldSel(index) {
+    changeOrderOldSel(index, canChangeNumber, placeNum) {
+      //是否是历史订单商品
+      const isOld = placeNum >= 1;
+      this.order.selIndex = -1;
       this.order.old.selIndex = index;
-      this.order.cacheNumber = this.order.old.list[index].number;
+      this.order.selPlaceNum = placeNum;
+      const list = this.order.old.list.find((v) => v.placeNum == placeNum);
+      this.order.selGoods=list.info[index];
+      this.order.cacheNumber = list.info[index].number || 1;
     },
     chooseSkuConfirm() {
       if (this.timer) {
@@ -2094,17 +2194,13 @@ export default {
       });
       const orderGoods =
         orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
-      const oldOrderGoods = this.order.old.list.find((V) => {
+
-        return V.skuId == item.id && V.productId == this.selGoods.data.id;
+      if (orderGoods) {
-      });
-      if (orderGoods || oldOrderGoods) {
         //更新
         const newNum =
-          (oldOrderGoods ? oldOrderGoods.number : 0) +
+          (orderGoods ? orderGoods.number * 1 : 0) + this.skuGoods.number;
-          (orderGoods ? orderGoods.number * 1 : 0) +
-          this.skuGoods.number;
         res = await $updateCart({
-          cartId: orderGoods ? orderGoods.id : oldOrderGoods.id,
+          cartId: orderGoods.id,
           productId: this.selGoods.data.id,
           skuId: item.id,
           tableId: this.table.tableId,
@@ -2119,7 +2215,8 @@ export default {
           });
         } else {
           orderGoods.number += this.skuGoods.number;
-          this.order.selIndex = orderGoodsIndex;
+          this.order.selPlaceNum = 0;
+          this.changeOrderSel(orderGoodsIndex);
           this.order.cacheNumber = orderGoods.number;
         }
       } else {
@@ -2152,7 +2249,8 @@ export default {
       // const isPack=item.isPack==='false'?false:true
       // const isGift=item.isGift==='false'?false:true
       this.order.list.push({ ...item, isPack, isGift });
-      this.order.selIndex = this.order.list.length - 1;
+      this.order.selPlaceNum = 0;
+      this.changeOrderSel(this.order.list.length - 1);
     },
     //设置规格按钮的禁止状态
     setTagDisabled() {
@@ -2237,13 +2335,16 @@ export default {
     reset() {
       // this.goods.list = [];
       this.loading = false;
+      this.table = "";
       this.order.masterId = "";
       this.order.list = [];
       this.order.query.page = 1;
       this.goods.total = 0;
       this.order.list = [];
       this.order.selIndex = -1;
+      this.order.selPlaceNum = -1;
       this.order.old.list = [];
+      this.order.selGoods='';
       this.prveOrder.list = [];
       this.prveOrder.selIndex = -1;
       this.order.old.selIndex = -1;
@@ -2259,6 +2360,7 @@ export default {
       this.order.cacheNumber = 1;
       this.key = "";
       this.order.orderId = "";
+      this.perpole = "";
     },
     //获取购物车数据
     async getCart() {
@@ -2267,12 +2369,11 @@ export default {
         masterId: this.masterId,
         tableId: this.table.tableId,
       });
-      this.order.list = res.records;
+      if (this.key|| res.records.length) {
-      if (this.key) {
+        this.order.old.list = res.records;
-        // this.order.old.list = res.records;
       } else {
+        this.order.list = res.records;
       }
-      this.order.total = res.total;
     },
     showSelGoods(item) {
       console.log(item);
@@ -2373,7 +2474,7 @@ export default {
         // });
         orderGoods.number += item.specList[0].suit;
         this.order.number = orderGoods.number;
-        this.order.selIndex = orderGoodsIndex;
+        this.changeOrderSel(orderGoodsIndex);
       } else {
         //增加
         console.log(item);
@@ -2481,7 +2582,7 @@ export default {
         // });
         orderGoods.number += item.specList[0].suit;
         this.order.number = orderGoods.number;
-        this.order.selIndex = orderGoodsIndex;
+        this.changeOrderSel(orderGoodsIndex);
       } else {
         //增加
         console.log(item);
@@ -2513,7 +2614,7 @@ export default {
       this.goods.total = res.total;
       this.$goodsData = goods;
     },
-    async open(item, key) {
+    async open(item, key, perpoleNumber) {
       this.table = item;
       this.key = key;
       if (this.key == "isPayOrder") {
@@ -2523,6 +2624,7 @@ export default {
       this.informationdialogshow = true;
       const res = await this.getMasterId();
       this.masterId = res.masterId;
+      this.perpole = perpoleNumber;
       if (this.key == "isPayOrder") {
         this.toCreateOrder(true);
       }
@@ -2531,6 +2633,7 @@ export default {
       this.getCategory();
       // this.getPrveCart();
       this.getCacheOrder();
+      this.getTable();
     },
     close() {
       this.informationdialogshow = false;
@@ -2584,7 +2687,7 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .icon-add {
-  color: rgb(34, 191, 100);
+  color: #1890ff;
   font-size: 22px;
   cursor: pointer;
 }
@@ -2844,7 +2947,11 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 0 5px;
   background-color: #fff;
   position: relative;
-
+  &.primary {
+    color: #fff;
+    background-color: #1890ff;
+    border-color: #1890ff;
+  }
   &.disabled {
     color: #c0c4cc;
     cursor: not-allowed;
@@ -3026,7 +3133,7 @@ input[type="number"]::-webkit-outer-spin-button {
   font-weight: 600;
 }
 
-::v-deep .categorys .el-tag--plain.el-tag--success {
+::v-deep .categorys .el-tag--plain.el-tag--info {
   border: 1px solid #dcdfe6;
   color: #000;
   font-weight: 600;
@@ -3074,11 +3181,11 @@ input[type="number"]::-webkit-outer-spin-button {
   border: 1px solid #dcdfe6;
 }
 ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: #22bf64;
+  // background-color: #22bf64;
-  border-color: #22bf64;
+  // border-color: #22bf64;
 }
 ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
-  color: #22bf64;
+  // color: #22bf64;
 }
 
 ::v-deep .tag-group .el-tag--dark {
@@ -3131,7 +3238,13 @@ input[type="number"]::-webkit-outer-spin-button {
     }
   }
 }
-
+.table-item {
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+  &:hover {
+    background: #f4f9ff;
+  }
+}
 .tag-group {
   margin-top: 10px;
 
@@ -3696,7 +3809,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .submit {
   width: 366px;
   height: 44px;
-  background: #22bf64;
+  background: #1890ff;
   border-radius: 2px;
 
   display: flex;

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

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" :visible.sync="dialogVisible" @open="tbShopAreaGet" @close="reset">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+          <el-form-item label="选择区域" prop="areaId">
+              <el-select v-model="form.areaId" placeholder="请选择区域">
+                  <el-option :label="item.name" :value="item.id" v-for="item in areaList" :key="item.id"></el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item label="台桌状态" prop="status" v-if="form.id">
+              <el-select v-model="form.status" placeholder="请选择台桌状态">
+                  <el-option :label="item.name" :value="item.value" v-for="item in status" :key="item.value"></el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item label="台桌名称">
+              <el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
+          </el-form-item>
+          <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-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
+          </el-form-item>
+          <el-form-item label="类型">
+              <el-radio-group v-model="form.type">
+                  <el-radio-button :label="0">低消</el-radio-button>
+                  <el-radio-button :label="2">计时</el-radio-button>
+              </el-radio-group>
+          </el-form-item>
+          <el-form-item label="最低消费" v-if="form.type == 0">
+              <el-input-number v-model="form.amount" :min="0" controls-position="right"></el-input-number>
+          </el-form-item>
+          <el-form-item label="每小时收费" v-if="form.type == 2">
+              <el-input-number v-model="form.perhour" :min="0" controls-position="right"></el-input-number>
+          </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script>
+import { tbShopTable, tbShopAreaGet } from '@/api/table'
+export default {
+  data() {
+      return {
+          dialogVisible: false,
+          resetForm: '',
+          loading: false,
+          status:[
+              {value:'pending',name:'挂单中'},
+              {value:'using',name:'开台中'},
+              {value:'paying',name:'结算中'},
+              {value:'idle',name:'空闲'},
+              {value:'subscribe',name:'预定'},
+              {value:'closed',name:'关台'},
+              // {value:'opening',name:'开台中'},
+              {value:'cleaning',name:'台桌清理中'},
+          ],
+          form: {
+              id: '',
+              name: '',
+              areaId: '',
+              maxCapacity: 0,
+              isPredate: 1,
+              type: 2,
+              perhour: 0,
+              amount: 0
+          },
+          rules: {
+              areaId: [
+                  {
+                      required: true,
+                      message: '请选择区域',
+                      trigger: 'blur'
+                  }
+              ]
+          },
+          areaList: []
+      }
+  },
+  mounted() {
+      this.resetForm = { ...this.form }
+  },
+  methods: {
+      onSubmitHandle() {
+          this.$refs.form.validate(async valid => {
+              if (valid) {
+                  this.loading = true
+                  try {
+                      let res = await tbShopTable({
+                          ...this.form,
+                          qrcode:this.form.tableId,
+                          shopId: localStorage.getItem('shopId')
+                      }, this.form.id ? 'put' : 'post')
+                      this.$emit('success', res)
+                      this.close()
+                      this.$notify({
+                          title: '成功',
+                          message: `${this.form.id ? '编辑' : '添加'}成功`,
+                          type: 'success'
+                      });
+                      this.loading = false
+                  } catch (error) {
+                      this.loading = false
+                      console.log(error)
+                  }
+              }
+          })
+      },
+      show(obj) {
+          this.dialogVisible = true
+          if (obj && obj.id) {
+              this.form = JSON.parse(JSON.stringify(obj))
+          }
+      },
+      close() {
+          this.dialogVisible = false
+      },
+      reset() {
+          this.form = { ...this.resetForm }
+      },
+      // 获取区域
+      async tbShopAreaGet() {
+          try {
+              const { content } = await tbShopAreaGet({
+                  shopId: localStorage.getItem('shopId')
+              })
+              this.areaList = content
+          } catch (error) {
+              console.log(error);
+          }
+      }
+  }
+}
+</script>

src/views/table/status.js

@@ -5,7 +5,7 @@ export default {
     },
     using: {
         label: "开台中",
-        type: "#E6A23C",
+        type: "#fa5555",
     },
     paying: {
         label: "结算中",
@@ -27,6 +27,10 @@ export default {
     //   label: "开台中",
     //   type: "#67C23A",
     // },
+    wait:{
+        label: "待清台",
+        type: "rgb(250,202,14)",
+    },
     cleaning: {
         label: "台桌清理中",
         type: "#909399",

src/views/table/table_list.vue

@@ -51,7 +51,7 @@
         >
           <div class="new-top flex u-row-between">
             <span class="name">{{ item.name }}</span>
-            <el-dropdown trigger="click" @command="tableComman($event,item)">
+            <el-dropdown trigger="click" @command="tableComman($event, item)">
               <i class="el-icon-more cur-pointer color-fff"></i>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="edit">
@@ -59,9 +59,9 @@
                   <span>编辑</span>
                 </el-dropdown-item>
                 <el-dropdown-item command="del">
-                <i class="i el-icon-delete"></i>
+                  <i class="i el-icon-delete"></i>
-                <span>删除</span>
+                  <span>删除</span>
-                  </el-dropdown-item>
+                </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
@@ -100,29 +100,24 @@
                   >点餐</el-button
                 >
               </template>
-              <template v-else >
+              <template v-else>
                 <template v-if="item.status == 'using'">
                   <el-button
-                  :disabled="!item.tableId || item.status === 'closed'"
+                    :disabled="!item.tableId || item.status === 'closed'"
-                  @click="diancanShow(item, 'isAddGoods')"
+                    @click="diancanShow(item, 'isAddGoods')"
-                  >加菜</el-button
+                    >加菜</el-button
-                >
+                  >
-                <el-button
+                  <el-button
-                  type="danger"
+                    type="danger"
-                  :disabled="!item.tableId || item.status === 'closed'"
+                    :disabled="!item.tableId || item.status === 'closed'"
-                  @click="diancanShow(item, 'isPayOrder')"
+                    @click="diancanShow(item, 'isPayOrder')"
-                  >结账</el-button
+                    >结账</el-button
-                >
+                  >
                 </template>
                 <template v-else>
-                <el-button
+                  <el-button type="info" disabled>开始点餐</el-button>
-                  type="info"
+                </template>
-                  disabled
-                  >开始点餐</el-button
-                >
               </template>
-              </template>
-             
             </div>
             <!-- <div class="u-flex u-col-center">
               <img style="width: 16px;height: 16px;" src="@/assets/images/perpole.png" alt="">
@@ -151,20 +146,31 @@
       </div>
     </div>
     <addEara ref="addEara" @success="tbShopAreaGet" />
+    <!-- 批量添加台桌 -->
     <addTable ref="addTable" @success="tbShopTableGet" />
+    <!-- 编辑台桌 -->
+    <table-edit ref="editTable" @success="tbShopTableGet"></table-edit>
     <downloadTableCode :total="total" ref="downloadTableCode" />
 
     <!-- 点餐 -->
-    <table-diancan ref="dianan" @close="onDiancanClose"></table-diancan>
+    <table-diancan ref="diancan" @close="onDiancanClose"></table-diancan>
+    <!-- 选择人数 -->
+    <choose-diners-number
+      ref="refChooseDinersNumber"
+      @confirm="chooseDinersNumberConfirm"
+    ></choose-diners-number>
   </div>
 </template>
 
 <script>
 import addEara from "./components/addEara";
 import addTable from "./components/addTable";
+import tableEdit from "./components/table-edit";
 import downloadTableCode from "./components/downloadTableCode";
 import tableDiancan from "./components/table-diancan.vue";
 import $status from "./status.js";
+import chooseDinersNumber from "./components/table-diancan-components/choose-diners-number.vue";
+
 import {
   tbShopTableGet,
   tbShopAreaGet,
@@ -176,7 +182,7 @@ export default {
     addEara,
     addTable,
     downloadTableCode,
-    tableDiancan,
+    tableDiancan,chooseDinersNumber,tableEdit
   },
   data() {
     return {
@@ -185,31 +191,32 @@ export default {
       loading: false,
       total: 0,
       tableList: [],
-      status:$status
+      status: $status,
+      selTable:''//当前选中的桌台
     };
   },
   mounted() {
     this.tbShopAreaGet();
   },
   methods: {
-    tableComman(command,item){
+    tableComman(command, item) {
-      if(command=='edit'){
+      if (command == "edit") {
-        return this.$refs.addTable.show(item)
+        return this.$refs.editTable.show(item);
       }
-      if(command=='del'){
+      if (command == "del") {
-        return this.delPop(item)
+        return this.delPop(item);
       }
     },
-    delPop(item){
+    delPop(item) {
-      this.$confirm('是否删除'+item.name+'台桌', '提示', {
+      this.$confirm("是否删除" + item.name + "台桌", "提示", {
-          confirmButtonText: '确定',
+        confirmButtonText: "确定",
-          cancelButtonText: '取消',
+        cancelButtonText: "取消",
-          type: 'warning'
+        type: "warning",
-        }).then(() => {
+      })
-          this.delTableHandle([item.id])
+        .then(() => {
-        }).catch(() => {
+          this.delTableHandle([item.id]);
-                   
+        })
-        });
+        .catch(() => {});
     },
     onDiancanClose() {
       this.tbShopTableGet();
@@ -217,7 +224,17 @@ export default {
     diancanShow(item, key) {
       //key isAddGoods 加菜
       //key isPayOrder结账
-      this.$refs.dianan.open(item, key);
+      console.log(item)
+      this.selTable=item
+      if(item.status=='idle'){
+        return this.$refs.refChooseDinersNumber.open()
+      }
+      this.$refs.diancan.open(item, key);
+    },
+    chooseDinersNumberConfirm(num){
+      //就餐人数
+      console.log(num)
+      this.$refs.diancan.open( this.selTable, undefined,num);
     },
     tabClick() {
       this.tbShopTableGet();
@@ -249,7 +266,6 @@ export default {
           shopId: localStorage.getItem("shopId"),
           areaId: this.tabVlaue,
         });
-        console.log(content);
         this.tableList = content;
         // this.tableList = content.sort((a,b)=>{
         //   if(a.status=='idle'&&b.status!='idle'){
@@ -292,7 +308,7 @@ export default {
 .icon {
   margin-left: 10px;
 }
-::v-deep  .btn-group  .el-button {
+::v-deep .btn-group .el-button {
   width: 100%;
 }
 ::v-deep .el-dropdown-menu__item {
@@ -330,7 +346,7 @@ export default {
     &.using {
       background-color: rgb(250, 85, 85);
     }
-    &.closed{
+    &.closed {
       background-color: rgb(221, 221, 221);
       filter: grayscale(1);
     }
@@ -349,9 +365,9 @@ export default {
     .top {
       padding: 20px;
       background-color: #fff;
-      flex:1;
+      flex: 1;
       // border-radius: 6px 6px 0 0;
-    border-radius: 6px;
+      border-radius: 6px;
       .row {
         display: flex;
         gap: 10px;