industry-data-platform/industry-admin/src/views/report/runConfig/index.vue

<template>
    <div>
        <div class="sy-content" v-if="!isShowReport">
            <el-row>
                <el-col>
                    <!-- 搜索信息 -->
                    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="80px">
                        <el-form-item label="报表名称" prop="reportTableName">
                            <el-input v-model="queryParams.reportTableName" placeholder="请输入报表名称" maxlength="10">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="报表类型" prop="reportTableType">
                            <el-select v-model="queryParams.reportTableType" placeholder="请选择类型">
                                <el-option v-for="tableType in reportTableTypeList" :key="tableType.value"
                                    :label="tableType.label" :value="tableType.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="getAllReportTable">查询</el-button>
                            <!-- <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                    <!-- 数据组表格信息 -->
                    <CommonTable ref="runConfigTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
                        :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
                        :tableOperate="tableOperate" @reportNameClick="reportNameClick" @runRecordEvent="runRecordEvent"
                        @timeConfigEvent="timeConfigEvent" @runConfigEvent="runConfigEvent"
                        @stopConfigEvent="stopConfigEvent" @reportAuthEvent="reportAuthEvent"
                        @reportAuthDetail="reportAuthDetail" @delReportTableEvent="delReportTableEvent">
                    </CommonTable>
                    <!-- 分页信息 -->
                    <pagination v-show="tableTotal > 0" small :total="tableTotal" :page.sync="queryParams.page"
                        :limit.sync="queryParams.limit" align="right" @pagination="getAllReportTable" />
                </el-col>
            </el-row>

            <!-- 运行记录 -->
            <RunRecord ref="runRecord" @getAllReportTable="getAllReportTable"></RunRecord>
            <!-- 定时器配置 -->
            <TimeConfig ref="timeConfig" @getAllReportTable="getAllReportTable"></TimeConfig>
            <!-- 报表授权 -->
            <ReportAuth ref="reportAuth" @getAllReportTable="getAllReportTable"></ReportAuth>
            <!-- 报表授权详情 -->
            <ReportAuthDetail ref="reportAuthDetail" @getAllReportTable="getAllReportTable"></ReportAuthDetail>
        </div>
        <iframe @load="sendToken" id="myIframe" :src="iframeSrc" style="height: 90vh;width: 100%;border: none;"
            v-if="isShowReport"></iframe>
    </div>
</template>

<script>
import CommonTable from '@/components/CommonTable/index.vue'
import RunRecord from './runRecord'
import TimeConfig from './timeConfig'
import ReportAuth from './reportAuth'
import ReportAuthDetail from './reportAuthDetail'
import { showConfirmWin } from "@/utils/cqcy"
import { getToken } from '@/utils/auth'

import {
    getAllReportTable, runAutoTableById,
    delReportTableById
} from '@/api/report/reportTable'

export default {
    created() {
        this.getAllReportTable()
    },
    components: {
        CommonTable,
        RunRecord,
        TimeConfig,
        ReportAuth,
        ReportAuthDetail
    },
    data() {
        return {
            //是否展示报表
            isShowReport: false,
            reportId: null,
            iframeSrc: process.env.VUE_APP_BASE_API + '/reportSheet/report-history.html',
            //表格参数
            isShowCheckbox: false,
            isShowIndex: true,
            tableHight: '68vh',
            tableHeaderTitle: [
                {
                    propName: "reportTableName",
                    labelName: "报表名称",
                    type: "html",
                    formatter: (row, column, cellValue, index) => {
                        let html = `<span style="color: #409eff; cursor: pointer"`
                        html += ` :title="scope.row.reportTableName">`
                        html += row.reportTableName
                        html += `</span>`
                        return html
                    },
                    methodName: "reportNameClick",
                    align: "center"
                },
                {
                    propName: "reportTableType",
                    labelName: "报表类型",
                    formatter: (row, column, cellValue, index) => {
                        if (row.reportTableType == 0) {
                            return '手动报表'
                        } else if (row.reportTableType == 1 || row.reportTableType == 3) {
                            return '周期报表'
                        } else if (row.reportTableType == 2 || row.reportTableType == 4) {
                            return '事件驱动报表'
                        } else if (row.reportTableType == 5 || row.reportTableType == 6) {
                            return '设备报表'
                        }
                    },
                    align: "center"
                },
                {
                    propName: "runState",
                    labelName: "运行状态",
                    formatter: (row, column, cellValue, index) => {
                        if (row.runState == 0) {
                            return '停止'
                        } else if (row.runState == 1) {
                            return '运行中'
                        }
                    },
                    align: "center",
                    width: '100'
                },
                {
                    propName: "createTime",
                    labelName: "创建时间",
                    align: "center",
                    width: '200'
                }
            ],
            tableData: [],
            tableOperate: [
                {
                    btnName: '运行记录',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-setting',
                    methodName: "runRecordEvent",
                },
                {
                    btnName: '配置',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-setting',
                    methodName: "timeConfigEvent",
                    hidden: row => {
                        return row.runState === 0
                    }
                },
                {
                    btnName: '运行',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-video-play',
                    methodName: "runConfigEvent",
                    hidden: row => {
                        return row.runState === 0
                    }
                },
                {
                    btnName: '停止',
                    size: "mini",
                    style: 'color: red;',
                    icon: 'el-icon-video-pause',
                    methodName: "stopConfigEvent",
                    hidden: row => {
                        return row.runState === 1
                    }
                },
                {
                    btnName: '授权',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-user',
                    methodName: "reportAuthEvent",
                    hidden: row => {
                        return row.runState === 0
                    }
                },
                {
                    btnName: '授权详情',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-document',
                    methodName: "reportAuthDetail",
                },
                {
                    btnName: '删除',
                    size: "mini",
                    style: 'color: red;',
                    icon: 'el-icon-delete',
                    methodName: "delReportTableEvent",
                }
            ],
            queryParams: {
                page: 1,
                limit: 10,
                reportTableName: '',
                reportTableType: null,
            },
            tableTotal: 0,
            //报表类型
            reportTableTypeList: [
                {
                    value: 0,
                    label: '手动报表'
                }, {
                    value: 1,
                    label: '周期报表'
                }, {
                    value: 2,
                    label: '事件驱动报表'
                }, {
                    value: 3,
                    label: '设备报表'
                }
            ]
        }
    },
    methods: {
        /** 分页获取当前登录人的所有报表 */
        getAllReportTable() {
            getAllReportTable(this.queryParams).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '数据查询失败！',
                        type: 'warning'
                    })
                    return
                }
                this.tableTotal = res.data.count
                this.tableData = res.data.reportTableList
            })
        },
        /** 报表名称点击事件 */
        reportNameClick(data) {
            this.reportId = data.id
            this.isShowReport = true
        },
        /** 运行记录 */
        runRecordEvent(row) {
            this.$refs.runRecord.params.autoTableId = row.id
            this.$refs.runRecord.visible = true
        },
        /** 配置 */
        timeConfigEvent(row) {
            this.$refs.timeConfig.reportForm.id = row.id
            this.$refs.timeConfig.visible = true
        },
        /** 运行 */
        runConfigEvent(row) {
            showConfirmWin(this, null, '您确定要运行该报表吗？', () => {
                let params = { id: row.id, runState: 1 }
                runAutoTableById(params).then(res => {
                    this.$message({
                        message: '运行报表成功！',
                        type: 'success'
                    })
                    this.getAllReportTable()
                })
            })
        },
        /** 停止 */
        stopConfigEvent(row) {
            showConfirmWin(this, null, '您确定要停止该报表吗？', () => {
                let params = { id: row.id, runState: 0 }
                runAutoTableById(params).then(res => {
                    this.$message({
                        message: '停止报表成功！',
                        type: 'success'
                    })
                    this.getAllReportTable()
                })
            })
        },
        /** 授权 */
        reportAuthEvent(row) {
            this.$refs.reportAuth.reportId = row.id
            this.$refs.reportAuth.visible = true
        },
        /** 授权详情 */
        reportAuthDetail(row) {
            this.$refs.reportAuthDetail.reportId = row.id
            this.$refs.reportAuthDetail.visible = true
        },
        /** 删除报表 */
        delReportTableEvent(row) {
            showConfirmWin(this, null, '您确定要删除该报表吗？', () => {
                delReportTableById(row.id).then(res => {
                    this.$message({
                        message: '删除报表成功！',
                        type: 'success'
                    })
                    this.getAllReportTable()
                })
            })
        },
        sendToken() {
            const _this = this
            _this.sendMsg({
                cmd: 'init',
                data: {
                    token: getToken(),
                    url: process.env.VUE_APP_BASE_API,
                    reportId: this.reportId
                }
            })
            window.addEventListener('message', function (event) {
                const json = event.data
                if (json.cmd === 'close') {
                    _this.isShowDesign = false
                }
            })
        },
        sendMsg(msg) {
            document.getElementById('myIframe').contentWindow.postMessage(msg, '*')
        }
    }
}
</script>