优化商品库存耗材

src/components/refundConsModal.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-dialog title="提示" width="450px" v-model="visible">
+        <div class="refund_content">
+            <div class="title_wrap">请确认当前菜品是否已上菜</div>
+            <div class="list_wrap">
+                <div class="item" v-for="(item, index) in list" :key="index">
+                    <span>{{ item.name }}</span>
+                    <span>x{{ item.num }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="dialog_footer">
+            <div class="btn">
+                <el-button @click="handleCancel" style="width: 100%;">未上菜（退还库存）</el-button>
+            </div>
+            <div class="btn">
+                <el-button type="primary" @click="handleOk" style="width: 100%;">已上菜（不退库存）</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const emits = defineEmits(['success'])
+
+// 未上菜 1退菜图库存
+function handleCancel() {
+    visible.value = false
+    emits('success', 1)
+}
+
+// 已上菜 2仅退菜不退库存
+function handleOk() {
+    visible.value = false
+    emits('success', 2)
+}
+
+function show() {
+    visible.value = true
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+.refund_content {
+    .title_wrap {
+        font-size: 16px;
+    }
+
+    .list_wrap {
+        padding-top: 14px;
+        .item {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+}
+
+.dialog_footer {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding-top: 20px;
+
+    .btn {
+        flex: 1;
+    }
+}
+</style>