qimall/backend/modules/mall/views/order/component/order-shipping.php

<?php
use common\helpers\ComponentHelper;
if (isset($is_electronic_bill) && $is_electronic_bill) {
    ComponentHelper::loadComponentView('electronic-bill', \Yii::$app->basePath . '/../addons/' . \common\enums\AddonsEnum::ADDONS_NAME_ELECTRONIC_BILL . '/common/components/order');
}
?>
<template id="order-shipping">
    <div>
        <el-dialog title="基本信息" :visible.sync="isShowChangeShipping" @close="dialogClose" :close-on-click-modal="false">
            <el-form :model="form" ref="ships" :rules="rules" label-width="80px" size="small" label-position="top" style="padding: 0 30px;">
                <el-form-item label="">
                    <el-table ref="multipleTable" :data="details_list" size="small" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
                        <el-table-column label="商品" width="200" prop="goods_name">
                            <template slot-scope="scope">
                                <com-ellipsis :line="1" :text="scope.row.goods_name"></com-ellipsis>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="数量" width="120">
                        </el-table-column>
                        <el-table-column prop="unshipped_num" label="待发货数量" width="120">
                        </el-table-column>
                        <el-table-column prop="num" label="发货数量" width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.send_num" :min="0" :max="scope.row.unshipped_num"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="is_feedback" label="售后状态" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.is_feedback == 1" type="danger" size="small" effect="plain">售后中</el-tag>
                                <el-tag v-if="scope.row.is_feedback == 2" type="danger" size="small" effect="plain">售后完成</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="状态" show-overflow-tooltip>
                            <template slot-scope="scope">{{ scope.row.shipping_status == 1 ? '已发货' : '待发货' }}</template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                        <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="detailsTotal">
                        </el-pagination>
                    </div>
                </el-form-item>
                <div class="title-box" style="margin: 15px 0;">
                    <span class="text" style="background-color: #FEFAEF;color: #E6A23C;padding: 6px;margin-right: 10px;">物流信息</span>
                    <span style="color: red;">*注：物流修改仅支持修改一次</span>
                </div>
                <el-form-item label="发货方式">
                    <el-radio-group v-model="form.shipping_type">
                        <el-radio :label="1" :disabled="isNeedNotExpress">快递</el-radio>
                        <el-radio :label="0">无需物流</el-radio>
                        <?php if (isset($is_electronic_bill) && $is_electronic_bill) { ?>
                        <el-radio :label="2" :disabled="isNeedNotExpress">电子面单</el-radio>
                        <?php } ?>
                    </el-radio-group>
                </el-form-item>
                <div v-if="form.shipping_type == 1">
                    <el-form-item label="快递公司" prop="company">
                        <el-select style="width:30%" filterable v-model="form.express_id" placeholder="请选择快递公司" style="width: 100%" @change="handleExpressChange">
                            <el-option v-for="company in express_companys" :key="company.id" :label="company.name" :value="company.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="商家编码" prop="customer_name"
                                  v-if="form.shipping_type == 1 && (form.express_name === '京东物流' || form.express_name === '京东快运')">

                        <el-input style="width:50%"  placeholder="请输入商家编码" size="small" v-model="form.customer_name"
                                  autocomplete="off"></el-input>
                    </el-form-item>-->
                    <el-form-item label="快递单号" prop="express_no">
                        <el-input style="width:50%" v-model="form.express_no"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="商家备注" prop="memo">
                        <el-input style="width:50%" type="textarea" v-model="form.memo"></el-input>
                    </el-form-item> -->
                    <el-form-item label="商家备注1" prop="memo_arr1">
                        <el-input style="width:50%" type="textarea" v-model="form.memo_arr1"></el-input>
                    </el-form-item>
                    <el-form-item label="商家备注2" prop="memo_arr2">
                        <el-input style="width:50%" type="textarea" v-model="form.memo_arr2"></el-input>
                    </el-form-item>
                    <el-form-item label="商家备注3" prop="memo_arr3">
                        <el-input style="width:50%" type="textarea" v-model="form.memo_arr3"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div>收货信息：</div>
                        <div style="line-height: 22px;">收货人：{{ order_info.receiver_name }}</div>
                        <div style="line-height: 22px;">联系电话：{{ order_info.mobile }}</div>
                        <div style="line-height: 22px;">收货地址： {{order_info.region_name}} {{order_info.address}}</div>
                    </el-form-item>
                    <el-form-item v-if="order_info.pickup_info">
                        <div>自提点信息：</div>
                        <div style="line-height: 22px;">收货人：{{ order_info.pickup_info.head_info.contact_name }}</div>
                        <div style="line-height: 22px;">联系电话：{{ order_info.pickup_info.head_info.contact_phone }}</div>
                        <div style="line-height: 22px;">收货地址：{{order_info.pickup_info.head_info.address}}</div>
                    </el-form-item>
                </div>
                <div v-if="form.shipping_type == 0">
                    <el-form-item label="商家备注1" prop="memo_arr1">
                        <el-input style="width:50%" type="textarea" v-model="form.memo_arr1"></el-input>
                    </el-form-item>
                    <el-form-item label="商家备注2" prop="memo_arr2">
                        <el-input style="width:50%" type="textarea" v-model="form.memo_arr2"></el-input>
                    </el-form-item>
                    <el-form-item label="商家备注3" prop="memo_arr3">
                        <el-input style="width:50%" type="textarea" v-model="form.memo_arr3"></el-input>
                    </el-form-item>
                </div>
                <?php if (isset($is_electronic_bill) && $is_electronic_bill) { ?>
                <electronic-bill v-if="form.shipping_type == 2" :parent-show="is_show" :parent-form="form" @update-form="form = $event" @change-comfirm="comfirm = $event(_self, 'ships')"></electronic-bill>
                <?php } ?>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShowChangeShipping = false">取 消</el-button>
                <el-button type="primary" @click="comfirm('ships')" :v-loading="changeShippingLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    function paginate(array, page_size, page_number) {
        // 计算分页开始的索引
        const start = (page_number - 1) * page_size;
        // 计算分页结束的索引
        const end = page_number * page_size;
        // 返回分页后的数组
        return array.slice(start, end);
    }

    Vue.component('order-shipping', {
        template: '#order-shipping',
        props: {
            is_show: {
                type: Boolean,
                default: false
            },
            order_info: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            changeShippingLoading:{
                type:Boolean,
                default:false
            },
            shipping_form: {
                type: Object,
                default: function() {
                    return {};
                }
            }
        },
        data() {
            return {
                express_companys: [],
                form: {
                    id:'',
                    order_detail_ids:[],// 选中的发货商品
                    send_nums:[],// 发货数量
                    shipping_type: 1, // 发货方式 [1快递 0无需物流]
                    express_id: '', // 快递公司
                    express_name:'', // 快递名称
                    customer_name:'', // 京东物流编号
                    express_no: '', // 快递单号
                    memo_arr1: '', //卖家备注
                    memo_arr2: '', //卖家备注
                    memo_arr3: '', //卖家备注
                },
                isShowChangeShipping: false,
                isNeedNotExpress: false, // 判断是否无需物流信息
                order_status_list: {
                    '0': "待付款",
                    '1': "待发货",
                    '2': "已发货",
                    '3': "已收货",
                    '4': "已完成",
                    '-1': "售后申请",
                    '-2': "退款中",
                    '-3': "售后完成",
                    '-4': "已关闭",
                },
                rules: {
                    express_id: [{
                        required: true,
                        message: '请选择快递公司',
                        trigger: 'change'
                    }],
                    express_no: [{
                        required: true,
                        message: '请填写快递单号',
                        trigger: 'change'
                    }],
                    customer_name: [{
                        required: true,
                        message: '请填写商家编码',
                        trigger: 'change'
                    }]
                },
                currentPage: 1,
                pageSize: 10,
                detailsTotal: 0,
                details_list: [], // 用于分页
            }
        },
        watch: {
            is_show: function(newVal) {
                if(newVal){
                    // 获取订单物流信息列表
                    this.$nextTick(()=>{
                        this.$refs.multipleTable.toggleAllSelection(true);
                    })
                    if(isEmpty(this.express_companys)) this.getOrderShipping()
                }
                this.isShowChangeShipping = newVal;
                if (!this.shipping_form.order_no && Object.keys(this.shipping_form).length > 1) {
                    this.shipping_form.shipping_change = 1;// 修改物流
                    this.form = this.shipping_form;
                } else {
                    this.form.express_id = ''; // 快递公司
                    this.form.express_name = ''; // 快递名称
                    this.form.customer_name = ''; // 京东物流编号
                    this.form.express_no = ''; // 快递单号
                    this.form.memo = ''; //卖家备注
                }

            },
            order_info(val) {
                // // console.log(val, 'val')
                this.form.id = val.id
                // 判断是否无需物流

                // this.form.detail = val.detail
                // this.form.region_name = val.region_name
                // this.form.address = val.address

                this.form.shipping_type = Number(this.form.shipping_type)
                if (val && typeof val.need_not_express !== 'undefined') {
                    this.isNeedNotExpress = Boolean(val.need_not_express);
                    if (this.isNeedNotExpress) {
                        this.form.shipping_type = 0;
                    }
                }

                if (this.order_info?.detail) {
                    this.detailsTotal = this.order_info.detail.length

                    for (const item of this.order_info.detail) {
                        this.$set(item, 'unshipped_num', item.num - item.shipped_num)
                        this.$set(item, 'send_num', item.unshipped_num)
                    }

                    this.details_list = paginate(this.order_info.detail, this.pageSize, 1)
                }
            }
        },

        methods: {
            getOrderShipping(){
                request({
                    params: {
                        r: 'mall/order/shipping'
                    },
                }).then(res => {
                    if(res.data.code == 0){
                        this.express_companys = res.data.data.express_list;
                        this.form.customer_name = res.data.data.jd_mch_code;
                    }
                })
            },
            selectable(row,index){
                if (row.is_feedback != 0) {
                    return false;
                }
                return row.shipping_status == 0;
            },
            handleSelectionChange(e) {
                this.form.order_detail_ids = getValues(e,'id');
            },
            handleExpressChange(e){
                let index = this.express_companys.findIndex(v => v.id == e);
                this.form.express_name = this.express_companys[index].name;
            },
            comfirm(formName) {
                let res = this.getOrderDetailIds();
                if (res.length <= 0) {
                    this.$message.error('请选择发货商品');
                    return false;
                }
                if (this.form.shipping_type == 1 && this.form.express_id <= 0) {
                    this.$message.error('请选择快递公司');
                    return false;
                }
                if (this.form.shipping_type == 1) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (typeof this.form.order_detail_ids == 'string') this.form.order_detail_ids = JSON.parse(this.form.order_detail_ids);
                            this.setSendNums()

                            request({
                                params: {
                                    r: 'mall/order/check-order-express-no',
                                    id: this.form.id,
                                    express_no: this.form.express_no,
                                },
                            }).then(res => {
                                if (res.data?.data?.is_exists === true) {
                                    this.$confirm('此快递单号已经存在，继续操作将合并包裹', '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'warning'
                                    }).then(() => {
                                        this.$emit('submit',this.form);
                                    })
                                } else {
                                    this.$emit('submit',this.form);
                                }
                            })
                        } else {
                            console.log('error submit!!');
                            return;
                        }
                    });
                } else {
                    if (typeof this.form.order_detail_ids == 'string') this.form.order_detail_ids = JSON.parse(this.form.order_detail_ids);
                    this.setSendNums()
                    this.$emit('submit',this.form);
                }
                
            },
            setSendNums() {
                this.form.send_nums = []
                if (this.form?.order_detail_ids && this.order_info?.detail) {
                    for (const order_detail_id of this.form.order_detail_ids) {
                        for (const order_info_item of this.order_info.detail) {
                            if (order_info_item.id == order_detail_id) {
                                this.form.send_nums.push({id: order_detail_id, num: order_info_item.send_num})
                                break
                            }
                        }
                    }
                }
            },
            dialogClose() {
                this.$emit('close')
            },
            getOrderDetailIds() {
                // 选中的订单商品
                let orderDetailIds = [];
                Object.keys(this.form.order_detail_ids).forEach(function (item) {
                    orderDetailIds.push(item.id)
                });
                return orderDetailIds;
            },
            handleCurrentChange(value) {
                this.details_list = paginate(this.order_info.detail, this.pageSize, value)
            },
        }
    })
</script>