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

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

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>
-                <span>删除</span>
-                  </el-dropdown-item>
+                  <i class="i el-icon-delete"></i>
+                  <span>删除</span>
+                </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'"
-                  @click="diancanShow(item, 'isAddGoods')"
-                  >加菜</el-button
-                >
-                <el-button
-                  type="danger"
-                  :disabled="!item.tableId || item.status === 'closed'"
-                  @click="diancanShow(item, 'isPayOrder')"
-                  >结账</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>
-                <el-button
-                  type="info"
-                  disabled
-                  >开始点餐</el-button
-                >
+                  <el-button type="info" disabled>开始点餐</el-button>
+                </template>
               </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){
-      if(command=='edit'){
-        return this.$refs.addTable.show(item)
+    tableComman(command, item) {
+      if (command == "edit") {
+        return this.$refs.editTable.show(item);
       }
-      if(command=='del'){
-        return this.delPop(item)
+      if (command == "del") {
+        return this.delPop(item);
       }
     },
-    delPop(item){
-      this.$confirm('是否删除'+item.name+'台桌', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.delTableHandle([item.id])
-        }).catch(() => {
-                   
-        });
+    delPop(item) {
+      this.$confirm("是否删除" + item.name + "台桌", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          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;