fix: 订单管理页面增加退菜功能，修复代客下单清空后无法正常添加商品

src/store/modules/carts.ts

@@ -356,7 +356,6 @@ export const useCartsStore = defineStore("carts", () => {
       originAmount: 0
     }
     vipUser.value = {}
-    table_code.value = ''
   }
 
   // 寻找套餐商品sku

src/views/order/index/components/detail.vue

@@ -110,7 +110,18 @@
               <!-- <el-table-column type="selection" width="55" /> -->
               <el-table-column label="数量" type="selection">
                 <template v-slot="scope">
-                  <el-checkbox v-model="scope.row.checked" />
+                  <div v-if="detail.status == 'unpaid'">
+                    <el-checkbox
+                      v-if="scope.row.num - scope.row.returnNum > 0"
+                      v-model="scope.row.checked"
+                    />
+                  </div>
+                  <div v-else>
+                    <el-checkbox
+                      v-if="scope.row.num - scope.row.refundNum > 0"
+                      v-model="scope.row.checked"
+                    />
+                  </div>
                 </template>
               </el-table-column>
               <el-table-column label="商品">
@@ -141,20 +152,35 @@
               <el-table-column label="实付">
                 <template v-slot="scope">￥{{ scope.row.payAmount }}</template>
               </el-table-column>
-              <el-table-column label="可退款数量" align="center">
+
+              <el-table-column v-if="detail.status == 'unpaid'" label="可退菜数量" align="center">
                 <template v-slot="scope">
                   <el-input-number
                     v-if="scope.row.checked"
+                    :min="0"
+                    style="width: 120px"
+                    v-model="scope.row.selNumber"
+                    :max="scope.row.num - scope.row.returnNum"
+                  ></el-input-number>
+                  <span class="" v-else>{{ scope.row.num - scope.row.returnNum }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column v-else label="可退款数量" align="center">
+                <template v-slot="scope">
+                  <el-input-number
+                    v-if="scope.row.checked"
+                    :min="0"
                     style="width: 120px"
                     v-model="scope.row.selNumber"
                     :max="scope.row.num - scope.row.refundNum"
                   ></el-input-number>
-                  <span class="" v-else>0</span>
+                  <span class="" v-else>{{ scope.row.num - scope.row.refundNum }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="已退" width="100" align="center">
                 <template v-slot="scope">
-                  <span>{{ scope.row.refundNum }}</span>
+                  <span v-if="detail.status == 'unpaid'">{{ scope.row.returnNum }}</span>
+                  <span v-else>{{ scope.row.refundNum }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="操作">
@@ -173,18 +199,19 @@
                   <template v-if="detail.status == 'unpaid'">
                     <el-button
                       v-if="canTuicai(scope.row)"
-                      type="text"
+                      link
                       size="small"
-                      @click="tuiCai(scope.row)"
+                      @click="tuicai(scope.row)"
                     >
                       <span>退菜</span>
                     </el-button>
-                    <span class="color-999" v-if="scope.row == 'return'">已退菜</span>
+                    <span class="color-999" v-else>已退菜</span>
                   </template>
                 </template>
               </el-table-column>
             </el-table>
           </template>
+          <!-- 退款 -->
           <div
             class="u-p-20 u-flex u-row-right"
             v-if="detail.status !== 'refund' && detail.status !== 'unpaid'"
@@ -196,9 +223,19 @@
             ></el-checkbox>
             <el-button type="danger" class="u-m-l-20" @click.stop="tuikuan('all')">退款</el-button>
           </div>
+          <!-- 退菜 -->
+          <div class="u-p-20 u-flex u-row-right" v-if="detail.status == 'unpaid'">
+            <el-checkbox
+              v-model="allSelected"
+              @change="allSelectedChange"
+              label="全选"
+            ></el-checkbox>
+            <el-button type="danger" class="u-m-l-20" @click.stop="tuicai('all')">退菜</el-button>
+          </div>
         </div>
       </div>
     </el-drawer>
+    <!-- 退款 -->
     <return-money
       :modal="false"
       ref="refReturnMoney"
@@ -206,11 +243,14 @@
       :goods="selGoods"
       @confirm="refReturnMoneyConfirm"
     ></return-money>
+    <!-- 退菜 -->
+    <return-cart ref="refReturnCart" @confirm="refReturnCartConfirm"></return-cart>
   </div>
 </template>
 
 <script>
 import returnMoney from "./return-money.vue";
+import returnCart from "./return-cart.vue";
 import { ElMessage } from "element-plus";
 import { returnOptionsLabel } from "../config/config";
 import * as $util from "../order_goods_util.js";
@@ -221,6 +261,7 @@ import dayjs from "dayjs";
 export default {
   components: {
     returnMoney,
+    returnCart,
   },
   data() {
     return {
@@ -366,10 +407,9 @@ export default {
       this.tbOrderInfoDetail(this.detail.id);
     },
     async refReturnCartConfirm(e) {
-      const res = await $returnCart({
+      const res = await orderApi.refundOrder({
         ...e,
-        cartId: this.selGoods.cartId,
+        orderId: this.detail.id,
-        tableId: this.detail.tableId,
       });
       ElMessage.success("退菜成功");
       this.update();
@@ -393,10 +433,24 @@ export default {
       this.selGoods = item;
       this.$refs.refReturnMoney.open(arr, this.detail);
     },
-    tuiCai(item) {
+    tuicai(item) {
-      this.selGoods = item;
+      let arr = [];
-      console.log(item);
+      if (item === "all") {
-      this.$refs.refReturnCart.open(item);
+        for (let i in this.detail.detailMap) {
+          this.detail.detailMap[i].map((v) => {
+            if (v.checked && v.selNumber) {
+              arr.push(v);
+            }
+          });
+        }
+      } else {
+        arr = [item];
+      }
+      if (arr.length == 0) {
+        return ElMessage.error("请选择要退菜的商品和数量");
+      }
+      console.log(arr);
+      this.$refs.refReturnCart.open(arr, this.detail);
     },
 
     // 获取订单详情
@@ -411,10 +465,11 @@ export default {
         }
         for (let i in res.detailMap) {
           res.detailMap[i] = res.detailMap[i].map((v) => {
+            console.log(v.num - (res.status == "unpaid" ? v.returnNum : v.refundNum));
             return {
               ...v,
               checked: false,
-              selNumber: v.num - v.returnNum,
+              selNumber: v.num - (res.status == "unpaid" ? v.returnNum : v.refundNum),
             };
           });
         }

src/views/order/index/components/return-cart.vue

@@ -0,0 +1,195 @@
+<template>
+  <el-dialog title="退菜" width="410px" v-model="show" @close="reset" :modal="modal">
+    <div
+      class="u-p-b-16 u-m-t-10 flex u-row-between border-bottom"
+      v-for="(goods, index) in goodsList"
+      :key="index"
+    >
+      <div class="">
+        <div>菜品名称</div>
+        <div class="u-m-t-10">
+          {{ goods.productName || "" }}
+        </div>
+      </div>
+      <div class="">
+        <div>退菜数量</div>
+        <div class="u-flex u-m-t-10">
+          <el-input-number
+            :min="1"
+            v-model="goods.selNumber"
+            :max="goods.num - goods.refundNum"
+          ></el-input-number>
+        </div>
+      </div>
+    </div>
+
+    <div class="u-m-t-20">
+      <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(tag)"
+        :key="index"
+        :class="{ active: tag.checked }"
+      >
+        {{ tag.label }}
+      </div>
+    </div>
+    <div class="u-m-t-20">
+      <el-input v-model="note" placeholder="请输入自定义备注"></el-input>
+    </div>
+    <div class="u-m-t-20">
+      <el-checkbox v-model="isPrint">打印退菜单</el-checkbox>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+  <script>
+import { ElMessage } from "element-plus";
+export default {
+  props: {
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      max: 1,
+      number: 1,
+      isPrint: false,
+      tagSel: -1,
+      show: false,
+      tags: [
+        { label: "不想要了", checked: false },
+        { label: "食材不足", checked: false },
+        { label: "等待时间过长", checked: false },
+      ],
+      note: "",
+      goodsList: [],
+      orderDetail: {},
+    };
+  },
+  computed: {
+    isSeatFee() {
+      return false;
+    },
+  },
+  methods: {
+    changeSel(item) {
+      item.checked = !item.checked;
+    },
+    reset() {
+      this.note = "";
+      this.number = 1;
+      this.tags.map((v) => {
+        v.checked = false;
+      });
+      console.log(this.number);
+    },
+    delTag(index) {
+      this.tags.splice(index, 1);
+    },
+    addNote(tag) {
+      if (this.note.length <= 0) {
+        return (this.note = tag);
+      }
+      this.note = tag + "," + this.note;
+    },
+    open(arr, detail) {
+      console.log(arr);
+      console.log(detail);
+      this.goodsList = arr;
+      this.orderDetail = detail;
+      this.show = true;
+      if (item.productId != "-999") {
+        this.number = 1;
+      } else {
+        this.number = this.max;
+      }
+    },
+    close() {
+      this.show = false;
+      this.number = 1;
+    },
+    confirm() {
+      const selTag = this.tags
+        .filter((item) => item.checked)
+        .map((item) => item.label)
+        .join(",");
+      const note = selTag + (this.note.length > 0 ? "," + this.note : "");
+      console.log(note);
+      if (!note) {
+        return ElMessage.error("请输入退菜原因");
+      }
+      this.$emit("confirm", {
+        refundReason: note,
+        refundAmount: 0,
+        refundDetails: this.goodsList
+          .filter((v) => v.selNumber)
+          .map((v) => {
+            return {
+              id: v.id,
+              num: v.selNumber,
+              returnAmount: 0,
+            };
+          }),
+      });
+      this.close();
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+:deep(.el-dialog__body) {
+  margin-bottom: 14px;
+  margin-top: 14px;
+  padding: 0 20px;
+}
+: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;
+    }
+  }
+}
+:deep(.number-box .el-input__inner::-webkit-inner-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+:deep(.number-box .el-input__inner::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

src/views/order/index/order_goods_util.js

@@ -13,7 +13,7 @@ export function returnPackFee(arr) {
 }
 
 export function canTuicai(orderInfo, item) {
-  return true;
+  return orderInfo.status == "unpaid" && item.num - item.returnNum > 0;
 }
 export function canTuiKuan(orderInfo, item) {
   return (orderInfo.status != "refund" && orderInfo.status != "unpaid") || item.status != "refund";