courier_mobile_front/src/pages/new/removal.vue

<template>
    <div>
        <div class="container" v-if="isRemoval">
            <van-search v-model="keyWorld" @search="onSearch" placeholder="请输入快递单号" />
            <img @click="onImg" src="@/assets/user/u4.png" alt="">
            <div class="middelBox" style="height: calc(100vh - 79px);overflow-y: auto;" v-if="show">
                <div style="margin-bottom: 10px;">已添加快件:</div>
                <van-cell-group v-for="item in codes" :key="item">
                    <van-cell :title="item">
                        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                        <template #right-icon>
                            <van-icon name="delete-o" @click="onDelete(item)" class="delete" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
            <van-button @click="onBatch" class="build" type="info">生成批次</van-button>
        </div>
        <Batched :codesList="codesList" :noCodesList="noCodesList" :BatDispatchBatchNo="BatDispatchBatchNo"
            :isRemoval="isRemoval" @isRemoval="iemoval" v-else></Batched>
    </div>
</template>

<script>
import { appDeliveryPersonDeliveries, appPermissionChecks } from '../../api/index';
import { Toast } from 'vant'
import Batched from './batched.vue'
import { getCompanyExpressNo } from "@/utils/utils"
import wx from "weixin-jsapi";
export default {
    name: 'Removal',
    components: {
        Batched
    },
    mounted() {
        console.log(localStorage.getItem('courierId'), '+=====================')

    },
    data() {
        return {
            titlename: "快件出库",
            codes: [],
            keyWorld: "",//快递单号的值
            isRemoval: true,
            BatDispatchBatchNo: '',//传过去的生成的快递单号
            codesList: [],//传过去的数据
            floorId: '',//楼层id
            noCodesList: [],//没有进入批次的数据
        };
    },
    methods: {
        onImg() {
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: (res) => {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    if (result.indexOf(",") != -1) {
                        let result1 = res.resultStr.split(",");
                        result = result1[result1.length - 1];
                    }
                    this.iconCheck(result)
                    this.callback(result)
                },
                error: function (res) {
                    console.log(res, 'error++++++++++');
                }
            });
        },
        async iconCheck(result) {
            const res = await appPermissionChecks({ expressNo: result, deliveryPeopleId: localStorage.getItem('courierUserId') })
            if (Object.keys(res.data).length > 0) {
                this.callback(res.data.expressNo)
            } else {
                Toast('不在派送范围')
            }
        },

        onSearch() {
            if (this.keyWorld == '') {
                return Toast('快递单号不能为空')
            }
            if (this.codes.some((item) => this.keyWorld == item)) {
                Toast('您输入的单号以重复，请重新输入')
                this.keyWorld = ''
                return
            }

            this.callback(this.keyWorld)
            this.keyWorld = ''
        },
        callback(code) {
            if (this.codes.length < 15) {
                this.codes.push(code)
            } else {
                Toast('扫描上限15条');
            }
        },
        // 生成批次
        async onBatch() {
            if (this.codes.length < 1) {
                return Toast('数据不能为空生成批次')
            }
            let data = {
                deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                deliveryId: this.codes.join(','),    //快件单号
                dispatchBatchNo: getCompanyExpressNo(),    //批次号
                // floor:expressScope
            }
            const res = await appDeliveryPersonDeliveries({ ...data }, { emulateJSON: true })
            if (res.msg == 'success') {

                this.BatDispatchBatchNo = data.dispatchBatchNo
                this.codesList = this.codes
                console.log(data.dispatchBatchNo, 'data.dispatchBatchNo')
                this.isRemoval = false
                if (res.data.length > 0) {
                    this.noCodesList = res.data
                }
            } else {
                this.$toast('生成批次错误')
            }
            console.log(res, 'res')
        },
        // 删除列表中的数据
        onDelete(item) {
            this.codes = this.codes.filter((_item) => _item !== item)
        },
        // 传过去的事件
        iemoval(value) {
            console.log(value)
            this.isRemoval = value
        }
    },
    computed: {
        show() {
            return this.codes.length > 0
        }
    }
};
</script>

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

.container {
    background-color: #fff;
    height: 100vh;

    img {
        position: fixed;
        height: 20px;
        width: 20px;
        right: 22px;
        top: 18px;
    }

    .middelBox {
        padding: 12px;
    }
}

.build {
    position: fixed;
    height: 40px;
    width: 160px;
    bottom: 60px;
    right: 10px;
}
</style>