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

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">
+              <template v-if="item.status == 'idle'">
                 <el-button
                   type="primary"
                   :disabled="!item.tableId || item.status === 'closed'"
                   @click="diancanShow(item)"
-                >点餐</el-button
+                  >点餐</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">
@@ -173,10 +189,12 @@ export default {
   },
   methods: {
     onDiancanClose() {
-        this.tbShopTableGet()
+      this.tbShopTableGet();
     },
-    diancanShow(item) {
+    diancanShow(item,key) {
-      this.$refs.dianan.open(item);
+      //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;