udims-vue/src/views/UDIDownload/fielInfo.vue

<template>
    <div>
        <el-card class="el-card">
        <el-form  :inline="true">
            <el-form-item>
            <span style="color: #000; margin-left: 10px; margin-right: 6px"
            >日期:</span
            >
                <el-date-picker
                    :picker-options="pickerOptions"
                    v-model="dateRange"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="search" @click="download()"
                    >重新下载
                    </el-button
                    >
                    <el-button>刷新</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border stripe>
            <el-table-column label="文件名" align="center" prop="fileName">
<!--                <template slot-scope="scope">
                    <a :href="'/files/'+scope.row.fileName" :download="scope.row.fileName">{{ scope.row.fileName }}</a>
                </template>-->
            </el-table-column>
            <el-table-column label="行数" align="center" prop="count" :show-overflow-tooltip="true"/>
            <el-table-column label="文件大小" align="center" prop="fileSize" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ getFileSize(scope.row.fileSize) }}
                </template>
            </el-table-column>
            <el-table-column label="起始日期" align="center" prop="startDate" :show-overflow-tooltip="true"/>
            <el-table-column label="结束日期" align="center" prop="endDate" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.page"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="queryParams.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {getFileList,exportToFile} from "@/api/UDIDownload/fileInfo";

export default {
    name: "fileInfo",
    data() {
        return {
            tableData: [],
            loading: true,
            total: 0,
            dateRange:[],
            queryParams: {
                page: 1,
                limit: 15
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getList();
            this.page++;
        },
        getList() {
            getFileList(this.queryParams).then(res => {
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        /**
         * 重新下载文件
         */
        download(){
            if(this.dateRange == null || this.dateRange == ""){
                this.$message.error("请选择日期");
                return;
            }
            exportToFile(this.addDateRange({},this.dateRange));
            this.$message.info("已发送下载指令，请稍等查看日志,防止同时下载！");
        },
        getFileSize(size) {
            let res = "";
            if (size > 0) {
                if (size > 1000 * 1000)
                    res = (size / (1000 * 1000)).toFixed(2) + "M";
                else if (size > 1000)
                    res = (size / 1000).toFixed(2) + "k";
                else
                    res = size + "byte";
            }
            return res;
        }
    }
}
</script>

<style scoped>
a {
    text-decoration: none;
    color: #3683be;
}
</style>