128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<template>
|
|
<div class="select_desk">
|
|
<el-dialog title="可选套餐" v-model="show" @close="reset">
|
|
<div v-for="(item, index) in listdata.groupSnap" :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="refdialogpackagetable"
|
|
: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 setup>
|
|
const state = reactive({
|
|
show: false,
|
|
listdata: {
|
|
groupSnap: [],
|
|
},
|
|
tableData: [],
|
|
});
|
|
const refdialogpackagetable = ref();
|
|
const { show, listdata, tableData } = toRefs(state);
|
|
const multipleSelection = ref([]);
|
|
function toggleSelection() {
|
|
try {
|
|
refdialogpackagetable.value.forEach((a) => {
|
|
a.clearSelection();
|
|
});
|
|
show.value = false;
|
|
} catch (error) {}
|
|
}
|
|
function handleSelectionChange(val, index) {
|
|
try {
|
|
listdata.value.groupSnap.forEach((a, i) => {
|
|
multipleSelection.value[index] = i === index ? val : multipleSelection.value[index] || [];
|
|
});
|
|
} catch (error) {}
|
|
listdata.value.groupSnap[index] = {
|
|
...listdata.value.groupSnap[index],
|
|
alertshow:
|
|
listdata.value.groupSnap[index].number != multipleSelection.value[index].length
|
|
? true
|
|
: false,
|
|
};
|
|
}
|
|
const disabledshow = computed(() => {
|
|
console.log(multipleSelection.value);
|
|
return !listdata.value.groupSnap.every((element, num) => {
|
|
if (!multipleSelection.value[num]) {
|
|
return false;
|
|
}
|
|
return element.number == multipleSelection.value[num].length;
|
|
});
|
|
});
|
|
const emits = defineEmits(["confirm"]);
|
|
function confirm() {
|
|
const pro_group_info = listdata.value.groupSnap.map((v, index) => {
|
|
return {
|
|
...v,
|
|
goods: [...multipleSelection.value[index]],
|
|
};
|
|
});
|
|
emits("confirm", listdata.value, pro_group_info);
|
|
show.value = false;
|
|
}
|
|
function open(item) {
|
|
listdata.value = item;
|
|
show.value = true;
|
|
}
|
|
function reset() {
|
|
multipleSelection.value = [];
|
|
try {
|
|
refdialogpackagetable.value.forEach((a) => {
|
|
a.clearSelection();
|
|
});
|
|
} catch (error) {}
|
|
}
|
|
|
|
defineExpose({
|
|
open,
|
|
close,
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-button) {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.select_desk {
|
|
.box {
|
|
margin: 20px 10px;
|
|
|
|
.boxspan {
|
|
}
|
|
}
|
|
|
|
.buttonbox {
|
|
margin: 0 auto;
|
|
padding: 20px 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
</style> |