<template>
|
<TableLayout>
|
<template v-slot:table-wrap>
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="普通访客" name="first"></el-tab-pane>
|
<el-tab-pane label="施工访客" name="second"></el-tab-pane>
|
</el-tabs>
|
<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" @click="selStaff">+添加</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>
|
<!-- -->
|
<el-dialog title="选择员工" :visible.sync="isShowTransfer" width="800px">
|
<tree-transfer
|
v-model="param.menuIds"
|
:title="['未选', '已选']"
|
:from_data="fromData"
|
:to_data="selData"
|
:defaultProps="{ label: 'label' }"
|
mode="transfer"
|
height="500px"
|
filter
|
openAll
|
ref="treeTransfer"
|
>
|
</tree-transfer>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowTransfer = false">取 消</el-button>
|
<el-button type="primary" @click="isShowTransfer = false"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
import treeTransfer from 'el-tree-transfer'
|
export default {
|
name: 'config',
|
components: {
|
TableLayout,
|
treeTransfer
|
},
|
data() {
|
return {
|
list: [
|
{
|
name: '',
|
active: false
|
}
|
],
|
value: '',
|
options: [],
|
radio: 0,
|
radio1: 0,
|
checked: '',
|
checkList: [],
|
|
param: {},
|
activeName: 'first',
|
isShowTransfer: false,
|
fromData: [
|
{
|
id: '1',
|
pid: 0,
|
label: '一级 1',
|
children: [
|
{
|
id: '1-1',
|
pid: '1',
|
label: '二级 1-1',
|
disabled: true,
|
children: []
|
},
|
{
|
id: '1-2',
|
pid: '1',
|
label: '二级 1-2',
|
children: [
|
{
|
id: '1-2-1',
|
pid: '1-2',
|
children: [],
|
label: '二级 1-2-1'
|
},
|
{
|
id: '1-2-2',
|
pid: '1-2',
|
children: [],
|
label: '二级 1-2-2'
|
}
|
]
|
}
|
]
|
}
|
],
|
selData: []
|
}
|
},
|
methods: {
|
add() {
|
this.list.push({
|
name: '',
|
active: false
|
})
|
},
|
selStaff() {
|
this.isShowTransfer = true
|
},
|
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>
|
