2 Star 16 Fork 102

阿布布 / 仿dingding流程图

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

仿钉钉流程图(开源不易求点star)

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

很多公司后台管理系统都需要画流程图,功能大同小异,所以,仿照钉钉管理系统 花了一个流程图 效果如下

以下为此插件 入口与出口的数据结构,暴露的事件以及公共类所在目录及修改方式 (小部分需要修改源代码,不难找,有问题可以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 // 点击当前节点时触发 返回当前节点

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

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

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.

MIT License Copyright (c) 2020 CloudPig Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

仿钉钉的自定义流程图 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/star714/imitating-dingding-flow-chart.git
git@gitee.com:star714/imitating-dingding-flow-chart.git
star714
imitating-dingding-flow-chart
仿dingding流程图
master

搜索帮助