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: 添加绩效报表页面 优化 # Conflicts: # src/utils/elementConfig.js
This commit is contained in:
leave
commit
2ade0c986e
19
src/api/assessment.js
Normal file
19
src/api/assessment.js
Normal file
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 考核任务列表
|
||||
export function apiGetAssessList (query) {
|
||||
return request({
|
||||
url: '/lz_management/performance/assess/manager/list',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 删除考核任务
|
||||
export function apiDeleteAssessList (query) {
|
||||
return request({
|
||||
url: '/lz_management/performance/assess/manager/delete',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
19
src/api/report.js
Normal file
19
src/api/report.js
Normal file
@ -0,0 +1,19 @@
|
||||
import requestFuc from '@/utils/request'
|
||||
|
||||
// 获取考核组列表
|
||||
export function getChartData(query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/performance/chart/result',
|
||||
method: 'POST',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取绩效排名
|
||||
export function getStartsData(query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/performance/chart/starts',
|
||||
method: 'POST',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
@ -26,9 +26,10 @@ export default {
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.appamin{
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
background: #f4f4f4;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 80px;
|
||||
padding: 90px 80px 30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -77,7 +77,7 @@ export default {
|
||||
left: 0;
|
||||
}
|
||||
.navBar{
|
||||
position: relative;
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
height: @headerHeight;
|
||||
|
||||
@ -1,13 +1,20 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="smallNav">
|
||||
<span @click="handleBack" class="smallNav-back">返回</span>
|
||||
<span class="commonFont smallNav-title a">{{title}}</span>
|
||||
<span @click="handleBack" class="smallNav-back a">返回</span>
|
||||
<span v-if="showTitle" class="commonFont smallNav-title commonFont">{{title}}</span>
|
||||
<slot name='content'></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -34,7 +41,10 @@ export default {
|
||||
<style lang='less' scoped>
|
||||
.smallNav{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-back{
|
||||
padding-right: 10px;
|
||||
margin-right: 10px;
|
||||
color: #aaaaaa;
|
||||
cursor: pointer;
|
||||
@ -44,16 +54,19 @@ export default {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.a{
|
||||
position: relative;
|
||||
}
|
||||
.a::before{
|
||||
content:"";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 70%;
|
||||
height: 80%;
|
||||
// background: red;
|
||||
border-left: 1px solid #aaaaaa;
|
||||
border-right: 1px solid #aaaaaa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,7 +61,35 @@ export default [
|
||||
meta: {
|
||||
title: '考核管理',
|
||||
isNav: true
|
||||
},
|
||||
redirect: 'assessment/homeList',
|
||||
children: [{
|
||||
path: 'homeList',
|
||||
name: 'assessment-homeList',
|
||||
component: (resolve) => require(['@/views/kpi/assessment/homeList/index.vue'], resolve),
|
||||
meta: {
|
||||
title: '考核管理',
|
||||
isNav: true
|
||||
}
|
||||
}, {
|
||||
path: 'stepList',
|
||||
name: 'assessment-stepList',
|
||||
component: (resolve) => require(['@/views/kpi/assessment/stepList/index.vue'], resolve),
|
||||
meta: {
|
||||
title: '考核管理',
|
||||
isNav: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'performance',
|
||||
name: 'assessment-performance',
|
||||
component: (resolve) => require(['@/views/kpi/assessment/performance/index.vue'], resolve),
|
||||
meta: {
|
||||
title: '员工绩效详情',
|
||||
isNav: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: 'initiate',
|
||||
name: 'initiate',
|
||||
|
||||
@ -1,41 +1,40 @@
|
||||
import Vue from 'vue'
|
||||
import {
|
||||
Button,
|
||||
MessageBox,
|
||||
Message,
|
||||
Table,
|
||||
TableColumn,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Select,
|
||||
Option,
|
||||
RadioGroup,
|
||||
DatePicker,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
TimePicker,
|
||||
Col,
|
||||
Checkbox,
|
||||
Radio,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Dialog,
|
||||
Tree,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Popover,
|
||||
Pagination,
|
||||
Menu,
|
||||
MenuItem
|
||||
|
||||
Button,
|
||||
MessageBox,
|
||||
Message,
|
||||
Table,
|
||||
TableColumn,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Select,
|
||||
Option,
|
||||
RadioGroup,
|
||||
DatePicker,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
TimePicker,
|
||||
Col,
|
||||
Checkbox,
|
||||
Radio,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Dialog,
|
||||
Tree,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Popover,
|
||||
Pagination,
|
||||
Cascader
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
|
||||
Vue.use(Cascader)
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Popover)
|
||||
Vue.use(Tooltip)
|
||||
@ -61,5 +60,4 @@ Vue.use(Radio)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Menu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(Cascader)
|
||||
|
||||
236
src/views/kpi/assessment/homeList/index.vue
Normal file
236
src/views/kpi/assessment/homeList/index.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="assessment">
|
||||
<div class="assessment-form">
|
||||
<el-form ref="form" inline :model="form" >
|
||||
<div>
|
||||
<el-form-item >
|
||||
<el-select size="small" v-model="form.cycleType" placeholder="请选择" style="width:100px">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-input @change="handleChange" @keyup.enter="handleChange" size="small" clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item >
|
||||
<el-button type="primary" size="small" @click="handlePush">发起考核</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item >
|
||||
<el-button size="small" >导入历史绩效</el-button>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="assessment-table">
|
||||
<el-table
|
||||
:header-cell-style="{background:'#F5F7FA'}"
|
||||
@row-click='handleSelectClick'
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="name"
|
||||
label="考核名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cycleTime"
|
||||
label="时间周期">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="joinNum"
|
||||
label="参与人数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handlePush(scope.row.id)"
|
||||
type="text"
|
||||
size="small">
|
||||
编 辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleDelete(scope.row.id)"
|
||||
type="text"
|
||||
size="small">
|
||||
删 除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="footer">
|
||||
<el-pagination
|
||||
small
|
||||
@current-change="handleChangePage"
|
||||
layout="prev, pager, next"
|
||||
:page-size.sync='params.pageSize'
|
||||
:total="params.totalCount">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {apiGetAssessList, apiDeleteAssessList} from '@/api/assessment'
|
||||
console.log('apiGetAssessList: ', apiGetAssessList)
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
params: {
|
||||
'currPage': 1,
|
||||
'pageSize': 5
|
||||
},
|
||||
show: false,
|
||||
options: [ {
|
||||
value: '',
|
||||
label: '全部'
|
||||
}, {
|
||||
value: 0,
|
||||
label: '月度'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '自定义'
|
||||
}
|
||||
],
|
||||
form: {
|
||||
cycleType: ''
|
||||
},
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年02月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年03月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {
|
||||
this.form.value = this.options[0].value
|
||||
this.handleGetData()
|
||||
},
|
||||
methods: {
|
||||
async handleDelete (item) {
|
||||
try {
|
||||
await apiDeleteAssessList({assessId: item})
|
||||
this.handleGetData()
|
||||
this.$message({
|
||||
message: '成功',
|
||||
type: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
this.$message.error(error.msg)
|
||||
}
|
||||
},
|
||||
handleChange (value) {
|
||||
this.params.currPage = 1
|
||||
console.log(' this.form: ', this.form)
|
||||
this.handleGetData(Object.assign({}, this.form, this.params))
|
||||
},
|
||||
handlePush (id) {
|
||||
this.$router.push({name: 'assessment-stepList', query: {id}})
|
||||
},
|
||||
async handleGetData (parmas = this.params) {
|
||||
try {
|
||||
const res = await apiGetAssessList(parmas)
|
||||
console.log('res: ', res)
|
||||
this.tableData = res.list
|
||||
this.params.totalCount = res.totalCount
|
||||
this.params.currPage = res.currPage
|
||||
} catch (error) {
|
||||
console.log('error: ', error)
|
||||
}
|
||||
},
|
||||
handleChangePage (value) {
|
||||
this.params.currPage = value
|
||||
this.handleGetData()
|
||||
},
|
||||
handleRight () {
|
||||
this.show = true
|
||||
},
|
||||
handleSelectClick (row, column, event) {
|
||||
console.log('event: ', event)
|
||||
console.log('column: ', column)
|
||||
console.log('row: ', row)
|
||||
},
|
||||
handleToHome (i) {
|
||||
this.$router.push({name: i})
|
||||
},
|
||||
deleteRow (index, rows) {
|
||||
rows.splice(index, 1)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'form.cycleType' (n, o) {
|
||||
this.handleChange()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.assessment{
|
||||
|
||||
.footer{
|
||||
text-align: right;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
.el-form{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-form{
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
&-table{
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid @borderColor;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.el-table__row{
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
@ -1,180 +1,27 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="assessment">
|
||||
<div class="assessment-form">
|
||||
<el-form ref="form" inline :model="form" >
|
||||
<div>
|
||||
<el-form-item >
|
||||
<el-select size="small" v-model="form.value" placeholder="请选择" style="width:100px">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-input size="small" clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item >
|
||||
<el-button type="primary" size="small" @click="handleRight">发起考核</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-button size="small" >导入历史绩效</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="assessment-table">
|
||||
<el-table
|
||||
:header-cell-style="{background:'#F5F7FA'}"
|
||||
@row-click='handleSelectClick'
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="name"
|
||||
label="考核名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="时间周期">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="number"
|
||||
label="参与人数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow(scope.$index, tableData)"
|
||||
type="text"
|
||||
size="small">
|
||||
查看
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<popup-set :show.sync='show'></popup-set>
|
||||
<!-- 考核管理
|
||||
<el-button type="success" @click="handleToHome('home')">去二级页面</el-button>
|
||||
<el-button type="success" @click="handleToHome('home1')">去二级页面带弹窗</el-button> -->
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popupSet from './components/popup'
|
||||
export default {
|
||||
components: {
|
||||
popupSet
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
options: [
|
||||
{
|
||||
value: '1',
|
||||
label: '全部'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '月度'
|
||||
}, {
|
||||
value: '3',
|
||||
label: '季度'
|
||||
}, {
|
||||
value: '4',
|
||||
label: '半年度'
|
||||
}, {
|
||||
value: '5',
|
||||
label: '年度'
|
||||
}
|
||||
],
|
||||
form: {},
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年02月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年03月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
number: '10'
|
||||
}]
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {
|
||||
this.form.value = this.options[0].value
|
||||
},
|
||||
methods: {
|
||||
handleRight () {
|
||||
this.show = true
|
||||
},
|
||||
handleSelectClick (row, column, event) {
|
||||
console.log('event: ', event)
|
||||
console.log('column: ', column)
|
||||
console.log('row: ', row)
|
||||
},
|
||||
handleToHome (i) {
|
||||
this.$router.push({name: i})
|
||||
},
|
||||
deleteRow (index, rows) {
|
||||
rows.splice(index, 1)
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.assessment{
|
||||
.el-form{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-form{
|
||||
padding: 4px 0;
|
||||
}
|
||||
<style lang='' scoped>
|
||||
|
||||
&-table{
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid @borderColor;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.el-table__row{
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
148
src/views/kpi/assessment/performance/index.vue
Normal file
148
src/views/kpi/assessment/performance/index.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="performance">
|
||||
<SmallNav />
|
||||
<div class="performance-content boderAndRadius">
|
||||
<div class="performance-content-top">
|
||||
<div class="performance-content-top-left">
|
||||
<el-select size="small" v-model="form.value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="performance-content-top-right">
|
||||
<el-button size="small" plain>沟通管理</el-button>
|
||||
<el-button size="small" plain>管理</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="performance-content-center">
|
||||
<div class="performance-content-center-item" v-for="i in 10"></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>
|
||||
</div>
|
||||
<div class="performance-content-jilu">
|
||||
ss
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SmallNav from '@/components/kpi-layout/SmallNav'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {},
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
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
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.performance{
|
||||
overflow: auto;
|
||||
&-content{
|
||||
padding: 28px;
|
||||
margin: 10px 0;
|
||||
// height: 700px;
|
||||
// overflow: auto;
|
||||
&-top{
|
||||
border-bottom: 1px solid @borderColor;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
&-center{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 20px 0;
|
||||
&-item{
|
||||
width: 20%;
|
||||
height: 20px;
|
||||
background: #09f;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
&-jilu{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/kpi/assessment/stepList/img/right.jpg
Normal file
BIN
src/views/kpi/assessment/stepList/img/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
BIN
src/views/kpi/assessment/stepList/img/shu.jpg
Normal file
BIN
src/views/kpi/assessment/stepList/img/shu.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 722 B |
190
src/views/kpi/assessment/stepList/index.vue
Normal file
190
src/views/kpi/assessment/stepList/index.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="step">
|
||||
<small-nav :showTitle='false'>
|
||||
<div slot="content">
|
||||
<el-cascader size="small" :props="props"></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" plain>选择部门<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
|
||||
<el-button size="small" 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>
|
||||
</div>
|
||||
<div class="step-content-top-right">
|
||||
<el-button size="small" type="primary">开始评分</el-button>
|
||||
<el-button size="small" 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" style="cursor: pointer;">{{i.name}}({{i.number}})</span>
|
||||
<div v-if="index<titleList.length-1" class="step-content-center-item-img">
|
||||
<img v-if="titleList.length>2 && index===0" src="./img/shu.jpg" alt="">
|
||||
<img v-else src="./img/right.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
align='center'
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align='center'
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
align='center'
|
||||
label="地址">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
{{scope.row}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SmallNav from '@/components/kpi-layout/SmallNav'
|
||||
let id = 0
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
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 弄'
|
||||
}],
|
||||
formInline: {},
|
||||
titleList: [{
|
||||
id: 10,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}, {
|
||||
id: 11,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}, {
|
||||
id: 12,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}, {
|
||||
id: 13,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}, {
|
||||
id: 14,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}, {
|
||||
id: 15,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}, {
|
||||
id: 10,
|
||||
name: '全部',
|
||||
number: 5
|
||||
}],
|
||||
props: {
|
||||
lazy: true,
|
||||
lazyLoad (node, resolve) {
|
||||
const { level } = node
|
||||
setTimeout(() => {
|
||||
const nodes = Array.from({ length: level + 1 })
|
||||
.map(item => ({
|
||||
value: ++id,
|
||||
label: `选项${id}`,
|
||||
leaf: level >= 2
|
||||
}))
|
||||
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
|
||||
resolve(nodes)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SmallNav
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.step-content{
|
||||
padding: 28px;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
height: 537px;
|
||||
background: #fff;
|
||||
&-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
&-center{
|
||||
margin: 30px 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{
|
||||
height: 20px;
|
||||
margin: 0 56px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +1,344 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
绩效报表
|
||||
<div class="block">
|
||||
<el-cascader :props="props" :options="timeOptions"></el-cascader>
|
||||
<div class="report_content">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>参与人数</div>
|
||||
</div>
|
||||
<span></span>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>目标定制</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>目标确认</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>执行中</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>结果值录入</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>评分</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>考核结束</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>考核人数分析</div>
|
||||
<div class="num_tips">
|
||||
<div>考核人数分析</div>
|
||||
<div>参与考核部门人数</div>
|
||||
</div>
|
||||
<div class="num_report">
|
||||
<div id="num_chart"></div>
|
||||
<ul>
|
||||
<li v-for="(dep, index) in deps" :key="dep.id">
|
||||
<div
|
||||
:class="{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
background: handleliColor(index)
|
||||
}"
|
||||
>
|
||||
{{ index }}
|
||||
</div>
|
||||
<div>{{ dep.title }} {{ dep.num }}人</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>结果分析</div>
|
||||
<div>等级分布</div>
|
||||
<div class="reslut_display">
|
||||
<div id="level_chart"></div>
|
||||
<el-table :data="tableData" style="display: inline-block;">
|
||||
<el-table-column prop="level" label="绩效等级" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="layout" 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)
|
||||
"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入基本模板
|
||||
let echarts = require('echarts/lib/echarts')
|
||||
import { getChartData, getStartsData } from '@/api/report'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
// 当前选择的月份
|
||||
pickerTime: '',
|
||||
// 表格内容
|
||||
tableData: [],
|
||||
//
|
||||
deps: [],
|
||||
//
|
||||
value: [],
|
||||
timeOptions: [{
|
||||
value: 0,
|
||||
label: '月底',
|
||||
children: []
|
||||
}, {
|
||||
value: 1,
|
||||
label: '自定义',
|
||||
children: []
|
||||
}],
|
||||
//
|
||||
props: {
|
||||
lazy: true,
|
||||
lazyLoad: (node, resolve) => {
|
||||
const { level } = node;
|
||||
let type = node.data.val
|
||||
console.log(this);
|
||||
this.handleStartsReq(type)
|
||||
// reslut => {
|
||||
// if (reslut.data.code = 200) {
|
||||
// const childNode = Array.from(reslut.data.list, map(item => {
|
||||
// value: item.desc
|
||||
// lable: item.num
|
||||
// leaf: level >= 2
|
||||
// }))
|
||||
// resolve(childNode)
|
||||
// } else {
|
||||
// const childNode = []
|
||||
// resolve(childNode)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
// 考核人数报表持有类
|
||||
option: {
|
||||
color: ['#3398DB'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
},
|
||||
//
|
||||
levelOption: {
|
||||
color: ['#3398DB'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 背景色计算
|
||||
handleliColor (pos) {
|
||||
switch (pos) {
|
||||
case 0:
|
||||
return '#ff7705'
|
||||
case 1:
|
||||
return '#ff8b22'
|
||||
case 2:
|
||||
return '#ff9e45'
|
||||
default:
|
||||
return '#bcbcbc'
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeMount () { },
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
handleDetailClick (index, rows) {
|
||||
|
||||
},
|
||||
// Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
|
||||
handleChartYMul (val) {
|
||||
let max = val
|
||||
max = max + (3 - max % 3)
|
||||
return [0, max / 3 * 1, max / 3 * 2, max]
|
||||
},
|
||||
// 绩效分析
|
||||
handleNumChart () {
|
||||
let numChart = echarts.init(document.getElementById('num_chart'))
|
||||
numChart.setOption(this.option)
|
||||
},
|
||||
// 结果分析
|
||||
handleLevelChart () {
|
||||
let levelChart = echarts.init(document.getElementById('level_chart'))
|
||||
levelChart.setOption(this.levelOption)
|
||||
},
|
||||
// 获取报表内容
|
||||
handleChartDataReq () {
|
||||
getChartData()
|
||||
},
|
||||
//
|
||||
handleChartDataReq () {
|
||||
getRankData()
|
||||
},
|
||||
// 为了不分页直接传999
|
||||
handleStartsReq (type) {
|
||||
let params = {
|
||||
currentPage: 1,
|
||||
cycleType: type,
|
||||
pageSize: 999
|
||||
}
|
||||
getStartsData(params).then(result => {
|
||||
//handleNode(reslut)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
|
||||
.report_content {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
background: white;
|
||||
border-style: #fcfcfc solid 3px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.header {
|
||||
background: #fcfcfc;
|
||||
width: fit-content;
|
||||
}
|
||||
.header > span {
|
||||
display: inline-block;
|
||||
background: #333333;
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.header > div {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.header > div > div:nth-child(1) {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
size: 20px;
|
||||
}
|
||||
.header > div > div:nth-child(2) {
|
||||
color: #999999;
|
||||
font-size: 10px;
|
||||
}
|
||||
.num_tips > div:nth-child(1) {
|
||||
display: inline-block;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.num_tips > div:nth-child(2) {
|
||||
display: inline-block;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
}
|
||||
#num_chart {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
height: 360px;
|
||||
}
|
||||
.reslut_display {
|
||||
display: flex;
|
||||
}
|
||||
#level_chart {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
height: 360px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -92,6 +92,7 @@ export default {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
duration: 1000,
|
||||
onClose: () => {
|
||||
this.$router.replace({name: 'workbench-group'})
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
small
|
||||
@current-change="handleChangePage"
|
||||
layout="prev, pager, next"
|
||||
page-size.sync='params.pageSize'
|
||||
:page-size.sync='params.pageSize'
|
||||
:total="params.totalCount">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user