qimall/backend/modules/admin/views/expire-notice/backups.php

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
        ref="table"
        :api="'admin/expire-notice/backups'"
        :search-list="searchList"
        @selection-change="handleSelectionChange"
        @get-api-data="handleGetApiData"
    >
        <el-table-column type="selection"  width="55px" :selectable="selectables" align="center"></el-table-column>
        <el-table-column prop="id" label="ID"  align="center"> </el-table-column>
        <el-table-column prop="name" label="备份文件名称" align="center"></el-table-column>
        <el-table-column prop="size" label="文件大小" align="center"></el-table-column>
        <el-table-column prop="created_at" label="备份时间" align="center">
            <template slot-scope="scope">
                {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
            </template>
        </el-table-column>
        <el-table-column  prop="status" label="备份状态"  align="center">
            <template slot-scope="scope">
                <div v-if="scope.row.status == 2">
                    <el-tooltip class="item" effect="dark" :content="scope.row.desc" placement="top">
                        <span>{{status_list[scope.row.status]}}</span>
                    </el-tooltip>
                </div>
                <div v-else>
                    {{status_list[scope.row.status]}}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
                <el-button v-if="scope.row.status==1" type="text" :loading="btnLoad" size="mini" @click="download(scope.row.id)">
                    下载
                </el-button>
                <el-button type="text" :loading="btnLoad" size="mini" @click="handle('delete', scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
        <template slot="header-left">
            <el-button @click="dialogVisible = true" type="primary" size="small">备份当前</el-button>
        </template>
        <template slot="header-left">
            <el-button @click="multipleDownload" type="danger" size="small">批量删除</el-button>
        </template>
    </com-list-table>

    <el-dialog
        title="备份当前"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div style="margin-left:20px;margin-bottom:10px;">
            <div class="el-icon-warning" style="font-size:24px;color:#e6a23c;"></div>
            <span style="font-size:18px;">确认备份当前时间下的服务器备份</span>
        </div>
        <span style="color:red;margin-left:45px;">注意：该操作需要一定时间才能完成</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="StartBackups">确 定</el-button>
        </span>
    </el-dialog>
</com-list-page>
<script>
const application = new Vue({
    el: '#application',
    data: {
        crumbs: [{
                title: '备份管理',
                router: '',
            },
            
        ],
        searchList: [
            {
                key: 'datetime',
                title: '备份时间',
                type: 'date-picker',
                valueFormat: 'yyyy-MM-dd',
            },
        ],
        type_list: {},
        status_list: {
            0: "备份中",
            1: "备份完成",
            2: "备份失败"
        },
        multipleSelect: [],
        btnLoad: false,
        dialogVisible: 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=admin/expire-notice/down&download_id=' + id;
            this.btnLoad = false;
        },

        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);
                }
                this.$confirm('确认批量删除这些数据, 注意操作不可恢复！?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(download_ids);
                }).catch(() => {
                        
                });
                // window.location.href = '/index.php?r=mall/download/multiple-download&download_id=' + download_ids;
                // this.handleDelete(download_ids);
            } else {
                this.$confirm('确认清空当前所有备份, 注意操作不可恢复！?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete('');
                }).catch(() => {
                        
                });
            }
        },
        handle(type, id) {
            switch (type) {
                case 'delete':
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.handleDelete(id);
                    }).catch(() => {
                         
                    });
                    break;
            }
        },
        handleDelete(id) {
            
            this.$request({
                params: {
                    r: 'admin/expire-notice/delete',
                },
                data: {
                    id:id
                },
                method: 'post',
            }).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 == 1 || row.status == 0 || row.status == 2) {
                return true
            } else {
                return false;
            }
        },
        handleSelectionChange(val) {
            this.multipleSelect = []
            this.multipleSelect = val
        },

        StartBackups() {
            // this.btnLoad = true;
            this.dialogVisible = false;
            request({
                params: {
                    r: 'admin/expire-notice/start-backups',
                },
                method: 'post',
            }).then(e => {
                if (e.data.code == 0) {
                    this.$message({
                        message: e.data.msg,
                        type: 'success'
                    });
                    this.btnLoad = false
                    this.$refs.table.handleSearch()
                } else {
                    this.$message({
                        message: e.data.msg,
                        type: 'error'
                    });
                }
            }).catch(e => {});
        },
        handleClose(done) {
            done();
        }
    },
})
</script>