qimall/backend/modules/mall/views/order/batch-delivery.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-export-dialog');
?>
<div id="app" class="diy-index" v-cloak ref="contain" v-loading="loading">
    <div class="nav">批量发货</div>
    <div class="header_box" style="flex: 1;">
        <el-alert
                style="padding: 16px;"
                title="批量发货目前仅支持快递订单，暂不支持自提订单和同城配送方式的订单。提高操作发货的成功率："
                type="error">
            特别注意：<br>
            ① 按模板要求填写发货信息<br>
            ② 当快递单号为纯数字时，请在数字前添加一个英文单引号，如运单号为：3123120000000000000，填写时写成：'3123120000000000000 ；<b style="color:deeppink;">注意事项：订单编号前面的"单引号是英文的，不是中文的"，如果使用中文引号，将导致系统上无法查看到该订单的物流更新信息</b><br>
            ③ 导出失败订单 操作完成后，请在左侧的【下载】菜单进行下载查看。<br>
        </el-alert>

        <div ref="crad-header" class="add_temp_box flex flex-x-between flex-y-center" style="margin: 20px 0;">
            <div class="add_temp_left flex flex-y-center">
                <el-button type="primary" size="small" @click="dialogFormVisible=true">批量发货</el-button>
            </div>
        </div>

        <!-- 搜索开始 -->
        <el-form ref="searchInfo" :model="searchInfo" size="small">
            <el-row :gutter="24">
                <el-col :span="7">
                    <el-form-item label="时间">
                        <el-date-picker
                                v-model="operate_time"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="addTimeChange"
                                :default-time="['00:00:00', '23:59:59']"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <el-form-item label="状态">
                        <el-select v-model="searchInfo.delivery_status" placeholder="请选择状态">
                            <el-option v-for="item in delivery_status_arr" :label="item.name" :value="item.status" :key="item.status"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <el-form-item label="操作人">
                        <el-input style="width: auto;" v-model="searchInfo.operator_name" placeholder="请输入操作人" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-button @click="search" size="small" type="primary">筛选</el-button>
                    <el-button type="danger" size="small" @click="resetSearch" v-if="show_clear_search_btn">清除条件</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 搜索结束 -->
        <div style="flex: 1;margin-top:10px">
            <el-table :data="list">
                <el-table-column prop="id" label="ID" width="100"></el-table-column>
                <el-table-column prop="operator_name" label="操作人"></el-table-column>
                <el-table-column prop="delivery_num" label="导入订单数"></el-table-column>
                <el-table-column prop="success_delivery_num" label="导入成功"></el-table-column>
                <el-table-column label="导入失败">
                    <template slot-scope="scope">
                        {{ scope.row.delivery_num - scope.row.success_delivery_num }}
                    </template>
                </el-table-column>
                <el-table-column prop="delivery_status" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.delivery_status == 0" type="danger">处理中</el-tag>
                        <el-tag v-else type="success">已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="操作时间">
                    <template slot-scope="scope">
                        <div>{{ scope.row.created_at | dateTimeFormat('Y-m-d H:i')}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.delivery_status == 0"><span>批量发货正在处理</span></div>
                        <div v-else>
                            <span v-if="scope.row.delivery_num != scope.row.success_delivery_num">
                                <el-button type="text" @click="handle('error',scope.row)">查看失败原因</el-button>
                                <span style="color: #DCDFE6">|</span>
                                <el-button type="text" @click="handle('export',scope.row)">导出失败订单</el-button>
                            </span>
                            <span v-else>导入成功</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: right;margin: 20px 0;">
            <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
        </div>
    </div>

    <el-dialog @close="dialogColse" title="批量发货" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form :model="form" label-width="150px" :rules="FormRules" ref="form">
            <el-form-item label="选择快递公司" prop="express">
                <el-select size="small" v-model="form.express_id" filterable placeholder="请选择" @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.express_name === '京东物流' || form.express_name === '京东快运'">
                <el-input style="width: 40%;" placeholder="请输入商家编码" size="small" v-model="form.customer_name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="发货方式">
                <el-radio-group v-model="form.isByGoods">
                    <el-radio :label="0">根据订单号发货</el-radio>
                    <el-radio :label="1">根据订单号及商品名称发货</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="导入模板">
                <div>
                    <com-upload class="flex flex-y-center" v-loading="uploading" :disabled="uploading" :fields="upload_type" @start="handleStart" @success="handleSuccess" @complete="handleComplete" :max="1" accept=".csv" style="width: 40%;float: left;margin-right: 20px;">
                        <el-input size="small" :disabled="true" v-model="attachments[0].name" class="input-with-select">
                            <el-button slot="append">选择文件</el-button>
                        </el-input>
                    </com-upload>
                    <el-button @click="$navigate({r: 'mall/order/download-delivery-template', isByGoods: form.isByGoods})" type="text">下载批量发货模板</el-button>
                </div>
            </el-form-item>
                <div class="tips-text" style="margin-left: 150px;">注：最大支持1000条数据（仅支持csv格式的文件）</div>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="handle('delivery',form)">提 交</el-button>
        </div>
    </el-dialog>

    <!-- 错误列表 -->
    <el-dialog title="错误原因" :visible.sync="dialogErrorVisible" :close-on-click-modal="false">
        <el-table :data="listError">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="order_no" label="订单编号"></el-table-column>
            <el-table-column prop="express_no" label="物流单号"></el-table-column>
            <el-table-column prop="content" label="错误原因"></el-table-column>
        </el-table>
        <div style="text-align: right;margin: 20px 0;">
            <el-pagination @current-change="paginationError" background layout="prev, pager, next" :page-count="pageCountError"></el-pagination>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                loadingError: false,
                uploading: false,
                dialogFormVisible: false,
                dialogErrorVisible: false,
                list: [],
                listError: [],
                delivery_id: 0,
                upload_type: {upload_type:'files'},
                express_companys: [],
                delivery_status_arr: [
                    {name: '处理中', status: 0},
                    {name: '已完成', status: 1},
                ],
                operate_time: null,
                searchInfo: {
                    delivery_status: null,
                    operator_name: null,
                    start_time: null,
                    end_time: null,
                },
                page: 1,
                pageCount: 0,
                pageError: 1,
                pageCountError: 0,
                attachments: [{name: ''}],
                form: {
                    express_id: null,
                    express_name: null,
                    customer_name: null,
                    delivery_file: null,
                    isByGoods: 0, // 是否根据订单的商品名称和数量发货
                },
                FormRules: {
                    delivery_file: [
                        { required: true, message: '模板不能为空', trigger: 'blur' },
                    ],
                    express_name: [
                        { required: true, message: '快递公司不能为空', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {
            this.getList();
            this.getOrderShipping();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.searchInfo.delivery_status) ||
                    !isEmpty(this.searchInfo.operator_name) ||
                    !isEmpty(this.searchInfo.start_time) ||
                    !isEmpty(this.searchInfo.end_time);
            }
        },
        methods: {
            handleStart(files) {
                this.uploading = true;
            },
            handleSuccess(file) {
                if (file.response && file.response.data && file.response.data.code === 0) {
                    const newItem = {
                        url: file.response.data.data.url,
                        name: file.response.data.data.name,
                    };
                    this.attachments.unshift(newItem);
                }
            },
            handleComplete(files) {
                this.form.delivery_file = this.attachments[0].url;
                this.uploading = false;
            },
            handleExpressChange(e){
                let index = this.express_companys.findIndex(v => v.id == e);
                this.form.express_id = this.express_companys[index].id;
                this.form.express_name = this.express_companys[index].name;
            },
            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
                    }
                })
            },
            // 弹框关闭事件回调
            dialogColse() {
                this.form = {
                    express_id: null,
                    express_name: null,
                    delivery_file: null,
                };
            },
            search() {
                this.getList(this.searchInfo);
            },
            resetSearch() {
                this.searchInfo = {
                    delivery_status: null,
                    operator_name: null,
                    start_time: null,
                    end_time: null,
                };
                this.page = 1;
                this.getList();
            },
            addTimeChange(v){
                this.searchInfo.start_time = v?v[0]:'';
                this.searchInfo.end_time = v?v[1]:'';
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            paginationError(currentPage) {
                let self = this;
                self.pageError = currentPage;
                self.getListError();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'delivery':
                        this.send(data, 'mall/order/batch-delivery',(resp) => {
                            if (resp.code == 0) {
                                this.dialogFormVisible = false;
                                this.dialogColse();
                            }
                        });
                        break;
                    case 'error':
                        this.delivery_id = data.id;
                        this.dialogErrorVisible = true;
                        this.listError = [];
                        this.pageCountError = 0;
                        this.getListError()
                        break;
                    case 'export':
                        var param = {batch_delivery_id: data.id, flag: 'EXPORT'};
                        this.send(param, 'mall/order/batch-delivery');
                        break;
                }
            },
            send(params, url = '', callback) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            getList($search = null) {
                this.loading = true;
                let basic_params = {
                    r: 'mall/order/batch-delivery',
                    page: this.page,
                };
                var params = Object.assign(basic_params, $search);
                this.$request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list;
                        this.pageCount = e.data.data.page_count;
                    }
                });
            },
            getListError() {
                this.loadingError = true;
                this.$request({
                    params: {
                        r: 'mall/order/batch-delivery-error',
                        page: this.pageError,
                        delivery_id: this.delivery_id,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.listError = e.data.data.list;
                        this.pageCountError = e.data.data.page_count;
                    }
                });
            },
        }
    })
</script>

<style scoped>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
    .nav {
        background: #ffffff;
        border-radius: 5px;
        padding: 26px 24px;
        margin-bottom: 10px;
    }

    .diy-index {
        display: flex;
        flex-direction: column;
    }

    .header_box {
        display: flex;
        flex-direction: column;
        padding: 25px;
        background: #fff;
        border-radius: 5px 5px 0 0;
        color: #808695;
    }

    .add_temp_right {
        width: 400px;
    }

    .operation {
        cursor: pointer;
        color: #409eff;
    }

    .operation:hover {
        color: #fb6638;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .el-card {
        background: transparent;
        box-shadow: none !important;
        border: 0;
    }

    .el-card__body {
        padding: 0;
    }

    .el-table td,
    .el-table th {
        padding: 12px 0
    }
</style>