优化商品编辑

src/views/home/components/cartOperation.vue

@@ -1,89 +1,167 @@
 <template>
     <div class="operation_wrap">
-        <div class="item"
-            :class="{ disabled: goodsStore.cartList.length && (!goodsStore.cartList[goodsStore.cartActiveIndex].id || (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1)) }"
-            @click="numberChange('sub')">
-            <el-icon class="icon">
-                <SemiSelect />
-            </el-icon>
-        </div>
-        <div class="item number"
-            :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1) }"
-            @click="showEditNumber">
-            <el-text class="num">
-                {{ formatDecimal(goodsStore.cartList.length ? +goodsStore.cartList[goodsStore.cartActiveIndex].number :
-                    1, 2, true) }}
-            </el-text>
-        </div>
-        <div class="item"
-            :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1) }"
-            @click="numberChange('add')">
-            <el-icon class="icon add">
-                <CloseBold />
-            </el-icon>
-        </div>
-        <div class="item"
-            :class="{ disabled: (goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].id && goodsStore.cartList[goodsStore.cartActiveIndex].goods_type != 'sku' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type != 1) }"
-            @click="showSkuModal">
-            <el-icon class="icon">
-                <Filter />
-            </el-icon>
-            <el-text class="t">规格</el-text>
-        </div>
-        <div class="item"
-            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary || goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_gift }"
-            @click="showDiscountModalHandle">
-            <el-icon class="icon">
-                <PriceTag />
-            </el-icon>
-            <el-text class="t">改价</el-text>
-        </div>
-        <div class="item"
-            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_gift }"
-            @click="giftPackHandle('is_gift')">
-            <el-icon class="icon">
-                <ShoppingBag />
-            </el-icon>
-            <el-text class="t">赠送</el-text>
-        </div>
-        <div class="item" @click="packHandle">
-            <el-icon class="icon">
-                <Box />
-            </el-icon>
-            <el-text class="t">打包</el-text>
-        </div>
-        <div class="item"
-            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_print == 0 }"
-            @click="giftPackHandle('is_print')">
-            <el-icon class="icon">
-                <DishDot />
-            </el-icon>
-            <el-text class="t">免厨</el-text>
-        </div>
-        <div class="item" @click="deleteHandle">
-            <el-icon class="icon">
-                <Delete />
-            </el-icon>
-            <el-text class="t">删除</el-text>
-        </div>
-        <!-- <div class="item" @click="props.item.id && emit('pending', props.item)">
+        <template v-if="goodsStore.cartType == 'cart'">
+            <div class="item"
+                :class="{ disabled: goodsStore.cartList.length && (!goodsStore.cartList[goodsStore.cartActiveIndex].id || (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1)) }"
+                @click="numberChange('sub')">
+                <el-icon class="icon">
+                    <SemiSelect />
+                </el-icon>
+            </div>
+            <div class="item number"
+                :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1) }"
+                @click="showEditNumber">
+                <el-text class="num">
+                    {{ formatDecimal(goodsStore.cartList.length ?
+                        +goodsStore.cartList[goodsStore.cartActiveIndex].number :
+                        1, 2, true) }}
+                </el-text>
+            </div>
+            <div class="item"
+                :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1) }"
+                @click="numberChange('add')">
+                <el-icon class="icon add">
+                    <CloseBold />
+                </el-icon>
+            </div>
+            <div class="item"
+                :class="{ disabled: (goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].id && goodsStore.cartList[goodsStore.cartActiveIndex].goods_type != 'sku' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type != 1) }"
+                @click="showSkuModal">
+                <el-icon class="icon">
+                    <Filter />
+                </el-icon>
+                <el-text class="t">规格</el-text>
+            </div>
+            <div class="item"
+                :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary || goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_gift }"
+                @click="showDiscountModalHandle">
+                <el-icon class="icon">
+                    <PriceTag />
+                </el-icon>
+                <el-text class="t">改价</el-text>
+            </div>
+            <div class="item"
+                :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_gift }"
+                @click="giftPackHandle('is_gift')">
+                <el-icon class="icon">
+                    <ShoppingBag />
+                </el-icon>
+                <el-text class="t">赠送</el-text>
+            </div>
+            <div class="item" @click="packHandle">
+                <el-icon class="icon">
+                    <Box />
+                </el-icon>
+                <el-text class="t">打包</el-text>
+            </div>
+            <div class="item"
+                :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_print == 0 }"
+                @click="giftPackHandle('is_print')">
+                <el-icon class="icon">
+                    <DishDot />
+                </el-icon>
+                <el-text class="t">免厨</el-text>
+            </div>
+            <div class="item" @click="deleteHandle">
+                <el-icon class="icon">
+                    <Delete />
+                </el-icon>
+                <el-text class="t">删除</el-text>
+            </div>
+            <!-- <div class="item" @click="props.item.id && emit('pending', props.item)">
+                <el-icon class="icon">
+                    <Sell />
+                </el-icon>
+                <el-text class="t">挂单</el-text>
+            </div> -->
+            <div class="item" @click="tableMergingRef.show()">
+                <el-icon class="icon">
+                    <EditPen />
+                </el-icon>
+                <el-text class="t">转桌</el-text>
+            </div>
+            <div class="item" @click="clearCart">
+                <el-icon class="icon">
+                    <RefreshRight />
+                </el-icon>
+                <el-text class="t">清空</el-text>
+            </div>
+        </template>
+        <template v-if="goodsStore.cartType == 'order'">
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <SemiSelect />
+                </el-icon>
+            </div>
+            <div class="item number disabled">
+                <el-text class="num">
+                    {{ formatDecimal(goodsStore.cartList.length ?
+                        +goodsStore.cartList[goodsStore.cartActiveIndex].number :
+                        1, 2, true) }}
+                </el-text>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon add">
+                    <CloseBold />
+                </el-icon>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <Filter />
+                </el-icon>
+                <el-text class="t">规格</el-text>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <PriceTag />
+                </el-icon>
+                <el-text class="t">改价</el-text>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <ShoppingBag />
+                </el-icon>
+                <el-text class="t">赠送</el-text>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <Box />
+                </el-icon>
+                <el-text class="t">打包</el-text>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <DishDot />
+                </el-icon>
+                <el-text class="t">免厨</el-text>
+            </div>
+            <div class="item"
+                :class="{ disabled: goodsStore.cartOrderItem.returnNum >= goodsStore.cartOrderItem.number }"
+                @click="returnOrderItemHandle">
+                <el-icon class="icon">
+                    <Delete />
+                </el-icon>
+                <el-text class="t">退菜</el-text>
+            </div>
+            <!-- <div class="item" @click="props.item.id && emit('pending', props.item)">
             <el-icon class="icon">
                 <Sell />
             </el-icon>
             <el-text class="t">挂单</el-text>
         </div> -->
-        <div class="item" @click="tableMergingRef.show()">
-            <el-icon class="icon">
-                <EditPen />
-            </el-icon>
-            <el-text class="t">转桌</el-text>
-        </div>
-        <div class="item" @click="clearCart">
-            <el-icon class="icon">
-                <RefreshRight />
-            </el-icon>
-            <el-text class="t">清空</el-text>
-        </div>
+            <div class="item" @click="tableMergingRef.show()">
+                <el-icon class="icon">
+                    <EditPen />
+                </el-icon>
+                <el-text class="t">转桌</el-text>
+            </div>
+            <div class="item disabled">
+                <el-icon class="icon">
+                    <RefreshRight />
+                </el-icon>
+                <el-text class="t">清空</el-text>
+            </div>
+        </template>
     </div>
     <takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
     <!-- 购物车选择规格 -->
@@ -147,6 +225,27 @@
     </el-dialog>
     <!-- 合并/转桌 -->
     <tableMerging ref="tableMergingRef" @success="" />
+    <!-- 退菜数量 -->
+    <el-dialog
+        :title="`退菜：${goodsStore.cartOrderItem.product_name} x ${goodsStore.cartOrderItem.number - goodsStore.cartOrderItem.returnNum}`"
+        v-model="showReturnForm" width="350" top="20%">
+        <el-form :model="returnForm" label-width="0" label-position="left">
+            <el-form-item prop="num">
+                <el-input-number v-model="returnForm.num" :min="1"
+                    :max="goodsStore.cartOrderItem.number - goodsStore.cartOrderItem.returnNum" style="width: 100%;">
+                </el-input-number>
+            </el-form-item>
+        </el-form>
+        <div class="footer_wrap">
+            <div class="btn">
+                <el-button style="width: 100%;" @click="showReturnForm = false">取消</el-button>
+            </div>
+            <div class="btn">
+                <el-button type="primary" style="width: 100%;" :loading="returnFormLoading"
+                    @click="returnFormSubmit">确认</el-button>
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
 <script setup>
@@ -159,6 +258,7 @@ import { useShop } from '@/store/shop.js'
 import { useGoods } from '@/store/goods.js'
 import { inputFilterFloat, formatDecimal } from '@/utils/index.js'
 import { updatePrice, orderPrint } from '@/api/product.js'
+import { refundOrder } from '@/api/order.js'
 
 const shopStore = useShop()
 const goodsStore = useGoods()
@@ -176,6 +276,62 @@ const emit = defineEmits(['confirm', 'delete', 'pending', 'clearCart', 'merging'
 const takeFoodCodeRef = ref(null)
 const skuModalRef = ref([])
 
+const showReturnForm = ref(false)
+const returnFormLoading = ref(false)
+const returnForm = ref({
+    num: 1
+})
+
+
+// 退菜
+async function returnOrderItemHandle() {
+    if (goodsStore.cartOrderItem.returnNum >= goodsStore.cartOrderItem.number) return
+    if (goodsStore.cartOrderItem.number == 1) {
+        returnOrderItemAjax()
+    } else {
+        showReturnForm.value = true
+    }
+}
+
+// 提交自定义数量退菜
+async function returnFormSubmit() {
+    try {
+        returnFormLoading.value = true
+        await returnOrderItemAjax(returnForm.value.num)
+        showReturnForm.value = false
+        ElMessage.success('退菜成功')
+    } catch (error) {
+        console.log('退菜失败了');
+    }
+    returnFormLoading.value = false
+}
+
+// 提交退菜
+async function returnOrderItemAjax(num = 1) {
+    try {
+        let data = {
+            orderId: goodsStore.orderListInfo.id,
+            refundAmount: 0,
+            modify: 0,
+            cash: false,
+            refundReason: '',
+            refundDetails: [
+                {
+                    id: goodsStore.cartOrderItem.id,
+                    returnAmount: goodsStore.cartOrderItem.lowPrice,
+                    num: num
+                }
+            ]
+        }
+        await refundOrder(data)
+        goodsStore.cartOrderItem.returnNum += num
+        goodsStore.calcCartInfo()
+        // await goodsStore.historyOrderAjax('', data.orderId)
+    } catch (error) {
+        console.log(error);
+    }
+}
+
 // 显示打包
 function packHandle() {
     let item = goodsStore.cartList[goodsStore.cartActiveIndex]
@@ -499,20 +655,21 @@ function packFormSubmit() {
     }
 }
 
+.footer_wrap {
+    display: flex;
+    gap: 20px;
+
+    .btn {
+        flex: 1;
+    }
+}
+
 .dialog {
 
     .content {
         padding-bottom: 20px;
     }
 
-    .footer_wrap {
-        display: flex;
-        gap: 20px;
-
-        .btn {
-            flex: 1;
-        }
-    }
 }
 
 .remark_list {