523 lines
14 KiB
Vue
523 lines
14 KiB
Vue
<!-- -->
|
|
<template>
|
|
<div class="step">
|
|
<small-nav :showTitle='false'>
|
|
<div slot="content">
|
|
<el-cascader
|
|
:key="key"
|
|
v-model="startId"
|
|
size="mini"
|
|
:props="props"
|
|
:options="timeOptions"
|
|
@change="handleChange"
|
|
></el-cascader>
|
|
</div>
|
|
</small-nav>
|
|
<div class="step-content boderAndRadius">
|
|
<div class="step-content-top">
|
|
<div class="step-content-top-left">
|
|
<el-button
|
|
size="small"
|
|
@click="handleChoose"
|
|
plain
|
|
>{{formTitle}}<i
|
|
style="margin-left:10px;"
|
|
class="el-icon-arrow-down"
|
|
></i></el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="handleKaoping"
|
|
plain
|
|
>{{params.evaluationIds?params.title:'选择考评组'}}<i
|
|
style="margin-left:10px;"
|
|
class="el-icon-arrow-down"
|
|
></i></el-button>
|
|
<el-input
|
|
clearable
|
|
@change="handleChangeInput"
|
|
@keyup.enter="handleChangeInput"
|
|
size="small"
|
|
style="margin-left:10px;"
|
|
v-model="params.staffName"
|
|
prefix-icon="el-icon-search"
|
|
placeholder="请输入姓名搜索"
|
|
></el-input>
|
|
</div>
|
|
<div class="step-content-top-right">
|
|
<el-button
|
|
size="small"
|
|
@click="showChooseList= true"
|
|
type="primary"
|
|
>开始评分</el-button>
|
|
<!-- handleGetList handleChoose -->
|
|
<el-button
|
|
size="small"
|
|
v-if='auth.amMore'
|
|
@click="handleMore"
|
|
plain
|
|
>更多</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="step-content-center boderAndRadius">
|
|
<div
|
|
class="step-content-center-item commonFont"
|
|
v-for="(i,index) in titleList"
|
|
:key="i.id"
|
|
>
|
|
<span
|
|
class="hover"
|
|
:class="{active:i.active}"
|
|
@click="handleActive(i)"
|
|
style="cursor: pointer;"
|
|
>{{i.desc}}( {{i.num}} )</span>
|
|
<div
|
|
v-if="index<titleList.length-1"
|
|
class="step-content-center-item-img"
|
|
>
|
|
<div
|
|
v-if="titleList.length>2 && index===0"
|
|
class='shuxian'
|
|
></div>
|
|
<i
|
|
v-else
|
|
class="el-icon-arrow-right"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="staffName"
|
|
label="姓名"
|
|
align='center'
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="name">
|
|
<InfoHeader :obj="{
|
|
src:scope.row.avatar}" />
|
|
<div style="width:50px;">{{scope.row.staffName}}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="departmentName"
|
|
label="部门"
|
|
align='center'
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="evaluationName"
|
|
label="考评组"
|
|
align='center'
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="allScore"
|
|
label="考核结果"
|
|
align='center'
|
|
>
|
|
<template slot-scope="scop">
|
|
<div>
|
|
{{scop.row.allScore || '--'}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="scoreLevel"
|
|
label="绩效等级"
|
|
align='center'
|
|
>
|
|
<template slot-scope="scop">
|
|
<div>
|
|
{{scop.row.scoreLevel || '--'}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
align='center'
|
|
label="操作"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<el-button
|
|
|
|
@click="handleLook(scope.row.id)"
|
|
type="text"
|
|
size="small"
|
|
>
|
|
查 看
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
<div class="footer">
|
|
<el-pagination
|
|
small
|
|
:hide-on-single-page='true'
|
|
@current-change="handleChangePage"
|
|
layout="prev, pager, next"
|
|
:page-size.sync='params.pageSize'
|
|
:current-page.sync='params.currPage'
|
|
:total="params.totalCount"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ChooseInitiate
|
|
:nOSec='true'
|
|
v-if="showChooseList"
|
|
@cb='handleCallBackChoose'
|
|
subumitText='开始评分'
|
|
popupRightTitle='请选择开始评分的考评组'
|
|
:options='options'
|
|
:showChooseList.sync='showChooseList'
|
|
/>
|
|
<EvaluationTeamFilter
|
|
v-if="dialogVisible"
|
|
:value='params.evaluationIds'
|
|
:filtersDic="{startId: this.params.startId }"
|
|
:dialogVisible.sync='dialogVisible'
|
|
@submitClick='submitClick'
|
|
@close='dialogVisible = false'
|
|
/>
|
|
<getPersonnel
|
|
v-if="form.isShowPersonnel"
|
|
:value.sync='params.staffIds'
|
|
:isShow.sync='form.isShowPersonnel'
|
|
:showDataList.sync='form.personnelList'
|
|
/>
|
|
<popupMange
|
|
:showPopup.sync="showPopupMange"
|
|
popupRightTitle="管理绩效考核"
|
|
:titleList='titleList'
|
|
:startId='options.startId'
|
|
@cb="handlePopupMangeSubmit"
|
|
@remove="showPopupPerson=true"
|
|
/>
|
|
<popupRemovePerson
|
|
title="删除被考核人员"
|
|
:showPopup.sync='showPopupPerson'
|
|
:startId='options.startId'
|
|
@cb="handlePopupRemoveListSuccessful"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SmallNav from '@/components/kpi-layout/SmallNav'
|
|
import getPersonnel from '@/components/getPersonnel'
|
|
import popupMange from '@/components/popupMange'
|
|
import PopupRight from '@/components/PopupRight'
|
|
import EvaluationTeamFilter from '@/components/EvaluationTeamFilter'
|
|
import ChooseInitiate from '@/components/ChooseInitiate'
|
|
import popupRemovePerson from '@/components/popupPerson'
|
|
import InfoHeader from '@/components/InfoHeader'
|
|
import { apiManagerDetail, apiChartList, apiAssessManagerToScore } from '@/api/assessment'
|
|
import { getStartsData } from '@/api/report'
|
|
let id = 0
|
|
export default {
|
|
data () {
|
|
return {
|
|
options: {
|
|
startId: this.$route.query.id || ''
|
|
},
|
|
showPopupMange: false, // 显示管理
|
|
showPopupPerson: false, // 删除人员
|
|
showChooseList: false,
|
|
dialogVisible: false,
|
|
form: {
|
|
isShowPersonnel: false,
|
|
personnelList: {
|
|
list: []
|
|
}
|
|
},
|
|
startId: null,
|
|
params: {
|
|
'currPage': 1,
|
|
'evaluationIds': '',
|
|
'flowProcess': null,
|
|
'pageSize': 10,
|
|
'staffIds': '',
|
|
'staffName': '',
|
|
'startId': 10
|
|
},
|
|
key: 0,
|
|
timeOptions: [{
|
|
startId: 0,
|
|
time: '月底',
|
|
children: []
|
|
}, {
|
|
startId: 1,
|
|
time: '自定义',
|
|
children: []
|
|
}],
|
|
//
|
|
props: {
|
|
value: 'startId',
|
|
label: 'time',
|
|
expandTrigger: 'hover',
|
|
level: true
|
|
},
|
|
tableData: [],
|
|
formInline: {},
|
|
titleList: []
|
|
}
|
|
},
|
|
components: {
|
|
SmallNav,
|
|
getPersonnel,
|
|
popupMange,
|
|
popupRemovePerson,
|
|
PopupRight,
|
|
EvaluationTeamFilter,
|
|
ChooseInitiate,
|
|
InfoHeader
|
|
},
|
|
computed: {
|
|
formTitle () {
|
|
return this.form.personnelList.list.length > 0 ? this.form.personnelList.title + '等' + this.form.personnelList.list.length + '人' : '选择部门'
|
|
}
|
|
},
|
|
beforeMount () { },
|
|
async mounted () {
|
|
this.params.startId = Number(this.$route.query.id)
|
|
await this.handleStartsReq()
|
|
},
|
|
methods: {
|
|
async handleCallBackChoose (item) {
|
|
if (!item.value) return this.$message.info('请选择考评组！')
|
|
this.$confirm('所选考评组员工的绩效考核将自动进入评分流程,确认开始评分?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const params = {
|
|
evaluationIds: item.value,
|
|
startId: this.$route.query.id
|
|
}
|
|
let res = await apiAssessManagerToScore(params)
|
|
if (res.code !== 200) return this.$message.error(res.msg)
|
|
this.$msg(res)
|
|
this.showChooseList = false
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消评分'
|
|
})
|
|
})
|
|
},
|
|
submitClick (item) {
|
|
this.params.evaluationIds = item.value
|
|
this.params.title = item.title
|
|
this.params.currPage = 1
|
|
this.handleGetListContent()
|
|
this.dialogVisible = false
|
|
},
|
|
// 获取考评组
|
|
async handleKaoping () {
|
|
this.dialogVisible = true
|
|
},
|
|
handleLook (id) {
|
|
// this.handleKaoping()
|
|
this.$router.push({
|
|
name: 'assessment-performance',
|
|
query: { id }
|
|
})
|
|
},
|
|
handleChangeInput () {
|
|
this.params.currPage = 1
|
|
this.handleGetListContent()
|
|
},
|
|
handleChangePage (value) {
|
|
this.params.currPage = value
|
|
this.handleGetListContent()
|
|
},
|
|
async handleGetListContent (params = this.params) {
|
|
this.$loadingStart()
|
|
let res = await apiManagerDetail(params)
|
|
this.$loadingEnd()
|
|
if (res.code !== 200) return
|
|
this.tableData = res.data.list
|
|
this.params.totalCount = res.data.totalCount
|
|
this.params.currPage = res.data.currPage
|
|
},
|
|
// 为了不分页直接传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.params.startId) {
|
|
this.startId = [this.timeOptions[j].startId, i.startId]
|
|
}
|
|
return i
|
|
})
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
await this.handleGetChartList()
|
|
},
|
|
async handleChange (item) {
|
|
this.params.startId = item[1]
|
|
this.$router.replace({
|
|
name: 'assessment-stepList',
|
|
query: {
|
|
id: item[1]
|
|
}
|
|
})
|
|
this.params.currPage = 1
|
|
this.params.startId = item[1]
|
|
await this.handleGetChartList()
|
|
},
|
|
handleSubmit () {
|
|
this.kaopingFrom.showRight = false
|
|
},
|
|
handleCancel () {
|
|
this.kaopingFrom.showRight = false
|
|
},
|
|
// 选择部门
|
|
handleChoose () {
|
|
this.form.isShowPersonnel = true
|
|
},
|
|
handleGetList () {
|
|
},
|
|
async handleActive (i) {
|
|
if (i.active) return
|
|
this.titleList = this.titleList.map(j => {
|
|
j.active = false
|
|
return j
|
|
})
|
|
this.params.flowProcess = i.flowProcess
|
|
this.params.currPage = 1
|
|
i.active = true
|
|
await this.handleGetListContent()
|
|
},
|
|
// 获取tabbar
|
|
async handleGetChartList (params = this.params) {
|
|
let res = await apiChartList(Object.assign({}, this.params, {
|
|
currPage: 1,
|
|
pageSize: 100
|
|
}))
|
|
if (res.code !== 200) return
|
|
this.titleList = res.data
|
|
console.log('String(this.$route.query.step): ', String(this.$route.query.step))
|
|
if (String(this.$route.query.step) && String(this.$route.query.step) !== 'undefined') {
|
|
this.titleList = this.titleList.map(i => {
|
|
if (String(i.flowProcess) === String(this.$route.query.step)) {
|
|
i.active = true
|
|
}
|
|
return i
|
|
})
|
|
this.params.flowProcess = this.$route.query.step
|
|
} else {
|
|
this.titleList[0].active = true
|
|
this.params.flowProcess = this.titleList[0].flowProcess
|
|
}
|
|
this.handleGetListContent()
|
|
},
|
|
handleMore () {
|
|
// this.showPopupPerson = true
|
|
this.showPopupMange = true
|
|
},
|
|
handlePopupMangeSubmit () {
|
|
this.showPopupMange = false
|
|
},
|
|
handlePopupRemoveListSuccessful () {
|
|
// 删除人员成功 页面刷新
|
|
this.showPopupMange = false
|
|
this.showPopupPerson = false
|
|
this.handleGetChartList()
|
|
}
|
|
},
|
|
watch: {
|
|
'params.staffIds' (n, o) {
|
|
this.handleGetListContent()
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.step-content {
|
|
.name{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.footer {
|
|
text-align: right;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
padding: 28px;
|
|
width: 100%;
|
|
margin: 20px 0;
|
|
min-height: 537px;
|
|
background: #fff;
|
|
width: 100%;
|
|
&-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.shuxian {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: #52575b;
|
|
}
|
|
&-center {
|
|
margin: 30px 0 10px 0;
|
|
padding: 0 40px;
|
|
min-height: 40px;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
&-item {
|
|
height: 40px;
|
|
.hover:hover {
|
|
color: @fontBlue;
|
|
}
|
|
.active {
|
|
color: @fontBlue;
|
|
}
|
|
.center();
|
|
&-img {
|
|
.center();
|
|
height: 20px;
|
|
margin: 0 40px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|