<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.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="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%" @select="rowClick" @select-all="rowClick">
<el-table-column label="序号" type="index" width="80" />
<el-table-column label="部门名称" prop="deptName" width="300">
<template #default="scope">
<el-select v-model="scope.row.deptName" placeholder="请选择所属部门" v-if="scope.row.showInput">
<el-option
v-for="item in departData"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="scope.row.dataPermission === '-1' && scope.row.deptName !== ''">
</el-option>
</el-select>
<span v-else>{{scope.row.deptName}}</span>
</template>
</el-table-column>
<el-table-column label="排序" width="100" >
<template #default="scope">
<el-input-number v-model="scope.row.serialNumber"
:disabled="scope.row.dataPermission === '-1' && scope.row.serialNumber !== ''" :min="1" />
</template>
</el-table-column>
<el-table-column label="指标名称" >
<template #default="scope">
<el-input v-model="scope.row.targetName"
:disabled="scope.row.dataPermission === '-1'"
placeholder="请输入指标名称"></el-input>
</template>
</el-table-column>
<el-table-column label="目标值" width="500">
<template #default="scope">
<el-input v-model="scope.row.targetValue"
:disabled="scope.row.dataPermission === '-1'"
type="textarea" :rows="2" placeholder="请输入目标值"></el-input>
</template>
</el-table-column>
<el-table-column label="基础分" width="150">
<template #default="scope">
<el-input-number v-model="scope.row.baseScore"
:precision="2" :step="0.1" :min="0" />
</template>
</el-table-column>
<el-table-column label="评价标准" >
<template #default="scope">
<el-input v-model="scope.row.evaluationCriteria"
type="textarea" :rows="2" placeholder="请输入评价标准"></el-input>
</template>
</el-table-column>
<el-table-column label="审核状态" width="200" >
<template #default="scope">
<el-select v-model="scope.row.auditStatus" placeholder="请选择审核状态">
<el-option
v-for="item in statusData"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="(scope.row.dataPermission === '-1' && scope.row.auditStatus !== '') || userMes.deptId === '23031009'">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template #default="scope">
<p class="indicitem" v-if="scope.row.dataPermission !== '-1'" @click="handleDelete(scope.row)">删除</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 {apiGetevaluationdeptplanDetail,apiGetevaluationdeptplanUpdate, apiGetdatadictionaryList,apiGetcheckAuditStatus,apiGetevaluationdetailDeptData,
apiPostIsdoAction, apiGetevaluationdeptplanDetailHeader, apiGetevaluationdeptplandelete} 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 {
descMsg: '',
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: [],
statusData: [],
pageLeft:{
pagesize: 15,
currentPage: 1,
total: 0
},
pageRight:{
pagesize: 15,
currentPage: 1,
total: 0
},
departData: [],
instanceChild: {},
importId: '',
userMes: {}
}
},
created() {
this.statusData = [
{
name: '已通过',
id: '0'
},
{
name: '待审核',
id: '-1'
},
{
name: '未通过',
id: '-2'
}
]
},
methods: {
init(row, id, datas) {
this.dialogVisible = true
this.instanceChild = datas
this.activeName = 'first'
this.importId = id
this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
this.getDetails(id)
this.getDepartmentFromTreeData(datas)
this.rowMsg = row
},
// 查询部门
getDepartmentFromTreeData(datas) {
let that = this
// let params = {
// superKey: 'BM0001'
// }
// apiGetdatadictionaryList(params).then(datas =>{
// if (datas && datas.data) {
// let departData = datas.data
// that.getshowDepartDataFn(row, departData)
// }
// })
let params = {
id: datas.bizKey,
deptId: that.userMes.deptId
}
// 获取部门数据
apiGetevaluationdetailDeptData(params).then(datas =>{
if (datas && datas.data) {
for(let i in datas.data) {
let obj = {
id: i,
name: datas.data[i]
}
that.departData.push(obj)
}
}
})
},
// 整合部门数据
// getshowDepartDataFn(row, deptData) {
// let deptIdArr = row.deptId.split(',')
// deptIdArr.forEach(it =>{
// deptData.forEach(itv =>{
// if (itv.id === it) {
// that.departData.push(itv)
// }
// })
// })
// },
handleDelete(row) {
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let that = this
apiGetevaluationdeptplandelete(row.id).then(datas =>{
that.$message({
type: 'success',
message: '删除成功!'
});
that.getevaluStartList()
that.changeDateSelect = []
})
})
},
handleClick() {
this.changeDateSelect = []
},
rowClick(selection, row) {
this.changeDateSelect = selection
},
handleCurrentChangeLeft(val) {
this.pageLeft.currentPage = val
},
handleCurrentChangeRight(val) {
this.pageRight.currentPage = val
},
//获取详情
getDetails(id) {
let that = this
that.quantifiedList = []
let userMes = JSON.parse(window.sessionStorage.getItem('user'))
let params = {
id: id,
deptId: userMes.deptId
}
apiGetevaluationdeptplanDetailHeader(id).then(datas =>{
if (datas && datas.data) {
let item = datas.data
this.receiptMsg = {
code: item.responsibilityCode,
des: item.des,
stage: item.stage,
createName: item.createName,
createDate: item.createTime,
type: item.checkCycle === 'YDKP'?'月度考评':item.checkCycle === 'JDKP'?'季度考评':'年度考评',
year: item.appraisalYear,
recStage: '有效'
}
}
})
apiGetevaluationdeptplanDetail(params).then(datas =>{
if (datas && datas.data) {
that.quantifiedList = datas.data
that.pageLeft.total = datas.data.length
}
})
},
addTableDetail() {
let obj = {
showInput: true,
businessPlanId: this.rowMsg.id,
serialNumber: '1',
deptName: '',
targetName: '',
targetValue: '',
baseScore: 0,
evaluationCriteria: '',
auditStatus: '-1'
}
this.quantifiedList.unshift(obj)
},
saveDetail() {
let that = this
let params = []
let userMes = JSON.parse(window.sessionStorage.getItem('user'))
that.quantifiedList.forEach(item =>{
let obj = {
targetName: item.targetName,
targetValue: item.targetValue,
baseScore: item.baseScore.toString(),
evaluationCriteria: item.evaluationCriteria,
auditStatus: item.auditStatus,
serialNumber: item.serialNumber,
createDept: userMes.deptId
}
if (item.showInput) {
obj.deptId = item.deptName
obj.businessPlanId = item.businessPlanId
} else {
obj.id = item.id
}
params.push(obj)
})
apiGetevaluationdeptplanUpdate(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'
})
}
}
})
},
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
}
if (type === 'agree') {
let userMes = JSON.parse(window.sessionStorage.getItem('user'))
let paramsob = {
id: that.rowMsg.id,
deptId: userMes.deptId
}
apiGetcheckAuditStatus(paramsob).then(datas =>{
if (datas) {
if (datas.success) {
that.IsdoActionFn(params)
} else {
that.$message({
message: datas.data,
type: 'error'
})
}
}
})
} else {
that.IsdoActionFn(params)
}
},
IsdoActionFn(params) {
let that = this
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'
})
}
}
})
},
handleImport() {
this.$refs.importPage.upload.title = "本部部门业绩指标计划信息导入"
this.$refs.importPage.upload.data = {id: this.importId}
this.$refs.importPage.upload.open = true
this.$refs.importPage.upload.url = '/evaluation-dept-plan/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 },
// { header: '业务ID', key: 'businessPlanId', width: 26 },
{ header: '部门编码', key: 'deptId', width: 26 },
{ header: '部门名称', key: 'deptName', width: 26 },
// { header: '部门编码', key: 'deptCode', width: 26 },
{ header: '排序', key: 'serialNumber', width: 26 },
{ header: '指标名称', key: 'targetName', width: 18 },
{ header: '目标值', key: 'targetValue', width: 18 },
{ header: '评价标准', key: 'evaluationCriteria', width: 18 },
{ header: '基础分', key: 'baseScore', width: 18 },
]
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: 38vh;
}
.el-table__row{
.cell{
.el-input{
height: 24px;
.el-input__inner{
height: 24px;
}
}
}
}
.indicitem{
color: #409EFF;
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>