BusinessBenchmark/src/components/assessment/evaluationReportTable.vue

<template>
    <div class="reportTItem">
        <el-dialog title="考评报告详情" v-model="editEvaluaVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="reportTAll">
                <div class="reportTBtn">
                    <div class="PeriodBtn">
                        <!-- <p style="font-size: 14px">{{rowevalradio.evaluateReportName}}</p> -->
                        <el-row :gutter="10" style="padding-left: 10px;position: relative;right: -39vw;">
                            <el-col :span="1.5">
                                <el-button
                                type="warning"
                                icon="Download"
                                size="mini"
                                @click="handleExport"
                                >导出</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="reportTTableData">
                        <el-table :data="reportTableData.body" ref="report-table" style="width: 100%">
                            <el-table-column :label="rowevalradio.des" align="center">
                                <el-table-column label="序号" type="index" width="50" align="center" />
                                <el-table-column :label="item.nameZh" :prop="item.nameEh" v-for="item in reportTableData.title" :key="item" />
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import ExcelJS from 'exceljs'
import fileSave from 'file-saver'
import {apiGetEvalReportinfoList} from '../../api/api'
export default {
    data() {
        return {
            editEvaluaVisible: false,
            reportTableData: [],
            rowevalradio: {},
        }
    },
    methods: {
        init(row) {
            this.editEvaluaVisible = true
            this.reportTableData = []
            this.rowevalradio = row
            this.getreportTableData(row)
        },
        // 查询规则详情数据
        getreportTableData(row) {
            let that = this
            let params = {
                evaluateReportId: row.id
            }
            apiGetEvalReportinfoList(params).then(datas =>{
                if (datas && datas.data) {
                    that.reportTableData = datas.data
                }
            })
        },
        handleExport() {
            let dataHeader = this.reportTableData.title  //接口返回表格头
            let dataMsg = this.reportTableData.body  //接口返回数据
            let adb = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N']
            let col = [{name: '序号'}]
            let colEn = []
            dataHeader.forEach(item =>{
                let objzh = {
                    name: item.nameZh
                }
                col.push(objzh)
                colEn.push(item.nameEh)
            })
            let rowData = []
            for(let i =0; i<dataMsg.length; i++) {
                let item = dataMsg[i]
                let arr = []
                for(let j =0; j<colEn.length; j++) {
                    let it = colEn[j]
                    arr[0] = i+1
                    arr.push(item[it])
                }
                rowData.push(arr)
            }
            const workbook = new ExcelJS.Workbook()
            const worksheet = workbook.addWorksheet('Sheet1')
            worksheet.properties.defaultColWidth = 15; // 默认列宽
            //定义表格标题
            const Targetrow = worksheet.getRow(1);
            Targetrow.height = 30;
            const Targetcell = worksheet.getCell(`A1`);
            worksheet.mergeCells(`A1:${adb[col.length-1]}1`);
            Targetcell.value = this.rowevalradio.des;
            Targetcell.font = { name: "微软雅黑", family: 4, size: 11, bold: false }; // 字体
            Targetcell.alignment = { vertical: "middle", horizontal: "center" }; //对齐
            worksheet.addTable({
                name: 'MyTable',
                ref: 'A2',
                headerRow: true,
                columns: col,
                rows: rowData,
            });
            workbook.xlsx.writeBuffer().then(buffer => {
                //这里为type
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
                fileSave(blob, `数据导出.xlsx`)
            })
        }
    }
}
</script>

<style lang="less">
.reportTItem{
    .el-overlay{
        .el-dialog{
            // margin-top: 5vh !important;
            .el-dialog__body{
                padding: 0 20px 30px 20px !important;
                .reportTAll{
                    .el-select, .el-input{
                        width: 100%;
                    }
                    .reportTBtn{
                        padding: 10px 20px 0 20px;
                        .PeriodBtn{
                            display: flex;
                            justify-content: center;
                            padding: 20px 0;
                            .el-button{
                                height: 30px;
                                padding: 0 30px ;
                                span{
                                    margin:0;
                                }
                            }
                            .is-disabled{
                                opacity: 0.5;
                            }
                        }
                    }
                    .reportTTableData{
                        .el-table{
                            .el-table__body-wrapper{
                                height: 65vh !important;
                            }
                            .el-input__inner{
                                height: 30px !important;
                            }
                            .el-radio__label{
                                display: none;
                            }
                        }
                        .el-pagination{
                            margin-top: 20px;
                            text-align: end;
                            position: relative;
                        }
                    }
                    .onlyDialog{
                        .el-overlay{
                            .el-dialog{
                                margin-top: 10vh !important;
                            }
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    display: flex;
                    justify-content: center;
                    .el-button{
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }
}
</style>