courier_mobile_front/src/pages/new/combine.vue

<template>
    <div>
        <div class="container" v-if="isCombine === true">
            <div style="padding: 10px 0 20px;">找到{{ goods.length }}个属于"{{ goods[0].recipient
                }}"&部门"{{ goods[0].departmentId }}"&座位号:"{{ goods[0].sendSeat }}"的快件:</div>

            <van-checkbox style="margin-bottom: 10px;" v-model="isAllChecked" shape="square">全选</van-checkbox>

            <van-form @submit="onSubmit">
                <van-field name="checkboxGroup">
                    <template #input>
                        <van-checkbox-group v-model="checkedGoods">
                            <van-checkbox style="margin-bottom: 10px;" :checked="good.checked" v-for="good in goods"
                                :name="good.id" :key="good.id" shape="square">
                                {{ good.expressNo }} & {{ good.expressType }} & {{ good.expressQuantity }}件 &{{
                                    good.isPayOnDelivery == '否' ? '非到付' : '到付' }}
                            </van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>

                <van-button style="float: right;" class="sureSign" type="info" native-type="submit">合并签收</van-button>
                <!-- <van-button style="height: 40px; width: 150px; border-radius: 8px;" type="default"
                    @click="back">返回上一级</van-button> -->
            </van-form>

        </div>
        <SureCombine v-else :isCombine="isCombine" :goodsList="goodsList" @isCombine="sureCombine"></SureCombine>
    </div>
</template>

<script>
import SureCombine from './sureCombine.vue'
export default {
    props: ['signList'],
    components: {
        SureCombine
    },
    data() {
        return {
            goods: this.signList,
            isCombine: true,
            checkedGoods: [], // 选中的商品ID集合
            goodsList: [],//筛选后的数据
        };
    },
    methods: {
        toggleAll() {
            this.$refs.checkboxGroup.toggleAll();
            this.qwe = !this.qwe
        },

        // 合并签收
        onSubmit(values) {
            if (this.checkedGoods.length > 0) {
                this.isCombine = false
                this.$emit("onIsCombine", this.isCombine)
                console.log('submit', values);
                // let data = this.goods.filter((good) => values.checkboxGroup.includes(good.id))
                let data = []
                this.goods.forEach((good) => {
                    if (values.checkboxGroup.find((goodId) => goodId === good.id)) {
                        data.push(good)
                    }
                })
                this.goodsList = data
                console.log('data', data);
                this.$emit('isSearch', false)
            } else {
                this.$toast('请至少选择一个')
            }


        },
        // 控制页面
        sureCombine(value) {
            console.log(value)
            this.isCombine = value
            this.$emit("onIsCombine", this.isCombine)
        },

    },
    computed: {
        isAllChecked: {
            // 计算是否全选
            get() {
                return this.goods.length === this.checkedGoods.length;
            },
            // 设置全选
            set(value) {
                this.checkedGoods = value ? this.goods.map(good => good.id) : [];
            }
        }
    },
    watch: {
        signList(newValue) {
            this.goods = newValue
            this.checkedGoods = []; // 选中的商品ID集合
            this.goodsList = [];//筛选后的数据
        }
    }

};
</script>

<style lang="less" scoped>
* {
    font-size: 16px;
}

.van-cell {
    padding: 0;
}

.container {
    padding: 2px 10px 0 10px;
    background-color: #fff;
    height: 100%;

    .sureSign {
        height: 40px;
        width: 150px;
        border-radius: 8px;
        margin-right: 20px;
        margin-top: 20px;
    }
}
</style>