BusinessBenchmark/src/components/evaluationSystem/achievementKDetail.vue

<template>
    <div class="startFrom">
        <el-dialog title="业绩考核系数详情" v-model="dialogVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="startDetail">
                <p class="starttitleSty">基础信息：</p>
                <el-row class="danjuMsg">
                    <el-col :span="10">
                        <div class="danjuMsg_data">
                            <span class="data_tit">单位名称:</span>
                            <span>{{receiptMsg.organizationName}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="danjuMsg_data">
                            <span class="data_tit">年度:</span>
                            <span>{{receiptMsg.year}}</span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="danjuMsg_data">
                            <span class="data_tit data_tit_1">业务简述:</span>
                            <span>{{receiptMsg.desc}}</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="detaTableBtns">
                    <div class="tableBtn import" @click="handleImport">
                        <img :src="importIcon" alt="">
                        <span>导入</span>
                    </div>
                    <div class="tableBtn export" @click="handleExport">
                        <img :src="exportIcon" alt="">
                        <span>导出</span>
                    </div>
                </div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="业绩考核系数明细" name="first">
                         <!-- @select="rowClick" @select-all="rowClick" -->
                        <el-table :data="weightAllocation" style="width: 100%" ref="report-table_day">
                            <!-- <el-table-column type="selection" label="操作" align="center"></el-table-column> -->
                            <el-table-column type="index" label="序号" width="80" />
                            <el-table-column label="考评单位" prop="organizationName" width="300"/>
                            <el-table-column label="资产管理系数" align="center">
                                <el-table-column label="资产总额" prop="zzc" />
                                <el-table-column label="K1" prop="k1" />
                            </el-table-column>
                            <el-table-column label="幅度管理系数" align="center">
                                <el-table-column label="机组" prop="jzs" />
                                <el-table-column label="K2" prop="k2" />
                            </el-table-column>
                            <el-table-column label="效益贡献系数" align="center">
                                <el-table-column label="账面利润总额" prop="zmlrze" />
                                <el-table-column label="发电量" prop="fdl" />
                                <el-table-column label="度电利润" prop="ddlr" />
                                <el-table-column label="K3" prop="k3" />
                            </el-table-column>
                            <el-table-column label="定员管理系数" align="center">
                                <el-table-column label="定员" prop="dy" />
                                <el-table-column label="K4" prop="k4" />
                            </el-table-column>
                            <el-table-column label="K" prop="k" />
                            <el-table-column label="填报人" prop="createName" />
                            <el-table-column label="填报日期" prop="createTime" width="160" />
                        </el-table>
                    </el-tab-pane>                    
                </el-tabs>
                
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
        <import-dailog ref="importPage" @successImport="successImport"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import {apigetyeargroupcoefficientlistById} from '../../api/api'
import exportIcon from '../../assets/btnIcon/export.png'
import importIcon from '../../assets/btnIcon/import.png'
import ExcelJS from 'exceljs'
import fileSave from 'file-saver'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import  * as XLSXD from 'xlsx-js-style'
export default {
    components: {
        importDailog
    },
    data() {
        return {
            dialogVisible: false,
            activeName: 'first',
            quantifiedList: [],
            nonQuantifiedList: [],
            changeDateSelect: [],
            receiptMsg: {
                organizationName: '',
                des: '',
                year: '',
            },
            exportIcon: exportIcon,
            importIcon: importIcon,
            rowMsg: {},
            weightAllocation: []
        }
    },
    created() {
    },
    methods: {
        init(row) {
            this.dialogVisible = true
            this.activeName = 'first'
            this.getDetails(row.id)
            this.rowMsg = row
        },
        handleClick() {
            this.changeDateSelect = []
        },
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        //获取详情
        getDetails(id) {
            let that = this
            let params = {
                id: id
            }
            apigetyeargroupcoefficientlistById(params).then(datas =>{
                if (datas && datas.data) {
                    that.receiptMsg = {
                        organizationName: datas.data.createOrgName,
                        year: datas.data.year,
                        desc: datas.data.des
                    }
                    that.weightAllocation = datas.data.coefficientList
                }
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "业绩考核系数信息导入"
            this.$refs.importPage.upload.open = true
            this.$refs.importPage.upload.url = '/year-operating-coefficient/import'
        },
        successImport(val) {
            this.getDetails(this.rowMsg.id)
        },
        handleExport() {
            let data = []  //接口返回数据
            data = this.weightAllocation
            const workbook = new ExcelJS.Workbook()
            const worksheet = workbook.addWorksheet('Sheet1')
            //根据数据自己调整
            worksheet.columns = [
                { header: 'ID', key: 'id', width: 26 },
                { header: '考评单位ID', key: 'organizationId', width: 26 },
                { header: '考评单位', key: 'organizationName', width: 26 },
                { header: '资产管理系数', key: 'zzc', width: 18},
                { header: '', key: 'k1', width: 18 },
                { header: '幅度管理系数', key: 'jzs', width: 18 },
                { header: '', key: 'k2', width: 18 },
                { header: '效益贡献系数', key: 'zmlrze', width: 18 },
                { header: '', key: 'fdl', width: 18 },
                { header: '', key: 'ddlr', width: 18 },
                { header: '', key: 'k3', width: 18 },
                { header: '定员管理系数', key: 'dy', width: 18 },
                { header: '', key: 'k4', width: 18 },
                { header: 'K', key: 'k', width: 26 },
                { header: '填报人', key: 'createName', width: 26 },
                { header: '填报日期', key: 'createTime', width: 26 },
            ]
            // worksheet.getColumn(3).values = ['资产管理系数', '资产总额'];
            // worksheet.getColumn(4).values = ['', 'K1'];
            // worksheet.getColumn(5).values = ['幅度管理系数', '机组'];
            // worksheet.getColumn(6).values = ['', 'K2'];
            // worksheet.getColumn(7).values = ['效益贡献系数', '账面利润总额'];
            // worksheet.getColumn(8).values = ['', '发电量'];
            // worksheet.getColumn(9).values = ['', '度电利润'];
            // worksheet.getColumn(10).values = ['', 'K3'];
            // worksheet.getColumn(11).values = ['定员管理系数', '定员'];
            // worksheet.getColumn(12).values = ['', 'K4'];
            worksheet.getColumn(4).values = ['资产管理系数', '资产总额'];
            worksheet.getColumn(5).values = ['', 'K1'];
            worksheet.getColumn(6).values = ['幅度管理系数', '机组'];
            worksheet.getColumn(7).values = ['', 'K2'];
            worksheet.getColumn(8).values = ['效益贡献系数', '账面利润总额'];
            worksheet.getColumn(9).values = ['', '发电量'];
            worksheet.getColumn(10).values = ['', '度电利润'];
            worksheet.getColumn(11).values = ['', 'K3'];
            worksheet.getColumn(12).values = ['定员管理系数', '定员'];
            worksheet.getColumn(13).values = ['', 'K4'];
            //合并单元格
            worksheet.mergeCells('A1:A2');
            worksheet.mergeCells('B1:B2');
            worksheet.mergeCells('C1:C2');
            worksheet.mergeCells('D1:E1');
            worksheet.mergeCells('F1:G1');
            worksheet.mergeCells('H1:I1:G1:K1');
            worksheet.mergeCells('L1:M1');
            worksheet.mergeCells('N1:N2');
            worksheet.mergeCells('O1:O2');
            worksheet.mergeCells('P1:P2');
            worksheet.getRow(1).font = {
                size: 12,
                bold: true
            }
            worksheet.getRow(2).font = {
                size: 12,
                bold: true
            }
            worksheet.addRows(data)

            workbook.xlsx.writeBuffer().then(buffer => {
                //这里为type
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
                fileSave(blob, `数据导出.xlsx`)
            })
        },
        exportExcel() {
            let $e = this.$refs['report-table_day'].$el
            try {
                let $table = $e.querySelector('.el-table__fixed')
                if(!$table) {
                    $table = $e
                }
                const wb = XLSX.utils.table_to_book($table, {raw:true})

                const wbout = XLSXD.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
                saveAs(
                    new Blob([wbout],{type: 'application/octet-stream'}),
                    `权重分配数据导出.xlsx`,
                )
            } catch (e) {
                if (typeof console !== 'undefined') console.error(e)
            }
        }
    }
}
</script>

<style lang="less">
.startFrom{
    .el-overlay{
        .el-dialog{
            // margin-top: 7vh;
            .el-dialog__body{
                padding: 0 20px !important;
                .startDetail{
                    .starttitleSty{
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #3B7AD1;
                        // line-height: 12px;
                        margin: 20px 0 20px 10px;
                    }
                    .danjuMsg{
                        border: 1px solid #D6DBEA;
                        padding: 10px 20px;
                        border-radius: 10px;
                        .danjuMsg_data{
                            padding: 5px 0 10px 0;
                            .data_tit{
                                margin-right: 10px;
                                font-weight: bold;
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                color: #8991B0;
                            }
                            .data_tit_wd{
                                display: inline-block;
                                width: 90px;
                            }
                            .el-form-item--small{
                                .el-input{
                                    height: 25px;
                                    width: 160px;
                                }
                                margin-bottom: 0;
                                .el-input-number{
                                    height: 25px;
                                    .el-input-number__decrease, .el-input-number__increase{
                                        right: -39px;
                                    }
                                }
                            }
                        }
                    }
                    .el-select, .el-input{
                        width: 100%;
                    }
                    .detaTableBtns{
                        display: flex;
                        justify-content: flex-end;
                        width: 100%;
                        position: relative;
                        top: 32px;
                        z-index: 11111;
                        .tableBtn {
                            display: flex;
                            margin-right: 30px;
                            // width: 13%;
                            width: fit-content;
                            img{
                                margin-right: 5px;
                                margin-top: 1px;
                            }
                            span{
                                display: inline-block;
                                width: 35px;
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                            }
                        }
                        .import{
                            cursor: pointer;
                            span{
                                color: #ce1e78;
                            }
                        }
                        .export{
                            cursor: pointer;
                            span{
                                color: #2baa8a;
                            }
                        }
                    }
                    .el-tabs{
                        .el-tabs__header{
                            .el-tabs__nav{
                                .el-tabs__item{
                                    font-size: 18px;
                                    font-family: Microsoft YaHei;
                                    font-weight: bold;
                                    margin: 0 10px;                                    
                                    color: #8991B0;
                                }
                                .is-active{
                                    font-size: 18px;
                                    font-family: Microsoft YaHei;
                                    font-weight: bold;
                                    color: #3B7AD1;
                                    margin: 0 10px;
                                }
                            }
                        }
                        
                        .el-table{
                            .el-table__body-wrapper{
                                height: 53vh;
                            }
                            .el-table__row{
                                .cell{
                                    .el-input{
                                        height: 24px;
                                        .el-input__inner{
                                            height: 24px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    display: flex;
                    justify-content: center;
                    .el-button{
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }
    
}
</style>