<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.year}}年</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.month}}月</span> </div> </el-col> <el-col :span="6"> <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.ratingGrade}}</span> </div> </el-col> <el-col :span="18"> <div class="danjuMsg_data"> <span class="data_tit">申报理由:</span> <span>{{receiptMsg.des}}</span> </div> </el-col> </el-row> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane label="员工月度考核系数" name="first"> <div class="detaTableBtns"> <div class="tableBtn add" @click="addTableDetail" v-if="isShowFn(receiptMsg.stage)"> <img :src="addIcon" alt=""> <span>新增</span> </div> <div class="tableBtn save" @click="saveDetail" v-if="isShowFn(receiptMsg.stage)"> <img :src="saveIcon" alt=""> <span>保存</span> </div> <div class="tableBtn delete" @click="handleDelete" v-if="isShowFn(receiptMsg.stage)"> <img :src="deleteIcon" alt=""> <span>删除</span> </div> <div class="tableBtn import" @click="handleImport" v-if="isShowFn(receiptMsg.stage)"> <img :src="importIcon" alt=""> <span>导入</span> </div> <div class="tableBtn export" @click="handleExport"> <img :src="exportIcon" alt=""> <span>导出</span> </div> </div> <el-table :data="quantifiedList.slice((pageLeft.currentPage-1)*pageLeft.pagesize, pageLeft.currentPage*pageLeft.pagesize)" style="width: 100%" @select="rowClick" @select-all="rowClick"> <el-table-column type="selection" label="操作" align="center"></el-table-column> <el-table-column label="序号" type="index" width="80" /> <el-table-column label="人员编号"> <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="人员"> <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"> <span style="float: left;display:inline-block;width:100px">{{ item.name }}</span> <span style="float: right;color: #909399;font-size: 13px;" >{{ item.no }}</span> </el-option> </el-select> --> <span>{{scope.row.employeeName}}</span> </template> </el-table-column> <el-table-column label="建议值" v-if="showMessage"> <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="isShowFn(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-tab-pane label="本月主要工作完成情况" name="second"> <div class="detaTableBtns"> <div class="tableBtn add" @click="addSecondWork" v-if="isShowFn(receiptMsg.stage)"> <img :src="addIcon" alt=""> <span>新增</span> </div> <div class="tableBtn save" @click="saveSecondWork" v-if="isShowFn(receiptMsg.stage)"> <img :src="saveIcon" alt=""> <span>保存</span> </div> <div class="tableBtn delete" @click="handleSecondWork" v-if="isShowFn(receiptMsg.stage)"> <img :src="deleteIcon" alt=""> <span>删除</span> </div> </div> <el-table :data="secondWorkSituation.slice((pageRight.currentPage-1)*pageRight.pagesize, pageRight.currentPage*pageRight.pagesize)" style="width: 100%" @select="rowSituationClick" @select-all="rowSituationClick"> <el-table-column type="selection" label="操作" align="center"></el-table-column> <el-table-column label="序号" type="index" width="80" /> <el-table-column label="工作内容"> <template #default="scope"> <el-input v-model="scope.row.jobContent" :rows="1" type="textarea" /> </template> </el-table-column> <el-table-column label="完成情况"> <template #default="scope"> <el-input v-model="scope.row.completionStatus" /> </template> </el-table-column> <el-table-column label="相关处室" width="200"> <template #default="scope"> <el-input v-model="scope.row.relatedOffice" /> </template> </el-table-column> <el-table-column label="经办人" width="200"> <template #default="scope"> <el-input v-model="scope.row.handlePeopleName" /> </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> <el-pagination @current-change="handleCurrentChangeRight" :current-page="pageRight.currentPage" :page-size="pageRight.pagesize" layout="total, prev, pager, next, jumper" :total="pageRight.total"> </el-pagination> </el-tab-pane> </el-tabs> </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" @importLoading="importLoading"></import-dailog> </div> </template> <script> import importDailog from '../importPage/importDailog.vue' import {apiPostevaluationdeptadDetails,apiGetevaluationdeptadUpdate, apiGetevaluationdeptadDelete,apiGetevaluationdeptadUpdateComplete, apiPostevaluationdeptadDetailsHead, apiGetuserPageList,apiGetevaluationdeptadDeleteComplete,apiGetUserPostList} 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: [], secondWorkSituation: [], changeDateSelect: [], changeSituationSelect: [], 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: [], userMes: {}, showMessage: false } }, created() { }, methods: { init(row) { this.dialogVisible = true this.activeName = 'first' this.getDetails(row.id) this.userMes = JSON.parse(window.sessionStorage.getItem('user')) this.getUserPostList() this.rowMsg = row this.$nextTick(() =>{ this.receiptMsg = { code: row.orderNumber, des: row.declarationReason, stage: row.stage, ratingGrade: row.ratingGrade, deptLeaderName: row.deptLeaderName, deptName: row.deptName, createDate: row.createTime, year: row.annual, month: row.declarationMonth, declarationLevel: row.declarationLevel } }) }, handleClick(val) { this.changeDateSelect = [] this.changeSituationSelect = [] this.activeName = val.props.name }, // 判断保存 导入按钮展示权限 isShowFn(val) { let show = true if (val !== '流程未启动') { show = false } return show }, rowClick(selection, row) { this.changeDateSelect = selection }, //删除指标数据 handleDelete() { this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let that = this let paramsArr = [] that.changeDateSelect.forEach(it =>{ paramsArr.push(it.id) }) apiGetevaluationdeptadDelete(paramsArr.join(',')).then(datas =>{ if (datas) { that.$message({ type: 'success', message: '删除成功!' }); that.changeDateSelect = [] that.getDetails(that.rowMsg.id) } }) }) }, handleCurrentChangeLeft(val) { this.pageLeft.currentPage = val }, handleCurrentChangeRight(val) { this.pageRight.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, 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 = [] that.secondWorkSituation = [] apiPostevaluationdeptadDetails(id).then(datas =>{ if (datas && datas.data) { if (datas.data['ygydkhxs'][0]) { datas.data['ygydkhxs'][0].forEach(it =>{ it.serialNumber = it.serialNumber.toString() }) that.quantifiedList = datas.data['ygydkhxs'][0] that.pageLeft.total = datas.data['ygydkhxs'][0].length } if (datas.data['byzygzwcqk'][0]) { that.secondWorkSituation = datas.data['byzygzwcqk'][0] that.pageRight.total = datas.data['byzygzwcqk'][0].length } } }) }, getUserPostList() { let that = this that.showMessage = false if (that.userMes.deptId === '23031009') { that.showMessage = true } else { let params = { userId: that.userMes.id, current: 1, size: 10 } apiGetUserPostList(params).then(datas =>{ if (datas.data && datas.data.records.length>0) { datas.data.records.forEach(it =>{ if (it.posName === '主任' || it.posName === '副主任') { that.showMessage = true } }) } }) } }, employeeNoInputBlur(val, row) { row.employeeId = '' // this.deptLeaderOptionDet.forEach(it =>{ // if (val === it.no) { // row.employeeId = it.id // } // }) this.changeDeptLead(val, row) }, // 根据部门查询人员 changeDeptLead(val, row) { let that = this let params = { current: 1, size: 500, no: val } apiGetuserPageList(params).then(datas =>{ if (datas && datas.data) { // that.deptLeaderOptionDet = datas.data.records row.employeeName = datas.data.records[0].name row.employeeId = datas.data.records[0].id } }) }, addTableDetail() { this.pageLeft.currentPage = 1 let obj = { showInput: true, businessPlanId: this.rowMsg.id, employeeId: '', employeeNo: '', suggestedValue: 1.00, 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: item.employeeName, employeeNo: item.employeeNo, suggestedValue: Number(item.suggestedValue).toFixed(2), 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.activeName = 'first' that.getDetails(that.rowMsg.id) } else { that.$message({ message: datas.message, type: 'error' }) } } }) }, deleteRowFn(row, index) { 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.activeName = 'first' that.getDetails(that.rowMsg.id) } }) } }) }, handleImport() { this.$refs.importPage.upload.title = "绩效结果考核申报导入" this.$refs.importPage.upload.data = {id: this.rowMsg.id} this.$refs.importPage.upload.open = true this.$refs.importPage.upload.url = '/evaluation-dept-ad/import' }, successImport(val) { this.$message({ type: 'success', message: val.message }); 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`) }) }, rowSituationClick(selection, row) { this.changeSituationSelect = selection }, addSecondWork() { this.pageRight.currentPage = 1 let obj = { showInput: true, assessmentDeclarationId: this.rowMsg.id, jobContent: '', completionStatus: '', relatedOffice: '', handlePeopleName: this.userMes.name, serialNumber: 0 } this.secondWorkSituation.unshift(obj) }, saveSecondWork() { let that = this let params = [] that.secondWorkSituation.forEach(item =>{ let obj = { assessmentDeclarationId: that.rowMsg.id, jobContent: item.jobContent, completionStatus: item.completionStatus, relatedOffice: item.relatedOffice, handlePeopleName: item.handlePeopleName, serialNumber: item.serialNumber } if (!item.showInput) { obj.id = item.id } params.push(obj) }) apiGetevaluationdeptadUpdateComplete(params).then(datas =>{ if (datas) { if (datas.success) { that.$message({ message: '保存成功', type: 'success' }); that.activeName = 'second' that.getDetails(that.rowMsg.id) } else { that.$message({ message: datas.message, type: 'error' }) } } }) }, handleSecondWork() { this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let that = this let paramsArr = [] that.changeSituationSelect.forEach(it =>{ paramsArr.push(it.id) }) apiGetevaluationdeptadDeleteComplete(paramsArr.join(',')).then(datas =>{ if (datas) { that.$message({ type: 'success', message: '删除成功!' }); that.activeName = 'second' that.changeSituationSelect = [] that.getDetails(that.rowMsg.id) } }) }) }, } } </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; } } } } } .el-select, .el-input{ width: 100%; } .el-tabs{ margin-top: 20px; .detaTableBtns{ display: flex; justify-content: flex-end; width: 100%; margin-top: 5px; .tableBtn { display: flex; height: 20px; margin: 0 10px; // width: 20%; width: fit-content; img{ margin-right: 5px; margin-top: 1px; } span{ width: 35px; display: inline-block; 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: pointer; span{ color: #F65177; } } .import{ cursor: pointer; span{ color: #ce1e78; } } .export{ cursor: pointer; span{ color: #2baa8a; } } } .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: 45vh; } .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>