1

src/views/tool/Instead/components/dialogpackage.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="select_desk">
+        <el-dialog title="可选套餐" :visible.sync="show">
+            <div v-for="(item, index) in listdata.proGroupVo" :key="index">
+                <div class="box">
+                    <h2 class="boxspan">{{ item.title }}</h2>
+                    <h4 class="boxspan">本组菜品{{ item.count }}选{{ item.number || 1 }}</h4>
+                    <el-alert v-if="item.alertshow" title="错误：请按照规定选择套餐" type="warning" :closable="false"></el-alert>
+                </div>
+                <el-table ref="dialogpackagetable" :data="item.goods" tooltip-effect="dark" style="width: 100%"
+                    @selection-change="handleSelectionChange($event, index)">
+                    <el-table-column type="selection" width="55">
+                    </el-table-column>
+                    <el-table-column label="名称" prop="proName">
+                    </el-table-column>
+                    <el-table-column prop="name" label="规格">
+                    </el-table-column>
+                    <el-table-column prop="price" label="价格">
+                    </el-table-column>
+                    <el-table-column prop="number" label="数量">
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="buttonbox">
+                <el-button type="primary" :disabled="disabledshow" @click="confirm">确定</el-button>
+                <el-button @click="toggleSelection">取消</el-button>
+            </div>
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            show: false,
+            disabledshow: true,
+            listdata: {
+                proGroupVo: []
+            },
+            tableData: [],
+            multipleSelection: []
+        };
+    },
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.dialogpackagetable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.dialogpackagetable.clearSelection();
+            }
+           
+        },
+        handleSelectionChange(val, index) {
+            try {
+                this.listdata.proGroupVo.forEach((a, i) => {
+                    this.multipleSelection[index] = i === index ? val : this.multipleSelection[index] || []
+                })
+                this.disabledshow = !this.listdata.proGroupVo.every((element, num) => element.number <= this.multipleSelection[num].length);
+            } catch (error) { }
+            this.$set(this.listdata.proGroupVo, index, { ...this.listdata.proGroupVo[index], alertshow: this.listdata.proGroupVo[index].number >= this.multipleSelection[index].length ? true : false });
+        },
+        confirm() {
+            this.$emit("dialogpackageconfirm", this.listdata, this.multipleSelection);
+            this.show = false;
+
+        },
+        open(item) {
+            this.listdata = item
+            try {
+                this.$refs.dialogpackagetable.clearSelection();
+
+            } catch (error) {
+
+            }
+            this.multipleSelection = []
+            this.disabledshow = true
+            console.log(this.listdata, this.multipleSelection);
+            this.show = true;
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.el-button {
+    padding: 12px 20px;
+}
+
+.select_desk {
+    .box {
+        margin: 20px 10px;
+
+        .boxspan {}
+
+    }
+
+    .buttonbox {
+        margin: 0 auto;
+        padding: 20px 0;
+        text-align: right;
+    }
+}
+</style>