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

<template>
    <div class="sy-content">
        <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" prefix-icon="el-icon-search" placeholder="请输入报表名称" maxlength="10">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="reportTableType">
                        <el-select v-model="queryParams.reportTableType" clearable 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="small"
                            @click="getAllOkReportTable">搜索</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"
                    @reportAuthDetail="reportAuthDetail" @delReportTableEvent="delReportTableEvent">
                </CommonTable>
                <!-- 分页信息 -->
                <pagination small :total="tableTotal" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
                    align="right" @pagination="getAllOkReportTable" />
            </el-col>
        </el-row>

        <!-- 运行记录 -->
        <RunRecord ref="runRecord" @getAllOkReportTable="getAllOkReportTable"></RunRecord>
    </div>
</template>

<script>
import CommonTable from '@/components/CommonTable/index.vue'
import RunRecord from './runRecord'
import ReportAuthDetail from './reportAuthDetail'
import { showConfirmWin } from "@/utils/cqcy"
import { mapGetters } from "vuex"

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

export default {
    created() {
        this.getAllOkReportTable()
    },
    components: {
        CommonTable,
        RunRecord,
        ReportAuthDetail
    },
    computed: {
        ...mapGetters([
            'name',
            'uid'
        ])
    },
    data() {
        return {
            //表格参数
            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: "left"
                },
                {
                    propName: "reportTableType",
                    labelName: "报表类型",
                    type: "html",
                    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: "left",
                    width:"120"
                },
                {
                    propName: "runState",
                    labelName: "运行状态",
                    type: "html",
                    formatter: (row, column, cellValue, index) => {
                        if (row.runState == 0) {
                            return '<span class="el-tag el-tag--danger">停止</span>'
                        } else if (row.runState == 1) {
                            return '<span class="el-tag el-tag--success">运行</span>'
                        }
                    },
                    align: "left",
                    width: '100'
                },
                {
                    propName: "userId",
                    labelName: "分享信息",
                    type: "html",
                    formatter: (row, column, cellValue, index) => {
                        let grouplist = JSON.parse(JSON.stringify(row.userGroupList));
                        let groupnameList = '';
                        if(grouplist.length>0){
                          for(let i in grouplist){
                            groupnameList = groupnameList + grouplist[i].userGroupName + ',';
                          }
                          groupnameList = groupnameList.slice(0, -1);
                          return '已分享至(' + groupnameList +')'
                        }

                    },
                    align: "left",
                    width: '200'
                },
                {
                    propName: "createTime",
                    labelName: "创建时间",
                    align: "left",
                    width: '200'
                }
            ],
            tableData: [],
            tableOperate: [
                {
                    btnName: '运行记录',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-setting',
                    methodName: "runRecordEvent",
                }
            ],
            queryParams: {
                page: 1,
                limit: 10,
                reportTableName: '',
                reportTableType: null,
            },
            tableTotal: 0,
            //报表类型
            reportTableTypeList: [
                {
                    value: 0,
                    label: '手动报表'
                }, {
                    value: 1,
                    label: '周期报表'
                }, {
                    value: 2,
                    label: '事件驱动报表'
                }, {
                    value: 3,
                    label: '设备报表'
                }
            ]
        }
    },
    methods: {
        /** 分页获取当前登录人的所有报表 */
        getAllOkReportTable() {
            getAllOkReportTable(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.$router.push({
                path: '/reportTable/reportDetail'
                , query: { id: data.id }
            })
        },
        /** 运行记录 */
        runRecordEvent(row) {
            this.$refs.runRecord.params.autoTableId = row.id
            this.$refs.runRecord.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.getAllOkReportTable()
                })
            })
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table th{
  background-color: #e9e9e9;
  color: #676666;
}
</style>