<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_content">
|
<div class="item active">
|
<div class="head">发起人</div>
|
<div class="content">访客</div>
|
</div>
|
<div class="arrows">
|
<div class="line"></div>
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</div>
|
<template v-for="(item, index) in apprList">
|
<div
|
class="item yellow"
|
:class="{ active: item.active }"
|
@click="flowClick(index)"
|
:key="index"
|
>
|
<div class="head">审批人</div>
|
<div class="content">
|
<div>被访人</div>
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</div>
|
<div class="arrows" :key="index">
|
<div class="line"></div>
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
<i
|
v-if="apprList.length - 1 === index"
|
@click="handleAddAppr()"
|
class="el-icon-circle-plus add"
|
></i>
|
</div>
|
</template>
|
<template v-if="false">
|
<div
|
class="item yellow"
|
:class="{ active: activeSel === 'one' }"
|
@click="flowClick('one')"
|
>
|
<div class="head">审批人</div>
|
<div class="content">
|
<div>李琳-综合科</div>
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</div>
|
<div class="arrows">
|
<div class="line"></div>
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</div>
|
</template>
|
<div
|
class="item blue"
|
:class="{ active: activeSel === 'two' }"
|
@click="flowClick('two')"
|
>
|
<div class="head">抄送人</div>
|
<div class="content">
|
<div>请选择</div>
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</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="df_ac">
|
<span class="mr10"><strong>允许修改申请项</strong></span>
|
<el-switch v-model="param.aa" active-value="1" inactive-value="0">
|
</el-switch>
|
</div>
|
<div class="df_ac mt10">
|
<span class="mr20">选择修改项</span>
|
<el-select
|
v-model="param.list"
|
collapse-tags
|
multiple
|
placeholder="请选择,多选"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</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 {
|
apprList: [
|
{ name: '', active: false },
|
{ name: '', active: false }
|
],
|
|
value: '',
|
radio: 0,
|
radio1: 0,
|
checked: '',
|
|
param: {},
|
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'
|
}
|
]
|
}
|
]
|
}
|
],
|
options: [{
|
value: '选项1',
|
label: '黄金糕'
|
}, {
|
value: '选项2',
|
label: '双皮奶'
|
}, {
|
value: '选项3',
|
label: '蚵仔煎'
|
}, {
|
value: '选项4',
|
label: '龙须面'
|
}, {
|
value: '选项5',
|
label: '北京烤鸭'
|
}],
|
selData: []
|
}
|
},
|
methods: {
|
flowClick (i) {
|
this.apprList.forEach((item, index) => {
|
if (i === index) {
|
item.active = true
|
} else {
|
item.active = false
|
}
|
})
|
},
|
handleAddAppr () {
|
this.apprList.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_content {
|
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 #4456ac !important;
|
}
|
.yellow {
|
background: #e89e42 !important;
|
}
|
.blue {
|
background: #5094f3 !important;
|
}
|
.arrows {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: relative;
|
.line {
|
width: 1px;
|
height: 60px;
|
background-color: #ccc;
|
}
|
.add {
|
font-size: 40px;
|
color: #2080f7;
|
position: absolute;
|
cursor: pointer;
|
z-index: 999;
|
top: 10px;
|
}
|
img {
|
width: 12px;
|
}
|
}
|
.item {
|
width: 200px;
|
cursor: pointer;
|
border: 2px solid #f7f7f7;
|
height: 80px;
|
background: #4456ac;
|
border-radius: 2px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
.head {
|
height: 32px;
|
line-height: 32px;
|
padding: 2px 12px;
|
color: #fff;
|
}
|
.content {
|
flex: 1;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
padding: 0 12px;
|
justify-content: space-between;
|
}
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
.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>
|
