BusinessBenchmark/src/components/taskCenter/taskCenterEvlNewFrom.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="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="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" />
                                <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">
                                        <template #default="scope">
                                            <el-input v-model="scope.row[iv.code]" v-if="!scope.row['IS_LH_'+iv.code]"></el-input>
                                            <el-input-number v-model="scope.row[iv.code]" 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>
                    <p class="starttitleSty">审批意见：</p>
                    <el-input v-model="descMsg" :rows="3" type="textarea" placeholder="请输入审批意见"></el-input>
                </div>
            </div>
            <!-- <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
                </span>
            </template> -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="examineAndApprove('agree')">同 意</el-button>
                    <el-button @click="examineAndApprove('reject')">拒 绝</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,
apiPostorganizationUpdateEvaluationInfo, apiPostorganizationUpdateAddEvaluationInfo} 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: '',
            receiptMsg: {
                code: '',
                des: '',
                stage: '',
                createName: '',
                createDate: '',
                type: '',
                year: '',
                recStage: ''
            },
            rowMsg: {},
            moduleData: [],
            stageData: [],
            titleMsgArr: [],
            binSectionStr: '',
            addIcon: addIcon,
            saveIcon: saveIcon,
            exportIcon: exportIcon,
            importIcon: importIcon,
            addstageId: '',
            userMes: {},
            instanceChild: {}
        }
    },
    created() {
    },
    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.getModelData(type)
            this.rowMsg = row
        },
        // 获取业务属性
        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()
                }
            })
        },
        //根据业务属性获取业务阶段
        getStageData() {
            let that = this
            apiGetbinstageList().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)
                    }
                }
            })
        },
        // 根据流程ID获取业务ID
        // getTaskId(row) {
        //     let that = this
        //     let params = {
        //         id: row.instId,
        //         iamCode: window.localStorage.getItem('code')
        //     }
        //     apiPostgetInstanceAndChildren(params).then(datas =>{
        //         if (datas && datas.data) {
        //             that.instanceChild = datas.data.data.bpmInstance
        //             let keyId = datas.data.data.bpmInstance.bizKey  
        //             that.tastbizKey = datas.data.data.bpmInstance.bizKey
        //             that.taskDefKey = datas.data.data.bpmInstance.defKey
        //             that.getevalStartDetails(keyId, that.instanceChild.defKey)
        //             that.getOrgRule(keyId, that.instanceChild.defKey)
        //         }
        //     })
        // },
        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
            }
            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)
        },
        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.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 indexvs = 0
            this.stageData.forEach((it, index) =>{
                if (it.stageCode === this.activeName) {
                    indexvs = index
                }
            })
            let $e = this.$refs.monthQuarterYearTT[indexvs].$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)
            }
        },
        examineAndApprove(type) {
            let that = this
            let actionCS = ''
            if (type === 'agree') {
                if (that.rowMsg.taskType === 'SIGN') {
                    actionCS = 'signAgree'
                } else if (that.rowMsg.taskType === 'NORMAL') {
                    actionCS = 'agree'
                }
            } else {
                if (that.rowMsg.taskType === 'SIGN') {
                    actionCS = 'signReject'
                } else if (that.rowMsg.taskType === 'NORMAL') {
                    actionCS = 'reject'
                }
            }
            let params = {
                taskId: that.rowMsg.id, //任务ID
                nodeId: that.rowMsg.nodeId, //节点ID
                action: actionCS, //固定值
                instanceId: that.rowMsg.instId, //流程实例ID
                opinion: that.descMsg, //审批意见
                iamCode: window.localStorage.getItem('code'), //认证后code值
                taskName: that.rowMsg.name,
                defKey: that.instanceChild.defKey,
                bizKey: that.instanceChild.bizKey
            }
            apiPostIsdoAction(params).then(datas =>{
                if (datas && datas.data) {
                    if (datas.data.isOk) {
                        that.$message({
                            message: datas.data.data,
                            type: 'success'
                        })
                        that.dialogVisible = false
                        that.$emit('approveMsg', datas.data.isOk)
                    } else {
                        that.$message({
                            message: datas.data.msg,
                            type: 'error'
                        })
                    }
                }
            })
        },
    }
}
</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;
                        // 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: 80%;
                                    .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: 20%;
                                    margin-bottom: 5px;
                                    .tableBtn {
                                        display: flex;
                                        height: 20px;
                                        margin: 0 10px;
                                        img{
                                            margin-right: 5px;
                                            margin-top: 1px;
                                        }
                                        span{
                                            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: 35vh !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-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: 50vh;
                            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>