qimall/addons/HandBouns/backend/views/default/index.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>
            ② 当金额，积分，佣金必须为纯数字,都是必填项，如果其中一项不需要进行分红，则填写0<br>
            ③ 导出失败记录 操作完成后，请在左侧的【下载】菜单进行下载查看。<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 class="switch_minus">
                <el-text class="mx-1" type="danger" style="margin-right: 10px;color: red">是否导入负数</el-text>
                <el-switch
                        v-model="is_allow_minus"
                        active-text="是"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="否" @change="switchAllowMinusChange">
                </el-switch>
            </div>
        </div>

        <!-- 搜索开始 -->
        <el-form ref="searchInfo" :model="searchInfo" size="small">
            <el-row :gutter="24">
                <el-col :span="9">
                    <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.export_status" placeholder="请选择状态">
                            <el-option v-for="item in export_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="export_count" label="导入订单数"></el-table-column>
                <el-table-column prop="export_success_count" label="导入成功"></el-table-column>
                <el-table-column label="导入失败">
                    <template slot-scope="scope">
                        {{ scope.row.export_fail_count }}
                    </template>
                </el-table-column>
                <el-table-column prop="export_status" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.export_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.export_status == 0"><span>导入正在处理</span></div>
                        <div v-else>
                            <span v-if="scope.row.export_count != scope.row.export_success_count">
                                <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>
                                <el-button type="text" @click="handle('exportSuccess',scope.row)">导出成功分红记录</el-button>
                                <span style="color: #DCDFE6">|</span>
                                导入成功
                            </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">
        <el-form :model="form" label-width="150px" :rules="FormRules" ref="form">

            <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:'hand-bouns/default/download-hand-bouns-template'})" type="text">下载导入模板</el-button>
                </div>
            </el-form-item>
            <div class="tips-text" style="margin-left: 150px;">注：最大支持50000条数据（仅支持csv格式的文件）</div>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="handle('submit',form)" :loading="butLoading">提 交</el-button>
        </div>
    </el-dialog>

    <!-- 错误列表 -->
    <el-dialog title="错误原因" :visible.sync="dialogErrorVisible">
        <el-table :data="listError">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="mobile" label="手机号码"></el-table-column>
            <el-table-column prop="balance" label="余额"></el-table-column>
            <el-table-column prop="score" label="积分"></el-table-column>
            <el-table-column prop="commission" label="佣金"></el-table-column>
            <el-table-column prop="reason" 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,
                butLoading:false,
                list: [],
                listError: [],
                is_allow_minus: 0,
                export_id: 0,
                upload_type: {upload_type:'files'},
                express_companys: [],
                export_status_arr: [
                    {name: '处理中', status: 0},
                    {name: '已完成', status: 1},
                ],
                operate_time: null,
                searchInfo: {
                    export_status: null,
                    operator_name: null,
                    start_time: null,
                    end_time: null,
                },
                page: 1,
                pageCount: 0,
                pageError: 1,
                pageCountError: 0,
                attachments: [{name: ''}],
                form: {
                    bouns_file: null,
                },
                FormRules: {
                    bouns_file: [
                        { required: true, message: '模板不能为空', trigger: 'blur' },
                    ],
                },
            }
        },
        created() {
            this.getList();
            //this.getOrderShipping();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.searchInfo.export_status) ||
                    !isEmpty(this.searchInfo.operator_name) ||
                    !isEmpty(this.searchInfo.start_time) ||
                    !isEmpty(this.searchInfo.end_time);
            }
        },
        methods: {
            handleStart(files) {
                this.uploading = true;
            },
            switchAllowMinusChange(val) {
                let message = "关闭";
                if (val === 1) message = "开启";
                this.$confirm("您确定要" + message + "可导入负数吗?", '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'hand-bouns/default/allow-minus'
                        },
                        method: 'post',
                        data: {is_allow_minus: val},
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    })
                }).catch(() => {
                    this.is_allow_minus = this.is_allow_minus === 1 ? 0 : 1;
                })
            },
            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.bouns_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,
                    bouns_file: null,
                };
            },
            search() {
                this.getList(this.searchInfo);
            },
            resetSearch() {
                this.searchInfo = {
                    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 'submit':
                        this.butLoading = true;
                        this.send(data, 'hand-bouns/default/index',(resp) => {
                            if (resp.code == 0) {
                                this.dialogFormVisible = false;
                                this.dialogColse();
                                this.butLoading = false;
                            }
                        });
                        break;
                    case 'error':
                        this.export_id = data.id;
                        this.dialogErrorVisible = true;
                        this.listError = [];
                        this.pageCountError = 0;
                        this.getListError()
                        break;
                    case 'export':
                        var param = {export_id: data.id, flag: 'EXPORT'};
                        this.send(param, 'hand-bouns/default/export-error');
                        break;
                    case 'exportSuccess':
                        var param = {export_id: data.id, flag: 'EXPORT'};
                        this.send(param, 'hand-bouns/default/export-success');
                        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: 'hand-bouns/default/index',
                    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.list;
                        this.is_allow_minus = e.data.data.is_allow_minus;
                        this.pageCount = e.data.data.page_count;
                    }
                });
            },
            getListError() {
                this.loadingError = true;
                this.$request({
                    params: {
                        r: 'hand-bouns/default/export-error',
                        page: this.pageError,
                        export_id: this.export_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>
    .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: flex-start;
    }

    .switch_minus {
        margin-left: 20px;
    }

    .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>