exceptionSelect.vue

<template>
    <view class="page-exception-select">
        <view class="title row bothSide verCenter">
            <text class="t1">入仓号</text>
            <text class="t2">{{ formParams.erp_order_sn }}</text>
        </view>
        <view class="select-type">
            <view class="box">
                <view class="label row verCenter">
                    <text class="t1">*</text>
                    <text class="t2">请选择异常类型</text>
                </view>
                <view class="pick-list row bothSide verCenter">
                    <picker @change="bindPickerChange($event, 1)" :value="allExceptionV2Index" :range="allExceptionV2" range-key='name' style="width: 80%;">
                        <view class="uni-text">{{ allExceptionV2[allExceptionV2Index].name || '请选择异常类型' }}</view>
                    </picker>
                    <text class="iconfont icon-sanjiaoxing1"></text>
                </view>
            </view>
            <view class="box">
                <view class="label row verCenter">
                    <text class="t1">*</text>
                    <text class="t2">请选择异常型号</text>
                </view>
                <view class="pick-list row bothSide verCenter">
                    <picker @change="bindPickerChange($event, 2)" :value="erpOrderSnOrderGoodsSnIndex" :range="erpOrderSnOrderGoodsSn" range-key='name' style="width: 80%;">
                        <view class="uni-text">{{ erpOrderSnOrderGoodsSn[erpOrderSnOrderGoodsSnIndex].name || '请选择异常型号' }}</view>
                    </picker>
                    <text class="iconfont icon-sanjiaoxing1"></text>
                </view>
            </view>
        </view>
        <view class="btn row rowCenter verCenter" @click="submit()">确认</view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';

    export default {
        data() {
            return {
                allExceptionV2: [], //异常类型集合
                allExceptionV2Index: -1,
                erpOrderSnOrderGoodsSn: '', //异常型号集合
                erpOrderSnOrderGoodsSnIndex: -1,
                formParams: {
                    erp_order_sn: '', //入仓号，携带过来的
                    ask_customer_exception_id: '', //异常里面的ID
                    order_goods_id: '' //订单商品ID
                },
                exceptionData: {} //获取异常对应的数据
            };
        },
        onLoad(options) {
            this.formParams.erp_order_sn = options.erp_order_sn || '';

            // 从本地缓存中获取数据
            const dataFromSourcePage = uni.getStorageSync('updateExceptionData');

            // 使用Object.assign()将dataFromSourcePage的属性合并到data中
            Object.assign(this.$data, dataFromSourcePage);

            if (!options.erp_order_sn) {
                uni.showToast({
                    title: '请填写入仓单号',
                    icon: 'none'
                });
                setTimeout(() => {
                    uni.navigateBack({
                        delta: 1
                    });
                }, 2000)
            } else {
                this.getAllExceptionV2();
                this.getErpOrderSnOrderGoodsSn();
            }
        },
        methods: {
            bindPickerChange: function(e, type) {
                console.log('picker发送选择改变，携带值为', e.target.value);
                if (type == 1) {
                    this.allExceptionV2Index = e.target.value;
                    this.formParams.ask_customer_exception_id = this.allExceptionV2[e.target.value].value;
                } else if (type == 2) {
                    this.erpOrderSnOrderGoodsSnIndex = e.target.value;
                    this.formParams.order_goods_id = this.erpOrderSnOrderGoodsSn[e.target.value].value;
                }
            },
            /**
             * 获取所有异常
             */
            getAllExceptionV2() {
                this.request(API.getAllExceptionV2, 'GET', {}, true).then(res => {
                    if (res.err_code === 0) {
                        // 将对象转换为期望的数组格式
                        this.allExceptionV2 = Object.entries(res.data).map(([key, value]) => ({
                            value: key,
                            name: value
                        }));
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 获取入仓号对应的型号列表
             */
            getErpOrderSnOrderGoodsSn() {
                this.request(API.getErpOrderSnOrderGoodsSn, 'GET', { erp_order_sn: this.formParams.erp_order_sn }, true).then(res => {
                    if (res.err_code === 0) {
                        // 将数组中的每个对象转换为指定格式
                        this.erpOrderSnOrderGoodsSn = res.data.map(item => ({
                            name: item.goods_type,
                            value: item.order_goods_id
                        }));
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            submit() {
                if (!this.formParams.ask_customer_exception_id) {
                    uni.showToast({
                        title: '请选择异常类型',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.formParams.order_goods_id) {
                    uni.showToast({
                        title: '请选择异常型号',
                        icon: 'none'
                    });
                    return false;
                }

                this.request(API.getExceptionDataV2, 'GET', this.formParams, true).then(res => {
                    if (res.err_code === 0) {
                        this.exceptionData = res.data;
                        uni.$emit('updateExceptionData', this.$data);
                        uni.navigateBack({
                            delta: 1
                        });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });

            }
        }
    };
</script>

<style scoped lang="scss">
    @import '../../assets/css/tallyGoods/exceptionSelect.scss';
</style>