<template> <div class="deptstartFrom"> <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.des}}</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.declarationLevel}}级</span> </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> <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> <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, 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: [], receiptMsg: { code: '', des: '', stage: '', createName: '', createDate: '', type: '', year: '', 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: [] } }, created() { }, methods: { init(row) { this.dialogVisible = true this.activeName = 'first' this.getDetails(row.id) // this.getDetailsHeader(row.id) this.changeDeptLead(row.deptId) this.rowMsg = row this.$nextTick(() =>{ this.receiptMsg = { code: row.orderNumber, des: row.declarationReason, stage: row.stage, deptLeaderName: row.deptLeaderName, deptName: row.deptName, createDate: row.createTime, year: row.annual, declarationLevel: row.declarationLevel } }) }, // 根据部门查询人员 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 } }) }, 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, createName: row.createName, createDate: row.createTime, type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评', year: row.appraisalYear, 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' }) } } }) }, handleImport() { this.$refs.importPage.upload.title = "绩效结果考核申报导入" this.$refs.importPage.upload.open = true this.$refs.importPage.upload.url = '/evaluation-dept-ad/import' }, successImport(val) { 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`) }) }, } } </script> <style lang="less"> .deptstartFrom{ .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%; } .btnASeach{ display: flex; z-index: 11111; justify-content: end; position: relative; top: 32px; left: 50vw; width: 50%; .detaTableBtns{ display: flex; width: 300px; margin-top: 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; } } .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: 50vh; } .el-table__row{ .cell{ .el-input{ height: 24px; .el-input__inner{ height: 24px; } } } } } } } } .el-dialog__footer{ .dialog-footer{ display: flex; justify-content: center; .el-button{ width: 180px !important; height: 40px !important; } } } } } } </style>