优化
This commit is contained in:
熊成强
parent
dc4faf8647
commit
29555b7c08
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
|
||||
})
|
||||
}
|
||||
@ -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',
|
||||
|
||||
@ -26,14 +26,15 @@ import {
|
||||
Tag,
|
||||
Tooltip,
|
||||
Popover,
|
||||
Pagination
|
||||
|
||||
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)
|
||||
|
||||
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>
|
||||
@ -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