Layui-FlowChart
預(yù)覽地址 https://corgitea.github.io/Layui-FlowChart/index.html

---

基于Layui開發(fā)，公司之前用到這個(gè)功能，自己用的散裝代碼...
這次重新梳理了一下。
emm...慢慢修復(fù)優(yōu)化。
:)

---

> 版本 V1.0
第一個(gè)版本 :) 圖標(biāo)用的是圖片

> 注意
圖標(biāo)用的是圖片,需要指定圖片，格式：
menu_1.png
menu_h1.png

---

功能描述
+ 右鍵點(diǎn)擊選擇編輯
+ 選擇下方按鈕填寫(快捷鍵:跳轉(zhuǎn)到的URL)后確定
+ 在虛線操作區(qū)域拖拽移動(dòng)位置
+ 雙擊某圖標(biāo)開啟滾輪旋轉(zhuǎn)
+ 右鍵保存

---

> 調(diào)用

layui.config({
         base: 'layui_exts/'
     }).extend({
         FlowChart: 'FlowChart/FlowChart'
     }).use(['element','FlowChart'], function () {
     
         var FlowChart = layui.FlowChart;
         var arr = [
             {
                 "left": "596px",
                 "top": "58px",
                 "url": "so",
                 "indexno": "",
                 "text": "銷售單",
                 "img": "layui_exts/FlowChart/image/nav_icon_1.png",
                 "sta": "new"
             },
             {
                 "left": "777px",
                 "top": "57px",
                 "url": "OD",
                 "indexno": "",
                 "text": "送貨",
                 "img": "layui_exts/FlowChart/image/nav_icon_2.png",
                 "sta": "new"
             },
             {
                 "left": "686px",
                 "top": "83px",
                 "url": "",
                 "indexno": "",
                 "text": "自定義",
                 "img": "layui_exts/FlowChart/image/line_1.png",
                 "sta": "new"
             }
         ];
         var urlstr = "layui_exts/FlowChart/image/";
         FlowChart.render({
             elem:'#box'
             /*AJAX請(qǐng)求地址*/
             ,url :'/main/getajax'
             ,ImageURL:[
                 urlstr + "nav_icon_1.png",
                 urlstr + "nav_icon_2.png",
                 urlstr + "nav_icon_3.png",
                 urlstr + "nav_icon_4.png",
                 urlstr + "nav_icon_5.png",
                 urlstr + "nav_icon_6.png",
                 urlstr + "nav_icon_7.png",
                 urlstr + "nav_icon_8.png",
                 urlstr + "line_1.png",
                 urlstr + "line_6.png",
                 urlstr + "line_12.png",
                 urlstr + "line_13.png",
             ]
             // 賦值渲染
             ,data:arr
             // 保存到緩存測(cè)試
             ,chartTest:false
             // 保存提示信息
             ,saveMsg:"保存中.."
             // 保存后回調(diào)
             ,callBack:function (data) {
                 console.log(data)
             }
             // 點(diǎn)擊當(dāng)前圖標(biāo)的回調(diào) ，編輯狀態(tài)下無(wú)法跳轉(zhuǎn)
             ,link:function (elem) {
                 console.log(elem)
             }
              // 頁(yè)面唯一識(shí)別 默認(rèn)數(shù)據(jù)中的，我原來(lái)的業(yè)務(wù)使用到，可以刪除，并Savedata自定義
             ,PageIndex:"so"
             /* 
              *自定義提交數(shù)據(jù)結(jié)構(gòu) 已有data,盡量使用其他
              * 默認(rèn)數(shù)據(jù)
              * obj.action = MOD_NAME;
              * obj.menucode = _config.PageIndex;
              * obj.data = [];
              */
             ,Savedata:{
                 "a":123,
                 "b":456,
             }
         });
     })

---