126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<!-- -->
|
||
<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-right">
|
||
<el-button type="primary" @click="handSaveBasisc">保 存</el-button>
|
||
</div>
|
||
<div class="eidt-content boderAndRadius">
|
||
<basis :basisForm.sync='basisForm' v-show="active===1"/>
|
||
<template-set v-show="active===2"/>
|
||
<process v-show="active===3"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import basis from './components/basis'
|
||
import process from './components/process'
|
||
import templateSet from './components/templateSet'
|
||
import {saveBaseSet} from '@/api/workbench'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
active: 1,
|
||
// 基础
|
||
basisForm: {
|
||
id: 8,
|
||
counts: '', // 参与考核人数
|
||
depIds: '', // 参与部门id，逗号隔开
|
||
managerIds: '395', // 绩效管理员ID，system_user,id，逗号隔开
|
||
outIds: '', // 排除人员ids，逗号隔开
|
||
staffIds: '', // 参与考核员工staff_id，逗号隔开.
|
||
name: ''
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
basis,
|
||
process,
|
||
templateSet
|
||
},
|
||
computed: {},
|
||
beforeMount () {},
|
||
mounted () {
|
||
|
||
},
|
||
methods: {
|
||
handleChangle (item) {
|
||
this.active = item
|
||
},
|
||
async handSaveBasisc () {
|
||
console.log('this.basisForm: ', this.basisForm)
|
||
try {
|
||
let res = await saveBaseSet(this.basisForm)
|
||
this.basisForm = res
|
||
console.log('res: ', res)
|
||
} catch (error) {
|
||
this.$message.error(error.msg)
|
||
}
|
||
}
|
||
},
|
||
watch: {}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang='less' scoped>
|
||
.eidt{
|
||
position: relative;
|
||
&-right{
|
||
position: absolute;
|
||
z-index: 50;
|
||
top: -(@headerHeight+30px);
|
||
right: 0;
|
||
height: @headerHeight;
|
||
.center()
|
||
}
|
||
&-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>
|