<template>
|
<TableLayout>
|
<template v-slot:table-wrap>
|
<div class="config">
|
<div class="config_list">
|
<div class="config_list_head">
|
<span>配置流程</span>
|
<el-button style="background: #435EBE;" type="primary">发布</el-button>
|
</div>
|
<div class="config_list_list">
|
<div class="item">
|
<div class="item_label">发起人</div>
|
<div class="item_child">
|
<div class="item_child_label">程春林</div>
|
<div class="item_child_val">访客</div>
|
</div>
|
<div class="item_down">
|
<div class="item_down_x">
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div :class="item.active ? 'item yellow active' : 'item yellow'" v-for="(item, index) in list" :key="index" @click="seleItem(index)">
|
<div class="item_label">审批人</div>
|
<div class="item_child" style="cursor: pointer;">
|
<img class="item_child_right" src="@/assets/images/ar_more@2x.png" />
|
<div class="item_child_label">被访人</div>
|
<div class="item_child_val">访客</div>
|
</div>
|
<div class="item_down">
|
<img class="item_down_add" v-if="list.length - 1 === index" src="@/assets/images/peizhi_add@2x.png" @click.stop="add" />
|
<div class="item_down_x">
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="item blue" style="height: 81px;">
|
<div class="item_label">抄送人</div>
|
<div class="item_child" style="cursor: pointer;height: 40px;">
|
<img class="item_child_right" src="@/assets/images/ar_more@2x.png" />
|
<div class="item_child_val" style="margin-top: 3px;">请设置抄送人</div>
|
</div>
|
<div class="item_down">
|
<div class="item_down_x">
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
<span>流程结束</span>
|
</div>
|
</div>
|
</div>
|
<div class="config_data">
|
<div class="config_data_item">
|
<div class="config_data_item_label">
|
选择该节点的审批人
|
</div>
|
<el-radio-group v-model="radio">
|
<el-radio :label="0">被访人</el-radio>
|
<el-radio :label="1">指定人员</el-radio>
|
<el-radio :label="2">部门主管</el-radio>
|
</el-radio-group>
|
<div class="config_data_item_reviewed" v-if="radio === 1">
|
<div class="config_data_item_reviewed_label">
|
<span>指定审核人</span>
|
<span>不超过20人</span>
|
</div>
|
<div class="config_data_item_reviewed_content">
|
<div class="config_data_item_reviewed_content_item">
|
<span>栓子哥</span>
|
<i class="el-icon-close"></i>
|
</div>
|
<span class="add">+添加</span>
|
</div>
|
</div>
|
<div class="config_data_item_reviewed" v-if="radio === 2">
|
<div class="config_data_item_reviewed_label">
|
<span>部门主管</span>
|
</div>
|
<div class="config_data_item_reviewed_r">
|
<span>被访人的</span>
|
<el-select v-model="value" placeholder="请选择" style="margin: 0 20px 0 10px;">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-checkbox v-model="checked">找不到主管时，由上级主管代审核</el-checkbox>
|
</div>
|
</div>
|
</div>
|
<div class="config_data_item" v-if="radio !== 0">
|
<div class="config_data_item_label">
|
审批方式
|
<span>审批人为多个时，采用的审批方式</span>
|
</div>
|
<el-radio-group v-model="radio1" style="display: flex; flex-direction: column;">
|
<el-radio :label="0" style="margin-bottom: 20px;">或签（其中一名审批人同意或拒绝即可）</el-radio>
|
<el-radio :label="1">会签（所有审批人都同意才可通过）</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="config_data_item" v-if="radio === 2">
|
<div class="config_data_item_label">
|
审批人为空时
|
</div>
|
<el-checkbox-group v-model="checkList" style="display: flex; flex-direction: column;">
|
<el-checkbox label="复选框 A" style="margin-bottom: 20px;"></el-checkbox>
|
<el-checkbox label="复选框 B" style="margin-bottom: 20px;"></el-checkbox>
|
<el-checkbox label="复选框 C"></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="config_data_submit" v-if="radio !== 0">
|
<el-button style="background: #435EBE;" type="primary">保持配置项</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
export default {
|
name: 'config',
|
components: { TableLayout },
|
data () {
|
return {
|
list: [
|
{
|
name: '',
|
active: false
|
}
|
],
|
value: '',
|
options: [],
|
radio: 0,
|
radio1: 0,
|
checked: '',
|
checkList: []
|
}
|
},
|
methods: {
|
add () {
|
this.list.push({
|
name: '',
|
active: false
|
})
|
},
|
seleItem (i) {
|
this.list.forEach((item, index) => {
|
item.active = index === i
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.config {
|
width: 100%;
|
padding-bottom: 20px;
|
box-sizing: border-box;
|
height: calc(100vh - 140px);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.config_list {
|
width: 543px;
|
height: 100%;
|
flex-shrink: 0;
|
border-radius: 2px;
|
padding: 20px;
|
box-sizing: border-box;
|
border: 1px solid #EEEEEE;
|
background: #F7F7F7;
|
.config_list_head {
|
width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
font-size: 18px;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
.config_list_list {
|
width: 100%;
|
height: calc(100% - 40px);
|
padding-top: 45px;
|
box-sizing: border-box;
|
overflow-y: scroll;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
&::-webkit-scrollbar {
|
width: 0;
|
}
|
.active {
|
border: 2px solid #E84A08 !important;
|
}
|
.yellow {
|
background: #EE8921 !important;
|
}
|
.blue {
|
background: #435EBE !important;
|
}
|
.footer {
|
width: 106px;
|
height: 41px;
|
background: #FFFFFF;
|
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
|
border-radius: 25px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
span {
|
font-size: 15px;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
.item {
|
width: 200px;
|
height: 102px;
|
background: #7999D9;
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0.1);
|
border-radius: 4px;
|
padding: 4px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
position: relative;
|
margin-bottom: 60px;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.item_down {
|
position: absolute;
|
bottom: -60px;
|
width: 100%;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.item_down_add {
|
width: 46px;
|
height: 46px;
|
position: absolute;
|
z-index: 3;
|
top: 5px;
|
cursor: pointer;
|
}
|
.item_down_x {
|
width: 1px;
|
height: 60px;
|
background: #B2B2B2;
|
position: relative;
|
img {
|
position: absolute;
|
bottom: 0;
|
left: -4px;
|
width: 9px;
|
height: 9px;
|
}
|
}
|
}
|
.item_label {
|
width: 100%;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
font-size: 15px;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
.item_child {
|
width: 100%;
|
height: 61px;
|
padding: 10px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 4px;
|
position: relative;
|
.item_child_right {
|
position: absolute;
|
right: 10px;
|
top: 13px;
|
width: 8px;
|
height: 14px;
|
}
|
.item_child_label {
|
font-size: 14px;
|
font-weight: 400;
|
color: #333333;
|
margin-bottom: 4px;
|
}
|
.item_child_val {
|
font-size: 12px;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
.config_data {
|
flex: 1;
|
height: 100%;
|
margin-left: 20px;
|
.config_data_submit {
|
margin-top: 50px;
|
}
|
.config_data_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30px;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.config_data_item_label {
|
font-size: 16px;
|
font-weight: 500;
|
color: #222222;
|
margin-bottom: 20px;
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
color: #999999;
|
margin-left: 10px;
|
}
|
}
|
.config_data_item_reviewed {
|
width: 100%;
|
margin-top: 20px;
|
.config_data_item_reviewed_r {
|
margin-top: 10px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
span {
|
flex-shrink: 0;
|
font-size: 14px;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
.config_data_item_reviewed_label {
|
display: flex;
|
align-items: center;
|
span {
|
&:nth-child(1) {
|
font-size: 14px;
|
font-weight: 400;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 12px;
|
font-weight: 400;
|
color: #999999;
|
margin-left: 8px;
|
}
|
}
|
}
|
.config_data_item_reviewed_content {
|
width: 400px;
|
margin-top: 10px;
|
height: 110px;
|
padding: 12px;
|
box-sizing: border-box;
|
border-radius: 2px;
|
border: 1px solid #DFE2E8;
|
display: flex;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
.add {
|
font-size: 12px;
|
font-weight: 400;
|
color: #435EBE;
|
cursor: pointer;
|
margin-top: 3px;
|
}
|
.config_data_item_reviewed_content_item {
|
padding: 3px 5px;
|
background: #F4F7FC;
|
border-radius: 2px;
|
box-sizing: border-box;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
color: #333333;
|
}
|
i {
|
color: #949BA2;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
