BusinessBenchmark/src/components/assessment/monthQuarterYearFrom.vue

<template>
    <div class="monthQuarterYearFrom">
        <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="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">业务编号:</span>
                            <span>{{receiptMsg.code}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">创建日期:</span>
                            <span>{{receiptMsg.createDate}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">业务简述:</span>
                            <span>{{receiptMsg.des}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">业务类别:</span>
                            <span>{{receiptMsg.type}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">流程状态:</span>
                            <span>{{receiptMsg.stage}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">年度:</span>
                            <span>{{receiptMsg.year}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">创建人:</span>
                            <span>{{receiptMsg.createName}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">单据状态:</span>
                            <span>{{receiptMsg.recStage}}</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="monthQuarterYear">
                    <el-tabs v-model="activeName" class="tableMain" @tab-click="handleClick">
                        <el-tab-pane v-for="it in stageData" :key="it.id" :label="it.stageName" :name="it.stageCode">
                            <div class="detailsHeader">
                                <div class="headerLeft">
                                    <el-tag v-for="tag in indicatorList" :key="tag.id" size="large" class="tagArr"
                                        effect="dark" :type="tag.id === isClickTagId ? '': 'info'" @click="handleShowPage(tag)">
                                        <span>{{ tag.indicator_name }}</span>
                                    </el-tag>
                                </div>
                                <div class="headerRight">
                                    <div class="seachFor">
                                        <el-input v-model="compNameSa" placeholder="请输入单位名称" @keyup.enter="getTableData(isClickTagId)"></el-input>
                                        <!-- <el-icon :size="20" color="#3B7AD1" @click="getTableData(isClickTagId)"><Search /></el-icon> -->
                                    </div>
                                    <div class="tableBtn add" @click="addTableDetail"
                                     v-if="(activeName === 'ZDZX' || activeName === 'GLSX') && indicatorList.length > 0">
                                        <img :src="addIcon" alt="">
                                        <span>新增</span>
                                    </div>
                                    <div class="tableBtn save" @click="saveAddDetail"
                                    v-if="(activeName === 'ZDZX' || activeName === 'GLSX') && indicatorList.length > 0">
                                        <img :src="saveIcon" alt="">
                                        <span>保存</span>
                                    </div>
                                    <div class="tableBtn save" @click="saveDetail" v-else>
                                        <img :src="saveIcon" alt="">
                                        <span>保存</span>
                                    </div>
                                    <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>
                            </div>
                            <el-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT" :border="true" >
                                <el-table-column type="index" label="排名" align="center"></el-table-column>
                                <el-table-column label="考评单位" prop="organizationShortName" width="300">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.organizationShortName" placeholder="请选择审核状态">
                                            <el-option
                                            v-for="item in organizationData"
                                            :key="item.organizationId"
                                            :label="item.organizationShortName"
                                            :value="item.organizationId">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column  v-for="(it, index) in monthQuarterYearHeader" :key="index" :label="it.name" align="center">
                                    <el-table-column v-for="(iv, index) in it.children" :key="index" :label="iv.key"
                                     align="center" width="150" sortable :sort-method="(a,b)=>sortMethods(a,b,iv.code)">
                                        <template #default="scope">
                                            <el-select v-model="scope.row[iv.code]" class="selectSty" placeholder="请选择审核状态" v-if="scope.row['IS_LH_'+iv.code] === '3'">
                                                <el-option
                                                v-for="item in statusData"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                                </el-option>
                                            </el-select>
                                            <el-input v-model="scope.row[iv.code]" class="inputSty" v-else-if="scope.row['IS_LH_'+iv.code] === '2'"></el-input>
                                            <el-input-number v-model="scope.row[iv.code]" class="numberSty" :precision="2" :step="0.1" v-else />
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="tableSeach">
                        <div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
                        :class="item.showClick? 'seachTypeCha':''" @click="changType(item)">
                            <img :src="item.img" alt="" v-if="!item.showClick">
                            <img :src="item.clickImg" alt="" v-else>
                            <p :style="item.showClick? 'color: #3B7AD1' : ''">{{item.isName}}</p>
                        </div>
                    </div>
                </div>
            </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 {apiGetEvaluationIndicatorList,apiGetgetEvaluationInfoDataList,apiGetbinsectionList, apiGetbinstageList,apiGetExportMsg,
apiPostorganizationUpdateEvaluationInfo, apiPostorganizationUpdateAddEvaluationInfo, apiGetOrganizationListAll} from '../../api/api'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import  * as XLSXD from 'xlsx-js-style'

import sectionDef from '../../assets/benchmarkImg/sectionDef.png'

import sectionCha from '../../assets/benchmarkImg/sectionCha.png'

import addIcon from '../../assets/btnIcon/add.png'
import saveIcon from '../../assets/btnIcon/save.png'
import exportIcon from '../../assets/btnIcon/export.png'
import importIcon from '../../assets/btnIcon/import.png'

export default {
    components: {
        importDailog
    },
    data() {
        return {
            dialogVisible: false,
            activeName: '',
            monthQuarterYearData: [],
            monthQuarterYearHeader: [],
            indicatorList: [],
            isClickTagId: '',
            compNameSa: '',
            receiptMsg: {
                code: '',
                des: '',
                stage: '',
                createName: '',
                createDate: '',
                type: '',
                year: '',
                recStage: ''
            },
            rowMsg: {},
            moduleData: [],
            stageData: [],
            titleMsgArr: [],
            organizationData: [],
            statusData: [],
            binSectionStr: '',
            addIcon: addIcon,
            saveIcon: saveIcon,
            exportIcon: exportIcon,
            importIcon: importIcon,
            addstageId: '',
            cycleType: '',
            userMes: {}
        }
    },
    created() {
        this.statusData = [
            {
                name: '已确认',
                id: '1'
            },
            {
                name: '待确认',
                id: '0'
            },
            {
                name: '不合格',
                id: '-1'
            }
        ]
    },
    methods: {
        init(row, type) {
            this.dialogVisible = true
            this.receiptMsg = {
                code: row.organizationEvaluationCode,
                des: row.des,
                stage: row.stage,
                createName: row.createName,
                createDate: row.createTime,
                type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
                year: row.year,
                recStage: '有效'
            }
            this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
            this.cycleType = type
            this.getModelData(type)
            this.rowMsg = row
        },
        sortMethods(a, b, it) {
            if (a[it] < b[it]) {
                return -1
            }
        },
        //获取单位数据
        getorganizationData(type) {
            let that = this
            let params = {
                evaluationCycle: type ==='年度' ? 'NDKP': type ==='季度' ? 'JDKP' : 'YDKP',
                organizationType: 'DWKP',
                binSection: that.binSectionStr
            }
            apiGetOrganizationListAll(params).then(datas => {
                if (datas && datas.data) {
                    that.organizationData = datas.data
                }
            })
        },
        // 获取业务属性
        getModelData(type) {
            let that = this
            that.titleMsgArr = []
            let params = {
                type: type === '年度' ? '3' : '2'
            }
            apiGetbinsectionList(params).then(datas =>{
                if (datas && datas.data) {
                    that.moduleData = datas.data
                    that.moduleData.forEach(item =>{
                        let obj = {
                            id: item.id,
                            isName: item.sectionName === '新能源(光电)' ? '新能源光电' : item.sectionName === '新能源(风电)' ? '新能源风电' : item.sectionName,
                            isNameEn: item.sectionCode,
                            showClick: false,
                            isClass: 'sectionDef',
                            img: sectionDef,
                            isClassC: 'sectionCha',
                            clickImg: sectionCha
                        }
                        that.titleMsgArr.push(obj)
                    })
                    that.titleMsgArr[0].showClick = true
                    that.binSectionStr = that.titleMsgArr[0].id
                    that.getStageData(type)
                    that.getorganizationData(type)
                }
            })
        },
        //根据业务属性获取业务阶段
        getStageData(type) {
            let that = this
            let params = {}
            if (type !== '年度') {
                params = {
                    type: '3'
                }
            }
            apiGetbinstageList(params).then(datas =>{
                if (datas && datas.data) {
                    that.stageData = datas.data
                    that.activeName = datas.data[0].stageCode
                    that.getTableHeaderData(datas.data[0].id)
                }
            })
        },
        //获取指标数据
        getTableHeaderData(id) {
            let that = this
            that.monthQuarterYearHeader = []
            that.monthQuarterYearData = []
            that.isClickTagId = ''
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                binSection: that.binSectionStr,
                binStage: id
            }
            apiGetEvaluationIndicatorList(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicatorList = datas.data
                    if (datas.data.length>0) {
                        that.isClickTagId = datas.data[0].id
                        that.getTableData(that.isClickTagId)
                    }
                }
            })
        },
        handleClick(val) {
            let stageId = ''
            this.stageData.forEach(it =>{
                if (it.stageCode === val.props.name) {
                    stageId = it.id
                }
            })
            this.getTableHeaderData(stageId)
        },
        //获取表格数据
        getTableData(id) {
            let that = this
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                indicatorId: id,
                organizationShortName: that.compNameSa
            }
            apiGetgetEvaluationInfoDataList(params).then(datas =>{
                if (datas && datas.data) {
                    if (datas.data.title) {
                        let header = []
                        for(let i in datas.data.title) {
                            let obj = {
                                name: i,
                                children: datas.data.title[i]
                            }
                            header.push(obj)
                        }
                        that.monthQuarterYearHeader = header
                    }
                    that.monthQuarterYearData = datas.data.value
                }
            })
        },
        handleShowPage(tag) {
            this.isClickTagId = tag.id
            this.monthQuarterYearHeader = []
            this.monthQuarterYearData = []
            this.getTableData(tag.id)
        },
        changType(data) {
            this.titleMsgArr.forEach(it =>{
                it.showClick = false
                if (it.isName === data.isName) {
                    it.showClick = true
                    this.binSectionStr = it.id
                }
            })
            let stageId = ''
            this.stageData.forEach(it =>{
                if (it.stageCode === this.activeName) {
                    stageId = it.id
                }
            })
            this.getTableHeaderData(stageId)
            this.getorganizationData(this.cycleType)
        },
        addTableDetail() {
            console.log('表头数据11====>>>>>>>', this.monthQuarterYearHeader)
            if (this.monthQuarterYearHeader.length>0) {
                let headerArr = []
                this.monthQuarterYearHeader.forEach(item =>{
                    headerArr = headerArr.concat(item.children)
                })

                console.log('表头数据22====>>>>>>>', headerArr)
                this.addstageId = ''
                this.stageData.forEach(it =>{
                    if (it.stageCode === this.activeName) {
                        this.addstageId = it.id
                    }
                })

                let obj = {
                    isAdd: true,
                    
                }
                headerArr.forEach(it =>{
                    obj[it.code] = ''
                    obj['IS_LH_'+it.code] = it.flag
                })
                this.monthQuarterYearData.unshift(obj)
            }
            console.log('表格数据====>>>>>>>', this.monthQuarterYearData)
        },
        saveAddDetail() {
            let that = this
            let addParams = []
            let saveParams = []
            let addObj = {
                // organizationId: that.userMes.unitId,
                // organizationId: "23079300",
                organizationEvaluationId: that.rowMsg.id,
                indicatorId: that.isClickTagId,
                binSection: that.binSectionStr,
                binStage: that.addstageId,
                optionMap: {}
            }
            that.monthQuarterYearData.forEach(it =>{
                if (it.isAdd) {
                    addObj.organizationId = it.organizationShortName
                    addObj.optionMap = it
                    addParams.push(addObj)
                } else {
                    saveParams.push(it)
                }
            })
            if (addParams.length > 0) {
                apiPostorganizationUpdateAddEvaluationInfo(addParams).then(datas =>{
                    if (datas) {
                        that.responseData(datas)
                    }
                })
            }
            if (saveParams.length > 0) {
                apiPostorganizationUpdateEvaluationInfo(saveParams).then(datas =>{
                    if (datas) {
                        that.responseData(datas)
                    }
                })
            }
        },
        // 返回数据
        responseData(datas) {
            if (datas.message === '成功') {
                this.$message({
                    message: '考评详情信息保存成功',
                    type: 'success'
                });
            } else {
                this.$message({
                    message: datas.message,
                    type: 'error'
                });
            }
            this.getTableData(this.isClickTagId)
        },
        saveDetail() {
            let that = this
            apiPostorganizationUpdateEvaluationInfo(that.monthQuarterYearData).then(datas =>{
                if (datas) {
                    if (datas.message === '成功') {
                        that.$message({
                            message: '考评详情信息保存成功',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            message: datas.message,
                            type: 'error'
                        });
                    }
                    that.getTableData(that.isClickTagId)
                }
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "考评详情信息导入"
            this.$refs.importPage.upload.open = true
            this.$refs.importPage.upload.url = '/organization-evaluation-info/import-excel'
        },
        successImport(val) {
            that.getTableData(that.isClickTagId)
        },
        handleExport() {
            let that = this
            let url = 'organization-evaluation-info/download-excel'
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                indicatorId: that.isClickTagId
            }
            apiGetExportMsg(url,params).then(datas =>{
                let blob = new Blob([datas])
                saveAs(blob, '考评详情数据导出.xlsx')
            }).catch((r) => {
                console.error(r)
            })
        },
    }
}
</script>

<style lang="less">
.monthQuarterYearFrom{
    .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;
                        // margin-bottom: 20px;
                        .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%;
                    }
                    .monthQuarterYear{
                        display: flex;
                        width: 100%;
                        margin-top: 20px;
                        .tableMain{
                            width: calc(100% - 100px);
                            .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;
                                    }
                                }
                            }
                            .detailsHeader{
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                .headerLeft{
                                    display: flex;
                                    width: 65%;
                                    overflow-x: auto;
                                    .tagArr {
                                        height: 33px;
                                        margin-right: 10px;
                                        cursor: pointer;
                                        margin-bottom: 10px;
                                    }

                                    .el-tag--dark {
                                        background-color: #184FB4;
                                        border: 1px solid #184FB4;
                                    }

                                    .el-tag--info {
                                        background-color: #E6EBF5;
                                        border: 1px solid #E6EBF5;
                                        color: #9DA5BE;

                                        .el-tag__close {
                                            color: #9DA5BE;
                                        }
                                    }
                                }
                                .headerRight{
                                    display: flex;
                                    justify-content: end;
                                    width: 35%;
                                    margin-bottom: 5px;
                                    .seachFor{
                                        display: flex;
                                        .el-input{
                                            height: 30px;
                                            .el-input__inner{
                                                height:30px;
                                            }
                                            .el-input__suffix{
                                                .el-select__caret{
                                                    line-height:30px;
                                                }
                                            }
                                        }
                                        .el-icon{
                                            margin: 5px 10px 0 10px;
                                            cursor: pointer;
                                        }
                                    }
                                    .tableBtn {
                                        display: flex;
                                        height: 20px;
                                        margin: 5px 8px 0 8px;
                                        width: 20%;
                                        img{
                                            margin-right: 5px;
                                            margin-top: 1px;
                                        }
                                        span{
                                            display: inline-block;
                                            width: 100%;
                                            font-size: 14px;
                                            font-family: Microsoft YaHei;
                                            font-weight: 400;
                                        }
                                    }
                                    .add{
                                        cursor: pointer;
                                        span{
                                            color: #3B7AD1;
                                        }
                                    }
                                    .save{
                                        cursor: pointer;
                                        span{
                                            color: #50C14E;
                                        }
                                    }
                                    .import{
                                        cursor: pointer;
                                        span{
                                            color: #ce1e78;
                                        }
                                    }
                                    .export{
                                        cursor: pointer;
                                        span{
                                            color: #2baa8a;
                                        }
                                    }
                                }
                            }
                            .el-table {
                                .el-table__header-wrapper{
                                    .el-table__header{
                                        .el-table__cell {
                                            border-bottom: none !important;
                                        }
                                        thead{
                                            tr{
                                                th{
                                                    .cell{
                                                        line-height: 16px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                                .el-table__body-wrapper {
                                    height: 47vh !important;
                                    .el-scrollbar{
                                        .is-horizontal{
                                            .el-scrollbar__thumb{
                                                // width: 100% !important;
                                            }
                                        }
                                        .el-table__body{
                                            tr{
                                                td{
                                                    padding: 0;
                                                    .cell{
                                                        background: #F6F7FA;
                                                        line-height: 47px;
                                                        height: 47px;
                                                    }
                                                }
                                                td:hover {
                                                    line-height: 45px;
                                                    height: 45px;
                                                }
                                            }
                                            // .el-select{
                                            //     .el-input{
                                            //         .el-input__wrapper{
                                            //             .el-input__inner{
                                            //                 color: red;
                                            //             }
                                            //         }
                                            //     }
                                            // }
                                        }
                                    }
                                }
                                .el-table--border .el-table__cell{
                                    border: none;
                                }
                                .el-table thead.is-group th.el-table__cell{
                                    background: transparent;
                                }
                
                                .tooltipCC {
                                    width: 180px;
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                            .el-pagination {
                                margin-top: 20px;
                                text-align: end;
                                position: relative;
                            }
                        }
                        .tableSeach{
                            width: 88px;
                            height: 63vh;
                            margin-left: 10px;
                            margin-top: 37px;
                            border: 1px solid #D6DBEA;
                            padding: 5px 0;
                            border-radius: 5px;
                            overflow-y: auto;
                            .seachType{
                                width: 78px;
                                height: 78px;
                                cursor: pointer;
                                border-left: 3px solid transparent;
                                img{
                                    margin-top: 17px;
                                    margin-left: 27px;
                                }
                                p{
                                    text-align: center;
                                    font-size: 14px;
                                }
                            }
                            .seachTypeCha{
                                background: #E6EBF5;
                                cursor: pointer;
                                border-left: 3px solid #3B7AD1;
                            }
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    display: flex;
                    justify-content: center;
                    .el-button{
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }
    
}
</style>