366 lines
11 KiB
Vue
366 lines
11 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.name" prefix-icon="el-icon-search" placeholder="请输入姓名搜索"></el-input>
|
|
</div>
|
|
<div class="step-content-top-right">
|
|
<el-button size="small" type="primary">开始评分</el-button>
|
|
<!-- handleGetList handleChoose -->
|
|
<el-button size="small" @click="handleGetList" 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'
|
|
>
|
|
</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'
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="scoreLevel"
|
|
label="绩效等级"
|
|
align='center'
|
|
>
|
|
</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>
|
|
<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'/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SmallNav from '@/components/kpi-layout/SmallNav'
|
|
import getPersonnel from '@/components/getPersonnel'
|
|
import PopupRight from '@/components/PopupRight'
|
|
import EvaluationTeamFilter from '@/components/EvaluationTeamFilter'
|
|
|
|
import { apiManagerDetail, apiChartList } from '@/api/assessment'
|
|
import {getWorkList} from '@/api/workbench'
|
|
import { getStartsData } from '@/api/report'
|
|
let id = 0
|
|
export default {
|
|
data () {
|
|
return {
|
|
dialogVisible: false,
|
|
form: {
|
|
isShowPersonnel: false,
|
|
personnelList: {
|
|
list: []
|
|
}
|
|
},
|
|
startId: null,
|
|
params: {
|
|
'currPage': 1,
|
|
'evaluationIds': '',
|
|
'flowProcess': null,
|
|
'pageSize': 5,
|
|
'staffIds': '',
|
|
'staffName': '',
|
|
'startId': 10
|
|
},
|
|
key: 0,
|
|
timeOptions: [{
|
|
startId: 0,
|
|
time: '月底',
|
|
children: []
|
|
}, {
|
|
startId: 1,
|
|
time: '自定义',
|
|
children: []
|
|
}],
|
|
//
|
|
props: {
|
|
value: 'startId',
|
|
label: 'time',
|
|
level: true
|
|
},
|
|
tableData: [],
|
|
formInline: {},
|
|
titleList: []
|
|
}
|
|
},
|
|
components: {
|
|
SmallNav,
|
|
getPersonnel,
|
|
PopupRight,
|
|
EvaluationTeamFilter
|
|
},
|
|
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: {
|
|
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: 267}
|
|
})
|
|
console.log('id: ', id)
|
|
},
|
|
handleChangeInput () {
|
|
this.params.currPage = 1
|
|
this.handleGetListContent()
|
|
},
|
|
handleChangePage (value) {
|
|
this.params.currPage = value
|
|
this.handleGetListContent()
|
|
},
|
|
async handleGetListContent (params = this.params) {
|
|
console.log('params: ', params)
|
|
let res = await apiManagerDetail(params)
|
|
if (res.code !== 200) return
|
|
this.tableData = res.data.list
|
|
this.params.totalCount = res.data.totalCount
|
|
this.params.currPage = res.data.currPage
|
|
console.log('res: ', res)
|
|
},
|
|
// 为了不分页直接传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
|
|
console.log('res: ', res)
|
|
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()
|
|
console.log('this.params: ', this.params)
|
|
console.log('item: ', item)
|
|
},
|
|
handleSubmit () {
|
|
this.kaopingFrom.showRight = false
|
|
},
|
|
handleCancel () {
|
|
this.kaopingFrom.showRight = false
|
|
},
|
|
// 选择部门
|
|
handleChoose () {
|
|
this.form.isShowPersonnel = true
|
|
},
|
|
handleGetList () {
|
|
console.log('1', this.form.personnelList)
|
|
},
|
|
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
|
|
if (this.$route.query.step) {
|
|
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()
|
|
}
|
|
},
|
|
watch: {
|
|
'params.staffIds' (n, o) {
|
|
this.handleGetListContent()
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.step-content{
|
|
.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>
|