BusinessBenchmark/src/components/assessment/evaluationApplicationTab.vue

<template>
    <div class="applicationTable">
        <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: 80px">选择时间：</span>
                            <el-date-picker
                                v-model="timeIds"
                                type="monthrange"
                                unlink-panels
                                value-format="YYYY-MM"
                                range-separator="To"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                            />
                        </div>
                        <div class="exceed" style="margin-left: 10px">
                            <span class="exceedSpan" style="width: 100px">填报部门：</span>
                            <el-select v-model="deptNameS" filterable clearable :disabled="ispersonDept !== 'true'"
                             placeholder="请选择部门名称" @change="changeDeptLead">
                                <el-option
                                    v-for="item in departData"
                                    :key="item.deptId"
                                    :label="item.deptName"
                                    :value="item.deptId">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="exceed" style="margin-left: 10px">
                            <span class="exceedSpan" style="width: 100px">人员编号：</span>
                            <el-input v-model="userNameS" placeholder="请输入人员编号"/>
                        </div>
                        <!-- <div class="exceed" style="margin-left: 10px">
                            <span class="exceedSpan" style="width: 100px">选择人员：</span>
                            <el-select v-model="userNameS" filterable clearable placeholder="请选择人员">
                                <el-option
                                v-for="item in deptLeaderOptionDet"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </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="序号" type="index" width="50" align="center" />
                            <el-table-column label="人员编码" prop="employeeNo" align="center" />
                            <el-table-column label="人员姓名" prop="employeeName" align="center" />
                            <el-table-column label="评定系数" prop="suggestedValue" align="center" />
                            <el-table-column label="申报月份" prop="declarationMonth" align="center" />
                            <el-table-column label="申报次数" prop="declarationsNumber" align="center" />
                            <el-table-column label="申报部门" prop="reportingDepartment" align="center" />
                            <el-table-column label="评定级别" prop="declarationLevel" 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 {apiGetstatisticalSummaryList, apiGetuserPageList, apiGetExportMsg} from '../../api/api'
export default {
    components: {seachs},
    data() {
        return {
            editEvaluaVisible: false,
            reportTableData: [],
            departData: [],
            deptLeaderOptionDet: [],
            timeIds: [],
            deptNameS: '',
            userNameS: '',
            userMes: {},
            ispersonDept: window.sessionStorage.getItem('ispersonDept')
        }
    },
    methods: {
        init(departData) {
            this.editEvaluaVisible = true
            this.departData = departData
            this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
            this.deptNameS = this.userMes.deptId ? this.userMes.deptId : ''
            this.reportTableData = []
            let month = (new Date().getMonth()+1) < 10 ? '0'+(new Date().getMonth()+1) : (new Date().getMonth()+1)
            let startTim = `${new Date().getFullYear()}-${new Date().getMonth() < 10 ? '0'+new Date().getMonth() : new Date().getMonth()}`
            let endTim = `${new Date().getFullYear()}-${month}`
            this.timeIds = [startTim, endTim]
            this.getreportTableData()
            // this.changeDeptLead()
        },
        sortMethods(a, b, it) {
            if (a[it] < b[it]) {
                return -1
            }
        },
        // 根据部门查询人员
        changeDeptLead(val) {
            let that = this
            let params = {
                orgId: val ? val : ''
            }
            apiGetuserPageList(params).then(datas =>{
                if (datas && datas.data) {
                    that.deptLeaderOptionDet.push(datas.data)
                }
            })
        },
        // 查询数据
        getreportTableData() {
            let that = this
            let params = {
                // year: this.timeIds.substring(0, this.timeIds.indexOf('-')),
                // month: this.timeIds.substring(this.timeIds.indexOf('-')+1, this.timeIds.length)*1
                startTime: that.timeIds[0],
                endTime: that.timeIds[1],
                deptId: that.deptNameS,
                // employeeId: that.userNameS
                employeeNo: that.userNameS
            }
            apiGetstatisticalSummaryList(params).then(datas =>{
                if (datas && datas.data) {
                    that.reportTableData = datas.data
                }
            })
        },
        handleExport() {
            let that = this
            let params = {
                startTime: that.timeIds[0],
                endTime: that.timeIds[1],
                deptId: that.deptNameS,
                // employeeId: that.userNameS
                employeeNo: that.userNameS
            }
            let url = 'evaluation-dept-ad/generateStatisticalSummaryReports'
            let fileName = '统计汇总信息数据.xlsx'
            apiGetExportMsg(url,params).then(datas =>{
                let blob = new Blob([datas])
                saveAs(blob, fileName)
            }).catch((r) => {
                console.error(r)
            })
        }
    }
}
</script>

<style lang="less">
.applicationTable{
    .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-select{
                                    line-height: 40px !important;
                                    .el-input__inner, .is-disabled{
                                        height:40px !important;
                                    }
                                    .el-input__suffix{
                                        .el-select__caret{
                                            line-height:40px;
                                        }
                                    }
                                }
                                .el-date-editor--monthrange{
                                    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>