对于一些审批流程，可能会用到这个功能，通过这样一层层的加下来，弄一个审批流程的数组，然后根据这个来审核是否都通过审批，这里是简单的弄一个样式的demo，功能自由发挥
javascript
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<!-- 公共css文件 -->
<link rel="stylesheet" href="/statics/css/common/common.css">
<!-- 公共js -->
<script src="/statics/vue_element/common.js"></script>
<script src="/statics/js/dialog.js"></script>
<!-- vue部分依赖 -->
<link rel="stylesheet" href="/statics/vue_element/element.css">
<script src="/statics/vue_element/vue.js"></script>
<script src="/statics/vue_element/element.js"></script>
<script src="/statics/vue_element/axios.js"></script>
<title>流程设计</title>
</head>
<body>
<div id="app">
<el-card style="display: flex;justify-content: center;height: 800px;overflow: auto;padding: 10px;">
<!-- 流程结构 -->
<div v-for="(item,index) in liucheng_zong" :key="index" style="margin-bottom: 5px;">
<div style="width: 240px;">
<div :class="item.type=='fqr'?'fqr_title':'spr_title'">
<div>{{item.title}}</div>
<i class="el-icon-error" style="cursor: pointer;" @click="delLc(index)"
v-if="item.type!=='fqr'"></i>
</div>
<div class="value" @click="openLcDrawer">
<div class="valueInfo">
<div>{{item.value}}</div>
<i class="el-icon-arrow-right"></i>
</div>
<!-- <el-cascader :options="options" :props="{ checkStrictly: true }" clearable size="mini"
style="width: 100%;" v-model="item.value"></el-cascader> -->
</div>
</div>
<!-- 添加流程 -->
<div style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
<div style="font-size: 20px;">丨</div>
<el-button type="primary" icon="el-icon-plus" circle size="small" @click="addLc(index)"></el-button>
<div style="font-size: 20px;margin-top: -3px;">↓</div>
</div>
</div>
<!-- 结束流程 -->
<div style="display: flex;justify-content: center;margin-top: 20px;">
<div class="jieshu">结束流程</div>
</div>
</el-card>
<!-- 保存流程 -->
<div style="display: flex;justify-content: center;margin-top: 20px;">
<el-button type="primary" size="small" @click="save" style="width: 200px;">保存</el-button>
</div>
<!-- 右抽屉：流程详细操作 -->
<el-drawer title="流程设置" :visible.sync="lcDrawer" direction="rtl" size="40%">
<div>
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
<el-tab-pane label="设置审批人" name="1">
<div style="padding: 10px;">
<el-radio-group v-model="spr_user">
<el-radio :label="1">指定成员</el-radio>
<el-radio :label="2">主管</el-radio>
<el-radio :label="3">发起人自选</el-radio>
</el-radio-group>
<div>
<el-button type="primary" size="mini" style="width: 100px;margin-top: 15px;"
icon="el-icon-plus">添加成员</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="操作权限" name="2"></el-tab-pane>
</el-tabs>
</div>
</el-drawer>
</div>
</body>
<script>
let v = new Vue({
el: '#app',
data() {
return {
lcDrawer: false,
activeName: '1',
spr_user: 1,//审批人选择
liucheng_zong: [
{
title: '发起人',
value: '所有人',
type: 'fqr'
}
],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}]
};
},
methods: {
// tabs切换
handleClick(e) {
console.log(e, 'eee');
},
// 保存流程
save() {
console.log(this.liucheng_zong, 'liucheng_zong');
},
// 添加流程
addLc(index) {
this.liucheng_zong.splice(index + 1, 0, {
title: '审批人',
value: '李四',
type: 'spr'
})
},
// 删除流程
delLc(index) {
this.liucheng_zong.splice(index, 1)
},
// 打开流程设计抽屉
openLcDrawer() {
this.lcDrawer = true
}
}
})
</script>
<style scoped>
.fqr_title {
padding: 6px 10px;
background-color: #3e4c6b;
color: #fff;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
display: flex;
justify-content: space-between;
}
.spr_title {
padding: 6px 10px;
background-color: #e68439;
color: #fff;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
display: flex;
justify-content: space-between;
}
.value {
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.valueInfo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
cursor: pointer;
}
.jieshu {
padding: 6px 10px;
background-color: #cecbcb;
border-radius: 12px;
color: #fff;
}
</style>
</html>