download.vue

<template>
    <div class="app-container">
        <el-form :inline="true" :model="form" size="mini">
            <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
            <el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
        </el-form>
        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
            <el-table-column prop="app.app_name" label="应用" align="center" min-width="150"></el-table-column>
            <el-table-column prop="imei" label="IMEI" align="center" min-width="150"></el-table-column>
            <el-table-column prop="download_at" label="下载时间" min-width="150"></el-table-column>
        </el-table>
        <div class="page-wrapper">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
        </div>
    </div>
</template>
<script>
import checkPermission from '@/utils/permission'
import { getDownloadList, deleteDownload } from '@/api/app-store'
import { mapTrim } from '@/utils/index'
import { formatUTCDateTime } from '@/utils/utils'
export default {
    name: "AppDownload",
    data() {
        return {
            total: 0,
            list: [],
            isLoading: false,
            form: {
                uuid: null,
                imei: null,
                pagesize: 15,
                pagenum: 1
            },
        }
    },
    methods: {
        checkPermission,
        fetchData(params) {
            this.isLoading = true
            getDownloadList(params).then(res => {
                if (res.code == 200) {
                    this.total = res.count
                    this.list = res.data.map(item => {
                        item.create_at = formatUTCDateTime(item.create_at)
                        item.update_at = formatUTCDateTime(item.update_at)
                        return item
                    })
                }
            }).catch(err => {
                // this.$message.error(err.message)
                console.log(err.message)
            }).finally(() => {
                this.isLoading = false
            })
        },
        handleSizeChange(e) {
            this.form.pagesize = e
            this.fetchData(mapTrim(this.form))
        },
        handleCurrentChange(e) {
            this.form.pagenum = e
            this.fetchData(mapTrim(this.form))
        },
        handleDelete(index, row) {
            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') deleteDownload(row.id).then(res => {
                        console.log(res)
                        this.total -= 1
                        this.$delete(this.list, index)
                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
                    }).catch(err => {
                        this.$message.error(err.message)
                    })
                }
            })
        },
        onSubmit() {
            this.form.pagenum = 1
            this.form.pagesize = 15
            this.fetchData(mapTrim(this.form))
        },
        onReset(formName) {
            this.form = {
                account: null,
                username: null,
                pagesize: 15,
                pagenum: 1
            }
            this.$refs[formName].resetFields()
            this.fetchData(mapTrim(this.form))
        }
    },
    mounted() {},
    created() {
        if (this.$store.getters.role !== "ADMIN") this.$router.push({ path: "/403" })
        this.fetchData(mapTrim(this.form))
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    & > div.page-wrapper {
        margin: 10px 0px;
    }
}
</style>