Merge branch 'v_1.0.0' of http://gitlab.ldxinyong.com/enterpriseManagement/digitization-ui into v_1.0.0
* 'v_1.0.0' of http://gitlab.ldxinyong.com/enterpriseManagement/digitization-ui: 优化 bug修改 优化 优化 update 弹窗透明度
This commit is contained in:
leave
commit
60878c86e1
@ -35,3 +35,21 @@ export function apiManagerDetail (query) {
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取考核详情
|
||||
export function apiResultRecordDetail (query) {
|
||||
return request({
|
||||
url: '/lz_management/user/lzresultrecord/new/resultRecordDetail',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取考核详情表格数据
|
||||
export function apiResultGetDetail (query) {
|
||||
return request({
|
||||
url: '/lz_management/user/lzresultrecord/getDetail',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@ -17,3 +17,20 @@ export function getStartsData (query) {
|
||||
data: query
|
||||
})
|
||||
}
|
||||
// 获取绩效排名详情
|
||||
export function getChartDetail (query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/performance/chart/detail',
|
||||
method: 'POST',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取部门信息
|
||||
export function getDepList (query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/staff/structure/deplist',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
56
src/components/InfoHeader/index.vue
Normal file
56
src/components/InfoHeader/index.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="header-title">
|
||||
<div class="header-title-img">
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
|
||||
</div>
|
||||
<div class="header-title-right commonFont">
|
||||
<span style="font-size:14px;">{{obj.name || "熊成强"}}</span>
|
||||
<span style="font-size:12px;">{{obj.departmentName || "技术部门"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['obj'],
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.header{
|
||||
width: 100%;
|
||||
&-title{
|
||||
margin: 0 0 10PX 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&-right{
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<transition name="popupfade">
|
||||
<div class="taskDetailRight" @click="getRight">
|
||||
<!-- <transition name="popupfade"> -->
|
||||
<div class="taskDetailRight" @click="getRight">
|
||||
<div class="taskDetailRight-contant" @click.stop="aa">
|
||||
<div class="taskDetailRight-contant-title commonFont" >{{title}}</div>
|
||||
<div class="taskDetailRight-contant-content" >
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
<div class="taskDetailRight-contant-footer" >
|
||||
<div v-if="footer" class="taskDetailRight-contant-footer" >
|
||||
<div>
|
||||
<slot name="footer-left"></slot>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="small" @click="$emit('cancel')">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="$emit('submit')">确 定</el-button>
|
||||
<el-button size="small" type="primary" @click="$emit('submit')">确 定</el-button>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,7 +20,7 @@
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- </transition> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -30,10 +30,15 @@ export default {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
footer: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isShow: true
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -45,9 +50,11 @@ export default {
|
||||
aa () {},
|
||||
onSubmit () {
|
||||
console.log('submit!')
|
||||
this.isShow = false
|
||||
this.$emit('update:show', false)
|
||||
},
|
||||
getRight () {
|
||||
this.isShow = false
|
||||
this.$emit('update:show', false)
|
||||
}
|
||||
}
|
||||
@ -80,6 +87,7 @@ export default {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
background: rgba(0,0,0,.12);
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: all 1s;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="main noSelect">
|
||||
<div class="main">
|
||||
<nav-bar />
|
||||
<app-main />
|
||||
</div>
|
||||
|
||||
@ -147,6 +147,13 @@ export default [
|
||||
title: '智能测试带弹窗',
|
||||
pop: true
|
||||
}
|
||||
}, {
|
||||
path: 'report-detial',
|
||||
name: 'reportDetial',
|
||||
component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
|
||||
meta: {
|
||||
title: '绩效详情'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@ const service = axios.create({
|
||||
const options = {
|
||||
fullscreen: true,
|
||||
target: document.querySelector('.appamin'),
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
spinner: 'el-icon-loading',
|
||||
text: '请求加载中。。。'}
|
||||
text: '数据加载中'}
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(config => {
|
||||
|
||||
@ -3,44 +3,229 @@
|
||||
<div class="goals">
|
||||
<SmallNav />
|
||||
<div class="goals-content boderAndRadius">
|
||||
<div class="goals-content-title">
|
||||
<div class="goals-content-title-img">
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
|
||||
</div>
|
||||
<div class="goals-content-title-right commonFont">
|
||||
<span style="font-size:14px;">熊成强</span>
|
||||
<span style="font-size:12px;">技术部门</span>
|
||||
</div>
|
||||
<div class="goals-content-name">
|
||||
<InfoHeader :obj="{
|
||||
name:obj.currentApprovalStaffName,
|
||||
departmentName:obj.departmentName
|
||||
}"/>
|
||||
<div>
|
||||
<el-button size='small' plain>暂存</el-button>
|
||||
<el-button size='small' type="primary">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goals-content-tabbar">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
<el-tabs
|
||||
:value="activeId"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(i,index) in obj.recortModelDtos"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:name="String(i.id)">
|
||||
<div class="goals-content-tabbar-table">
|
||||
<div class="goals-content-tabbar-table-header commonFont">
|
||||
<span style="width:30%">指标名称</span>
|
||||
<span style="width:30%">考核标准</span>
|
||||
<span style="width:30%">权重</span>
|
||||
<span style="width:10%">操作</span>
|
||||
</div>
|
||||
<div
|
||||
style="justify-content:center;"
|
||||
v-if="handleFilter(i.detailDtos).length===0"
|
||||
class="goals-content-tabbar-table-content commonFont items">
|
||||
暂无指标
|
||||
</div>
|
||||
<draggable
|
||||
v-model="i.tagetLibItems"
|
||||
:options='options1'
|
||||
>
|
||||
<div
|
||||
class="goals-content-tabbar-table-content commonFont items"
|
||||
v-for="(j,indexJ) in handleFilter(i.detailDtos)"
|
||||
:key="indexJ"
|
||||
>
|
||||
<div style="width:30%"><i style="margin-right:6px;" class="my-handle el-icon-s-operation"></i>{{j.target}}</div>
|
||||
<div style="width:30%">{{j.keyResult}}</div>
|
||||
<div style="width:30%">{{ Math.round((j.checkWeight * 100)*1000)/1000}}%</div>
|
||||
<div style="width:10%">
|
||||
<el-button
|
||||
@click="hanidleEdit(j,indexJ,index)"
|
||||
type="text"
|
||||
size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleDelateWeidu(j,indexJ,index)"
|
||||
type="text"
|
||||
size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style=" padding: 10px;">
|
||||
<!-- <el-button size="mini" plain>选择指标项</el-button> -->
|
||||
<el-button @click="hanidleEdit(i,-1,index)" size="mini" plain>增加指标项</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<popup-right v-if="showIndicators" @cancel='handleCancelZhibiao' @submit="handleSubmitZhibiao" :title="zhibiaoTitle">
|
||||
<div slot="content" class="weiduManage">
|
||||
<el-form label-position="left" ref="formIndicators" :model="formIndicators" :rules="ruleIndicators" label-width="180px">
|
||||
<el-form-item label="指标类型">
|
||||
<el-select v-model="formIndicators.type" disabled placeholder="请选择维度类型">
|
||||
<el-option
|
||||
v-for="i in dimensionsList"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:value="i.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="target" label='指标名称'>
|
||||
<el-input clearable size="small" v-model="formIndicators.target"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="考核标准" prop="keyResult">
|
||||
<el-input size="small" clearable type="textarea" v-model="formIndicators.keyResult"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权重" prop="weight">
|
||||
<el-input size="small" clearable v-model="formIndicators.checkWeight">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</popup-right>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SmallNav from '@/components/kpi-layout/SmallNav'
|
||||
import InfoHeader from '@/components/InfoHeader'
|
||||
import PopupRight from '@/components/PopupRight'
|
||||
import draggable from 'vuedraggable'
|
||||
import {getDimensions} from '@/api/data'
|
||||
import { apiResultGetDetail } from '@/api/assessment'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
activeName: 'second'
|
||||
zhibiaoTitle: '添加指标',
|
||||
showIndicators: false,
|
||||
dimensionsList: [],
|
||||
formIndicators: {},
|
||||
ruleIndicators: {
|
||||
target: [{ required: true,
|
||||
message: '请输入指标名称',
|
||||
trigger: 'blur' }
|
||||
],
|
||||
keyResult: [{ required: true,
|
||||
message: '请输入考核标准',
|
||||
trigger: 'blur' }
|
||||
],
|
||||
checkWeight: [{ required: true,
|
||||
message: '请输入权重大小',
|
||||
trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
activeId: null,
|
||||
obj: {
|
||||
recortModelDto: []
|
||||
},
|
||||
options1: {
|
||||
group: 'names',
|
||||
draggable: '.items',
|
||||
handle: '.my-handle',
|
||||
scroll: true,
|
||||
sort: true, // 内部排序列表
|
||||
delay: 0, // 以毫秒为单位定义排序何时开始。
|
||||
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
|
||||
disabled: false, // 如果设置为真，则禁用sortable。
|
||||
store: null, // @see Store
|
||||
animation: 150 // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SmallNav
|
||||
SmallNav,
|
||||
InfoHeader,
|
||||
draggable,
|
||||
PopupRight
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
mounted () {
|
||||
this.handleGetDimensions()
|
||||
this.handleGetTbale()
|
||||
},
|
||||
methods: {
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
// 获取维度类型
|
||||
async handleGetDimensions () {
|
||||
try {
|
||||
let res = await getDimensions()
|
||||
if (res.code !== 200) {
|
||||
this.dimensionsList = []
|
||||
return
|
||||
}
|
||||
res = res.data
|
||||
this.dimensionsList = res
|
||||
} catch (error) {
|
||||
this.$message.error(error.msg)
|
||||
}
|
||||
},
|
||||
handleCancelZhibiao () {
|
||||
this.showIndicators = false
|
||||
},
|
||||
handleSubmitZhibiao () {
|
||||
this.$refs.formIndicators.validate((v) => {
|
||||
if (v) {
|
||||
if (this.formIndicators.index === -1) {
|
||||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos.push(Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100}))
|
||||
console.log('this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].: ', this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex])
|
||||
} else {
|
||||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos[this.formIndicators.index] = Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100})
|
||||
}
|
||||
this.showIndicators = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAddIndicators (item) {
|
||||
console.log(item)
|
||||
this.showIndicators = true
|
||||
this.formIndicators = Object.assign({}, item)
|
||||
},
|
||||
// 编辑
|
||||
hanidleEdit (item, index, type) {
|
||||
if (index === -1) {
|
||||
this.formIndicators = {}
|
||||
} else {
|
||||
this.formIndicators = Object.assign({}, item)
|
||||
this.formIndicators.checkWeight = this.formIndicators.checkWeight * 100
|
||||
}
|
||||
this.formIndicators.dazhibiaoIndex = type
|
||||
this.formIndicators.index = index
|
||||
this.formIndicators.type = item.type
|
||||
this.showIndicators = true
|
||||
},
|
||||
handleDelateWeidu (item, index, type) {
|
||||
if (item.id) {
|
||||
item.isDelete = 1
|
||||
this.$forceUpdate()
|
||||
return
|
||||
}
|
||||
this.obj.recortModelDtos[type].detailDtos = this.obj.recortModelDtos[type].detailDtos.filter(i => i !== item)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleFilter (item) {
|
||||
return item ? item.filter(i => !i.isDelete) : []
|
||||
},
|
||||
async handleGetTbale (id = 226) {
|
||||
let res = await apiResultGetDetail({id})
|
||||
if (res.code !== 200) return
|
||||
this.obj = res.data
|
||||
this.activeId = String(res.data.recortModelDtos[0].id)
|
||||
console.log('res: ', res)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
@ -51,8 +236,16 @@ export default {
|
||||
|
||||
<style lang='less' scoped>
|
||||
.goals{
|
||||
.my-handle{
|
||||
cursor: move ;
|
||||
}
|
||||
&-content{
|
||||
padding: 28px;
|
||||
&-name{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-title{
|
||||
margin: 0 0 10PX 0;
|
||||
display: flex;
|
||||
@ -74,7 +267,29 @@ export default {
|
||||
}
|
||||
}
|
||||
&-tabbar{
|
||||
|
||||
&-table{
|
||||
&-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
background: rgb(231, 231, 231);
|
||||
border-bottom: 1px solid @borderColor;
|
||||
span{
|
||||
padding:0 0 0 20px;
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
justify-content: space-between;
|
||||
div{
|
||||
padding:0 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,6 +73,7 @@
|
||||
@current-change="handleChangePage"
|
||||
layout="prev, pager, next"
|
||||
:page-size.sync='params.pageSize'
|
||||
:current-page.sync='params.currPage'
|
||||
:total="params.totalCount">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
85
src/views/kpi/assessment/performance/components/table.vue
Normal file
85
src/views/kpi/assessment/performance/components/table.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<table
|
||||
cellspacing="0"
|
||||
border="1">
|
||||
<!-- 顶部title -->
|
||||
<tr>
|
||||
<th>维度</th>
|
||||
<th>名称</th>
|
||||
<th>考核标准</th>
|
||||
<th>权重({{obj.weight*100}}%)</th>
|
||||
</tr>
|
||||
<!-- 暂无数据时显示 -->
|
||||
<tr v-if="obj.recortModelDtos.length === 0">
|
||||
<td :colspan="6">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
<!-- template不会被渲染 -->
|
||||
<template v-for="(item,index) in obj.recortModelDtos" >
|
||||
<!-- 左侧跨行区域 -->
|
||||
<tr :key="index+1000">
|
||||
<td :rowspan="item.detailDtos.length+1">{{item.name}}</td>
|
||||
<td v-if="item.detailDtos.length===0">
|
||||
|
||||
</td>
|
||||
<td v-if="item.detailDtos.length===0">
|
||||
|
||||
</td>
|
||||
<td v-if="item.detailDtos.length===0">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 右侧数据 -->
|
||||
<tr v-for="(child,index1) in item.detailDtos" :key="index1">
|
||||
<td>
|
||||
{{child.target}}
|
||||
</td>
|
||||
<td>
|
||||
{{child.keyResult}}
|
||||
</td>
|
||||
<td>
|
||||
{{child.checkWeight*100}}%
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'columnsTbale',
|
||||
props: {
|
||||
obj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
recortModelDtos: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('list', this.obj)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
table{
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
border:1px solid #e9eaec;
|
||||
border-collapse:collapse
|
||||
}
|
||||
th{
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
th,td{
|
||||
padding: 5px;
|
||||
border: 1px solid #e9eaec;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/kpi/assessment/performance/img/left.png
Normal file
BIN
src/views/kpi/assessment/performance/img/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/views/kpi/assessment/performance/img/right.png
Normal file
BIN
src/views/kpi/assessment/performance/img/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -3,7 +3,7 @@
|
||||
<div class="performance">
|
||||
<SmallNav />
|
||||
<div class="performance-content boderAndRadius">
|
||||
<div class="performance-content-top">
|
||||
<!-- <div class="performance-content-top">
|
||||
<div class="performance-content-top-left">
|
||||
<el-select size="small" v-model="form.value" placeholder="请选择">
|
||||
<el-option
|
||||
@ -18,53 +18,106 @@
|
||||
<el-button size="small" @click="handleChangeTtitle" plain>沟通管理</el-button>
|
||||
<el-button size="small" plain>管理</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="performance-content-title">
|
||||
<InfoHeader
|
||||
:obj="{
|
||||
name:obj.currentApprovalStaffName,
|
||||
departmentName:obj.departmentName
|
||||
}"
|
||||
/>
|
||||
<div class="performance-content-title-right">
|
||||
<el-button size="mini" @click="handleZhiding" type="primary">制定目标</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="performance-content-center">
|
||||
<div class="performance-content-center-item" v-for="i in 10"></div>
|
||||
<div class="performance-content-center-item"
|
||||
: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.status ===1 && !i.isActive" style="color:#3ba1ff;margin:0 0 0 4px;font-weight:800;" class="el-icon-check"></i></span>
|
||||
<i 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.status ===1 && !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 class="performance-content-bottom">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{background:'#F5F7FA'}"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
align="center"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<div v-for="(i,index) in scope.row.date" :key="index">{{i}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
align="center"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<tables v-if="obj.length !==0" :obj='obj' />
|
||||
</div>
|
||||
<div class="performance-content-jilu">
|
||||
ss
|
||||
<div class="performance-content-jilu-title commonFont">
|
||||
记录
|
||||
</div>
|
||||
<div
|
||||
v-for="(i,index) in formList.resultCommentList"
|
||||
:key="index"
|
||||
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">
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<span>{{i.staffName}}</span><span class="mubiao">#{{i.optDesc}}#</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<popup-right v-if="right.showRight" @cancel='handleCancel' @submit="handleSubmit" :footer='true' :title="form.item.flowName">
|
||||
<div slot="content" class="chooseManage">
|
||||
<div
|
||||
class='chooseManage-item'
|
||||
:key="index"
|
||||
v-for="(i,index) in form.item.flowDetailRespList">
|
||||
{{i}}
|
||||
</div>
|
||||
<!-- <div v-for="i in rightList" :key="i.id" class="chooseManage-item" >
|
||||
<el-checkbox :true-label='1' :false-label='0' :disabled='i.isDisable===1' :checked='i.isDisable===1' v-model='i.isSelect'></el-checkbox><span class='commonFont' style="margin:0 0 0 10px;">{{i.staffName}} </span>
|
||||
</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 { apiResultRecordDetail, apiResultGetDetail } from '@/api/assessment'
|
||||
import tables from './components/table'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
right: {
|
||||
showRight: false
|
||||
},
|
||||
form: {},
|
||||
formList: {
|
||||
flowRecordList: [],
|
||||
resultCommentList: []
|
||||
},
|
||||
obj: {
|
||||
recortModelDtos: []
|
||||
},
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
@ -80,33 +133,60 @@ export default {
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SmallNav
|
||||
SmallNav,
|
||||
InfoHeader,
|
||||
PopupRight,
|
||||
tables
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
mounted () {
|
||||
this.handleList()
|
||||
this.handleGetTbale()
|
||||
},
|
||||
methods: {
|
||||
// 制定目标
|
||||
handleZhiding () {
|
||||
this.$router.push({
|
||||
name: 'assessment-goals',
|
||||
query: {
|
||||
id: this.$route.query.id
|
||||
}
|
||||
})
|
||||
},
|
||||
async handleGetTbale (id = 226) {
|
||||
let res = await apiResultGetDetail({id})
|
||||
this.obj = res.data
|
||||
console.log('res: ', res)
|
||||
},
|
||||
handleRight (item) {
|
||||
console.log('item: ', item)
|
||||
this.form.item = item
|
||||
this.right.showRight = true
|
||||
},
|
||||
handleCancel () {
|
||||
this.right.showRight = false
|
||||
},
|
||||
handleSubmit () {
|
||||
this.right.showRight = false
|
||||
},
|
||||
async handleList () {
|
||||
// resultRecordId = == this.$route.query.id
|
||||
let res = await apiResultRecordDetail({resultRecordId: 215})
|
||||
if (res.code !== 200) return
|
||||
for (let i in res.data.flowRecordList) {
|
||||
if (res.data.flowRecordList[i].status !== 1) {
|
||||
res.data.flowRecordList[i - 1].isActive = true
|
||||
break
|
||||
}
|
||||
}
|
||||
this.formList = res.data
|
||||
console.log('res: ', res)
|
||||
},
|
||||
handleChangeTtitle () {
|
||||
// this.$route
|
||||
console.log('this.$route: ', this.$route.meta.title = '123')
|
||||
@ -121,11 +201,16 @@ export default {
|
||||
<style lang='less' scoped>
|
||||
.performance{
|
||||
overflow: auto;
|
||||
.chooseManage-item{
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
}
|
||||
&-content{
|
||||
padding: 28px;
|
||||
margin: 10px 0;
|
||||
// height: 700px;
|
||||
// overflow: auto;
|
||||
|
||||
&-top{
|
||||
border-bottom: 1px solid @borderColor;
|
||||
padding-bottom: 20px;
|
||||
@ -134,19 +219,99 @@ export default {
|
||||
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{
|
||||
width: 20%;
|
||||
height: 20px;
|
||||
background: #09f;
|
||||
text-align: center;
|
||||
padding: 10px 60px;
|
||||
margin: 4px 0;
|
||||
font-size: 16px;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,15 +3,21 @@
|
||||
<div class="step">
|
||||
<small-nav :showTitle='false'>
|
||||
<div slot="content">
|
||||
<el-cascader size="mini" :props="props" :options="timeOptions" @change="handleChange"></el-cascader>
|
||||
<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="kaopingFrom.showRight = true" plain>选择考评组<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
|
||||
<el-input size="small" style="margin-left:10px;" v-model="formInline.user" prefix-icon="el-icon-search" placeholder="请输入姓名搜索"></el-input>
|
||||
<el-button size="small" @click="handleKaoping" plain>选择考评组<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>
|
||||
@ -33,37 +39,70 @@
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
align='center'
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
prop="staffName"
|
||||
label="姓名"
|
||||
align='center'
|
||||
width="180">
|
||||
>
|
||||
</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="地址">
|
||||
label="操作">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
{{scope.row}}
|
||||
<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>
|
||||
<popup-right v-if="kaopingFrom.showRight" @cancel='handleCancel' @submit="handleSubmit" title="考评组筛选">
|
||||
<div slot="content" class="chooseManage">
|
||||
66
|
||||
<!-- <div v-for="i in GroundList" :key="i.staffId" class="chooseManage-item" >
|
||||
<div v-for="i in rightList" :key="i.id" class="chooseManage-item" >
|
||||
<el-checkbox :true-label='1' :false-label='0' :disabled='i.isDisable===1' :checked='i.isDisable===1' v-model='i.isSelect'></el-checkbox><span class='commonFont' style="margin:0 0 0 10px;">{{i.staffName}} </span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</popup-right>
|
||||
<getPersonnel v-if="form.isShowPersonnel" :value.sync='params.staffIds' :isShow.sync='form.isShowPersonnel' :showDataList.sync='form.personnelList'/>
|
||||
@ -75,6 +114,7 @@ import SmallNav from '@/components/kpi-layout/SmallNav'
|
||||
import getPersonnel from '@/components/getPersonnel'
|
||||
import PopupRight from '@/components/PopupRight'
|
||||
import { apiManagerDetail, apiChartList } from '@/api/assessment'
|
||||
import {getWorkList} from '@/api/workbench'
|
||||
import { getStartsData } from '@/api/report'
|
||||
let id = 0
|
||||
export default {
|
||||
@ -89,15 +129,17 @@ export default {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
startId: null,
|
||||
params: {
|
||||
'currPage': 1,
|
||||
// 'evaluationIds': '',
|
||||
'flowProcess': 0,
|
||||
'pageSize': 10,
|
||||
'evaluationIds': '',
|
||||
'flowProcess': null,
|
||||
'pageSize': 5,
|
||||
// 'staffIds': '',
|
||||
// 'staffName': '',
|
||||
'startId': 10
|
||||
},
|
||||
key: 0,
|
||||
timeOptions: [{
|
||||
startId: 0,
|
||||
time: '月底',
|
||||
@ -110,25 +152,10 @@ export default {
|
||||
//
|
||||
props: {
|
||||
value: 'startId',
|
||||
label: 'time'
|
||||
label: 'time',
|
||||
level: true
|
||||
},
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}],
|
||||
tableData: [],
|
||||
formInline: {},
|
||||
titleList: []
|
||||
}
|
||||
@ -144,11 +171,48 @@ export default {
|
||||
}
|
||||
},
|
||||
beforeMount () {},
|
||||
mounted () {
|
||||
this.handleGetChartList()
|
||||
this.handleStartsReq()
|
||||
async mounted () {
|
||||
this.params.startId = Number(this.$route.query.id)
|
||||
await this.handleStartsReq()
|
||||
},
|
||||
methods: {
|
||||
// 获取考评组
|
||||
async handleKaoping () {
|
||||
let res = await getWorkList(Object.assign({}, {startId: this.params.startId}, {
|
||||
'currPage': 1,
|
||||
'pageSize': 999
|
||||
}))
|
||||
if (res.code !== 200) {
|
||||
this.rightList = []
|
||||
return
|
||||
}
|
||||
this.rightList = res.data.list
|
||||
this.kaopingFrom.showRight = true
|
||||
},
|
||||
handleLook (id) {
|
||||
// this.handleKaoping()
|
||||
this.$router.push({
|
||||
name: 'assessment-performance',
|
||||
query: {id}
|
||||
})
|
||||
console.log('id: ', id)
|
||||
},
|
||||
handleChangeInput () {
|
||||
this.params.currPage = 1
|
||||
this.handleGetListContent()
|
||||
},
|
||||
handleChangePage (value) {
|
||||
this.params.currPage = value
|
||||
this.handleGetListContent()
|
||||
},
|
||||
async handleGetListContent (params = this.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 = {
|
||||
@ -157,6 +221,7 @@ export default {
|
||||
pageSize: 999
|
||||
}
|
||||
for (let j in this.timeOptions) {
|
||||
// params.startId
|
||||
try {
|
||||
let res = await getStartsData({
|
||||
currentPage: 1,
|
||||
@ -165,13 +230,26 @@ export default {
|
||||
})
|
||||
res = res.data
|
||||
console.log('res: ', res)
|
||||
this.timeOptions[j].children = res.list
|
||||
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()
|
||||
},
|
||||
handleChange (item) {
|
||||
async handleChange (item) {
|
||||
this.params.startId = item[1]
|
||||
// await this.handleGetChartList(Object.assign({}, this.params, {startId: 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 () {
|
||||
@ -187,23 +265,37 @@ export default {
|
||||
handleGetList () {
|
||||
console.log('1', this.form.personnelList)
|
||||
},
|
||||
handleActive (i) {
|
||||
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(params)
|
||||
let res = await apiChartList(Object.assign({}, this.params, {
|
||||
currPage: 1,
|
||||
pageSize: 100
|
||||
}))
|
||||
if (res.code !== 200) return
|
||||
this.titleList = res.data
|
||||
this.titleList[0].active = true
|
||||
this.params.flowProcess = this.titleList[0].flowProcess
|
||||
this.handleGetListContent()
|
||||
console.log('this.params: ', this.params)
|
||||
console.log('res: ', res)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
watch: {
|
||||
'params.staffIds' (n, o) {
|
||||
this.handleGetListContent()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -211,10 +303,14 @@ export default {
|
||||
|
||||
<style lang='less' scoped>
|
||||
.step-content{
|
||||
.footer{
|
||||
text-align: right;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
padding: 28px;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
height: 537px;
|
||||
min-height: 537px;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
&-top{
|
||||
|
||||
@ -1,40 +1,121 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div>返回</div>
|
||||
<span></span>
|
||||
<div>等级分布详情<div>
|
||||
</div>
|
||||
<div>
|
||||
<el-cascader></el-cascader>
|
||||
<el-table :data="tableData"
|
||||
<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'}">
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column><el-table-column>
|
||||
: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 () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
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>
|
||||
|
||||
@ -27,61 +27,65 @@
|
||||
<div>{{statisticals[4].desc}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{statisticals[4].num}}</div>
|
||||
<div>{{statisticals[4].desc}}</div>
|
||||
<div>{{statisticals[5].num}}</div>
|
||||
<div>{{statisticals[5].desc}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{statisticals[4].num}}</div>
|
||||
<div>{{statisticals[4].desc}}</div>
|
||||
<div>{{statisticals[6].num}}</div>
|
||||
<div>{{statisticals[6].desc}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num_title">考核人数分析</div>
|
||||
<div class="num_tips">
|
||||
<div class="num_title">考核人数分析</div>
|
||||
<div class="chart_content">
|
||||
<div class="num_chart">
|
||||
<div>考核人数分析</div>
|
||||
<div>参与考核部门人数</div>
|
||||
<div id="num_chart"></div>
|
||||
</div>
|
||||
<div class="num_report">
|
||||
<div id="num_chart"></div>
|
||||
<ul>
|
||||
<div>参与考核部门人数</div>
|
||||
<ul class="num_report_list">
|
||||
<li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
|
||||
<div class="rep_list">
|
||||
<div :style="handleliColor(index)">{{index}}
|
||||
</div>
|
||||
<div>{{assessItem.desc}} {{ assessItem.num }}人</div>
|
||||
<div style="display:flex">
|
||||
<div :style="handleliColor(index)">{{index}}</div>
|
||||
<div style="margin-left:10px">{{assessItem.desc}} </div>
|
||||
</div>
|
||||
<div>{{ assessItem.num }}人</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="level_title">结果分析</div>
|
||||
<div class="level_tips">等级分布</div>
|
||||
<div class="reslut_display">
|
||||
</div>
|
||||
<div class="level_title">结果分析</div>
|
||||
<div class="level_content">
|
||||
<div class="level_chart">
|
||||
<div class="level_tips">等级分布</div>
|
||||
<div id="level_chart"></div>
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ background:'#F5F7FA'}"
|
||||
border
|
||||
>
|
||||
<el-table-column prop="desc" label="绩效等级">
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" label="实际分布" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="
|
||||
handleDetailClick(scope.$index, tableData)
|
||||
"
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ background:'#F5F7FA'}"
|
||||
border
|
||||
style="flex-grow:2;margin-top:20px">
|
||||
<el-table-column prop="desc" label="绩效等级">
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" label="实际分布">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="handleDetailClick(scope.$index, scope.row)"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
查看详情
|
||||
查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -102,6 +106,8 @@ export default {
|
||||
// 当前选择的月份
|
||||
pickerTime: '',
|
||||
//
|
||||
startId: '',
|
||||
//
|
||||
statisticals: [
|
||||
{num: '0', desc: '参与人数'},
|
||||
{num: '0', desc: '目标制定'},
|
||||
@ -255,9 +261,13 @@ export default {
|
||||
background: color
|
||||
}
|
||||
},
|
||||
//
|
||||
// 页面跳转
|
||||
handleDetailClick (index, rows) {
|
||||
|
||||
this.$router.push({
|
||||
path: ('report-detial'),
|
||||
query: {startId: this.startId, flowProcess: rows.desc}
|
||||
})
|
||||
console.log(this.$router)
|
||||
},
|
||||
// Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
|
||||
handleChartYMul (val) {
|
||||
@ -277,7 +287,7 @@ export default {
|
||||
},
|
||||
//
|
||||
handleChange (val) {
|
||||
console.log(val)
|
||||
this.startId = val[1]
|
||||
this.handleChartDataReq(val[1])
|
||||
},
|
||||
// 获取报表内容
|
||||
@ -332,10 +342,8 @@ export default {
|
||||
|
||||
<style lang='' scoped>
|
||||
.report_content {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
background: white;
|
||||
border-style: #fcfcfc solid 3px;
|
||||
border: #fcfcfc solid 1px;
|
||||
margin-top:20px;
|
||||
padding-top:40px;
|
||||
padding-left: 20px;
|
||||
@ -343,17 +351,13 @@ export default {
|
||||
}
|
||||
.header {
|
||||
background: #fcfcfc;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header > div {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
padding:20px
|
||||
}
|
||||
.header > div > div:nth-child(1) {
|
||||
color: black;
|
||||
@ -369,29 +373,48 @@ export default {
|
||||
background: #333333;
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.num_title{
|
||||
margin-top:20px;
|
||||
margin-bottom: 25px;
|
||||
color: #333333;
|
||||
}
|
||||
.num_tips > div:nth-child(1) {
|
||||
display: inline-block;
|
||||
color: #3a3a3a;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
.chart_content{
|
||||
display: flex;
|
||||
}
|
||||
.num_tips > div:nth-child(2) {
|
||||
display: inline-block;
|
||||
.num_tips{
|
||||
display: flex;
|
||||
}
|
||||
.num_chart {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.num_chart>:nth-child(1){
|
||||
color: #3a3a3a;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 50%;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.num_report {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.num_report>:nth-child(1){
|
||||
color: #3a3a3a;
|
||||
font-size: 14px;
|
||||
}
|
||||
.num_report_list{
|
||||
margin-top: 20px;
|
||||
height: 360px;
|
||||
overflow:auto
|
||||
}
|
||||
.rep_list{
|
||||
width: 200px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.rep_list>:nth-child(2){
|
||||
text-align: start;
|
||||
}
|
||||
.level_title{
|
||||
margin-top:20px;
|
||||
@ -408,25 +431,19 @@ export default {
|
||||
.num_report{
|
||||
display: flex
|
||||
}
|
||||
.rep_list{
|
||||
display: flex;
|
||||
}
|
||||
.rep_list>:nth-child(2){
|
||||
width: 200px;
|
||||
margin-left: 10px;
|
||||
flex:1
|
||||
}
|
||||
#num_chart {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
widows: 500px;
|
||||
height: 360px;
|
||||
}
|
||||
.reslut_display {
|
||||
.level_content{
|
||||
display: flex;
|
||||
}
|
||||
.level_chart {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#level_chart {
|
||||
width: 600px;
|
||||
width: 500px;
|
||||
height: 360px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -236,7 +236,7 @@ export default {
|
||||
formIndicators: {}, // 指标表单
|
||||
ruleIndicators: {
|
||||
name: [{ required: true,
|
||||
message: '请输入维度名称',
|
||||
message: '请输入指标名称',
|
||||
trigger: 'blur' }
|
||||
],
|
||||
keyResult: [{ required: true,
|
||||
@ -294,6 +294,7 @@ export default {
|
||||
async handleGetByGroupId (id) {
|
||||
try {
|
||||
let res = await getByGroupId({id})
|
||||
res = res.data
|
||||
res = Object.assign({}, res, {
|
||||
evaluationGroupId: res.id,
|
||||
calculateId: 1 }
|
||||
@ -315,7 +316,12 @@ export default {
|
||||
// 获取维度类型
|
||||
async handleGetDimensions () {
|
||||
try {
|
||||
const res = await getDimensions()
|
||||
let res = await getDimensions()
|
||||
if (res.code !== 200) {
|
||||
this.dimensionsList = []
|
||||
return
|
||||
}
|
||||
res = res.data
|
||||
this.dimensionsList = res
|
||||
console.log('res: ', res)
|
||||
} catch (error) {
|
||||
@ -367,7 +373,7 @@ export default {
|
||||
} else {
|
||||
this.zhibiaoTitle = '编辑指标'
|
||||
this.formIndicators = Object.assign({}, item, {index, index2: type, isEdit: true})
|
||||
this.formIndicators.weight = this.formIndicators.weight
|
||||
this.formIndicators.weight = this.formIndicators.weight * 100
|
||||
this.showIndicators = true
|
||||
}
|
||||
},
|
||||
@ -408,7 +414,7 @@ export default {
|
||||
}
|
||||
if (!this.zanshi.tagetLibItems) this.zanshi.tagetLibItems = []
|
||||
this.zanshi.tagetLibItems.push(Object.assign({}, this.formIndicators, {isDelete: 0}))
|
||||
// this.showIndicators = false
|
||||
this.showIndicators = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -54,6 +54,10 @@ export default {
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
created () {
|
||||
const id = this.$route.query.id
|
||||
this.$route.meta.title = !id ? '新增考评组' : '编辑考评组'
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
@ -135,6 +139,7 @@ export default {
|
||||
overflow: auto;
|
||||
}
|
||||
&-header{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
width: 420px;
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
@current-change="handleChangePage"
|
||||
layout="prev, pager, next"
|
||||
:page-size.sync='params.pageSize'
|
||||
:current-page.sync='params.currPage'
|
||||
:total="params.totalCount">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
@ -79,9 +79,7 @@
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click.native.prevent="
|
||||
handleGroupDelete(scope.$index, formData.assessmentList)
|
||||
"
|
||||
@click.native.prevent="handleGroupDelete(scope.$index, formData.assessmentList)"
|
||||
size="small"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user