qimall/backend/modules/mall/views/download/index.php

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
        ref="table"
        :api="'mall/download/index'"
        :search-list="searchList"
        @selection-change="handleSelectionChange"
        @get-api-data="handleGetApiData"
    >
        <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" 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='120' 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='100' prop="size" label="文件大小">
        </el-table-column>
        <el-table-column width='180' 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 width='150' label="操作" align="right">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status==2" type="text" :loading="btnLoad" size="mini" @click="download(scope.row.id)">
                    下载
                </el-button>
                <!-- <el-button v-if="scope.row.status==3" type="text" :loading="btnLoad" 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" type="text" :loading="btnLoad" size="mini" @click="handleDelete(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
        <template slot="footer-button">
            <el-button @click="multipleDownload">批量下载</el-button>
        </template>
    </com-list-table>
</com-list-page>
<script>
const application = new Vue({
    el: '#application',
    data: {
        crumbs: [{
                title: '首页',
                router: 'mall/overview/index',
            },
            {
                title: '下载',
            },
            {
                title: '下载中心',
            }
        ],
        categorys: {
            'optimize': '功能优化',
            'bug': 'BUG修复',
            'others': '其他建议',
        },
        searchList: [
            {
                key: 'name',
                title: '文件名称',
                type: 'text',
            },
            {
                key: 'datetime',
                title: '导出时间',
                type: 'date-time-range',
            },
        ],
        type_list: {},
        status_list: {},
        multipleSelect: [],
        btnLoad: false,
    },
    methods: {
        handleGetApiData(data) {
            this.type_list = data.type_list
            this.status_list = data.status_list
        },
        download(id) {
            this.btnLoad = true;
            window.location.href = '/index.php?r=mall/download/down&download_id=' + id;
            this.btnLoad = false;
        },
        regenerate(id) {
            let self = this;
            self.btnLoad = true;
            request({
                params: {
                    r: 'mall/download/regenerate',
                    download_id: id,
                },
                method: 'get'
            }).then(e => {
                self.btnLoad = false;
                if (e.data.code === 0) {
                    self.$message.success(e.data.msg);
                } else {
                    self.$message.error(e.data.msg);
                }
            }).catch(e => {
                this.$refs.table.handleSearch()
                self.$message.error('网络错误');
            });
        },
        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=mall/download/multiple-download&download_id=' + download_ids;
            } else {
                this.$message.error('请先选择要批量下载的文件');
            }
        },
        handleDelete(id) {
            this.btnLoad = true;
            this.$request({
                params: {
                    r: 'mall/download/del',
                    id: id,
                },
            }).then(e => {
                if (e.data.code == 0) {
                    this.$message({
                        message: e.data.msg,
                        type: 'success'
                    });
                    this.btnLoad = false
                    this.$refs.table.handleSearch()
                }
            }).catch(e => {});
        },
        selectables(row, index) {
            if (row.status == 2) {
                return true
            } else {
                return false;
            }
        },
        handleSelectionChange(val) {
            this.multipleSelect = []
            this.multipleSelect = val
        },
    },
})
</script>