qimall/addons/Happiness/client/views/order/component/order-shipping.php

<template id="order-shipping">
    <div>
        <el-dialog title="基本信息" :visible.sync="isShowChangeShipping" @close="dialogClose">
            <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="order_info.detail" 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="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>
                </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">快递</el-radio>
                        <el-radio :label="0">无需物流</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="form.shipping_type == 1">
                    <el-form-item label="快递公司" prop="company">
                        <el-select style="width:30%" 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>
                </div>
                <div v-if="form.shipping_type == 0">
                    <!-- <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>
                </div>
            </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>
    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:[],// 选中的发货商品
                    shipping_type: 1, // 发货方式 [1快递 0无需物流]
                    express_id: '', // 快递公司
                    express_name:'', // 快递名称
                    customer_name:'', // 京东物流编号
                    express_no: '', // 快递单号
                    memo: '', //卖家备注
                    memo_arr1: '', //卖家备注
                    memo_arr2: '', //卖家备注
                    memo_arr3: '', //卖家备注
                },
                isShowChangeShipping: 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'
                    }]
                }
            }
        },
        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
            }
        },

        methods: {
            getOrderShipping(){
                request({
                    params: {
                        r: 'happiness/client/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.$emit('submit',this.form);
                        } else {
                            console.log('error submit!!');
                            return;
                        }
                    });
                } else {
                    this.$emit('submit',this.form);
                }
                
            },
            dialogClose() {
                this.$emit('close')
            },
            getOrderDetailIds() {
                // 选中的订单商品
                let orderDetailIds = [];
                Object.keys(this.form.order_detail_ids).forEach(function (item) {
                    orderDetailIds.push(item.id)
                });
                return orderDetailIds;
            },
        }
    })
</script>