150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<!-- -->
|
|
<template>
|
|
<div class="assessment">
|
|
<div class="assessment-form">
|
|
<el-form ref="form" inline :model="form" >
|
|
<div>
|
|
<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-dropdown >
|
|
<el-button size="small" type="primary">
|
|
新增考评组<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="handleToEidt" >新增考评组</el-dropdown-item>
|
|
<el-dropdown-item @click.native="handleToEidt" > 复制考评组</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
<el-table
|
|
:header-cell-style="{background:'#F5F7FA'}"
|
|
@row-click='handleSelectClick'
|
|
:data="tableData"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
fixed
|
|
sortable
|
|
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>
|
|
<el-button
|
|
@click.native.prevent="deleteRow(scope.$index, tableData)"
|
|
type="text"
|
|
size="small">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
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 () {
|
|
},
|
|
methods: {
|
|
handleToEidt () {
|
|
this.$router.push({name: 'workbench-edit-group'})
|
|
},
|
|
handleSelectClick (row, column, event) {
|
|
console.log('event: ', event)
|
|
console.log('column: ', column)
|
|
console.log('row: ', row)
|
|
},
|
|
deleteRow (index, rows) {
|
|
rows.splice(index, 1)
|
|
}
|
|
},
|
|
watch: {}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.assessment{
|
|
.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>
|