122 lines
2.9 KiB
Vue
122 lines
2.9 KiB
Vue
<!-- -->
|
|
<template>
|
|
<div>
|
|
<div class="title_bar">
|
|
<div @click="handleBack">返回</div>
|
|
<span></span>
|
|
<div>等级分布详情</div>
|
|
</div>
|
|
<div class="detail_content">
|
|
<el-cascader :options="depList" @change="handleChange" style="margin-bottom:20px" ></el-cascader>
|
|
<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="考评结果"></el-table-column>
|
|
<el-table-column prop="scoreLevel" label="实际分布"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getChartDetail, getDepList} from '@/api/report'
|
|
export default {
|
|
data () {
|
|
return {
|
|
// 表格数据
|
|
tableData: [],
|
|
// 部门数据列表
|
|
depList: []
|
|
}
|
|
},
|
|
computed: {},
|
|
beforeMount () {},
|
|
mounted () {
|
|
this.handleDepListReq()
|
|
this.handleDetailReq()
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
handleBack () {
|
|
this.$router.go(-1)
|
|
},
|
|
// 多选框转中处理
|
|
handleChange (val) {
|
|
this.handleDetailReq(val[1])
|
|
},
|
|
// 请求详情页面信息
|
|
async handleDetailReq (depId) {
|
|
let params = {
|
|
currPage: 1,
|
|
departmentId: depId,
|
|
flowProcess: this.$route.query.flowProcess,
|
|
startId: this.$route.query.startId,
|
|
pageSize: 20
|
|
}
|
|
let result = await getChartDetail(params)
|
|
this.tableData = result.data.list
|
|
},
|
|
// 请求部门信息
|
|
async handleDepListReq (handleNode) {
|
|
let params = {
|
|
type: 0
|
|
}
|
|
let result = await getDepList(params)
|
|
console.log(result)
|
|
this.depList = this.handleDepResult(result.data)
|
|
},
|
|
// 递归生成可用数组
|
|
handleDepResult (list) {
|
|
return Array.from(list).map(item => {
|
|
let resItem = {
|
|
value: item.departmentId,
|
|
label: item.departmentName
|
|
}
|
|
// 如果有下一级部门则递归调用
|
|
if (item.list && item.list.length > 0) {
|
|
let children = this.handleDepResult(item.list)
|
|
resItem['children'] = children
|
|
}
|
|
return resItem
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang='' scoped>
|
|
.title_bar{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.title_bar>:nth-child(1){
|
|
font-size: 16px;
|
|
color: #b4b4b4;
|
|
margin-right: 10px;
|
|
}
|
|
.title_bar>:nth-child(2){
|
|
height: 15px ;
|
|
width: 1px;
|
|
background: #333;
|
|
}
|
|
.title_bar>:nth-child(3){
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin-left: 10px;
|
|
}
|
|
.detail_content{
|
|
background: white;
|
|
padding: 40px 20px;
|
|
border:solid 1px #b4b4b4;
|
|
}
|
|
</style>
|