<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.creator}}</span>
</div>
<div class="danjuMsg_data">
<span class="data_tit">单据状态:</span>
<span>{{receiptMsg.recStage}}</span>
</div>
</el-col>
</el-row>
<div class="detaTableBtns">
<div class="tableBtn add" @click="addTableDetail" v-if="activeName === 'second'">
<img :src="addIcon" alt="">
<span>新增</span>
</div>
<div class="tableBtn save" @click="saveDetail" v-if="$utils.havePurview('evalStart:twoLevel:save')">
<img :src="saveIcon" alt="">
<span>保存</span>
</div>
<!-- <div class="tableBtn edit">
<img :src="editIcon" alt="">
<span>新增</span>
</div> -->
<!-- <div class="tableBtn delete">
<img :src="deleteIcon" alt="">
<span>删除</span>
</div> -->
</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="考评指标项内容" name="first">
<el-table :data="quantifiedList" style="width: 100%" @select="rowClick" @select-all="rowClick">
<el-table-column type="selection" label="操作" align="center"></el-table-column>
<el-table-column type="index" label="序号" width="80" />
<el-table-column label="业务阶段" prop="stageName" />
<el-table-column label="业务属性" prop="sectionName" />
<el-table-column label="单位名称" prop="organizationName" width="300" />
<el-table-column label="填报部门" prop="deptName" width="260" />
<el-table-column label="指标分类" prop="typeName" />
<el-table-column label="目标值">
<template #default="scope">
<el-input-number v-model="scope.row.quantifiedValue"
:precision="2" :step="0.1" :min="0" :disabled="!scope.row.updateMark" />
</template>
</el-table-column>
<el-table-column label="单位" prop="unit" />
<el-table-column label="审核状态">
<template #default="scope">
<el-select v-model="scope.row.state" placeholder="请选择审核状态" :disabled="!scope.row.updateMark">
<el-option
v-for="item in statusData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="考评评价指标内容" name="second">
<el-table :data="nonQuantifiedList" style="width: 100%">
<el-table-column type="index" label="序号" width="80" />
<el-table-column label="单位名称" prop="organizationName" width="300">
<template #default="scope">
<el-select v-model="scope.row.organizationName" placeholder="请选择单位名称"
:disabled="!scope.row.showInput"
@change="changeOrgZa">
<el-option
v-for="item in orgruleData"
:key="item.id"
:label="item.organizationName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="指标分类" prop="typeName">
<template #default="scope">
<el-select v-model="scope.row.typeName" :disabled="!scope.row.showInput" placeholder="请选择指标分类">
<el-option
v-for="item in indicatorTypeData"
:key="item.id"
:label="item.typeName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="业务阶段" prop="stageName">
<template #default="scope">
<el-select v-model="scope.row.stageName" placeholder="请选择业务阶段"
:disabled="!scope.row.showInput"
@change="(val)=>changeIndic(val, scope.row)">
<el-option
v-for="item in stageData"
:key="item.id"
:label="item.stageName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="业务属性" prop="sectionName">
<template #default="scope">
<el-select v-model="scope.row.sectionName" placeholder="请选择业务阶段"
:disabled="!scope.row.showInput"
@change="(val)=>changeIndic(val, scope.row)">
<el-option
v-for="item in sectionNameArr"
:key="item.id"
:label="item.secName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="指标名称" prop="childName">
<template #default="scope">
<el-select v-model="scope.row.childName" placeholder="请选择业务阶段"
:disabled="!scope.row.showInput"
@change="changeDept">
<el-option
v-for="item in indicItemoptions"
:key="item.id"
:label="item.indicatorName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="填报部门" prop="deptName" width="260">
<template #default="scope">
<el-select v-model="scope.row.deptName" placeholder="请选择业务阶段" :disabled="!scope.row.showInput">
<el-option
v-for="item in deptNameArr"
:key="item.id"
:label="item.deptName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="值">
<template #default="scope">
<el-input v-model="scope.row.nonQuantifiedValue" :disabled="!scope.row.updateMark" />
</template>
</el-table-column>
<el-table-column label="审核状态">
<template #default="scope">
<el-select v-model="scope.row.state" placeholder="请选择审核状态" :disabled="!scope.row.updateMark">
<el-option
v-for="item in statusData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</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>
</div>
</template>
<script>
import {apiGetdeptresponDetail,apiGetindicatorsaveBatchDto, apiGetOrganizationRule,
apiGetindicatorListAll, apiGetbinstageList, apiGetIndicatorTypeList} from '../../api/api'
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'
export default {
data() {
return {
dialogVisible: false,
activeName: 'first',
quantifiedList: [],
nonQuantifiedList: [],
changeDateSelect: [],
receiptMsg: {
code: '',
des: '',
stage: '',
creator: '',
createDate: '',
type: '',
year: '',
recStage: ''
},
addIcon: addIcon,
saveIcon: saveIcon,
editIcon: editIcon,
deleteIcon: deleteIcon,
rowMsg: {},
orgruleData: [],
indicatorTypeData: [],
stageData: [],
indicItemoptions: [],
sectionNameArr: [],
deptNameArr: [],
statusData: []
}
},
created() {
this.statusData = [
{
name: '已完成',
id: '1'
},
{
name: '待审核',
id: '0'
},
{
name: '未开始',
id: '-1'
}
]
},
methods: {
init(row) {
this.dialogVisible = true
this.activeName = 'first'
this.receiptMsg = {
code: row.responsibilityCode,
des: row.des,
stage: row.stage,
creator: row.createBy,
createDate: row.createTime,
type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
year: row.year,
recStage: '有效'
}
this.getDetails(row.id)
this.getOrgRule(row)
this.getindList()
this.rowMsg = row
},
// 考评评价指标内容
getOrgRule(row) {
let that = this
let params = {
id: row.id,
type: 'mb'
}
apiGetOrganizationRule(params).then(datas =>{
if (datas && datas.data) {
that.orgruleData = datas.data
}
})
},
getindList() {
let that = this
let params = {
type: 2
}
apiGetbinstageList(params).then(datas =>{
if (datas && datas.data) {
that.stageData = datas.data
}
})
apiGetIndicatorTypeList(params).then(datas =>{
if (datas && datas.data) {
that.indicatorTypeData = datas.data
}
})
},
getIndListAll(row) {
let that = this
let params = {
binSection: row.sectionName,
binStage: row.stageName
}
apiGetindicatorListAll(params).then(datas =>{
if (datas && datas.data) {
that.indicItemoptions = datas.data
}
})
},
changeIndic(val, row) {
if (row.stageName !== '' && row.sectionName !== '') {
this.getIndListAll(row)
}
},
changeOrgZa(val) {
this.sectionNameArr = []
this.orgruleData.forEach(item =>{
if (item.id === val) {
let obj = {
id: item.binSection,
secName: item.binSectionName
}
this.sectionNameArr.push(obj)
}
})
},
changeDept(val) {
this.deptNameArr = []
this.indicItemoptions.forEach(item =>{
if (item.id === val) {
let obj = {
id: item.dept,
deptName: item.deptName
}
this.deptNameArr.push(obj)
}
})
},
handleClick() {
this.changeDateSelect = []
},
rowClick(selection, row) {
this.changeDateSelect = selection
},
//获取详情
getDetails(id) {
let that = this
let params = {
deptResponsibilityIds: id
}
apiGetdeptresponDetail(params).then(datas =>{
if (datas && datas.data) {
that.quantifiedList = datas.data.quantifiedList
// let nonarr = []
if (datas.data.nonQuantifiedList.length>0) {
datas.data.nonQuantifiedList.forEach(it =>{
it.childName = it.indicatorName //指标id
// nonarr.push(obj)
})
}
that.nonQuantifiedList = datas.data.nonQuantifiedList.length>0?datas.data.nonQuantifiedList:[]
}
})
},
addTableDetail() {
let obj = {
showInput: true,
stageName: '',
sectionName: '',
organizationName: '',
deptName: '',
typeName: '',
optionName: '',
nonQuantifiedValue: ''
}
this.nonQuantifiedList.unshift(obj)
},
saveDetail() {
let that = this
let params = []
if (that.activeName === 'first') {
that.quantifiedList.forEach(item =>{
let obj = {
id: item.id,
isQuantified: '是',
quantifiedValue: item.quantifiedValue,
state: item.state
}
params.push(obj)
})
} else {
that.nonQuantifiedList.forEach(item =>{
let obj = {
isQuantified: '否',
quantifiedValue: 0.0,
optionCode: 'ZRMB', // 指标项
nonQuantifiedValue: item.nonQuantifiedValue,
state: item.state,
deptResponsibilityId: that.rowMsg.id
}
if (item.showInput) {
obj.organizationEvaluationRuleId = item.organizationName //单位id
obj.indicatorId = item.childName //指标id
} else {
obj.id = item.id
obj.organizationEvaluationRuleId = item.organizationEvaluationRuleId
obj.indicatorId = item.indicatorId
}
params.push(obj)
})
}
apiGetindicatorsaveBatchDto(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'
})
}
}
})
}
}
}
</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%;
}
.detaTableBtns{
display: flex;
width: 200px;
position: relative;
top: 32px;
left: 80vw;
z-index: 11111;
.tableBtn {
display: flex;
margin-right: 30px;
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;
}
}
}
.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{
.el-table__body-wrapper{
height: 55vh;
}
.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>