优化
This commit is contained in:
熊成强
parent
31d4477577
commit
a05c8267eb
@ -28,7 +28,7 @@ export default {
|
||||
.appamin{
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 80px 0;
|
||||
padding: 30px 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
>
|
||||
{{i.meta.title}}</li>
|
||||
</ul>
|
||||
<div class="noNav" v-if="!isNav">
|
||||
<nav-header v-if="!isNav"/>
|
||||
<!-- <div class="noNav" v-if="!isNav">
|
||||
<div class="noNav-left">
|
||||
<i @click="handleBack" class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<!-- <svg-icon icon-class="analyze" /> -->
|
||||
<div>{{name}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</transition>
|
||||
<div class="navBar-right" v-if="isNav">
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
<script>
|
||||
import routeList from '@/router/kpi_route'
|
||||
console.log('_route: ', routeList[0].children)
|
||||
import NavHeader from './NavHeader'
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
data () {
|
||||
@ -37,14 +37,10 @@ export default {
|
||||
activeIndex2: '1'
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
NavHeader
|
||||
},
|
||||
computed: {
|
||||
isPopup () {
|
||||
return !!this.$route.meta.pop
|
||||
},
|
||||
name () {
|
||||
return this.$route.meta.title
|
||||
},
|
||||
isNav () {
|
||||
return !!this.$route.meta.isNav
|
||||
},
|
||||
@ -54,32 +50,14 @@ export default {
|
||||
},
|
||||
beforeMount () {},
|
||||
mounted () {
|
||||
console.log('this.$route', this.$route)
|
||||
},
|
||||
methods: {
|
||||
handleBack () {
|
||||
if (this.isPopup) return this.open()
|
||||
this.$router.go(-1)
|
||||
},
|
||||
handleToRouter (item) {
|
||||
if (this.title.includes(item)) return
|
||||
this.$router.push({name: item})
|
||||
},
|
||||
handleSelect (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
open () {
|
||||
const obj = {
|
||||
popupTitle: this.$route.meta.popupTitle || '有修改的内容未保存，确认离开吗？',
|
||||
popupContent: this.$route.meta.popupContent || '系统可能不会保存您做的更改。'
|
||||
}
|
||||
this.$confirm(obj.popupContent, obj.popupTitle, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$router.go(-1)
|
||||
}).catch(() => { })
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -90,9 +68,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.navBar::before{
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navBar{
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
height: @headerHeight;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
@ -120,23 +108,6 @@ export default {
|
||||
.active{
|
||||
color: #09f;
|
||||
}
|
||||
.noNav{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-left{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: 1px solid #c0c0c0;
|
||||
margin-right: 20px;
|
||||
i{
|
||||
font-size: 22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang='less' scoped>
|
||||
|
||||
74
src/components/kpi-layout/NavHeader.vue
Normal file
74
src/components/kpi-layout/NavHeader.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="noNav">
|
||||
<div class="noNav-left">
|
||||
<i @click="handleBack" class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<!-- <svg-icon icon-class="analyze" /> -->
|
||||
<div>{{name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isPopup () {
|
||||
return !!this.$route.meta.pop
|
||||
},
|
||||
name () {
|
||||
return this.$route.meta.title
|
||||
}
|
||||
},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {
|
||||
handleBack () {
|
||||
if (this.isPopup) return this.open()
|
||||
this.$router.go(-1)
|
||||
},
|
||||
open () {
|
||||
const obj = {
|
||||
popupTitle: this.$route.meta.popupTitle || '有修改的内容未保存，确认离开吗？',
|
||||
popupContent: this.$route.meta.popupContent || '系统可能不会保存您做的更改。'
|
||||
}
|
||||
this.$confirm(obj.popupContent, obj.popupTitle, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$router.go(-1)
|
||||
}).catch(() => { })
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.noNav{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-left{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: 1px solid #c0c0c0;
|
||||
margin-right: 20px;
|
||||
i{
|
||||
font-size: 22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -12,14 +12,17 @@ import AppMain from './AppMain'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
NavBar,
|
||||
AppMain
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
// hiddenHeader () {
|
||||
// return !!this.$route.meta.hidden
|
||||
// }
|
||||
},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
|
||||
@ -39,7 +39,17 @@ export default [
|
||||
component: (resolve) => require(['@/views/kpi/workbench/assessmentGroup/index.vue'], resolve),
|
||||
meta: {
|
||||
title: '考评组设置',
|
||||
isNav: false
|
||||
isNav: false,
|
||||
hidden: true
|
||||
}
|
||||
}, {
|
||||
path: 'edit',
|
||||
name: 'workbench-edit-group',
|
||||
component: (resolve) => require(['@/views/kpi/workbench/assessmentGroup/edit'], resolve),
|
||||
meta: {
|
||||
title: '编辑考评组',
|
||||
isNav: false,
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -75,23 +85,22 @@ export default [
|
||||
title: '设置',
|
||||
isNav: true
|
||||
}
|
||||
}, {
|
||||
path: 'home',
|
||||
name: 'home',
|
||||
component: (resolve) => require(['@/views/kpi/home/index.vue'], resolve),
|
||||
meta: {
|
||||
title: '智能测试'
|
||||
}
|
||||
}, {
|
||||
path: 'home1',
|
||||
name: 'home1',
|
||||
component: (resolve) => require(['@/views/kpi/home1/index.vue'], resolve),
|
||||
meta: {
|
||||
title: '智能测试带弹窗',
|
||||
pop: true
|
||||
}
|
||||
}
|
||||
// , {
|
||||
// path: 'home',
|
||||
// name: 'home',
|
||||
// component: (resolve) => require(['@/views/kpi/home/index.vue'], resolve),
|
||||
// meta: {
|
||||
// title: '智能测试'
|
||||
// }
|
||||
// }, {
|
||||
// path: 'home1',
|
||||
// name: 'home1',
|
||||
// component: (resolve) => require(['@/views/kpi/home1/index.vue'], resolve),
|
||||
// meta: {
|
||||
// title: '智能测试带弹窗',
|
||||
// pop: true
|
||||
// }
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@borderColor: #ebebeb;
|
||||
@fontBlue: #3ba1ff;
|
||||
@headerHeight:60px;
|
||||
.boderAndRadius{
|
||||
border: 1px solid @borderColor;
|
||||
border-radius:6px ;
|
||||
@ -16,4 +17,4 @@
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,12 +17,22 @@ import {
|
||||
TimePicker,
|
||||
Col,
|
||||
Checkbox,
|
||||
Radio
|
||||
Radio,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Dialog,
|
||||
Tree,
|
||||
Tag
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
|
||||
Vue.use(Tag)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(DatePicker)
|
||||
Vue.use(Select)
|
||||
Vue.use(RadioGroup)
|
||||
@ -39,3 +49,6 @@ Vue.use(TimePicker)
|
||||
Vue.use(Col)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(Radio)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-form ref="form" inline :model="form" >
|
||||
<div>
|
||||
<el-form-item >
|
||||
<el-select v-model="form.value" placeholder="请选择" style="width:100px">
|
||||
<el-select size="small" v-model="form.value" placeholder="请选择" style="width:100px">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -15,21 +15,22 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-input prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
|
||||
<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" @click="handleRight">发起考核</el-button>
|
||||
<el-button type="primary" size="small" @click="handleRight">发起考核</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-button >导入历史绩效</el-button>
|
||||
<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%">
|
||||
@ -102,11 +103,11 @@ export default {
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
name: '2020年02月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '2020年01月绩效考核',
|
||||
name: '2020年03月绩效考核',
|
||||
number: '10'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
OKR
|
||||
|
||||
<div v-for="i in array" :key="i.id">
|
||||
<!-- {{i.id}}{{bbb(i)}} -->
|
||||
</div>
|
||||
<el-button @click="aaa">点击</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,13 +13,32 @@ OKR
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
array: [{
|
||||
id: 1,
|
||||
isTrue: true
|
||||
}, {
|
||||
id: 2,
|
||||
isTrue: true
|
||||
}, {
|
||||
id: 3,
|
||||
isTrue: true
|
||||
}],
|
||||
arr1: [1, 2]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
methods: {
|
||||
bbb (item) {
|
||||
console.log(145623)
|
||||
return this.arr1.some(i => i === item.id)
|
||||
},
|
||||
aaa () {
|
||||
this.arr1 = []
|
||||
console.log('this.array: ', this.array)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
const a = {'msg': '操作成功', 'code': 200, 'data': [{'id': 100, 'name': '霖梓控股', 'children': [{'id': 114, 'name': '其他', 'children': [{'id': 115, 'name': 'qtzy', 'children': [{'id': 117, 'name': '电销'}]}]}, {'id': 102, 'name': '武汉分公司', 'children': [{'id': 109, 'name': '财务部门'}, {'id': 108, 'name': '市场部门'}]}, {'id': 101, 'name': '杭州总公司', 'children': [{'id': 103, 'name': '研发部门', 'children': [{'id': 118, 'name': '研发小组'}, {'id': 119, 'name': '测试二组'}, {'id': 112, 'name': '研发一组', 'children': [{'id': 113, 'name': '测试小组'}]}]}, {'id': 104, 'name': '市场部门'}, {'id': 105, 'name': '测试部门'}, {'id': 106, 'name': '财务部门'}, {'id': 107, 'name': '运维部门'}]}]}]}
|
||||
export default a.data
|
||||
@ -0,0 +1,97 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="basis">
|
||||
<div class="basis-title commonFont">
|
||||
基本信息
|
||||
</div>
|
||||
<div class="basis-form">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="考评组名称：" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="周期类型：">
|
||||
<el-radio-group v-model="form.radio">
|
||||
<el-radio
|
||||
v-for="(i,index) in zhouqi"
|
||||
:key="index"
|
||||
:label="i.id">{{i.name}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="考评组管理员：">
|
||||
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="被考核人员" prop="name">
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="考评员工：">
|
||||
<el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选部门</el-button>
|
||||
<el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选角色</el-button>
|
||||
<el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选人员</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<get-depart v-if="isShow" :isShow.sync='isShow'/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getDepart from './getDepart'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isShow: false,
|
||||
zhouqi: [{
|
||||
id: 1,
|
||||
name: '月度'
|
||||
}, {
|
||||
id: 2,
|
||||
name: '季度'
|
||||
}, {
|
||||
id: 3,
|
||||
name: '半年度'
|
||||
}, {
|
||||
id: 4,
|
||||
name: '年度'
|
||||
}, {
|
||||
id: 5,
|
||||
name: '试用期'
|
||||
}],
|
||||
form: {},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
getDepart
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {
|
||||
handleGetChoose () {
|
||||
this.isShow = true
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.basis{
|
||||
&-title{
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&-form{
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,210 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="选择参与部门"
|
||||
:visible.sync="show"
|
||||
@close='close'
|
||||
width="800px"
|
||||
center>
|
||||
<div class="popup">
|
||||
<div class="popup-item boderAndRadius">
|
||||
<div class="popup-item-title">全部</div>
|
||||
<div class="popup-item-content">
|
||||
<div class="popup-item-content-item">
|
||||
<div class="content">
|
||||
<el-checkbox>全选</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(i) in showData" :key="i.id" class="popup-item-content-item borderItem">
|
||||
<div class="content"><el-checkbox :value ='handleCheck(i)' @change='handleChangChoose($event,i)' >{{i.name}}</el-checkbox></div>
|
||||
<div class="popup-item-content-item-next" :class="{isHasActive:handleCheck(i)}" @click='handleNext(i)'>下级</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-item boderAndRadius">
|
||||
<div class="popup-item-right">
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
@close="handleClose(tag)"
|
||||
closable>
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="xcq">取 消</el-button>
|
||||
<el-button size="mini" @click="xcq1">清空全部</el-button>
|
||||
<el-button size="mini" type="primary" @click="centerDialogVisible">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bbb from './a'
|
||||
console.log('bbb: ', bbb)
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
show: true,
|
||||
checked: false,
|
||||
data: bbb,
|
||||
showData: [],
|
||||
checkList: [],
|
||||
tags: [{
|
||||
id: 100,
|
||||
name: '霖梓控股'
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
beforeMount () {},
|
||||
mounted () {
|
||||
this.showData = this.data.length > -1 ? this.data : []
|
||||
},
|
||||
methods: {
|
||||
// 是否勾选
|
||||
handleCheck (item) {
|
||||
return this.tags.some(i => i.id === item.id)
|
||||
},
|
||||
handleChangChoose (event, item) {
|
||||
const isHas = this.tags.some(i => i.id === item.id)
|
||||
if (isHas && !event) {
|
||||
this.tags = this.tags.filter(i => i.id !== item.id)
|
||||
}
|
||||
if (!isHas && event) {
|
||||
this.tags.push(item)
|
||||
}
|
||||
},
|
||||
handleClick (data) {
|
||||
},
|
||||
// 点击下级
|
||||
handleNext (item) {
|
||||
if (this.handleCheck(item)) return
|
||||
this.showData = item.children
|
||||
this.handleGetNextChildren()
|
||||
},
|
||||
// 删除右侧标签
|
||||
handleClose (item) {
|
||||
this.tags = this.tags.filter(i => i.id !== item.id)
|
||||
// this.$forceUpdate()
|
||||
},
|
||||
// 关闭弹窗
|
||||
close () {
|
||||
this.show = true
|
||||
this.$emit('update:isShow', false)
|
||||
},
|
||||
// 关闭弹窗
|
||||
centerDialogVisible () {
|
||||
this.$emit('update:isShow', false)
|
||||
},
|
||||
handleGetNextChildren (children = this.data) {
|
||||
console.log('children: ', children)
|
||||
},
|
||||
xcq () {
|
||||
// const list = this.$refs.tree.getCheckedNodes()
|
||||
// console.log('list: ', list)
|
||||
},
|
||||
xcq1 () {
|
||||
console.log(this.a)
|
||||
// this.$refs.tree.setChecked(100)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.popup{
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-item{
|
||||
width: 48%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
&-right{
|
||||
padding: 10px !important;
|
||||
.el-tag{
|
||||
margin: 5px 6px;
|
||||
}
|
||||
}
|
||||
&-title{
|
||||
color:#9b9b9b;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
padding: 10px;
|
||||
}
|
||||
&-content{
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
.borderItem{
|
||||
border-top: 1px solid @borderColor;
|
||||
}
|
||||
&-item:nth-last-child(1){
|
||||
border-bottom: 1px solid @borderColor;
|
||||
}
|
||||
&-item{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.isHasActive{
|
||||
color: rgba(196, 196, 196, 0.933) !important;
|
||||
border-left: 1px solid rgba(196, 196, 196, 0.933) !important;
|
||||
}
|
||||
.content{
|
||||
flex: 1;
|
||||
padding:0 10px;
|
||||
height: 100%;
|
||||
}
|
||||
.content:hover{
|
||||
background: rgb(238, 238, 238);
|
||||
}
|
||||
&-next{
|
||||
padding:0 10px;
|
||||
border-left: 1px solid @fontBlue;
|
||||
color: @fontBlue;
|
||||
height: 20px;
|
||||
}
|
||||
.el-checkbox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang='less'>
|
||||
.el-dialog{
|
||||
border-radius: 6px;
|
||||
}
|
||||
.el-dialog__header{
|
||||
border-bottom: 1px solid @borderColor;
|
||||
}
|
||||
.el-dialog__footer{
|
||||
border-top: 1px solid @borderColor;
|
||||
}
|
||||
.el-dialog__title{
|
||||
font-size: 16px;
|
||||
}
|
||||
.dialog-footer{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="process">
|
||||
流程设计
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.process{
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
模板设置
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
|
||||
</style>
|
||||
90
src/views/kpi/workbench/assessmentGroup/edit/index.vue
Normal file
90
src/views/kpi/workbench/assessmentGroup/edit/index.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="eidt">
|
||||
<div class="eidt-header">
|
||||
<div @click="handleChangle(1)" :class="{active:active===1}" class="a commonFont" ><span class="eidt-header-circle">1</span>基础设置</div>
|
||||
<div @click="handleChangle(2)" :class="{active:active===2}" class="a commonFont"><span class="eidt-header-circle">2</span>模板设计</div>
|
||||
<div @click="handleChangle(3)" :class="{active:active===3}" class="a commonFont"><span class="eidt-header-circle">3</span>流程设计</div>
|
||||
</div>
|
||||
<div class="eidt-content boderAndRadius">
|
||||
<basis v-show="active===1"/>
|
||||
<process v-show="active===2"/>
|
||||
<template-set v-show="active===3"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basis from './components/basis'
|
||||
import process from './components/process'
|
||||
import templateSet from './components/templateSet'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: 1
|
||||
}
|
||||
},
|
||||
components: {
|
||||
basis,
|
||||
process,
|
||||
templateSet
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {
|
||||
handleChangle (item) {
|
||||
this.active = item
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.eidt{
|
||||
position: relative;
|
||||
&-content{
|
||||
height: 600px;
|
||||
background: #fff;
|
||||
padding: 40px 28px;
|
||||
overflow: auto;
|
||||
}
|
||||
&-header{
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
width: 420px;
|
||||
height: @headerHeight;
|
||||
top: -(@headerHeight+30px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
flex:1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
letter-spacing:1px
|
||||
}
|
||||
.active{
|
||||
background: @fontBlue;
|
||||
color: #fff;
|
||||
}
|
||||
&-circle{
|
||||
margin: 0 4px;
|
||||
display: inline-block;
|
||||
border: 1px solid #eeeeee;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
src/views/kpi/workbench/assessmentGroup/groundTable.vue
Normal file
149
src/views/kpi/workbench/assessmentGroup/groundTable.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<!-- -->
|
||||
<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>
|
||||
@ -1,17 +1,21 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
考评组
|
||||
<div class="boderAndRadius ground">
|
||||
<ground-table />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import groundTable from './groundTable'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
groundTable
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
@ -22,6 +26,10 @@ export default {
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
<style lang='less' scoped>
|
||||
.ground {
|
||||
padding: 28px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user