BusinessBenchmark/src/components/assessment/evaluationDeptStartTab.vue

<template>
    <div class="startTableDia">
        <el-dialog title="统计汇总详情" v-model="editEvaluaVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="reportTAll">
                <div class="reportTBtn">
                    <div class="collectSeach">
                        <div class="exceed">
                            <span class="exceedSpan" style="width: 100px">选择时间：</span>
                            <el-date-picker v-model="timeIds" type="year" value-format="YYYY" :clearable="false"
                                placeholder="选择时间" />
                        </div>
                        <seachs @handleSeach="getreportTableData" :showRest="false"></seachs>
                        <el-button type="warning" icon="Download" size="mini" @click="handleExport"
                            style="margin-left:10px">导出</el-button>
                    </div>
                    <div class="reportTTableData">
                        <el-table :data="reportTableData" ref="report-table" style="width: 100%">
                            <el-table-column label="部门" prop="deptName" align="center" />
                            <el-table-column label="序号" type="index" width="50" align="center" />
                            <el-table-column label="关键业绩指标名称" prop="targetName" align="center" />
                            <el-table-column label="目标值" prop="targetValue" align="center" />
                            <el-table-column label="基础分" prop="baseScore" width="80" align="center" />
                            <el-table-column label="评价标准" prop="evaluationCriteria" align="center" />
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import seachs from '../seachGroup.vue'
    import {
        saveAs
    } from 'file-saver'
    import ExcelJS from 'exceljs'
    import fileSave from 'file-saver'
    import {
        apiGetplanSummaryList,
        apiGetplansummaryReport,
        apiGetevaluationdownloadReport
    } from '../../api/api'
    export default {
        components: {
            seachs
        },
        data() {
            return {
                editEvaluaVisible: false,
                reportTableData: [],
                timeIds: '',
                userNameS: '',
                ispersonDept: window.sessionStorage.getItem('ispersonDept')
            }
        },
        methods: {
            init() {
                this.editEvaluaVisible = true
                this.reportTableData = []
                this.timeIds = new Date().getFullYear().toString()
                this.getreportTableData()
            },
            sortMethods(a, b, it) {
                if (a[it] < b[it]) {
                    return -1
                }
            },
            // 查询数据
            getreportTableData() {
                let that = this
                let params = {
                    year: that.timeIds
                }
                apiGetplanSummaryList(params).then(datas => {
                    if (datas && datas.data) {
                        that.reportTableData = datas.data
                    }
                })
            },
            handleExport() {
                let that = this
                let params = {
                    year: that.timeIds
                }
                apiGetplansummaryReport(params).then(datas => {
                    if (datas && datas.code === 200) {
                        apiGetevaluationdownloadReport(datas.data).then(datass => {
                            let blob = new Blob([datass], {
                                type: 'application/msword;charset=UTF-8'
                            })
                            saveAs(blob, `${datas.data}`)
                        })
                    }
                })

            }
        }
    }
</script>

<style lang="less">
    .startTableDia {
        .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;

                            .collectSeach {
                                display: flex;
                                padding: 24px 20px;
                                border-bottom: 1px solid#D6DBEA;

                                .exceed {
                                    display: flex;

                                    .exceedSpan {
                                        height: 12px;
                                        font-size: 14px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        color: #8991B0;
                                        line-height: 12px;
                                        margin-top: 14px;
                                    }

                                    .el-date-editor {
                                        height: 40px;
                                    }
                                }

                                span {
                                    font-size: 14px;
                                }

                                .PeriodBtn {
                                    display: flex;
                                    justify-content: flex-end;
                                    padding: 20px 0;
                                }

                                .el-button {
                                    height: 30px;
                                    // width:100px;
                                    padding: 0 30px;

                                    // padding-top: 8px;
                                    span {
                                        margin: 0;
                                    }
                                }
                            }
                        }

                        .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>