Smtflow

介绍

Smt(Smart)flow 一款纯JS的WEB前端流程图设计工具，支持拖拽设计，丰富的API，良好的用户体验。

界面效果

预览图

演示地址

纯JS版 https://www.smtflow.com/demo.html
VUE版 https://vue.smtflow.com/demo.html

主页

https://www.smtflow.com

Wiki

https://gitee.com/com-x-com/smtflow/wikis/pages

技术支持

QQ：1661118
微信：com-x-com

特点

纯JS代码，不用引用任何JS库
仿JQuery EasyUI风格
支持主流浏览器 IE9 +，Edge，Chrome，Firefox，Opera，Safari 等
通俗配置，丰富的API
更多惊喜，等你发现

使用方法

引入JS

<script src="./js/smtflow.min-1.0.1.js"></script>

引入样式和图标

<link rel="stylesheet" href="./themes/flow.min.css">
<link rel="stylesheet" href="./themes/icons.css">

html

<div id="flow" style="height: 600px;margin: 20px;"></div>

调用JS

let smt = $$('#flow').flow({
    // 标题；
    title: '流程图',
    // 是否可编辑； 默认 true
    //editable: true,
    // 是否显示节点标题； 默认 true
    //showNodeTitle: true,
    // 是否显示缩略图； 默认 false
    thumbnail: true,
    // 工作区比例； 默认1 大于1工作区将产生滚动条
    areaRatio: 1.5,
    // 是否显示 Footer； 默认 true
    //showFooter: false,
    // Footer 显示内容；
    footer: '北京XXXX信息技术有限公司',
    // 连线类型； line:直线；polyline:折线 默认 line
    lineType: 'polyline',
    // 言语类型； 默认 zh-cn 根据 language 目录下对应后缀名文件配置 可自定义语言
    // language: 'en',
    // 是否显示节点盒子； 默认true
	nodebox: true,
    // 左侧工具列表； icon 根据 themes 下icons.css 对应格式名称设置
    tools: [
        {title: '时间', icon: 'time'},
        {title: '查询', icon: 'search'},
        {title: 'Offer', icon: 'offer'},
        {title: '设置', icon: 'setting'},
        {title: '短信', icon: 'sms'},
        {title: '微信', icon: 'wechat'},
        // 分割线
        {type: 'separate'},
        {title: '拆分', icon: 'split'},
        {title: '合并', icon: 'merge'}
    ],
    // --------------- 触发事件 ---------------
    // 点击新增时触发；
    onClickNew: function() {
        return confirm('确定新建?');
        //return false; 返回false 不新建工作区
    },
    // 点击打开时触发；
    onClickOpen: function() {
        console.info('onClickOpen');
        //TODO
    },
    // 点击保存时触发； 参数 当前流程图Json数据
    onClickSave: function(data) {
        console.info('onClickSave')
        //TODO
    },
    // 删除节点时触发； 参数 当前节点id，当前节点类型,标题,节点值
    onRemoveNode: function(id, type, title, value) {
        console.info('onRemoveNode')
        //TODO
        //return false; 返回false 不删除节点
    },
    // 节点鼠标右键时点击设置触发； 参数 当前节点id，当前节点类型,标题,节点值
    onSettingNode: function(id, type, title, value) {
        console.info('onSettingNode')
        //TODO
    },
    // 双击节点时触发； 参数 当前节点id，当前节点类型,标题,节点值
    onDblclick: function(id, type, title, value) {
        console.info('onDblclick')
        //TODO
    },
    // 新增节点时触发；参数 当前节点类型
    onAddNode: function(type) {
        console.info('onAddNode')
        //TODO
    },
    // 增加连线时触发；参数 开始节点对象（id，type），结束节点对象（id，type）
    onAddLine: function(from, to) {
        console.info('onAddLine')
        //TODO
    },
    // 流程图加载完成时触发
    onLoadSuccess: function() {
        console.info('success');
        //TODO
    }
});

--------------- 方法 ---------------
// 设置流程图不可编辑
smt.flow('disable');

// 设置流程图可编辑
smt.flow('enable');

// 设置流程图标题
smt.flow('setTitle', '流程图');

// 设置连线类型  line:直线；polyline:折线
smt.flow('setLineType', 'line');

// 设置节点标题是否显示 true/false
smt.flow('setShowNodeTitle', true);

// 调用内部消息显示；参数 content：消息内容，time：显示时间 默认 2000 毫秒
smt.flow('setMessage', {content:"测试消息方法", time: 4000}); 

// 导入流程图数据
smt.flow('loadData', data);

// 根据id获取节点
let node = smt.flow('getNode', 'NL4C63325');

// 根据id获取连线
let node = smt.flow('getLine', 'LL4C6TX3Z');

// 根据id设置节点Value
smt.flow('setNodeValue', 'NL4C63325', {name: '张三', age: 18});