518 lines
13 KiB
Vue
518 lines
13 KiB
Vue
<!-- -->
|
||
<template>
|
||
<div class="performance">
|
||
<SmallNav v-if="!isNoRouter" />
|
||
<div
|
||
v-if="isNoRouter"
|
||
style="margin:20px 0;"
|
||
class="commonFont"
|
||
>我的绩效</div>
|
||
<div class="performance-content boderAndRadius">
|
||
<div
|
||
v-if="isNoRouter"
|
||
class="isNoRouter commonFont"
|
||
>
|
||
<el-cascader
|
||
style="width:210px;"
|
||
v-if="isNoRouter"
|
||
:key="key"
|
||
v-model="startId"
|
||
size="mini"
|
||
:props="props"
|
||
:options="timeOptions"
|
||
@change="handleChange"
|
||
></el-cascader>
|
||
</div>
|
||
|
||
<div
|
||
v-if="!isNoList"
|
||
class="performance-content-title"
|
||
>
|
||
<InfoHeader :obj="{
|
||
src:obj.avatar || '',
|
||
name:obj.staffName,
|
||
departmentName:obj.departmentName
|
||
}" />
|
||
<div class="performance-content-title-right">
|
||
<UseButton
|
||
:obj='obj'
|
||
:resultRecordId='resultRecordId'
|
||
v-if="isShow && !tableInfo.result && !tableInfo.score && obj.recortModelDtos.length !==0"
|
||
:formList='formList'
|
||
:tableInfo.sync='tableInfo'
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="!isNoList"
|
||
class="performance-content-center"
|
||
>
|
||
<div
|
||
class="performance-content-center-item commonFont"
|
||
:class="{
|
||
active:i.isActive,
|
||
right:true,
|
||
left:index !==0
|
||
}"
|
||
v-for="(i,index) in formList.flowRecordList"
|
||
:key="index"
|
||
>
|
||
<el-tooltip
|
||
v-if="i.flowName !== '执行中'"
|
||
class="item"
|
||
effect="dark"
|
||
:content="(index >= (formList.flowRecordList.length-1))?i.flowName:i.flowName +' : '+i.staffName"
|
||
placement="top"
|
||
>
|
||
<div>
|
||
{{index+1}}.{{i.flowName}} <span v-if="index !== (formList.flowRecordList.length-1)">:{{i.staffName}}
|
||
<i
|
||
v-if="i.isGou && !i.isActive"
|
||
style="color:#3ba1ff;margin:0 0 0 4px;font-weight:800;"
|
||
class="el-icon-check"
|
||
></i></span>
|
||
<i
|
||
v-if="index !== formList.flowRecordList.length-1"
|
||
style="cursor: pointer;"
|
||
@click="handleRight(i)"
|
||
class="el-icon-video-pause"
|
||
></i>
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
v-if="i.flowName === '执行中'"
|
||
class="item"
|
||
effect="dark"
|
||
placement="top"
|
||
>
|
||
<div slot="content">执行中”是员工在目标确认后，努力达成目标的一个过程，直到管理员发起评分。<br />管理员如何发起评分：返回上级页面<考核详情>，点击"开始评分"按钮发起。</div>
|
||
<div>
|
||
{{index+1}}.{{i.flowName}}<i class="el-icon-warning-outline" />:{{i.staffName}} <i
|
||
v-if="i.isGou && !i.isActive"
|
||
style="color:#3ba1ff;margin:0 0 0 4px;font-weight:800;"
|
||
class="el-icon-check"
|
||
></i>
|
||
<i
|
||
style="cursor: pointer;"
|
||
@click="handleRight(i)"
|
||
class="el-icon-video-pause"
|
||
></i>
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="!isNoList"
|
||
class="performance-content-bottom"
|
||
>
|
||
<tables
|
||
:resultRecordId='String(resultRecordId)'
|
||
:tableAuth='formList.auth'
|
||
:tableInfo.sync='tableInfo'
|
||
v-if="obj.recortModelDtos.length !==0"
|
||
:obj='obj'
|
||
/>
|
||
</div>
|
||
<div v-if="!isNoList">
|
||
<div
|
||
v-if="formList.resultCommentList.length !== 0 "
|
||
class="performance-content-jilu"
|
||
>
|
||
<div class="performance-content-jilu-title commonFont">
|
||
记录
|
||
</div>
|
||
<div
|
||
v-for="(i) in formList.resultCommentList"
|
||
:key="i.id"
|
||
class="performance-content-jilu-item commonFont"
|
||
>
|
||
<div class="performance-content-jilu-item-time">
|
||
{{i.gmtCreate}}
|
||
</div>
|
||
<div class="performance-content-jilu-item-content">
|
||
<div class="performance-content-jilu-item-content-img">
|
||
<InfoHeader
|
||
:isShow='false'
|
||
:obj='{src:i.avatar}'
|
||
/>
|
||
</div>
|
||
<div>
|
||
<span>{{i.staffName}}</span><span class="mubiao">#{{i.optDesc}}#</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="comment"
|
||
v-if="i.comment"
|
||
>
|
||
<pre>{{i.isShow?i.comment:(i.comment.substring(0,12)+'...')}}</pre>
|
||
<div
|
||
style="width:40px;flex-shrink:0; cursor: pointer;"
|
||
@click="handleShow(i)"
|
||
>{{!!i.isShow?'收起':'展开'}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<popup-right
|
||
v-if="right.showRight"
|
||
@cancel='handleCancel'
|
||
@submit="handleSubmit"
|
||
:footer='false'
|
||
:title="form.item.flowName"
|
||
>
|
||
<div
|
||
slot="content"
|
||
class="chooseManage"
|
||
>
|
||
<div
|
||
class='chooseManage-item'
|
||
:key="index"
|
||
v-for="(i,index) in form.item.flowDetailRespList"
|
||
>
|
||
<InfoHeader :obj="{
|
||
src:i.avatar,
|
||
name:i.staffName,
|
||
departmentName:i.departName
|
||
}" />
|
||
<div class="chooseManage-item-center">
|
||
<el-tag
|
||
v-if='i.status===0'
|
||
size="mini"
|
||
type="warning"
|
||
>未确认</el-tag>
|
||
<el-tag
|
||
v-if='i.status===4'
|
||
size="mini"
|
||
>已跳过</el-tag>
|
||
<el-tag
|
||
v-if='i.status===1'
|
||
size="mini"
|
||
type="success"
|
||
>已确认</el-tag>
|
||
</div>
|
||
<div>
|
||
<UseButton
|
||
:resultRecordId='resultRecordId'
|
||
:info='i'
|
||
:formList='formList'
|
||
:tableInfo.sync='tableInfo'
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</popup-right>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SmallNav from '@/components/kpi-layout/SmallNav'
|
||
import InfoHeader from '@/components/InfoHeader'
|
||
import PopupRight from '@/components/PopupRight'
|
||
import UseButton from './components/UseButton'
|
||
import { apiResultRecordDetail, apiResultGetDetail } from '@/api/assessment'
|
||
import tables from './components/table'
|
||
import { getStartsData } from '@/api/report'
|
||
export default {
|
||
props: {
|
||
isNoRouter: {
|
||
type: Boolean,
|
||
deafult: false
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
isNoList: false,
|
||
key: 0,
|
||
startIds: '',
|
||
timeOptions: [{
|
||
startId: 0,
|
||
time: '月度',
|
||
children: []
|
||
}, {
|
||
startId: 1,
|
||
time: '自定义',
|
||
children: []
|
||
}],
|
||
props: {
|
||
value: 'startId',
|
||
label: 'time',
|
||
expandTrigger: 'hover',
|
||
level: true
|
||
},
|
||
startId: [],
|
||
resultRecordId: null,
|
||
isShow: false,
|
||
right: {
|
||
showRight: false
|
||
},
|
||
form: {},
|
||
formList: {
|
||
flowRecordList: [],
|
||
resultCommentList: [],
|
||
auth: {}
|
||
},
|
||
obj: {
|
||
recortModelDtos: []
|
||
},
|
||
tableInfo: {
|
||
result: false,
|
||
score: false
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
SmallNav,
|
||
InfoHeader,
|
||
PopupRight,
|
||
tables,
|
||
UseButton
|
||
},
|
||
computed: {},
|
||
beforeMount () { },
|
||
async mounted () {
|
||
await this.handleGetTbale({ id: this.$route.query.id || '' })
|
||
if (this.isNoRouter) {
|
||
await this.handleStartsReq()
|
||
}
|
||
await this.handleList()
|
||
},
|
||
methods: {
|
||
handleShow (item) {
|
||
item.isShow = !item.isShow
|
||
console.log(item)
|
||
this.$forceUpdate()
|
||
},
|
||
async handleChange (item) {
|
||
this.startId = item
|
||
await this.handleGetTbale({ startId: item[1] })
|
||
await this.handleList()
|
||
},
|
||
// 为了不分页直接传999
|
||
async handleStartsReq (type, handleNode) {
|
||
let params = {
|
||
currentPage: 1,
|
||
cycleType: type,
|
||
pageSize: 999
|
||
}
|
||
for (let j in this.timeOptions) {
|
||
// params.startId
|
||
try {
|
||
let res = await getStartsData({
|
||
currentPage: 1,
|
||
cycleType: this.timeOptions[j].startId,
|
||
pageSize: 999
|
||
})
|
||
res = res.data
|
||
this.key += 10
|
||
this.timeOptions[j].children = res.list.map(i => {
|
||
if (i.startId === this.startIds) {
|
||
this.startId = [this.timeOptions[j].startId, i.startId]
|
||
}
|
||
return i
|
||
})
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
},
|
||
async handleGetTbale (params, type = false) {
|
||
if (!type) this.$loadingStart()
|
||
let res = await apiResultGetDetail(params)
|
||
if (!type) this.$loadingEnd()
|
||
this.isNoList = res.code !== 200
|
||
if (res.code !== 200) {
|
||
this.resultRecordId = ''
|
||
if (!this.isNoRouter) {
|
||
this.$message.error(res.msg)
|
||
}
|
||
return
|
||
}
|
||
this.startIds = res.data.startId
|
||
this.resultRecordId = res.data.id
|
||
res.data.recortModelDtos = res.data.recortModelDtos.concat([{ name: '总分', detailDtos: [] }])
|
||
this.obj = res.data
|
||
},
|
||
handleRight (item) {
|
||
this.form.item = item
|
||
this.right.showRight = true
|
||
},
|
||
handleCancel () {
|
||
this.right.showRight = false
|
||
},
|
||
handleSubmit () {
|
||
this.right.showRight = false
|
||
},
|
||
async handleList () {
|
||
this.isShow = false
|
||
let res = await apiResultRecordDetail({ resultRecordId: this.resultRecordId || this.$route.query.id || '' })
|
||
if (res.code !== 200) return this.$message.error(res.msg)
|
||
const arr = res.data.flowRecordList.concat([])
|
||
for (let i in res.data.flowRecordList) {
|
||
arr.shift()
|
||
res.data.flowRecordList[i][arr.some(j => j.status === 1) ? 'isGou' : 'isActive'] = true
|
||
if (!arr.some(j => j.status === 1)) {
|
||
break
|
||
}
|
||
}
|
||
this.formList = res.data
|
||
this.formList.resultCommentList = this.formList.resultCommentList.map(i => {
|
||
i.isShow = false
|
||
return i
|
||
})
|
||
this.isShow = true
|
||
}
|
||
},
|
||
watch: {}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang='less' scoped>
|
||
.isNoRouter {
|
||
display: flex;
|
||
margin: 0 0 28px 0;
|
||
align-items: center;
|
||
}
|
||
.performance {
|
||
overflow: auto;
|
||
.chooseManage-item {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid @borderColor;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
&-center {
|
||
min-width: 200px;
|
||
.center();
|
||
}
|
||
}
|
||
&-content {
|
||
.comment {
|
||
width: 600px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0 0 0 50px;
|
||
padding: 10px;
|
||
background: rgb(240, 240, 240);
|
||
border-radius: 4px;
|
||
pre {
|
||
white-space: pre;
|
||
white-space: pre-wrap !important;
|
||
word-wrap: break-word !important;
|
||
*white-space: normal !important;
|
||
}
|
||
}
|
||
padding: 28px;
|
||
margin: 10px 0 50px;
|
||
// height: 700px;
|
||
// overflow: auto;
|
||
|
||
&-top {
|
||
border-bottom: 1px solid @borderColor;
|
||
padding-bottom: 20px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
&-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
&-center {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 20px 0;
|
||
|
||
&-item {
|
||
text-align: center;
|
||
padding: 10px 60px;
|
||
margin: 4px 0;
|
||
font-size: 12px;
|
||
position: relative;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
}
|
||
.active {
|
||
background: @fontBlue;
|
||
color: #fff;
|
||
}
|
||
.left::before {
|
||
content: "";
|
||
width: 20px;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: url(./img/left.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.right::after {
|
||
content: "";
|
||
width: 20px;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
background: url(./img/right.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
&-jilu {
|
||
&-title {
|
||
padding: 20px 0 10px 0;
|
||
}
|
||
&-item {
|
||
padding: 0 0 0 10px;
|
||
&-time {
|
||
margin: 4px 0;
|
||
font-size: 14px;
|
||
position: relative;
|
||
}
|
||
&-time::before {
|
||
position: absolute;
|
||
left: -16px;
|
||
top: 0;
|
||
content: "";
|
||
bottom: 0;
|
||
margin: auto;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: @fontBlue;
|
||
overflow: hidden;
|
||
border-radius: 50%;
|
||
}
|
||
&-content {
|
||
padding: 0 0 0 10px;
|
||
display: flex;
|
||
min-height: 60px;
|
||
align-items: center;
|
||
span {
|
||
font-size: 14px;
|
||
}
|
||
.mubiao {
|
||
color: @fontBlue;
|
||
margin: 0 4px;
|
||
}
|
||
&-img {
|
||
// width: 30px;
|
||
// height: 30px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 10px;
|
||
img {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|