Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)

Easter79 等级 191 0 0
标签:

Vue 仿钉钉流程图(流程节点绘制 vue+Ant Design of Vue)

仿钉钉流程图 Api包括:一维数组传参,获取单节点数据,返回所有节点组成的一位数组 生成每个节点的父节点Id集合

很多公司后台管理系统都需要画流程图,功能大同小异,所以,仿照钉钉管理系统 花了一个流程图 效果如下 Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)

以下为此插件 入口与出口的数据结构,暴露的事件以及公共类所在目录及修改方式 (小部分需要修改源代码,不难找,有问题可以call我)

入口数据格式

整个流程图分为四种节点 分别为 root end row(占一整行) col(列元素)

    class rootNode{
   
   

    }
    class rowNode{
   
     
        
    }
    class colNode{
   
   
        
    }
    class endNode{
   
   
        
    }

传参进来的数据格式

// 生成流程图时会自动组装数据 除了造假数据之外可以不用关心
Array<node>
class Node {
   
   
    id // 如果是开始节点请写死 "root" 节点id
    groupId // 组ID
    type  //  1|2|3|4|5|6  开始,抄送 条件 审批 结束 流转至 配置性文件
    title // "标题",
    groupPid //如果col元素 会以他们的groupId虚拟一个包裹层,包裹层的groupId 是所包裹的所有col元素的groupPid
    content // "显示内容",
    isRow //  是否为行元素 
    isRoot //  是否是根节点
    data // {} 
    pids //非必填 无需关心(因项目需求需要向后端解析上一关联节点需要) 目前只有在触发 subData()时生成
}

暴露出去的数据格式 Array

Array<node>
class node {

}

暴露的方法

getResData() //获取所有节点组成的一维数组
nodeChange(changeRes) // 当前节点发生变化时可手动去触发 //触发方式1.this.$refs.refsName.nodeChange(newNode) 2. 引入event-bus this.$emit('nodeChange',newNode)

暴露的事件

@clickNode // 点击当前节点时触发 返回当前节点

基本所有的功能都能实现了,抽屉部分 每个公司里面的东西不一样,点击节点之后拿到数据自己去写吧。

// 到这儿 已经可以用了 更加详细的配置 之后再写

git 地址 :https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/

开源不易 求star

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

收藏
评论区

相关推荐

我们离Google SRE还有多远?
经过几年的挣扎和讨论(确切说应该是3年),老板在钉钉群以通告的方式正式告别伴随我们多年的职业Title PE,改名为SRE。(后续以A SRE区别Google SRE) (https://imghelloworld.osscnbeijing.aliyuncs.com/188fb7b287badee91332a9f90c3af347.p
Docker最全教程之Go实战,墙裂推荐(十八)
前言 与其他语言相比,Go非常值得推荐和学习,真香!为什么?主要是可以直接编译成机器代码(性能优越,体积非常小,可达10来M,见实践教程图片)而且设计良好,上手门槛低。本篇主要侧重于讲解了Go语言的优势,并且提供了一个推送钉钉消息的Demo。最后由于技
uni-app开发 常见异常和解决办法
前言uniapp 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。在开发过程中可能会遇到一些异常,这些异常及其解决办法总结如下。 1.调用微信开发者工具报错IDE service port dis
uni-app开发 经验和技巧总结
## 前言uni-app 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等**多个平台**。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。## 1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
SQL语句中发送微信消息
利用EasySQLMAIL的外部接口表功能来发送。可以支持Oracle、SQL Server、MySQL、PostgreSQL、Informix数据库。步骤如下: (1)在数据源的**“外部接口功能”**中启用**“允许从该数据源上的接口表中发送企业微信或钉钉消息”**选项,并选择可以用来发消息的**企业微信应用**(注意记录下**应用 ID**,后面的S
java接入钉钉机器人(带源码)
#### 前言 登录钉钉网页: [https://im.dingtalk.com](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fim.dingtalk.com) 登录说明文档地址,以备随时查询: [https://ding-doc.dingtalk.com/doc#/servera
5分钟快速接入钉钉实现钉钉考勤
![](https://img2020.cnblogs.com/blog/2029875/202007/2029875-20200714151949917-313112373.png) ### 一、前言 由于今年疫情影响,假期的无限延长让大家都不得不进行线上办公,说到线上办公就毫无疑问,钉钉是这个疫情假期最大的赢家,APP的火热程度以及下载量甚至压过了微
IM群聊消息的已读未读功能在存储空间方面的实现思路探讨
本文由作者“fzully”投稿,收录时,有较大范围修订和改动,感谢原作者的分享。 1、引言 ==== IM系统中,特别是在企业应用场景下,消息的已读未读状态是一个强需求。 以阿里的钉钉为例,钉钉的产品定位是用于商务交流,其“强制已读回执”功能,让职场人无法再“假装不在线”、“假装没收到”。更有甚者,钉钉的群聊“强制已读回执”功能,甚至能够知道谁读了消息
2020稳拿offer宝典,阿里天猫、蚂蚁、钉钉 java 面试题汇总(附解析)
![](https://oscimg.oschina.net/oscnet/up-3fe8daac484fa16296efcca6a78cb7c2cf9.JPEG) **Java基础** 面向对象的特征:继承、封装和多态 int 和 Integer 有什么区别; Integer的值缓存范围 说说反射的用途及实现 Http 请求的 GET 和 PO
2020稳拿offer宝典,阿里天猫、蚂蚁、钉钉 java 面试题汇总(附解析)
![](https://oscimg.oschina.net/oscnet/up-3fe8daac484fa16296efcca6a78cb7c2cf9.JPEG) **Java基础** 面向对象的特征:继承、封装和多态 int 和 Integer 有什么区别; Integer的值缓存范围 说说反射的用途及实现 Http 请求的 GET 和 PO
Chatops实践之Hubot +钉钉实现自动创建Jenkins Job
使用这个技术的原因 ========= 我目前每天有一个小时要给业务创建Jenkins 的Job,他的流程其实很简单,研发把Git仓库的地址发给我,我把Git仓库写到Jenkins里,然后Jenkins\_job的命名规则为Git库地址+项目名称(用jenkins插件做权限管理用的规则),在把jenkins的Trigger地址在Gialb 的webhook
Prometheus部署+邮箱告警+企业微信告警+钉钉告警
Prometheus部署+邮箱报警+企业微信报警+钉钉报警 ============================= #### 1 部署Prometheus server ###### 1.1 下载二进制包 $ wget https://github.com/prometheus/prometheus/releases/download/v2
Python 自动化发送钉钉消息
在进行Python截取网络报表并发送钉钉群过程中,碰到一些问题,也用到一些工具,在这里做一下简单总结。整个过程归纳如图: ![](https://img2018.cnblogs.com/blog/840488/201906/840488-20190625123504622-1532994586.png) 1 版本配置 ====== windows 10
SpringBoot admin+Eureka+钉钉通知 实现微服务监控
SpringBoot admin+Eureka+钉钉通知 ============================ 一、效果 ---- ###### 登录账号+密码 ![](https://raw.githubusercontent.com/wangjiafang/PicGo/master/img/20191018102612.png) ######
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
Vue 仿钉钉流程图(流程节点绘制 vue+Ant Design of Vue) ======================================== #### 仿钉钉流程图 Api包括:一维数组传参,获取单节点数据,返回所有节点组成的一位数组 生成每个节点的父节点Id集合 很多公司后台管理系统都需要画流程图,功能大同小异,所以,仿照钉钉管理