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

Easter79
• 阅读 1272

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.

点赞
收藏
评论区
推荐文章
CuterCorley CuterCorley
3年前
uni-app开发 经验和技巧总结
前言uniapp是一个基于Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
Wesley13 Wesley13
2年前
SQL语句中发送微信消息
利用EasySQLMAIL的外部接口表功能来发送。可以支持Oracle、SQLServer、MySQL、PostgreSQL、Informix数据库。步骤如下:(1)在数据源的“外部接口功能”中启用“允许从该数据源上的接口表中发送企业微信或钉钉消息”选项,并选择可以用来发消息的企业微信应用(注意记录下应用ID,后面的S
Wesley13 Wesley13
2年前
java接入钉钉机器人(带源码)
前言登录钉钉网页:https://im.dingtalk.com(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fim.dingtalk.com)登录说明文档地址,以备随时查询:https://dingdoc.dingtalk.com/doc/servera
Stella981 Stella981
2年前
Prometheus部署+邮箱告警+企业微信告警+钉钉告警
Prometheus部署邮箱报警企业微信报警钉钉报警1部署Prometheusserver1.1下载二进制包$wgethttps://github.com/prometheus/prometheus/releases/download/v2
Stella981 Stella981
2年前
Python 自动化发送钉钉消息
在进行Python截取网络报表并发送钉钉群过程中,碰到一些问题,也用到一些工具,在这里做一下简单总结。整个过程归纳如图:!(https://img2018.cnblogs.com/blog/840488/201906/840488201906251235046221532994586.png)1版本配置windows10
Stella981 Stella981
2年前
SpringBoot admin+Eureka+钉钉通知 实现微服务监控
SpringBootadminEureka钉钉通知一、效果登录账号密码!(https://raw.githubusercontent.com/wangjiafang/PicGo/master/img/20191018102612.png)
Wesley13 Wesley13
2年前
5分钟快速接入钉钉实现钉钉考勤
!(https://img2020.cnblogs.com/blog/2029875/202007/202987520200714151949917313112373.png)一、前言由于今年疫情影响,假期的无限延长让大家都不得不进行线上办公,说到线上办公就毫无疑问,钉钉是这个疫情假期最大的赢家,APP的火热程度以及下载量甚至压过了微
Wesley13 Wesley13
2年前
4月9日JindoFS系列直播【存储计算分离场景的计算适应优化】
主题:存储计算分离场景的计算适应优化时间:2020.4.9(周四)19:00参与方式:扫描下方二维码加入钉钉群,群内直接观看或点击直播间链接:https://developer.aliyun.com/live/2592讲师:王道远花名健身,阿里云EMR技术专家,ApacheSpa
Wesley13 Wesley13
2年前
IM群聊消息的已读未读功能在存储空间方面的实现思路探讨
本文由作者“fzully”投稿,收录时,有较大范围修订和改动,感谢原作者的分享。1、引言IM系统中,特别是在企业应用场景下,消息的已读未读状态是一个强需求。以阿里的钉钉为例,钉钉的产品定位是用于商务交流,其“强制已读回执”功能,让职场人无法再“假装不在线”、“假装没收到”。更有甚者,钉钉的群聊“强制已读回执”功能,甚至能够知道谁读了消息
金旋 金旋
2个月前
扫码点餐微信小程序云开发,uniapp,vue,nodejs带后台管理
//下仔のke:https://yeziit.cn/13619/UniApp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5,以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台,方便开发者
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k