BusinessBenchmark/src/components/taskCenter/taskApplicationFrom.vue

<template>
    <div class="applicationFrom">
        <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.deptName}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">申报级别:</span>
                            <span>{{receiptMsg.declarationLevel}}级</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">申报领导:</span>
                            <span>{{receiptMsg.deptLeaderName}}</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.createDate}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">申报月份:</span>
                            <span>{{receiptMsg.month}}月</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsgSelect">
                            <span class="data_tit">评定等级:</span>
                            <span v-if="userMes.deptId !== '23031009'">{{receiptMsg.ratingGrade}}</span>
                            <el-select v-model="receiptMsg.ratingGrade" placeholder="请选择评定等级" @change="changeratingGrade" v-else>
                                <el-option
                                v-for="item in ratingGradeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div class="danjuMsgSelect">
                            <span class="data_tit">申报简述:</span>
                            <span v-if="userMes.deptId !== '23031009'">{{receiptMsg.des}}</span>
                            <el-input v-model="receiptMsg.des" :rows="1" type="textarea" @blur="blurDes" v-else
                             placeholder="请输入申报简述"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <div class="btnASeach">
                    <!-- <div class="detaTableBtns">
                        <div class="tableBtn add" @click="addTableDetail">
                            <img :src="addIcon" alt="">
                            <span>新增</span>
                        </div>
                        <div class="tableBtn save" @click="saveDetail">
                            <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-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="考评指标项内容" name="first">
                        <el-table :data="quantifiedList.slice((pageLeft.currentPage-1)*pageLeft.pagesize, pageLeft.currentPage*pageLeft.pagesize)"
                         style="width: 100%">
                            <el-table-column label="序号" type="index" width="80" />
                            <el-table-column label="人员编号" prop="employeeNo">
                                <template #default="scope">
                                    <el-input v-model="scope.row.employeeNo" @blur="employeeNoInputBlur(scope.row.employeeNo, scope.row)" />
                                </template>
                            </el-table-column>
                            <el-table-column label="人员" prop="deptName">
                                <template #default="scope">
                                    <el-select v-model="scope.row.employeeId" placeholder="请选择人员">
                                        <el-option
                                        v-for="item in deptLeaderOptionDet"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="建议值">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.suggestedValue" :precision="2" :step="0.1" :min="0" />
                                </template>
                            </el-table-column>
                            <el-table-column label="排序" >
                                <template #default="scope">
                                     <el-input-number v-model="scope.row.serialNumber" :min="1" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <p class="indicitem" v-if="receiptMsg.stage !== '流程已结束'" @click="deleteRowFn(scope.row, scope.$index)">删除</p>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            @current-change="handleCurrentChangeLeft"
                            :current-page="pageLeft.currentPage"
                            :page-size="pageLeft.pagesize"
                            layout="total, prev, pager, next, jumper"
                            :total="pageLeft.total">
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
                <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="examineAndApprove('agree')">同 意</el-button>
                    <el-button @click="examineAndApprove('reject')">拒 绝</el-button>
                </span>
            </template>
        </el-dialog>
        <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import {apiPostevaluationdeptadDetails,apiGetevaluationdeptadUpdate, apiGetevaluationdeptadDelete,apiPostIsdoAction,apideptAdmodify,
apiPostevaluationdeptadDetailsHead, apiGetuserPageList} from '../../api/api'
import ExcelJS from 'exceljs'
import fileSave from 'file-saver'
import addIcon from '../../assets/btnIcon/add.png'
import saveIcon from '../../assets/btnIcon/save.png'
import editIcon from '../../assets/btnIcon/edit.png'
import deleteIcon from '../../assets/btnIcon/delete.png'
import exportIcon from '../../assets/btnIcon/export.png'
import importIcon from '../../assets/btnIcon/import.png'
export default {
    components: {
        importDailog
    },
    data() {
        return {
            dialogVisible: false,
            activeName: 'first',
            quantifiedList: [],
            changeDateSelect: [],
            descMsg: '',
            receiptMsg: {
                code: '',
                des: '',
                stage: '',
                createName: '',
                createDate: '',
                type: '',
                year: '',
                month: '',
                recStage: ''
            },
            addIcon: addIcon,
            saveIcon: saveIcon,
            editIcon: editIcon,
            deleteIcon: deleteIcon,
            exportIcon: exportIcon,
            importIcon: importIcon,
            rowMsg: {},
            orgruleData: [],
            indicItemoptions: [],
            sectionNameArr: [],
            deptNameArr: [],
            pageLeft:{
                pagesize: 15,
                currentPage: 1,
                total: 0
            },
            pageRight:{
                pagesize: 15,
                currentPage: 1,
                total: 0
            },
            deptLeaderOptionDet: [],
            ratingGradeOption: [],
            userMes: {},
            instanceChild: {},
            keyId: ''
        }
    },
    created() {
        this.ratingGradeOption = [
            {
                label: 'A',
                value: 'A'
            },
            {
                label: 'B',
                value: 'B'
            },
            {
                label: 'C',
                value: 'C'
            },
            {
                label: 'D',
                value: 'D'
            }
        ]
    },
    methods: {
        init(row, id, allData) {
            this.dialogVisible = true
            this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
            this.activeName = 'first'
            this.instanceChild = allData
            this.getDetails(id)
            this.getDetailsHeader(id)
            this.keyId = id
            this.changeDeptLead(row.deptId)
            this.rowMsg = row
        },
        // 根据部门查询人员
        changeDeptLead(val) {
            let that = this
            let params = {
                current: 1,
                size: 500,
                orgId: val
            }
            apiGetuserPageList(params).then(datas =>{
                if (datas && datas.data) {
                    that.deptLeaderOptionDet = datas.data.records
                }
            })
        },
        changeratingGrade(val) {
            this.modeifyDetail('level', val)
        },
        blurDes() {
            this.modeifyDetail('des', this.receiptMsg.des)
        },
        // 修改申报详情头信息
        modeifyDetail(type, val) {
            let that = this
            let params = {
                id: that.keyId
            }
            if (type === 'level') {
                params.ratingGrade = val
            } else {
                params.des = val
            }
            apideptAdmodify(params).then(datas =>{
                if (datas.success) {
                    that.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                } else {
                    that.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            })
        },
        handleClick() {
            this.changeDateSelect = []
        },
        handleCurrentChangeLeft(val) {
            this.pageLeft.currentPage = val
        },
        //获取详情头数据
        getDetailsHeader(id) {
            let that = this
            apiPostevaluationdeptadDetailsHead(id).then(datas =>{
                if (datas && datas.data) {
                    let row = datas.data
                    that.receiptMsg = {
                        code: row.orderNumber,
                        des: row.des,
                        stage: row.stage,
                        ratingGrade: row.ratingGrade,
                        createName: row.createName,
                        createDate: row.createTime,
                        type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
                        year: row.appraisalYear,
                        month: row.declarationMonth,
                        recStage: '有效'
                    }
                }
            })
        },
        //获取详情
        getDetails(id) {
            let that = this
            that.quantifiedList = []
            apiPostevaluationdeptadDetails(id).then(datas =>{
                if (datas && datas.data) {
                    datas.data.forEach(it =>{
                        it.serialNumber = it.serialNumber.toString()
                    })
                    that.quantifiedList = datas.data
                    that.pageLeft.total = datas.data.length
                }
            })
        },
        employeeNoInputBlur(val, row) {
            this.deptLeaderOptionDet.forEach(it =>{
                if (val === it.no) {
                    row.employeeId = it.id
                }
            })
        },
        addTableDetail() {
            this.pageLeft.currentPage = 1
            let obj = {
                showInput: true,
                businessPlanId: this.rowMsg.id,
                employeeId: '',
                employeeNo: '',
                suggestedValue: 1,
                serialNumber: 0
            }
            this.quantifiedList.unshift(obj)
        },
        saveDetail() {
            let that = this
            let params = []
            that.quantifiedList.forEach(item =>{
                let emName = ''
                let emNo = ''
                that.deptLeaderOptionDet.forEach(it =>{
                    if (item.employeeId === it.id) {
                        emName = it.name
                        emNo = it.no
                    }
                })
                let obj = {
                    assessmentDeclarationId: that.rowMsg.id,
                    employeeId: item.employeeId,
                    employeeName: emName,
                    employeeNo: item.employeeNo ? item.employeeNo : emNo,
                    suggestedValue: item.suggestedValue.toString(),
                    serialNumber: item.serialNumber
                }
                if (!item.showInput) {
                    obj.id = item.id
                }
                params.push(obj)
            })
            apiGetevaluationdeptadUpdate(params).then(datas =>{
                if (datas) {
                    if (datas.success) {
                        that.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        that.getDetails(that.rowMsg.id)
                    } else {
                        that.$message({
                            message: datas.data,
                            type: 'error'
                        })
                    }
                }
            })
        },
        deleteRowFn(row) {
            let that = this
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (!row.id) {
                    that.quantifiedList.splice(index, 1)
                } else {
                    apiGetevaluationdeptadDelete(row.id).then(datas =>{
                        if (datas) {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            that.getDetails(that.rowMsg.id)
                        }
                    })
                }
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "绩效结果考核申报导入"
            this.$refs.importPage.upload.open = true
            this.$refs.importPage.upload.url = '/evaluation-dept-ad/import'
        },
        successImport(val) {
            that.$message({
                type: 'success',
                message: val.data
            });
            this.getDetails(this.rowMsg.id)
        },
        handleExport() {
            let data = this.quantifiedList  //接口返回数据
            const workbook = new ExcelJS.Workbook()
            const worksheet = workbook.addWorksheet('Sheet1')
            //根据数据自己调整
            let colums = []
            colums = [
                // { header: 'ID', key: 'id', width: 26, hidden: true },
                { header: '申报ID', key: 'assessmentDeclarationId', width: 26, hidden: true },
                { header: '人员编号', key: 'employeeNo', width: 26 },
                // { header: '员工ID', key: 'employeeId', width: 26 },
                { header: '员工名称', key: 'employeeName', width: 26 },
                { header: '建议值', key: 'suggestedValue', width: 26 },
                { header: '排序', key: 'serialNumber', width: 26 },
            ]
            worksheet.columns = colums
            worksheet.getRow(1).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`)
            })
        },
        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">
.applicationFrom{
    .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: 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;
                                    }
                                }
                            }
                        }
                        .danjuMsgSelect{
                            display: flex;
                            .data_tit{
                                margin-right: 10px;
                                font-weight: bold;
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                color: #8991B0;
                            }
                            .el-select{
                                width: 30%;
                                position: relative;
                                top: -5px;
                            }
                            .el-textarea{
                                width: 80%;
                                position: relative;
                                top: -4px;
                            }
                        }
                    }
                    .el-select, .el-input{
                        width: 100%;
                    }
                    .btnASeach{
                        display: flex;
                        z-index: 11111;
                        justify-content: flex-end;
                        position: relative;
                        top: 32px;
                        // left: 50vw;
                        width: 100%;
                        .detaTableBtns{
                            display: flex;
                            justify-content: flex-end;
                            width: 300px;
                            margin-top: 5px;
                            .tableBtn {
                                display: flex;
                                height: 20px;
                                margin: 0 10px;
                                // 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;
                                }
                            }
                            .add{
                                cursor: pointer;
                                span{
                                    color: #3B7AD1;
                                }
                            }
                            .save{
                                cursor: pointer;
                                span{
                                    color: #50C14E;
                                }
                            }
                            .edit{
                                span{
                                    color: #F5A623;
                                }
                            }
                            .delete{
                                cursor: no-drop;
                                span{
                                    color: #F65177;
                                }
                            }
                            .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{
                            margin-bottom: 10px;
                            .el-table__body-wrapper{
                                height: 38vh;
                            }
                            .el-table__row{
                                .cell{
                                    .el-input{
                                        height: 24px;
                                        .el-input__inner{
                                            height: 24px;
                                        }
                                    }
                                }
                            }
                            .indicitem{
                                color: #F65177;
                                font-size: 12px;
                                margin-right: 20px;
                                cursor:pointer;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    display: flex;
                    justify-content: center;
                    .el-button{
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }
    
}
</style>