workflow仿钉钉审批流程设置

workflow钉钉审批流程设置

workflow钉钉审批流程设置，支持vue2、vue3及react开发

开源地址vue3版本 https://github.com/StavinLi/Workflow-Vue3 github点个星吧！
开源地址vue2版本 https://github.com/StavinLi/Workflow github点个星吧！
开源地址react版本 https://github.com/StavinLi/Workflow-React github点个星吧！
预览地址 https://stavinli.github.io/Workflow/dist/index.html#/

项目介绍

UI钉钉风格
技术点

组件自调用+递归处理，按树状结局处理审批流程问题

主要功能点

界面缩放

<div class="zoom"><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>

节点设置（包括审批人、发起人、抄送人、条件设置）

<el-drawer title="审批人设置" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="saveApprover"> <div class="demo-drawer__content"><div class="drawer_content"><div class="approver_content"><el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType"><el-radio :label="1">指定成员</el-radio><el-radio :label="2">主管</el-radio><el-radio :label="4">发起人自选</el-radio><el-radio :label="5">发起人自己</el-radio><el-radio :label="7">连续多级主管</el-radio></el-radio-group>...

节点新增

<div class="add-node-btn"><el-popover placement="right-start" v-model="visible"><div class="add-node-popover-body"><a class="add-node-popover-item approver" @click="addType(1)"><div class="item-wrapper"><span class="iconfont"></span></div><p>审批人</p></a><a class="add-node-popover-item notifier" @click="addType(2)"><div class="item-wrapper"><span class="iconfont"></span></div><p>抄送人</p></a><a class="add-node-popover-item condition" @click="addType(4)"><div class="item-wrapper"><span class="iconfont"></span></div><p>条件分支</p></a></div>...

5.错误校验

 if (this.nodeConfig.type == 1) {this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)} else if (this.nodeConfig.type == 2) {this.nodeConfig.error = !this.copyerStr(this.nodeConfig)} else if (this.nodeConfig.type == 4) {for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1}}

6.模糊搜索匹配人员、职位、角色

<input type="text" placeholder="搜索成员" v-model="copyerSearchName" @input="getDebounceData($event,activeName)">
<input type="text" placeholder="搜索角色" v-model="approverRoleSearchName" @input="getDebounceData($event,2)">
<input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole">

7.支持多种条件设置

项目安装

git clone https://github.com/StavinLi/Workflow.git 点个赞吧！

项目运行

1.环境依赖 npm i
2.本地运行 npm run serve
3.打包运行 npm run build

历史记录

2020.6.10 新增码云预览地址
2020.12.29 新增选择条件种类；修复遮挡覆盖问题
2021.5.26 补齐添加人员功能
2021.5.31 补齐字段注释
2021.9.9 弹窗抽离
2022.3.26 vuex辅助函数

workflow仿钉钉审批流程设置相关推荐

EPIC 审批流程设置 BAdI：示例
审批流程设置 BAdI:示例电子支付集成(中国)可用于设置灵活的审批流程,以最大程度满足您的业务实践需求.通过实施[审批流程设置]业务加载项 (BAdI) 可实现此功能.借助该 BAdI,可以设置具 ...
解析approvalFlow——仿钉钉后台审批流程
文章目录 1. approval介绍 1.1 功能应用 1.2 项目地址 2. jsxPreview.vue应用 2.1 页面结构 2.2 表单解析 3. 功能拓展 3.1 数据回显 3.2 拓展样式 ...
对接钉钉审批_钉钉审批对接是什么-和钉钉审批对接相关的问题-阿里云开发者社区...
关于钉钉审批对接的搜索结果问题企业系统对接钉钉生成审批单,企业系统处理审批后,如何撤销钉钉审批单公司erp系统与钉钉对接,erp发起审批后同步到钉钉生成审批实例,在erp中用户处理了审批,如何 ...
金蝶云星空通过python插件向钉钉同步单据
一.方案由于办公协同系统负责审批事件为主,而传统ERP系统缺乏多样的审批流程,不能完成多人对一个事件进行审批同意实施,不方便采购.销售.出库申请单的审批,以及费用报销.出差.合同签订等申请,结合两者 ...
金蝶云星空与钉钉对接打通
目前金蝶CLOUD主要推CLOUD自带的工作流和云之家移动审批. 但大家都清楚,这两模式或这两个做的并不强大,CLOUD自带的工作流与真正的OA产品如泛微.金和.蓝凌.通达.致远啥的差很多,毕竟国内O ...
进销存软件中采购审批流程解决方案
采购审批流程是采购业务流程中的一个重要环节.但是,传统采购审批流程存在四大顽疾,影响了业务顺利进行,严重阻碍企业快速发展:1.纸质单据.人工跑腿,采购成本居高不下:2.流程繁琐.缺乏监管,采购审批进度 ...
进销存软件解决采购审批流程复杂的四大法宝
采购审批流程是采购业务流程中的一个重要环节.但是,传统采购审批流程存在四大顽疾,影响了业务顺利进行,严重阻碍企业快速发展:1.纸质单据.人工跑腿,采购成本居高不下:2.流程繁琐.缺乏监管,采购审批进度 ...
基于vue实现钉钉审批流程(仿)
做项目有个需求--实现审批流程,看了钉钉审批流感觉功能很强大,模仿其实现审批效果. 效果图没有找到windows录制视频转gif的软件,所以只能放一张静图了,有好的软件欢迎各位积极分享. 代码位置 ...
拆解钉钉流程审批功能：卡片式配置的审批流是怎样设计的？
有个客户要求我们做个定制开发,客户觉得钉钉的操作体验比较不错(用户使用的惯性),要求我们要实现钉钉的自动配置审批流程,不过幸不辱命,对比个钉钉的流程审批.表单配置的相关功能,做了个Java私有化的版本 ...

workflow仿钉钉审批流程设置

workflow钉钉审批流程设置

项目介绍

项目安装

项目运行

历史记录

workflow仿钉钉审批流程设置相关推荐

最新文章

热门文章