<template>
<div class="evaluationAmendmentFrom">
<el-dialog title="考评修订详情" v-model="dialogVisible" :fullscreen="true" :close-on-click-modal="false" @close="closeDialogVisible">
<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="headerRight">
<div class="seachFor">
<el-input v-model="compNameSa" placeholder="请输入单位名称" @keyup.enter="getTableData(addstageId)"></el-input>
</div>
<div class="tableBtn add" @click="amendmentDetail" v-if="receiptMsg.stage === '流程未启动'">
<img :src="addIcon" alt="">
<span>修订</span>
</div>
<div class="tableBtn save" @click="saveDetail" v-if="receiptMsg.stage === '流程未启动'">
<img :src="saveIcon" alt="">
<span>保存</span>
</div>
<div class="tableBtn import" @click="handleImport" v-if="receiptMsg.stage === '流程未启动'">
<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" v-if="binSectionCode === 'QQ' && activeName ==='QQXM'">
<el-table-column type="index" label="排名" align="center"></el-table-column>
<el-table-column label="考评单位" prop="organizationShortName" width="300" />
<el-table-column label="发展绩效" align="center">
<el-table-column label="新能源发展" align="center" >
<el-table-column label="核准(备案)目标容量" prop="XNYFZ_HZ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[XNYFZ_HZ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="投资决策目标容量" align="center" >
<el-table-column label="合计" prop="XNYFZ_HJ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[XNYFZ_HJ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="已核准(备案)" prop="XNYFZ_YHZ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[XNYFZ_YHZ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="待核准(备案)" align="center" >
<el-table-column label="已获取" prop="XNYFZ_YHQ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[XNYFZ_YHQ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="待获取" prop="XNYFZ_DHQ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[XNYFZ_DHQ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="常规能源发展" align="center" >
<el-table-column label="核准(备案)目标容量" prop="CGNYFZ_HZ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[CGNYFZ_HZ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="投资决策目标容量" align="center" >
<el-table-column label="已核准(备案)" prop="CGNYFZ_YHZ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[CGNYFZ_YHZ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="待核准(备案)" prop="CGNYFZ_DHZ" align="center" >
<template #default="scope">
<el-input-number v-model="scope.row[CGNYFZ_DHZ]" :precision="2" :step="0.1" />
</template>
</el-table-column>
</el-table-column>
<el-table-column label="火电水电项目阶段性工作目标" prop="CGNYFZ_JDGZ" align="center" >
<template #default="scope">
<el-input v-model="scope.row[CGNYFZ_JDGZ]" :rows="2" type="textarea"></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="战略新兴产业发展" prop="ZLXXCY_FZ" align="center" >
<template #default="scope">
<el-input v-model="scope.row[ZLXXCY_FZ]" :rows="2" type="textarea"></el-input>
</template>
</el-table-column>
<el-table-column label="投资计划" align="center" >
<el-table-column label="基建投资" prop="TZJH_JJTZ" align="center" >
<template #default="scope">
<el-input v-model="scope.row[TZJH_JJTZ]" :rows="2" type="textarea"></el-input>
</template>
</el-table-column>
<el-table-column label="非基建投资" prop="TZJH_FJJTZ" align="center" >
<template #default="scope">
<el-input v-model="scope.row[TZJH_FJJTZ]" :rows="2" type="textarea"></el-input>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
<el-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT" :border="true" v-else>
<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" width="150" sortable :sort-method="(a,b)=>sortMethods(a,b,iv.code)">
<template #default="scope">
<el-select v-model="scope.row[iv.code]" 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]" v-else-if="scope.row['IS_LH_'+iv.code] === '2'"></el-input>
<el-input-number v-model="scope.row[iv.code]" :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="closeDialogVisible">取 消</el-button>
</span>
</template>
</el-dialog>
<el-dialog title="修订数据" v-model="revisionVisible" width="600px" :close-on-click-modal="false">
<div class="periodFrom">
<el-form :model="revisionForm" :rules="revisionRules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false">
<el-form-item label="考评单位" prop="organizationName">
<el-select v-model="revisionForm.organizationName" filterable multiple
placeholder="请选择考评单位" >
<el-option
v-for="item in organizationArr"
:key="item.organizationId"
:label="item.organizationShortName"
:value="item.organizationId">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="revisionOk">确 认</el-button>
</span>
</template>
</el-dialog>
<import-dailog ref="importPage" @successImport="successImport"></import-dailog>
</div>
</template>
<script>
import importDailog from '../importPage/importDailog.vue'
import {apiGetgetevaluationrevisiondetails,apiGetbinsectionList, apiGetbinstageList,apiGetExportMsg,apiGetevaluationrevisionsave,
apiPostupdateevaluationrevisionInfo, apiPostorganizationUpdateAddEvaluationInfo, apiGetgetevaluationrevisiongetUnitAll} 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,
revisionVisible: false,
revisionData: [],
activeName: '',
monthQuarterYearData: [],
monthQuarterYearHeader: [],
isClickTagId: '',
compNameSa: '',
receiptMsg: {
code: '',
des: '',
stage: '',
createName: '',
createDate: '',
type: '',
year: '',
recStage: ''
},
revisionForm: {
organizationName: []
},
revisionRules: {
organizationName: [
{ required: true, message: '请选择单位', trigger: 'change' }
]
},
organizationArr: [],
rowMsg: {},
moduleData: [],
stageData: [],
titleMsgArr: [],
statusData: [],
binSectionStr: '',
binSectionCode: '',
addIcon: addIcon,
saveIcon: saveIcon,
exportIcon: exportIcon,
importIcon: importIcon,
addstageId: '',
userMes: {}
}
},
created() {
this.statusData = [
{
name: '已确认',
id: '1'
},
{
name: '待确认',
id: '0'
},
{
name: '不合格',
id: '-1'
}
]
},
methods: {
init(row) {
this.dialogVisible = true
this.receiptMsg = {
code: row.responsibilityCode,
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()
this.getEvaluationUnit()
this.rowMsg = row
},
sortMethods(a, b, it) {
if (a[it] < b[it]) {
return -1
}
},
// 获取修订得考评单位
getEvaluationUnit() {
let that = this
apiGetgetevaluationrevisiongetUnitAll().then(datas =>{
if (datas && datas.data) {
that.organizationArr = datas.data
}
})
},
// 获取业务属性
getModelData() {
let that = this
that.titleMsgArr = []
let params = {
type: '3'
}
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.binSectionCode = that.titleMsgArr[0].isNameEn
that.getStageData()
}
})
},
//根据业务属性获取业务阶段
getStageData() {
let that = this
let params = {
type: '2'
}
apiGetbinstageList(params).then(datas =>{
if (datas && datas.data) {
that.stageData = datas.data
that.activeName = datas.data[0].stageCode
that.addstageId = datas.data[0].id
that.getTableData(datas.data[0].id)
}
})
},
handleClick(val) {
let stageId = ''
this.activeName = val.props.name
console.log('activeName', this.activeName)
this.stageData.forEach(it =>{
if (it.stageCode === val.props.name) {
stageId = it.id
this.addstageId = it.id
}
})
this.getTableData(stageId)
},
//获取表格数据
getTableData(id) {
let that = this
let params = {
reviseId: that.rowMsg.id,
binSection: that.binSectionStr,
binStage: id,
organizationShortName: that.compNameSa
}
apiGetgetevaluationrevisiondetails(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
}
})
},
changType(data) {
this.titleMsgArr.forEach(it =>{
it.showClick = false
if (it.isName === data.isName) {
it.showClick = true
this.binSectionStr = it.id
this.binSectionCode = data.isNameEn
}
})
let stageId = ''
this.stageData.forEach(it =>{
if (it.stageCode === this.activeName) {
stageId = it.id
}
})
this.getTableData(stageId)
},
// 修订数据
amendmentDetail() {
this.revisionVisible = true
},
revisionClick(selection, row) {
this.revisioDataSelect = selection
},
revisionOk() {
let that = this
let orgNames = []
that.organizationArr.forEach(it =>{
that.revisionForm.organizationName.forEach(iv =>{
if (iv === it.organizationId) {
orgNames.push(it.organizationShortName)
}
})
})
let params = {
id: that.rowMsg.id,
organizationId: that.revisionForm.organizationName.join(','),
organizationName: orgNames.join(',')
}
apiGetevaluationrevisionsave(params).then(datas =>{
if (datas) {
that.revisionVisible = false
that.getTableData(that.addstageId)
}
})
},
closeDialogVisible() {
this.dialogVisible = false
this.revisionForm.organizationName = []
},
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) {
apiPostupdateevaluationrevisionInfo(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.addstageId)
},
saveDetail() {
let that = this
apiPostupdateevaluationrevisionInfo(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.addstageId)
}
})
},
handleImport() {
this.$refs.importPage.upload.title = "考评目标详情信息导入"
this.$refs.importPage.upload.open = true
this.$refs.importPage.upload.url = '/responsibility-indicator-info/import-excel'
},
successImport(val) {
that.getTableData(that.addstageId)
},
handleExport() {
let that = this
let url = 'responsibility-indicator-info/download-excel'
let params = {
responsibilityId: that.rowMsg.id,
binSection: that.binSectionStr,
binStage: that.addstageId
}
apiGetExportMsg(url,params).then(datas =>{
let blob = new Blob([datas])
saveAs(blob, '考评目标详情数据导出.xlsx')
}).catch((r) => {
console.error(r)
})
},
}
}
</script>
<style lang="less">
.evaluationAmendmentFrom{
.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;
.headerRight{
display: flex;
justify-content: end;
width: 100%;
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 10px 0 10px;
// width: 13%;
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;
}
}
.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{
.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: 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;
}
}
}
}
.periodFrom{
margin-top: 15px;
.el-select, .el-input{
width: 100%;
}
}
}
.el-dialog__footer{
.dialog-footer{
display: flex;
justify-content: center;
.el-button{
width: 180px !important;
height: 40px !important;
}
}
}
}
}
}
</style>