170 lines
4.0 KiB
Vue
170 lines
4.0 KiB
Vue
<!-- -->
|
|
<template>
|
|
<div>
|
|
<div class="title_bar">
|
|
<div class="back" @click="handleBack">返回</div>
|
|
<span></span>
|
|
<div>等级分布详情</div>
|
|
</div>
|
|
<div class="detail_content">
|
|
<el-button
|
|
@click="handleChange"
|
|
style="margin-bottom:20px">{{selectDepName}}<i class="el-icon-arrow-down"></i></el-button>
|
|
<el-table :data="tableData"
|
|
border
|
|
:header-cell-style="{ background:'#F5F7FA'}"
|
|
style="margin-top:20px">
|
|
<el-table-column prop="staffName" label="姓名"></el-table-column>
|
|
<el-table-column prop="staffNo" label="工号"></el-table-column>
|
|
<el-table-column prop="departmentName" label="部门"></el-table-column>
|
|
<el-table-column prop="allScore" label="考评结果">
|
|
<template slot-scope="scop">
|
|
<div>
|
|
{{scop.row.allScore || '--'}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="scoreLevel" label="实际分布">
|
|
<template slot-scope="scop">
|
|
<div>
|
|
{{scop.row.scoreLevel || '--'}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<el-button
|
|
@click="handlePush(scope.row)"
|
|
type="text"
|
|
size="small">
|
|
查看详情
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<dialog-depart
|
|
v-if="showDialogDepart"
|
|
:isShow.sync='showDialogDepart'
|
|
:showDataList.sync='showData'
|
|
:len.sync="len"
|
|
:isSignle.sync="isSignle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getChartDetail, getDepList} from '@/api/report'
|
|
import dialogDepart from '@/components/getDepart'
|
|
|
|
export default {
|
|
components: {
|
|
dialogDepart
|
|
},
|
|
data () {
|
|
return {
|
|
// 表格数据
|
|
tableData: [],
|
|
// 当前选中部门
|
|
selectDepName: '全部',
|
|
// 当前选中部门id
|
|
selectDepId: '',
|
|
showDialogDepart: false,
|
|
//
|
|
showData: {
|
|
list: []
|
|
},
|
|
//
|
|
len: 1,
|
|
//
|
|
isSignle: true
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
beforeMount () {},
|
|
mounted () {
|
|
this.handleDetailReq()
|
|
},
|
|
methods: {
|
|
handlePush (item) {
|
|
console.log('item: ', item.recordId)
|
|
this.$router.push({
|
|
name: 'assessment-performance',
|
|
query: {
|
|
id: item.recordId
|
|
}
|
|
})
|
|
},
|
|
// 返回上一页
|
|
handleBack () {
|
|
this.$router.go(-1)
|
|
},
|
|
// 多选框转中处理
|
|
handleChange (val) {
|
|
this.showDialogDepart = true
|
|
},
|
|
// 请求详情页面信息
|
|
async handleDetailReq (depId) {
|
|
let params = {
|
|
currPage: 1,
|
|
departmentId: depId,
|
|
flowProcess: this.$route.query.flowProcess,
|
|
scoreLevel: this.$route.query.scoreLevel,
|
|
startId: this.$route.query.startId,
|
|
pageSize: 999
|
|
}
|
|
let result = await getChartDetail(params)
|
|
if (result.code !== 200) return this.$message.errot(result.eror)
|
|
this.tableData = result.data.list
|
|
}
|
|
},
|
|
watch: {
|
|
showDialogDepart (newV, oldV) {
|
|
if (!newV && oldV) {
|
|
this.selectDepName = this.showData.list[0].departmentName
|
|
this.selectDepId = this.showData.list[0].departmentId
|
|
this.handleDetailReq(this.selectDepId)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang='' scoped>
|
|
.back{
|
|
cursor: pointer;
|
|
}
|
|
.title_bar{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.title_bar>:nth-child(1){
|
|
font-size: 14px;
|
|
color: #b4b4b4;
|
|
margin-right: 10px;
|
|
}
|
|
.title_bar>:nth-child(2){
|
|
height: 15px ;
|
|
width: 1px;
|
|
background: #333;
|
|
}
|
|
.title_bar>:nth-child(3){
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-left: 10px;
|
|
}
|
|
.detail_content{
|
|
background: white;
|
|
padding: 40px 20px;
|
|
border:solid 1px #b4b4b4;
|
|
}
|
|
.el-icon-arrow-down{
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|