优化
This commit is contained in:
xiongchengqiang
parent
ed728518e1
commit
bb87ee9ef0
@ -1,65 +1,89 @@
|
||||
<!-- 目标确认组件 -->
|
||||
<template>
|
||||
<div class="ProcessList">
|
||||
<div class="ProcessList-top">
|
||||
<div class="ProcessList-top-item" v-for="(i,index) in handleGetList(list)" :key="i.id">
|
||||
<div class="itemH">
|
||||
<div v-if="i.id !==9999" @click="handleClick(i)" class="ProcessList-top-item-contant commonFont" :class="{active:i.isCick}">
|
||||
<span>{{i.name}}</span>
|
||||
<span>{{i.label}}</span>
|
||||
<i @click.stop="handleDelete(i)" class="el-icon-close close"></i>
|
||||
</div>
|
||||
<div v-if="index+1!==list.length && list.length!==0" class="process-title-item-img">
|
||||
<img src="./imgs/right.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ProcessList">
|
||||
<div class="ProcessList-top">
|
||||
<div class="ProcessList-top-item"
|
||||
v-for="(i,index) in handleGetList(list)"
|
||||
:key="i.id">
|
||||
<div class="itemH">
|
||||
<div v-if="i.id !==9999"
|
||||
@click="handleClick(i)"
|
||||
class="ProcessList-top-item-contant commonFont"
|
||||
:class="{active:i.isCick}">
|
||||
<span>{{i.name}}</span>
|
||||
<span>{{i.label}}</span>
|
||||
<i @click.stop="handleDelete(i)"
|
||||
class="el-icon-close close"></i>
|
||||
</div>
|
||||
<div class='addP'>
|
||||
<i @click="handleAdd" class="el-icon-circle-plus-outline add"></i>
|
||||
<div v-if="index+1!==list.length && list.length!==0"
|
||||
class="process-title-item-img">
|
||||
<img src="./imgs/right.png"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- v-if="JSON.stringify(itemInfo) !== '{}'" -->
|
||||
<div v-if="JSON.stringify(itemInfo) !== '{}'" class="ProcessList-center">
|
||||
<div class="ProcessList-center-zhixingren commonFont">
|
||||
<span>执行人：</span>
|
||||
<el-radio-group v-model="itemInfo.isActive">
|
||||
<el-radio :label="1">主管（指定一级）</el-radio>
|
||||
<el-radio :label="0">指定成员</el-radio>
|
||||
<el-radio :label="-1">被考核人自己</el-radio>
|
||||
</el-radio-group>
|
||||
<div v-if="itemInfo.isActive!==0 && itemInfo.isActive!==-1" style="padding:30px 0 0 20px;">
|
||||
<span>被考评人的</span>
|
||||
<el-select size="mini" style="width:100px;" v-model="itemInfo.optType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-if="itemInfo.isActive===0" style="padding:30px 0 0 20px;">
|
||||
<el-button size="mini" @click="itemInfo.isShow=true" plain>选择成员</el-button>
|
||||
<span style="font-size:14px;padding:0 0 0 10px;">{{itemInfo.name}}</span>
|
||||
</div>
|
||||
<getpersonl v-if="itemInfo.isShow" :value.sync='itemInfo.optIds' :isShow.sync='itemInfo.isShow' :showDataList.sync='itemInfo.list'/>
|
||||
<div v-if="itemInfo.isActive!==-1" style="padding:20px 0 0 0 ">
|
||||
<span>当执行人为多人时的处理方式：</span>
|
||||
<div style="padding:10px 0 0 20px">
|
||||
<el-radio-group v-model="itemInfo.stepType">
|
||||
<el-radio :label="0">依次确认</el-radio>
|
||||
<el-radio :label="1">或签（一名审批人同意或拒绝即可）</el-radio>
|
||||
<el-radio :label="2">会签（所有人同时收到消息，需所有人都同意 ）</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:20px 0 0 0 " v-for="i in itemInfo.roleDtos" :key="i.id">
|
||||
<el-checkbox v-if="i.type !== 1" @change="handleChang(i)" v-model="i.checked">{{i.roleName}}</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='addP'>
|
||||
<i @click="handleAdd"
|
||||
class="el-icon-circle-plus-outline add"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- v-if="JSON.stringify(itemInfo) !== '{}'" -->
|
||||
<div v-if="JSON.stringify(itemInfo) !== '{}'"
|
||||
class="ProcessList-center">
|
||||
<div class="ProcessList-center-zhixingren commonFont">
|
||||
<span>执行人：</span>
|
||||
<el-radio-group v-model="itemInfo.isActive">
|
||||
<el-radio :label="1">主管（指定一级）</el-radio>
|
||||
<el-radio :label="0">指定成员</el-radio>
|
||||
<el-radio :label="-1">被考核人自己</el-radio>
|
||||
</el-radio-group>
|
||||
<div v-if="itemInfo.isActive!==0 && itemInfo.isActive!==-1"
|
||||
style="padding:30px 0 0 20px;">
|
||||
<span>被考评人的</span>
|
||||
<el-select size="mini"
|
||||
style="width:100px;"
|
||||
v-model="itemInfo.optType"
|
||||
placeholder="请选择">
|
||||
<el-option v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-if="itemInfo.isActive===0"
|
||||
style="padding:30px 0 0 20px;">
|
||||
<el-button size="mini"
|
||||
@click="itemInfo.isShow=true"
|
||||
plain>选择成员</el-button>
|
||||
<span style="font-size:14px;padding:0 0 0 10px;">{{itemInfo.name}}</span>
|
||||
</div>
|
||||
<getpersonl v-if="itemInfo.isShow"
|
||||
:value.sync='itemInfo.optIds'
|
||||
:isShow.sync='itemInfo.isShow'
|
||||
:showDataList.sync='itemInfo.list' />
|
||||
<div v-if="itemInfo.isActive!==-1"
|
||||
style="padding:20px 0 0 0 ">
|
||||
<span>当执行人为多人时的处理方式：</span>
|
||||
<div style="padding:10px 0 0 20px">
|
||||
<el-radio-group v-model="itemInfo.stepType">
|
||||
<el-radio :label="0">依次确认</el-radio>
|
||||
<el-radio :label="1">或签（一名审批人同意或拒绝即可）</el-radio>
|
||||
<el-radio :label="2">会签（所有人同时收到消息，需所有人都同意 ）</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:20px 0 0 0 "
|
||||
v-for="i in itemInfo.roleDtos"
|
||||
:key="i.id">
|
||||
<el-checkbox v-if="i.type !== 1"
|
||||
@change="handleChang(i)"
|
||||
v-model="i.checked">{{i.roleName}}</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -120,7 +144,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
beforeMount () { },
|
||||
created () {
|
||||
this.list = this.handleListFor(this.info)
|
||||
},
|
||||
@ -300,32 +324,32 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.ProcessList{
|
||||
.addP{
|
||||
.ProcessList {
|
||||
.addP {
|
||||
padding-bottom: 20px;
|
||||
.center()
|
||||
.center();
|
||||
}
|
||||
&-top{
|
||||
&-top {
|
||||
padding: 20px 0 0 0;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.itemH{
|
||||
.itemH {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.add{
|
||||
font-size: 30px;
|
||||
color: #c5c5c5;
|
||||
margin:0 4px ;
|
||||
}
|
||||
&-item{
|
||||
.add {
|
||||
font-size: 30px;
|
||||
color: #c5c5c5;
|
||||
margin: 0 4px;
|
||||
}
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&-contant{
|
||||
&-contant {
|
||||
position: relative;
|
||||
width: 136px;
|
||||
height: 56px;
|
||||
@ -336,10 +360,10 @@ export default {
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
span:nth-child(1){
|
||||
span:nth-child(1) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.close{
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 4px;
|
||||
@ -347,30 +371,28 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&-contant:hover{
|
||||
background: rgb(236, 246, 253);
|
||||
.close{
|
||||
&-contant:hover {
|
||||
background: rgb(236, 246, 253);
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
.active {
|
||||
background: @fontBlue;
|
||||
color: #fff;
|
||||
}
|
||||
&-img{
|
||||
&-img {
|
||||
width: 37px;
|
||||
height: 19px;
|
||||
margin: 0 10px;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
&-center{
|
||||
&-center {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,34 @@
|
||||
<!-- 录入 -->
|
||||
<template>
|
||||
<div class="entry">
|
||||
<div class="commonFont" style="padding:20px 0;">
|
||||
<span>启用：</span>
|
||||
<el-switch
|
||||
v-model="form.chartDetails.status" :disabled='info.status===0' active-color="#3ba1ff" :active-value='1' :inactive-value='0' inactive-color="#dcdfe6">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-if="form.chartDetails.status" class="commonFont" style="padding:20px 0;">由谁录入</div>
|
||||
<div v-if="form.chartDetails.status" class="commonFont" style="padding:20px 0;">
|
||||
<span>执行人：</span>
|
||||
<el-radio v-model="form.chartDetails.recordSimpleDtos[0].optType" :label="-1">被考核人</el-radio>
|
||||
</div>
|
||||
<div class="entry">
|
||||
<div class="commonFont"
|
||||
style="padding:20px 0;">
|
||||
<span>启用：</span>
|
||||
<el-switch v-model="form.chartDetails.status"
|
||||
:disabled='info.status===0'
|
||||
active-color="#3ba1ff"
|
||||
:active-value='1'
|
||||
:inactive-value='0'
|
||||
inactive-color="#dcdfe6">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-if="form.chartDetails.status"
|
||||
class="commonFont"
|
||||
style="padding:20px 0;">由谁录入</div>
|
||||
<div v-if="form.chartDetails.status"
|
||||
class="commonFont"
|
||||
style="padding:20px 0;">
|
||||
<span>执行人：</span>
|
||||
<el-radio v-model="form.chartDetails.recordSimpleDtos[0].optType"
|
||||
:label="-1">被考核人</el-radio>
|
||||
<div style="padding:20px 0 0 0 "
|
||||
v-for="i in listinfo"
|
||||
:key="i.id">
|
||||
<el-checkbox v-if="i.type !== 1"
|
||||
v-model="i.checked">{{i.roleName}}</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -20,6 +36,7 @@ export default {
|
||||
props: ['info'],
|
||||
data () {
|
||||
return {
|
||||
listinfo: [],
|
||||
form: {
|
||||
chartDetails: {
|
||||
status: '',
|
||||
@ -34,7 +51,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
beforeMount () { },
|
||||
mounted () {
|
||||
this.form = Object.assign({}, this.info)
|
||||
this.form.chartDetails.recordSimpleDtos = this.form.chartDetails.recordSimpleDtos.length ? this.form.chartDetails.recordSimpleDtos : [
|
||||
@ -42,13 +59,26 @@ export default {
|
||||
optType: -1
|
||||
}
|
||||
]
|
||||
this.listinfo = this.form.roleDtos.map(j => {
|
||||
j.checked = this.form.chartDetails.recordSimpleDtos[0].roleIds ? this.form.chartDetails.recordSimpleDtos[0].roleIds.includes(String(j.roleId)) : false
|
||||
return j
|
||||
})
|
||||
console.log(this.form.roleDtos)
|
||||
},
|
||||
methods: {
|
||||
handleIsEmit (n) {
|
||||
const roleIds = this._.compact(this.listinfo.map(j => {
|
||||
if (j.type !== 1 && j.checked) return j.roleId
|
||||
})).join(',')
|
||||
n.chartDetails.recordSimpleDtos[0].roleIds = roleIds
|
||||
this.$emit('update:info', Object.assign({}, n, { label: n.chartDetails.status ? '' : '已禁用' }))
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
watch: {
|
||||
form: {
|
||||
deep: true,
|
||||
handler (n, o) {
|
||||
this.$emit('update:info', Object.assign({}, this.info, this.form, {label: n.chartDetails.status ? '' : '已禁用'}))
|
||||
this.handleIsEmit(JSON.parse(JSON.stringify(n)))
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
@ -59,7 +89,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.entry{
|
||||
|
||||
.entry {
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user