qimall/addons/Mch/client/views/download/index.php

<style>
    .set-el-button {
        padding: 0!important;
        border: 0;
        margin: 0 5px;
    }
    .sort-input {
        width: 100%;
        background-color: #F3F5F6;
        height: 32px;
    }

    .sort-input span {
        height: 32px;
        width: 100%;
        line-height: 32px;
        display: inline-block;
        padding: 0 10px;
        font-size: 13px;
    }

    .sort-input .el-input__inner {
        height: 32px;
        line-height: 32px;
        background-color: #F3F5F6;
        float: left;
        padding: 0 10px;
        border: 0;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-info .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover{
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus{
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>下载中心</span>
        </div>
        <div class="table-body">
            <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                <el-form-item label="导出时间">
                    <el-date-picker style="margin-top: 1px;" @change="changeTime" v-model="datetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="请输入文件名称" v-model="search_data.name" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="multipleDownload">批量下载</el-button>
                    <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" border :data="list" style="width: 100%;margin-bottom: 15px" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :selectable="selectables"> </el-table-column>
                <el-table-column prop="id" label="ID" width="100"> </el-table-column>
                <el-table-column  prop="name" width="280" label="文件名称"></el-table-column>
                <el-table-column width='120' prop="type" label="类型">
                    <template slot-scope="scope">
                        {{type_list[scope.row.type]}}
                    </template>
                </el-table-column>
                <el-table-column width='180' prop="num" label="数据量"></el-table-column>
                <el-table-column width='150' prop="status" label="状态">
                    <template slot-scope="scope">
                        {{status_list[scope.row.status]}}
                    </template>
                </el-table-column>
                <el-table-column width='180' prop="size" label="文件大小">
                </el-table-column>
                <el-table-column width='280' prop="created_at" label="导出时间">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="280">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status==2" type="text" size="mini" circle style="margin-left: 10px;margin-top: 10px" @click="download(scope.row.id)">
                            <el-tooltip class="item" effect="dark" content="下载" placement="top">
                                <el-button type="primary" size="mini" icon="el-icon-download" round></el-button>
                            </el-tooltip>
                        </el-button>
                        <!-- <el-button v-if="scope.row.status==3" type="text" size="mini" circle style="margin-left: 10px;margin-top: 10px" @click="regenerate(scope.row.id)">
                            <el-tooltip class="item" effect="dark" content="重新生成导出文件" placement="top">
                                <el-button type="primary" size="mini" icon="el-icon-refresh-left" round></el-button>
                            </el-tooltip>
                        </el-button> -->
                        <el-button v-if="scope.row.status==2||scope.row.status==3" style="margin-left: 10px;margin-top: 10px" type="text" class="set-el-button" size="mini" circle @click="handleDelete(scope.row.id)">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <el-button type="primary"  size="mini" icon="el-icon-delete" round></el-button>
                            </el-tooltip>
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
                    <el-pagination v-if="pagination" :page-size="page_size" style="display: inline-block;float: right;" background @current-change="pageChange" layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                list: [],
                type_list:Object,
                status_list:Object,
                name: '',
                pagination: null,
                page: 1,
                page_size: 10,
                page_count: 1,
                search_data: { // 筛选条件
                    name: null,
                    start: null,
                    end: null,
                },
                datetime: [],
                multipleSelect: [],
            };
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.start) || !isEmpty(this.search_data.end) || !isEmpty(this.search_data.name);
            }
        },
        methods: {
            //分页
            pageChange(page) {
                this.page = page;
                this.loadData({});
            },

            // 根据参数获取请求信息
            loadData(search_data) {
                this.loading = true;
                console.log(this.keyword)
                request({
                    params: {
                        r: 'mch/client/download/index',
                        name:search_data.name,
                        start:search_data.start,
                        end:search_data.end,
                        page: this.page,
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.type_list = e.data.data.type_list;
                        this.status_list = e.data.data.status_list;
                        this.pagination = e.data.data.pagination;
                        this.page_size = e.data.data.page_size;
                        this.page_count = e.data.data.page_count;
                    } else {
                        this.listLoading = false;
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            handleDelete(id) {
                this.$request({
                    params: {
                        r: 'mch/client/download/del',
                        id: id,
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message({
                            message: e.data.msg,
                            type: 'success'
                        });
                        location.reload();
                    }
                }).catch(e => {});
            },
            download(id){
                window.location.href = '/index.php?r=mch/client/download/down&download_id=' + id;
            },
            search() {
               console.log(this.search_data)
                this.loadData(this.search_data);
            },
            changeTime(e) {
                this.search_data.start = e[0]
                this.search_data.end = e[1]
            },
            clearSearch() {
                this.search_data.start = null;
                this.search_data.end = null;
                this.search_data.name = null;
                this.datetime = [];
            },
            regenerate(id) {
                let self = this;
                self.loading = true;
                request({
                    params: {
                        r: 'mch/client/download/regenerate',
                        download_id: id,
                    },
                    method: 'get'
                }).then(e => {
                    self.loading = false;
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.listLoading = false;
                    self.$message.error('网络错误');
                });
            },
            handleSelectionChange(val) {
                // console.log(val);
                this.multipleSelect = [];
                this.multipleSelect = val;
            },
            multipleDownload() {
                if (this.multipleSelect.length) {
                    let val = this.multipleSelect;
                    let download_ids = [];
                    let for_num = val.length;
                    for (let i = 0; i < for_num; i++) {
                        if (val[i].status != 2) {
                            // 选择了不可下载的文件
                            this.$message.error('选择了不可导出的文件[' + val[i].name + '(ID:' + val[i].id + ')],请重新选择');
                            return false;
                        }
                        download_ids.push(val[i].id);
                    }
                    window.location.href = '/index.php?r=mch/client/download/multiple-download&download_id=' + download_ids;
                } else {
                    this.$message.error('请先选择要批量下载的文件');
                }
            },
            selectables(row,index){
                if(row.status==2){
                    return true
                }else{
                    return false;
                }
            }
        },
        created() {
            this.loadData({});
        }
    })
</script>