更新桌台列表页面

代客下单修改部分样式，修复创建订单后未刷新订单问题

src/views/table/components/table-diancan-components/return-cart copy.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/return-cart.vue

@@ -1,18 +1,18 @@
 <template>
-  <el-dialog title="撤单" width="410px" :visible.sync="show" @close="reset">
+  <el-dialog title="退菜" width="410px" :visible.sync="show" @close="reset">
     <div>
-      <div><span>撤单原因</span> <span class="color-red">*</span></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)"
+        @click="changeSel(tag)"
         :key="index"
-        :class="{ active: tagSel == index }"
+        :class="{ active: tag.checked }"
       >
-        {{ tag }}
+        {{ tag.label }}
       </div>
     </div>
     <div class="u-m-t-20">
@@ -40,14 +40,14 @@ export default {
         isPrint:false,
       tagSel: -1,
       show: false,
-      tags: ["人手不足", "店满无法招待", "顾客要求", "商品质量问题"],
+      tags: [{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}],
       note: "",
     };
   },
 
   methods: {
-    changeSel(i) {
+    changeSel(item) {
-      this.tagSel = i;
+      item.checked = !item.checked ;
     },
     reset() {
       this.note = "";

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

@@ -146,7 +146,7 @@
         <div class="order">
           <div class="relative u-flex u-flex-col u-row-between">
             <div class="w-full" style="padding-right: 14px">
-              <div class="choose-user flex">
+              <div class="choose-user flex u-m-l-20">
                 <el-button
                   type="primary"
                   v-if="vipUser.id === ''"
@@ -173,7 +173,7 @@
                   </div>
                 </template>
               </div>
-              <div class="flex row-between table-list">
+              <div class="flex row-between table-list u-m-l-20">
                 <!-- <div class="tableId" @click="chooseTableOpen"> -->
                 <el-popover
                   placement="right"
@@ -224,7 +224,7 @@
               </div>
             </div>
 
-            <div class="order-list-all" style="flex: 1; overflow-y: scroll">
+            <div class="order-list-all u-p-l-20" style="flex: 1; overflow-y: scroll">
               <div class="list">
                 <!-- 当前购物车列表 -->
                 <template v-if="order.list.length">
@@ -284,7 +284,8 @@
             </div>
 
             <div class="w-full bottom">
-              <div class="flex row-right youhui" v-if="giftLen">
+              <div class="border-top">
+                <div class="flex row-right youhui" v-if="giftLen">
                 <span> 已优惠￥{{ allGiftMoney | to2 }} </span>
                 <i class="el-icon-arrow-right"></i>
               </div>
@@ -312,7 +313,7 @@
                     <span>加菜/返回</span>
                   </button>
                   <div style="width: 15px"></div>
-                  <button class="my-btn flex-1 success" @click="payOrder">
+                  <button class="my-btn flex-1 primary" @click="payOrder">
                     <span>立即支付</span>
                   </button>
                 </template>
@@ -341,6 +342,9 @@
                   </div>
                 </template>
               </div>
+              </div>
+           
+
             </div>
           </div>
 
@@ -401,14 +405,14 @@
 
             <div
               class="btn"
-              :class="{ disabled: !order.list.length }"
+              :class="{ disabled: !order.list.length||order.old.list.length }"
               @click="saveOrder"
             >
               存单
             </div>
             <div
               class="btn relative"
-              :class="{ disabled: !prveOrder.list.length }"
+              :class="{ disabled: !prveOrder.list.length ||order.old.list.length }"
               @click="cacheOrderShow"
             >
               取单
@@ -438,12 +442,19 @@
 
             <div class="btn" @click="refNoteShow">整单备注</div>
             <div
+              class="btn"
+              :class="{ disabled:order.placeNum<=0||order.old.selIndex<0 }"
+              @click="orderBtnsClick('returnCart')"
+            >
+              退菜
+            </div>
+            <!-- <div
               class="btn"
               :class="{ disabled: order.old.list.length <= 0 }"
               @click="orderBtnsClick('returnCart')"
             >
               撤单
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="goods">
@@ -1275,10 +1286,8 @@ export default {
       return result.substring(0, result.length - 1);
     },
     allPrice() {
-      const oldPrice = this.order.old.list
+      const oldPrice = this.order.old.list.reduce((a, b) => {
-        .filter((v) => v.isGift !== "true")
+          const bTotal = b.info.filter((v) => v.isGift !== "true").reduce((prve, cur) => {
-        .reduce((a, b) => {
-          const bTotal = b.info.reduce((prve, cur) => {
             return prve + cur.number * cur.salePrice;
           }, 0);
           return a + bTotal;
@@ -1724,6 +1733,7 @@ export default {
       console.log(isNowPay);
       console.log(this.postPay && isNowPay);
       this.createOrder.status = "success";
+      this.getCart()
       if (this.postPay && !isNowPay) {
         this.$notify({
           title: "下单成功",
@@ -2364,16 +2374,25 @@ export default {
     },
     //获取购物车数据
     async getCart() {
+      this.order.list=[]
+      this.order.old.list=[]
       const res = await getCart({
         ...this.order.query,
         masterId: this.masterId,
         tableId: this.table.tableId,
       });
-      if (this.key|| res.records.length) {
+      for(let i in res.records){
-        this.order.old.list = res.records;
+        if(res.records[i].placeNum==0){
-      } else {
+          this.order.list = res.records[i].info;
-        this.order.list = res.records;
+        }else{
+         this.order.old.list.push(res.records[i]);
+        }
       }
+      // if (this.key|| res.records.length) {
+      //   this.order.old.list = res.records;
+      // } else {
+      //   this.order.list = res.records;
+      // }
     },
     showSelGoods(item) {
       console.log(item);
@@ -3316,19 +3335,20 @@ input[type="number"]::-webkit-outer-spin-button {
     border-bottom: 1px solid #ebebeb;
     margin-bottom: 10px;
   }
+  .order-list-all{
+  }
   .order {
     border-radius: 6px;
     display: flex;
-    padding-left: 12px;
     .bottom {
-      left: 0;
-      right: 0;
       box-sizing: border-box;
-      padding: 14px;
+      padding:0 14px 14px 14px;
-      bottom: 0;
       background-color: #fff;
       z-index: 10;
-      border-top: 1px solid #ebebeb;
+      .border-top{
+        padding-top: 14px;
+        border-top: 1px solid #ebebeb;
+      }
     }
 
     .list {
@@ -3385,6 +3405,7 @@ input[type="number"]::-webkit-outer-spin-button {
         color: #fff;
         text-align: center;
         line-height: 17px;
+        z-index: 2;
       }
       &.active {
         background-color: rgba(0, 0, 0, 0.04);

src/views/table/status.js

@@ -13,7 +13,7 @@ export default {
     },
     idle: {
         label: "空闲",
-        type: "#67C23A",
+        type: "#3F9EFF",
     },
     subscribe: {
         label: "预定",

src/views/table/table_list.vue

@@ -41,6 +41,20 @@
         <el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
       </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>
     <div class="head-container">
       <div class="table_list" v-loading="loading">
         <div
@@ -50,7 +64,10 @@
           :class="[item.status]"
         >
           <div class="new-top flex u-row-between">
-            <span class="name">{{ item.name }}</span>
+            <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>
+            </div>
             <el-dropdown trigger="click" @command="tableComman($event, item)">
               <i class="el-icon-more cur-pointer color-fff"></i>
               <el-dropdown-menu slot="dropdown">
@@ -65,8 +82,9 @@
               </el-dropdown-menu>
             </el-dropdown>
           </div>
+          <div class="box">
           <div class="top">
-            <div class="row row1">
+            <!-- <div class="row row1">
               <span>{{ item.name }}</span>
               <div class="state">
                 <span
@@ -79,17 +97,25 @@
                 ></span>
                 {{ status[item.status] ? status[item.status].label : "" }}
               </div>
-            </div>
+            </div> -->
-            <div class="row">
+
+            <!-- <div class="row">
               <el-tag type="warning" size="mini">{{
                 item.type == 0 ? "低消" : "计时"
               }}</el-tag>
               <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
                 item.isPredate == 1 ? "可预约" : "不可预约"
               }}</el-tag>
-            </div>
+            </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'">
@@ -114,31 +140,27 @@
                     >结账</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>
+                  <el-button type="info" 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="">
-              <span class="color-000 u-font-12">{{ item.maxCapacity }}</span>
-            </div> -->
           </div>
-          <!-- <div class="btm">
+          <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">
-            <div class="btm_item" @click="$refs.addTable.show(item)">
+              <img style="width: 16px;height: 16px;filter: contrast(0.5);" src="@/assets/images/perpole.png" alt="">
-              <i class="i el-icon-edit"></i>
+            <span class="u-m-t-4 u-font-12 u-m-l-2">{{item.useNum||0}}/{{ item.maxCapacity }}</span>
             </div>
-            <el-popconfirm
+            <div class="u-flex" v-if="item.status == 'using'">
-              title="确定删除吗？"
+              <img style="width: 16px;height: 16px;filter: contrast(0.5);"  src="@/assets/images/shalou.png" alt="">
-              @confirm="delTableHandle([item.id])"
+            <span class="u-m-t-4 u-font-12 ">{{item.durationTime|formatTime}}</span>
-              style="flex: 1"
+            </div>
-            >
+          </div>
-              <div class="btm_item" slot="reference">
+          </div>
-                <i class="i el-icon-delete"></i>
-              </div>
-            </el-popconfirm>
-          </div> -->
         </div>
         <div class="empty_wrap">
           <el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
@@ -177,6 +199,7 @@ import {
   tbShopAreaDelete,
   tbShopTableDelete,
 } from "@/api/table";
+import dayjs from "dayjs";
 export default {
   components: {
     addEara,
@@ -192,12 +215,18 @@ export default {
       total: 0,
       tableList: [],
       status: $status,
-      selTable:''//当前选中的桌台
+      selTable:'',//当前选中的桌台
+      areaMap:{}
     };
   },
   mounted() {
     this.tbShopAreaGet();
   },
+  filters:{
+    formatTime(time){
+      return dayjs(time).format('HH小时mm分');
+    }
+  },
   methods: {
     tableComman(command, item) {
       if (command == "edit") {
@@ -226,10 +255,11 @@ export default {
       //key isPayOrder结账
       console.log(item)
       this.selTable=item
-      if(item.status=='idle'){
+      const num=item.useNum||0
+      if(item.useNum<=0){
         return this.$refs.refChooseDinersNumber.open()
       }
-      this.$refs.diancan.open(item, key);
+      this.$refs.diancan.open(item, key,num);
     },
     chooseDinersNumberConfirm(num){
       //就餐人数
@@ -290,6 +320,10 @@ export default {
           shopId: localStorage.getItem("shopId"),
         });
         this.tabs = content;
+        this.areaMap=content.reduce((prve,cur)=>{
+          prve[cur.id]=cur.name
+          return prve
+        },{})
         this.tbShopTableGet();
       } catch (error) {
         console.log(error);
@@ -305,6 +339,9 @@ export default {
 }
 </style>
 <style scoped lang="scss">
+  .opacity-0{
+    opacity: 0;
+  }
 .icon {
   margin-left: 10px;
 }
@@ -317,6 +354,18 @@ export default {
   min-width: 60px;
   text-align: center;
 }
+   .state {
+     display: flex;
+     align-items: center;
+
+     .dot {
+       $size: 8px;
+       width: $size;
+       height: $size;
+       border-radius: 50%;
+       margin-right: $size;
+     }
+   }
 .table_list {
   display: flex;
   flex-wrap: wrap;
@@ -334,7 +383,7 @@ export default {
   }
 
   .item {
-    padding: 1px;
+    padding: 1px ;
     overflow: hidden;
     border: 1px solid #ddd;
     display: flex;
@@ -342,7 +391,8 @@ export default {
     justify-content: space-between;
     border-radius: 6px;
     background-color: #1890ff;
-    min-width: 162px;
+    max-width: 172px;
+        min-width: 160px;
     &.using {
       background-color: rgb(250, 85, 85);
     }
@@ -350,6 +400,10 @@ export default {
       background-color: rgb(221, 221, 221);
       filter: grayscale(1);
     }
+    .total-price{
+      line-height: 35px;
+      height: 35px;
+    }
     .new-top {
       height: 30px;
       color: #fff;
@@ -362,12 +416,19 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    .box{
+      background-color: #fff;
+      border-radius:3px 3px 6px 6px;
+    }
+    .bottom{
+      border-top:  1px solid #F7F7FA;;
+      padding: 6px 15px;
+    }
     .top {
-      padding: 20px;
+      padding: 10px;
       background-color: #fff;
       flex: 1;
-      // border-radius: 6px 6px 0 0;
+      border-radius: 3px 3px 0 0;
-      border-radius: 6px;
       .row {
         display: flex;
         gap: 10px;
@@ -376,26 +437,12 @@ export default {
           font-size: 12px;
         }
 
-        &:not(:first-child) {
-          margin-top: 10px;
-        }
 
         &.row1 {
           justify-content: space-between;
           font-size: 14px;
 
-          .state {
-            display: flex;
-            align-items: center;
 
-            .dot {
-              $size: 6px;
-              width: $size;
-              height: $size;
-              border-radius: 50%;
-              margin-right: $size;
-            }
-          }
         }
       }
     }
@@ -435,4 +482,4 @@ export default {
     }
   }
 }
-</style>
+</style>