代客下单增加历史订单，代码优化

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

@@ -0,0 +1,265 @@
+<template>
+  <div
+    class="flex order-item relative"
+    :class="{ active: selIndex === index }"
+    @click="itemClick"
+  >
+    <span class="absolute pack" v-if="item.isPack === 'true'"> 包 </span>
+    <div class="flex">
+      <div class="img">
+        <img :src="item.coverImg" class="" alt="" />
+      </div>
+      <div class="good-info">
+        <div class="flex lh-16">
+          <div class="name">{{ item.name }}</div>
+          <span class="good_info_discount" v-if="item.isGift === 'true'"
+            >赠</span
+          >
+        </div>
+        <div v-if="item.specSnap" class="specSnap">
+          {{ item.specSnap }}
+        </div>
+      </div>
+    </div>
+    <div class="flex">
+      <div class="order-number-box">
+        <div class="" style="">X{{ item.number }}</div>
+        <div class="absolute" v-if="canChangeNumber">
+          <div class="order-input-number">
+            <i class="icon-remove" @click="changeOrderNumber(true)"></i>
+            <div style="width: 40px" class="number-box">
+              <el-input
+                :min="0"
+                type="number"
+                @input="cartGoodsNumberInput"
+                @change="cartGoodsNumberChange"
+                v-model="number"
+                placeholder="0"
+              ></el-input>
+            </div>
+            <i
+              class="el-icon-circle-plus icon-add"
+              @click="changeOrderNumber(false)"
+            ></i>
+          </div>
+        </div>
+      </div>
+
+      <div class="color-333 total-price">
+        <div v-if="item.isGift === 'true'">￥0</div>
+        <div :class="{ 'free-price': item.isGift === 'true' }">
+          ￥{{ item.salePrice }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    //是否允许改变梳理
+    canChangeNumber: {
+      type: Boolean,
+      default: true,
+    },
+    item: {
+      type: Object,
+      default: () => {
+        return {
+          number: 0,
+        };
+      },
+    },
+    selIndex: {
+      type: Number,
+      default: 0,
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      number: 0,
+    };
+  },
+  watch: {
+    "item.number": function (val) {
+      this.number = val;
+      // this.$emit('changeOrderNumber',this.index)
+    },
+  },
+  mounted() {
+    this.number = this.item.number;
+  },
+  methods: {
+    //购物车商品输入框数量改变
+    cartGoodsNumberChange(newval) {
+      if (newval <= 0) {
+        item.number = 1;
+      }
+      newval = `${newval}`.split(".")[0] * 1;
+      this.number = newval;
+      this.$emit("cartGoodsNumberChange",newval, this.index);
+
+    },
+    //购物车商品输入框数量输入
+    cartGoodsNumberInput(newval) {
+      if (newval <= 0) {
+        return this.number =1
+      }
+      newval = `${newval}`.split(".")[0] * 1;
+      this.number = newval;
+      this.$emit("cartGoodsNumberInput",newval, this.index);
+    },
+    changeOrderNumber(isReduce) {
+      this.$emit("changeOrderNumber", this.index, isReduce);
+    },
+    itemClick() {
+      this.$emit("itemClick", this.index,this.canChangeNumber);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .number-box .el-input__inner {
+  border: none;
+}
+::v-deep .el-button--text {
+  color: #000;
+}
+::v-deep .number-box .el-input__inner {
+  border: none;
+  padding: 0 4px;
+  text-align: center;
+}
+.icon-remove {
+  border: 1px solid #d8d8d8;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 1px;
+    background: #999;
+  }
+}
+.icon-add {
+  color: rgb(34, 191, 100);
+  font-size: 22px;
+  cursor: pointer;
+}
+.order-item {
+  padding: 4px;
+  border-radius: 2px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(0, 0, 0, 0);
+  transition: all 0.3s;
+  .pack {
+    right: 100%;
+    width: 18px;
+    height: 18px;
+    background: #35ac6a;
+    border-radius: 4px 0 4px 0;
+    font-size: 12px;
+    color: #fff;
+    text-align: center;
+    line-height: 17px;
+  }
+  &.active {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  .total-price {
+    width: 94px;
+    text-align: right;
+  }
+
+  .good-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 70px;
+
+    .specSnap {
+      color: #999;
+      font-size: 12px;
+      margin-top: 3px;
+    }
+  }
+
+  .name {
+    font-size: 13px;
+    text-align: left;
+    color: #212121;
+    overflow: hidden;
+  }
+
+  .img {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    margin-right: 10px;
+
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.order-number-box {
+  position: relative;
+
+  .absolute {
+    width: 60px;
+    height: 40px;
+    right: -30px;
+    top: -12px;
+    position: absolute;
+
+    .order-input-number {
+      position: absolute;
+      right: -6px;
+      top: 0;
+      justify-content: center;
+      align-items: center;
+      display: none;
+      background-color: #fff;
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+      padding: 9px 6px;
+      background-color: #fff;
+      height: 40px;
+    }
+
+    &:hover .order-input-number {
+      display: flex;
+    }
+  }
+}
+.good_info_discount {
+  height: 16px;
+  padding: 0 3px;
+  color: #ff3f3f;
+  background-color: rgba(255, 63, 63, 0.1);
+  border-radius: 2px;
+  margin-left: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+</style>

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

@@ -260,7 +260,7 @@
                   <div class="flex-1">
                     <el-button
                       size="medium"
-                      :disabled="!order.list.length"
+                      :disabled="!order.list.length && !order.old.list.length"
                       @click="toCreateOrder(true)"
                     >
                       去结账
@@ -270,75 +270,46 @@
               </div>
             </div>
             <div class="list">
-              <div
+              <!-- 当前购物车列表 -->
+              <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"
-                class="flex order-item relative"
+                  :index="index"
-                :class="{ active: order.selIndex === index }"
+                  :item="item"
-                @click="changeOrderSel(index)"
+                  :selIndex="order.selIndex"
-              >
+                ></cart-item>
-                <span class="absolute pack" v-if="item.isPack === 'true'">
+              </template>
-                  包
-                </span>
-                <div class="flex">
-                  <div class="img">
-                    <img :src="item.coverImg" class="" alt="" />
-                  </div>
-                  <div class="good-info">
-                    <div class="flex lh-16">
-                      <div class="name">{{ item.name }}</div>
-                      <span
-                        class="good_info_discount"
-                        v-if="item.isGift === 'true'"
-                        >赠</span
-                      >
-                    </div>
-                    <div v-if="item.specSnap" class="specSnap">
-                      {{ item.specSnap }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex">
-                  <div class="order-number-box">
-                    <div class="color-999" style="">X{{ item.number }}</div>
-                    <div class="absolute">
-                      <div class="order-input-number">
-                        <i
-                          class="icon-remove"
-                          @click="changeOrderNumber(index, '-')"
-                        ></i>
-                        <div style="width: 40px" class="number-box">
-                          <el-input
-                            :min="0"
-                            type="number"
-                            @input="cartGoodsNumberInput($event, item)"
-                            @change="cartGoodsNumberChange($event, item)"
-                            v-model="item.number"
-                            placeholder="0"
-                          ></el-input>
-                        </div>
-                        <i
-                          class="el-icon-circle-plus icon-add"
-                          @click="changeOrderNumber(index)"
-                        ></i>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="color-333 total-price">
-                    ￥{{ item.salePrice }}
-                  </div>
-                </div>
-              </div>
-
               <div v-if="order.gift.list.length">
                 <div class="carts_list_title">以下是优惠菜品</div>
               </div>
 
               <div v-if="!order.list.length">
-                <el-empty description="点餐列表为空"></el-empty>
+                <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 }}
@@ -346,7 +317,10 @@
           </div>
 
           <div class="controls">
-            <div class="numberbox">
+            <div
+              class="numberbox"
+              :class="{ 'cur-pointer': order.old.selIndex < 0 }"
+            >
               <div class="reduce" @click="changeOrderGoodsNumber('-')">-</div>
               <div class="input relative">
                 <div
@@ -399,14 +373,14 @@
 
             <div
               class="btn"
-              :class="{ disabled: !order.list.length }"
+              :class="{ disabled: !order.list.length ||key}"
               @click="saveOrder"
             >
               存单
             </div>
             <div
               class="btn relative"
-              :class="{ disabled: !prveOrder.list.length }"
+              :class="{ disabled: !prveOrder.list.length ||key}"
               @click="cacheOrderShow"
             >
               取单
@@ -699,12 +673,16 @@
                       }}
                     </div>
                   </div>
-                  <!---->
+                  <div class="detail_form_item" v-if="createOrder.data.packFee">
+                    <div class="left">打包费</div>
+                    <div class="right">
+                      ￥{{ createOrder.data.packFee || "0.00" }}
+                    </div>
+                  </div>
                   <div class="detail_form_item">
                     <div class="left">桌位费/附加费</div>
                     <div class="right">￥0.00</div>
                   </div>
-                  <!----><!----><!---->
                   <div class="detail_form_item">
                     <div class="left">总价</div>
                     <div class="right">
@@ -772,27 +750,6 @@
               >
                 {{ val.name }}
               </el-button>
-              <!-- <el-tag
-                v-if="val === item.sel"
-                size="medium"
-                :disabled="item.disabled"
-                @click="changeTagSel(index, val)"
-                effect="dark"
-                type="success"
-              >
-
-                {{ val }}
-              </el-tag>
-              <el-tag
-                v-else
-                size="medium"
-                type="success"
-                 :disabled="item.disabled"
-                @click="changeTagSel(index, val)"
-                effect="light"
-              >
-                {{ val }}
-              </el-tag> -->
             </span>
           </div>
         </div>
@@ -804,7 +761,7 @@
             <div class="price">￥{{ skuGoods.data.salePrice | to2 }}</div>
             <div class="sku-group-text">
               <span> {{ skuText }}</span>
-              <span>库存：{{ skuGoods.data.stockNumber || "" }}</span>
+              <span>库存：{{ skuGoods.data.stockNumber || 0 }}</span>
             </div>
           </div>
           <div class="flex">
@@ -828,6 +785,14 @@
             disabled
           >
             已下架
+          </button>
+          <template v-else>
+            <button
+            class="my-btn disabled flex-1"
+            v-if=" skuGoods.data.stockNumber<=0"
+            disabled
+          >
+            库存不足
           </button>
             <button
             class="my-btn success flex-1"
@@ -837,6 +802,10 @@
           >
             确定
           </button>
+          
+           
+          </template>
+         
         </div>
       </div>
     </el-dialog>
@@ -989,9 +958,11 @@
 </template>
 
 <script>
+import _ from "lodash";
 import chooseUser from "./choose-user.vue";
 import payType from "./pay-type.vue";
 import chooseTable from "./table-diancan-components/choose-table-master.vue";
+import cartItem from "./table-diancan-components/cart-item.vue";
 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";
@@ -1020,7 +991,6 @@ import {
   generateCombinations,
   returnReverseVal,
 } from "./util.js";
-
 export default {
   components: {
     chooseUser,
@@ -1030,9 +1000,12 @@ export default {
     moneyKeyboard,
     scanPay,
     moneyDiscount,
+    cartItem,
   },
   data() {
     return {
+      //台桌点餐页面打开时带来的参数 isAddGoods 加菜    isPayOrder结账
+      key: "",
       //是否是从挂单里取出来的订单
       isPrverOrder: false,
       //是否全屏
@@ -1113,6 +1086,11 @@ export default {
           list: [],
           selIndex: -1,
         },
+        //已下单菜品
+        old: {
+          list: [],
+          selIndex: -1,
+        },
         query: {
           page: 1,
           size: 20,
@@ -1209,17 +1187,26 @@ export default {
       return result.substring(0, result.length - 1);
     },
     allPrice() {
+      const oldPrice = this.order.old.list
+        .filter((v) => v.isGift !== "true")
+        .reduce((a, b) => {
+          return a + b.number * b.salePrice;
+        }, 0);
       const price = this.order.list
         .filter((v) => v.isGift !== "true")
         .reduce((a, b) => {
           return a + b.number * b.salePrice;
         }, 0);
-      return price.toFixed(2);
+      return (oldPrice + price).toFixed(2);
     },
     allNumber() {
-      return this.order.list.reduce((a, b) => {
+      const oldNumber = this.order.old.list.reduce((a, b) => {
         return a + b.number * 1;
       }, 0);
+      const cartNumber = this.order.list.reduce((a, b) => {
+        return a + b.number * 1;
+      }, 0);
+      return oldNumber + cartNumber;
     },
     selGoodsHide() {
       this.selGoods.show = false;
@@ -1252,10 +1239,10 @@ export default {
     },
   },
   watch: {
-    "masterId": function (val) {
+    masterId: function (val) {
       console.log(val);
     },
-    "isCreateOrder": function (val) {
+    isCreateOrder: function (val) {
       if (!val) {
         this.createOrder.discount = 1;
       }
@@ -1351,7 +1338,7 @@ export default {
         // this.order.number = this.order.list[this.order.selIndex].number;
       }
     },
-    "order.number": function (newval) {
+    "order.number": _.debounce(function (newval) {
       if (this.order.list.length <= 0 || this.order.selIndex < 0) {
         return;
       }
@@ -1360,23 +1347,27 @@ export default {
       let item = this.order.list[this.order.selIndex];
       console.log(item.specSnap);
       const { productId, skuId, isPack, isGift, number } = item;
+      const oldGoods = this.order.old.list.find((v) => {
+        return v.productId === productId && v.skuId === skuId;
+      });
       $updateCart({
         cartId: item.id,
         productId,
         skuId,
         tableId: this.table.tableId,
-        num: this.order.number, // 0会删除此商品
+        num: this.order.number + (oldGoods ? oldGoods.number : 0), // 0会删除此商品
       }).then((res) => {
         this.$set(this.order.list, this.order.selIndex, {
           ...res,
           specSnap: item.specSnap,
+          number: this.order.number,
         });
       });
       return;
       this.updateOrder({
         num: newval, // 0会删除此商品
       });
-    },
+    }, 30),
     "goods.query.productId": function (newval) {
       if (!this.$goodsData) {
         return;
@@ -1416,23 +1407,15 @@ export default {
       isShow ? this.$refs[key].open(data) : this.$refs[key].close(data);
     },
     //购物车商品输入框数量输入
-    cartGoodsNumberInput(newval, item) {
+    cartGoodsNumberInput(newval, index) {
-      if (newval <= 0) {
+      const item = this.order.list[index];
-        return (this.order.cacheNumber = 1);
+      console.log(item);
-      }
-      newval = `${newval}`.split(".")[0] * 1;
       this.order.cacheNumber = newval;
-      this.$nextTick(() => {
       item.number = newval;
-      });
     },
     //购物车商品输入框数量改变
-    cartGoodsNumberChange(newval, item) {
+    cartGoodsNumberChange(newval, index) {
-      console.log(newval);
+      const item = this.order.list[index];
-      if (newval <= 0) {
-        item.number = 1;
-        return (this.order.number = 1);
-      }
       newval = `${newval}`.split(".")[0] * 1;
       console.log(newval);
       this.order.cacheNumber = newval;
@@ -1843,6 +1826,7 @@ export default {
       }
       this.order.selIndex = index;
       console.log(index);
+      console.log(isReduce);
       const item = this.order.list[index];
       const mumber = item.number * 1;
       const newval = mumber + (isReduce ? -1 : 1);
@@ -1943,10 +1927,16 @@ export default {
         id: "",
         name: "全部",
       });
-      console.log(this.category.list);
     },
+    //改变购物车菜品选中
     changeOrderSel(index) {
       this.order.selIndex = index;
+      this.order.old.selIndex = -1;
+    },
+    //改变已下单菜品选中
+    changeOrderOldSel(index) {
+      this.order.old.selIndex = index;
+      this.order.cacheNumber = this.order.old.list[index].number;
     },
     chooseSkuConfirm() {
       if (this.timer) {
@@ -2003,20 +1993,34 @@ export default {
       });
       const orderGoods =
         orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
-      console.log(orderGoods);
+      const oldOrderGoods = this.order.old.list.find((V) => {
-      if (orderGoods) {
+        return V.skuId == item.id && V.productId == this.selGoods.data.id;
+      });
+      if (orderGoods || oldOrderGoods) {
         //更新
+        const newNum =
+          (oldOrderGoods ? oldOrderGoods.number : 0) +
+          (orderGoods ? orderGoods.number * 1 : 0) +
+          this.skuGoods.number;
         res = await $updateCart({
-          cartId: orderGoods.id,
+          cartId: orderGoods ? orderGoods.id : oldOrderGoods.id,
           productId: this.selGoods.data.id,
           skuId: item.id,
           tableId: this.table.tableId,
-          num: orderGoods.number * 1 + this.skuGoods.number, // 0会删除此商品
+          num: newNum, // 0会删除此商品
           isPack: false, // 是否打包
         });
+        if (this.key && orderGoodsIndex == -1) {
+          this.orderListPush({
+            ...res,
+            specSnap: name,
+            number: this.skuGoods.number,
+          });
+        } else {
           orderGoods.number += this.skuGoods.number;
           this.order.selIndex = orderGoodsIndex;
           this.order.cacheNumber = orderGoods.number;
+        }
       } else {
         //添加
         res = await addCart({
@@ -2091,14 +2095,14 @@ export default {
             prve[i] = matchArr
               .filter((v) => v.specSnap.match(i))
               .every((v) => {
-                return (
+                // return isCanBuy(v,this.selGoods.data.isStock)
-                  !v.isGrounding || v.isPauseSale == 1 || v.stockNumber <= 0
+                return isCanBuy(v)
-                );
               });
           }
         }
         return prve;
       }, {});
+      console.log(includeSkuMap)
       for (let i in includeSkuMap) {
         for (let k in skuList) {
           const index = skuList[k].valueArr.findIndex((val) => val === i);
@@ -2136,6 +2140,9 @@ export default {
       this.order.query.page = 1;
       this.goods.total = 0;
       this.order.list = [];
+      this.order.selIndex = -1;
+      this.order.old.list = [];
+      this.order.old.selIndex = -1;
       this.isCreateOrder = false;
       this.note.content = "";
       this.vipUser = { id: "" };
@@ -2143,6 +2150,7 @@ export default {
       this.note.content = "";
       this.isPrverOrder = false;
       this.createOrder.discount = 1;
+      this.key = "";
     },
     //获取购物车数据
     async getCart() {
@@ -2151,7 +2159,11 @@ export default {
         masterId: this.masterId,
         tableId: this.table.tableId,
       });
+      if (this.key) {
+        this.order.old.list = res.records;
+      } else {
         this.order.list = res.records;
+      }
       this.order.total = res.total;
     },
     showSelGoods(item) {
@@ -2392,11 +2404,19 @@ export default {
       this.goods.total = res.total;
       this.$goodsData = goods;
     },
-    async open(item) {
+    async open(item, key) {
       this.table = item;
+      this.key = key;
+      if (this.key == "isPayOrder") {
+        this.isCreateOrder = true;
+      }
+      this.informationdialogshow;
       this.informationdialogshow = true;
       const res = await this.getMasterId();
       this.masterId = res.masterId;
+      if (this.key == "isPayOrder") {
+        this.toCreateOrder(true);
+      }
       this.getCart();
       this.getGoods();
       this.getCategory();
@@ -2484,7 +2504,9 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 0 4px;
   text-align: center;
 }
-
+::v-deep .el-empty {
+  padding: 0;
+}
 ::v-deep .el-button--success:not(.is-disabled) {
   background: #22bf64;
   color: #fff;
@@ -2647,25 +2669,6 @@ input[type="number"]::-webkit-outer-spin-button {
   }
 }
 
-.color-333 {
-  color: #333;
-}
-
-.color-666 {
-  color: #666;
-}
-.ft-13 {
-  font-size: 13px;
-}
-
-.color-000 {
-  color: #000;
-}
-
-.color-999 {
-  color: #999;
-}
-
 .ft-12 {
   font-size: 12px;
 }
@@ -2973,6 +2976,7 @@ input[type="number"]::-webkit-outer-spin-button {
   color: #888;
   margin: 0 0 10px 7px;
 }
+
 .numberbox {
   border: 1px solid #dcdfe6;
   background-color: #fff;
@@ -2982,7 +2986,6 @@ input[type="number"]::-webkit-outer-spin-button {
   text-align: center;
   border-radius: 4px;
   position: relative;
-  cursor: pointer;
   margin: 0 0 10px;
 
   .reduce,