scd_tools_ui/src/pages/report/ReportVue.vue

<template>
    <div>
        <div class="bigBox">
            <div class="tableBox">
                <el-table :data="reportList" style="width: 100%;height: calc(100vh - 240px);position: relative;"
                    :stripe="true">
                    <el-table-column label="序号" width="auto">
                        <template #default="{ $index }">{{ $index + 1 }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="任务名称" width="auto" />
                    <el-table-column prop="station_name" label="变电站" width="auto" />
                    <el-table-column prop="scd_name" label="SCD名称" width="auto" />
                    <el-table-column prop="start_time" label="检测日期" width="auto" />
                    <el-table-column fixed="right" label="操作" width="auto">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="lookReport(scope.row)"><el-icon>
                                    <View />
                                </el-icon>查看</el-button>
                            <el-button text type="primary" size="small" @click="downFile(scope.row)"><el-icon>
                                    <Download />
                                </el-icon>报告下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <div class="pageBox">
                <Pagination style="position: relative;" :totals="totals" @pageBack="pageBack"></Pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import Pagination from './components/Pagination.vue'
import report from "@/api/report"
import task from '@/api/task'
import system from "@/api/system"
import { useRouter, useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
export default {
    setup() {
        let route = useRoute()//路由信息
        let router = useRouter()//路由跳转api
        let reportList = ref([
        ])//报告列表
        let totals = ref(0)//总条数
        // 初始化组件
        function reload() {
            // 2为完成检测
            task.getTask({ pageno: 1, pagesize: 10, state: 2 }).then(res => {
                if (res.data == null) {
                    reportList.value = []
                    return
                } else {
                    reportList.value = res.data
                    totals.value = res.count
                }
            })
        }
        // 跳转到查看详情页面
        function lookReport(row) {
            console.log(row, 'rows');
            // router.push('/home/report/details')
            router.push({
                path: "/home/report/details",
                query: {
                    reportId: row.id,
                    scdId: row.scd_id,
                    stationName: row.station_name,
                    names: row.name
                }
            })
        }
        // 分页组件返回数据
        function pageBack(size, index) {
            report.allReport({ pageno: index - 0, pagesize: size - 0 }).then(res => {// 获取所有报告
                // console.log(res, 'res');
                if (res.data != null) {
                    reportList.value = res.data
                    totals.value = res.data.length
                } else {
                    ElMessage({
                        message: "暂无数据",
                        type: "info"
                    })
                }
            })
        }
        // 下载报告
        function downFile(row){
            console.log(row,'row');
            system.downLoad({
                ids:row.report_id
            }).then(res=>{
                console.log(res,'down');
            })
        }
        onMounted(() => {
            reload()
        })
        return {
            reportList,//报告列表
            reload,//初始化组件
            lookReport,// 跳转到查看详情页面
            totals,//总条数
            pageBack,//分页组件返回数据
            downFile,//下载报告
        }
    },
    components: {
        Pagination
    }
}
</script>

<style scoped>
.bigBox {
    width: 98%;
    height: calc(100vh - 240px);
    margin: 0 auto;
}

.tableBox {
    width: 100%;
    height: calc(100vh - 240px);
}

.pageBox {
    width: 420px;
    height: auto;
    position: absolute;
    bottom: 20px;
    right: 30px;
}

:deep(.el-scrollbar__view) {
    width: 100%;
}
</style>