基于vue实现钉钉审批流程(仿)

做项目有个需求——实现审批流程，看了钉钉审批流感觉功能很强大，模仿其实现审批效果。

效果图

没有找到windows录制视频转gif的软件,所以只能放一张静图了，有好的软件欢迎各位积极分享。

代码位置

整个流程上传至github:https://github.com/ylqymm/workFlow

步骤

初始化

workFlow.vue:

<div class="approval-flow fd-nav-content"><div class="dingflow-design"><div class="zoom flex"><div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div><span>{{nowVal}}%</span><div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div></div><div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"><div class="end-node flex"><p>开始</p></div><nodeWrap v-bind="$attrs" :nodeConfig="nodeConfig" :dataFields="dataFields"></nodeWrap><div class="end-node flex"><p>结束</p></div></div></div>
</div>

添加节点

addNode.vue:

<div class="add-node-btn-box"><div class="add-node-btn"><el-popover placement="right-start" popper-class="add-node-popover" v-model="visible"><div class="add-node-popover-body"><div class="add-node-popover-item approver" @click="addType(1)">   <!-- 添加事件 --><div class="item-wrapper"><img src="../assets/img/审批人.png" alt="" class="img-style"></div><p>审批人</p></div><div class="add-node-popover-item notifier" @click="addType(2)"><div class="item-wrapper"><img src="../assets/img/抄送人.png" alt="" class="img-style"></div><p>抄送人</p></div><div class="add-node-popover-item condition" @click="addType(4)"><div class="item-wrapper"><img src="../assets/img/条件.png" alt="" class="img-style"></div><p>条件分支</p></div></div><button class="btn" type="button" slot="reference"><i style="color:#fff" class="el-icon-plus"></i></button></el-popover></div></div>

弹框

nodeWrap.vue文件，代码不再粘贴，具体见github。
注意：添加节点自动出现弹框代码如下：
条件设置
保存
- 保存前对数据进行非空校验
- 将设置好的流程保存/调接口，下面打印的数据是向后端传的数据:

相关代码不再粘贴，想要了解的进入链接git clone代码运行自行研究,有问题欢迎指出❤️❤️❤️

基于vue实现钉钉审批流程(仿)相关推荐

基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
解析approvalFlow——仿钉钉后台审批流程
文章目录 1. approval介绍 1.1 功能应用 1.2 项目地址 2. jsxPreview.vue应用 2.1 页面结构 2.2 表单解析 3. 功能拓展 3.1 数据回显 3.2 拓展样式 ...
基于android的防抖音直播,基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能...
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
基于vue开发的移动端（仿蘑菇街，淘宝）电商项目
基于vue.js的知识点(webpack,Vuex,Vue-router,axios)开发电商手机网站项目组件库:vantUI.ElementUI 码云地址:https://gitee.com/YG ...
基于Vue+springboot+websocket实现的简短仿微信web聊天室（私聊和群聊功能）（可在线预览）
写目录一.界面展示二.介绍一.界面展示之前闲着有空就给自己的个人博客搭了一些附加功能,聊天室也是其中之一,简单的实现了私聊.群聊功能,可以发送emoji表情和图片等,项目已经部署在www.tc ...
对接钉钉审批_钉钉审批对接是什么-和钉钉审批对接相关的问题-阿里云开发者社区...
关于钉钉审批对接的搜索结果问题企业系统对接钉钉生成审批单,企业系统处理审批后,如何撤销钉钉审批单公司erp系统与钉钉对接,erp发起审批后同步到钉钉生成审批实例,在erp中用户处理了审批,如何 ...
金蝶云星空通过python插件向钉钉同步单据
一.方案由于办公协同系统负责审批事件为主,而传统ERP系统缺乏多样的审批流程,不能完成多人对一个事件进行审批同意实施,不方便采购.销售.出库申请单的审批,以及费用报销.出差.合同签订等申请,结合两者 ...
金蝶云星空与钉钉对接打通
目前金蝶CLOUD主要推CLOUD自带的工作流和云之家移动审批. 但大家都清楚,这两模式或这两个做的并不强大,CLOUD自带的工作流与真正的OA产品如泛微.金和.蓝凌.通达.致远啥的差很多,毕竟国内O ...
审批流程展示html,Web企业在线审批流程系统
每天记录学习,每天会有好心情.*^_^* 最近了解了基于Web的企业在线审批流程系统项目,在这个平台记录一下这个基于Web的企业在线审批流程系统项目,方便以后再次使用或学习的时候能够及时的翻阅.在完成 ...

基于vue实现钉钉审批流程(仿)

效果图

代码位置

步骤

基于vue实现钉钉审批流程(仿)相关推荐

最新文章

热门文章