修改台桌状态，开台中时按钮展示加菜和结账

src/views/table/table_list.vue

@@ -50,9 +50,13 @@
               <div class="state">
                 <span
                   class="dot"
-                  :style="{ backgroundColor: status[item.status]?status[item.status].type:'' }"
+                  :style="{
+                    backgroundColor: status[item.status]
+                      ? status[item.status].type
+                      : '',
+                  }"
                 ></span>
-                {{ status[item.status]?status[item.status].label:'' }}
+                {{ status[item.status] ? status[item.status].label : "" }}
               </div>
             </div>
             <div class="row">
@@ -67,12 +71,24 @@
               <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
             </div>
             <div class="row">
-              <el-button
-                type="primary"
-                :disabled="!item.tableId||item.status==='closed'"
-                @click="diancanShow(item)"
-                >点餐</el-button
-              >
+              <template v-if="item.status == 'idle'">
+                <el-button
+                  type="primary"
+                  :disabled="!item.tableId || item.status === 'closed'"
+                  @click="diancanShow(item)"
+                  >点餐</el-button>
+              </template>
+              <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>
             </div>
           </div>
           <div class="btm">
@@ -133,17 +149,17 @@ export default {
       total: 0,
       tableList: [],
       status: {
-        pending:{
-            label: "挂单中",
-            type: "#E6A23C",
+        pending: {
+          label: "挂单中",
+          type: "#E6A23C",
         },
-        using:{
-            label: "开台中",
-            type: "#E6A23C",
+        using: {
+          label: "开台中",
+          type: "#E6A23C",
         },
-        paying:{
-            label: "结算中",
-            type: "#E6A23C",
+        paying: {
+          label: "结算中",
+          type: "#E6A23C",
         },
         idle: {
           label: "空闲",
@@ -172,11 +188,13 @@ export default {
     this.tbShopAreaGet();
   },
   methods: {
-    onDiancanClose(){
-        this.tbShopTableGet()
+    onDiancanClose() {
+      this.tbShopTableGet();
     },
-    diancanShow(item) {
-      this.$refs.dianan.open(item);
+    diancanShow(item,key) {
+      //key isAddGoods 加菜
+      //key isPayOrder结账
+      this.$refs.dianan.open(item,key);
     },
     tabClick() {
       this.tbShopTableGet();
@@ -209,7 +227,14 @@ export default {
           areaId: this.tabVlaue,
         });
         console.log(content);
-        this.tableList = content;
+        this.tableList=content
+        // this.tableList = content.sort((a,b)=>{
+        //   if(a.status=='idle'&&b.status!='idle'){
+        //     return 1
+        //   }else if(a.status!='idle'&&b.status=='idle'){
+        //     return -1
+        //   }
+        // });
         this.total = total;
         setTimeout(() => {
           this.loading = false;
@@ -259,7 +284,9 @@ export default {
 
   .item {
     border: 1px solid #ddd;
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     .top {
       padding: 20px;