cashier_desktop/src/views/home/components/groupModal.vue

<!-- 称重商品组件 -->
<template>
    <el-dialog title="可选套餐" width="70%" :close-on-click-modal="false" v-model="dialogVisible" top="10vh">
        <div class="row" v-for="(item, index) in goodsItem.groupSnap" :key="index">
            <div class="title_wrap">
                <div class="item">规格组名：{{ item.title }}</div>
                <div class="item"
                    v-html="`本组菜品<span style='color: var(--el-color-danger)'>${item.count || 0}</span>选<span style='color: var(--el-color-danger)'>${item.number || 0}</span>`">
                </div>
            </div>
            <div class="error">
                <span v-if="item.isError">错误：请按规格组选择菜品</span>
            </div>
            <el-table border :data="item.goods" ref="tabRefs" @select="selectChange($event, index)"
                @select-all="selectChange($event, index)">
                <el-table-column type="selection" width="55" />
                <el-table-column label="名称" prop="proName"></el-table-column>
                <el-table-column label="规格" prop="skuName"></el-table-column>
                <el-table-column label="价格" prop="price">
                    <template v-slot="scope">
                        ￥{{ formatDecimal(scope.row.price) }}
                    </template>
                </el-table-column>
                <el-table-column label="数量" prop="number">
                    <template v-slot="scope">
                        {{ `${scope.row.number}${scope.row.unitName || ''}` }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-button style="width: 100%" @click="dialogVisible = false">
                取消
            </el-button>
            <el-button type="primary" style="width: 100%" :disabled="disabled" @click="confirmHandle">
                {{ disabled ? '请选择菜品' : '确认' }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { inputFilterFloat, formatDecimal } from '@/utils/index.js'
import { useGoods } from '@/store/goods.js'

const goodsStore = useGoods()

const dialogVisible = ref(false);
const number = ref("");
const goodsItem = ref({})

const emit = defineEmits(["success"]);

const tabRefs = ref([])

const confirmType = ref('')
const cartItem = ref('')

function show(item, type = 'add') {
    confirmType.value = type
    dialogVisible.value = true;
    if (type == 'add') {
        disabled.value = true
        goodsItem.value = { ...item }
        goodsItem.value.groupSnap.map(item => {
            item.isError = false
        })
        setTimeout(() => {
            tabRefs.value.map(item => {
                item.clearSelection()
            })
        }, 100);
    } else {
        cartItem.value = { ...item }

        disabled.value = false
        goodsItem.value = goodsStore.originGoodsList.find(val => val.id == item.product_id)

        // console.log('item===', item)
        // console.log('goodsItem.value===', goodsItem.value);

        let selectGroup = JSON.parse(item.pro_group_info)
        console.log('selectGroup===', selectGroup);

        setTimeout(() => {
            goodsItem.value.groupSnap.map((item, index) => {
                item.goods.map((val, i) => {
                    selectGroup[index].goods.map(sg => {
                        if (val.proId == sg.proId) {
                            tabRefs.value[index].toggleRowSelection(val, true)
                        }
                    })
                })
            })
            goodsItem.value.groupSnap.map(item => {
                item.isError = false
            })
        }, 100)
    }
}

// 选择表格触发
function selectChange($event, index) {
    let item = goodsItem.value.groupSnap[index]
    let selectNum = tabRefs.value[index].getSelectionRows()

    if (selectNum.length != item.number) {
        item.isError = true
    } else {
        item.isError = false
    }

    let flags = []

    goodsItem.value.groupSnap.map((item, index) => {
        let selectNum = tabRefs.value[index].getSelectionRows()
        if (selectNum.length != item.number) {
            flags.push({ flag: false })
        } else {
            flags.push({ flag: true })
        }
    })

    const arr = flags.find(item => !item.flag)

    if (arr != undefined && !arr.flag) {
        disabled.value = true
        return
    }

    disabled.value = false
}

// 确认
const disabled = ref(true)
function confirmHandle() {
    let flags = []

    goodsItem.value.groupSnap.map((item, index) => {
        let selectNum = tabRefs.value[index].getSelectionRows()
        if (selectNum.length != item.number) {
            flags.push({ flag: false })
        } else {
            flags.push({ flag: true })
        }
    })

    const arr = flags.find(item => !item.flag)

    if (arr != undefined && !arr.flag) {
        disabled.value = true
        return
    }

    disabled.value = false

    let goodIds = []
    goodsItem.value.groupSnap.map((item, index) => {
        let obj = { ...item }
        obj.goods = tabRefs.value[index].getSelectionRows()
        goodIds.push(obj)
    })

    // 将商品数据转为一维数组返回
    if (confirmType.value == 'add') {
        emit("success", {
            ...goodsItem.value.skuList[0],
            goods_type: goodsItem.value.type,
            pro_group_info: goodIds
        });
    } else {
        // 编辑
        goodsStore.operateCart({
            ...cartItem.value,
            pro_group_info: goodIds
        }, 'edit')
    }
    dialogVisible.value = false;
}

defineExpose({
    show,
});
</script>

<style scoped lang="scss">
.keybord_wrap {
    padding: var(--el-font-size-base) 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: var(--el-font-size-base);

    :deep(.el-button--large) {
        height: 50px;
    }
}

.input_wrap {
    display: flex;
    align-items: center;
    gap: 20px;

    .item {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.price_item {
    font-size: 18px;
    font-weight: bold;
    color: var(--el-color-danger);
    padding: 15px 0;
    border-top: 1px solid #ececec;
}

.footer {
    display: flex;
}

.row {
    margin-bottom: 20px;

    .title_wrap {
        display: flex;
        gap: 30px;
        font-size: 16px;
        // padding-bottom: 10px;

        .item {
            span {
                margin: 0 4px;
                font-weight: bold;
                color: var(--el-color-danger);
            }
        }
    }

    .error {
        height: 20px;
        color: var(--el-color-danger);
        font-size: 12px;
    }

}
</style>