序

2013年的博文，現在發于阿里叮叮如日中天之時，當時的eoopen與之產品定位和設想如出一轍，可惜一個產品能否成功的走向市場，變量很多，當時我們輸掉的，一方面是技術支持的薄弱，迭代周期長，穩定性差，另一方面移動端開發時內斗的嚴重，和異地溝通的大成本，最后還有很多盲從和猶豫。市場已去，作為當時的產品，權當懷念曾經一起奮斗過的日子（by扣子）。

最近在做自定義表單、自定義流程、自定義菜單，由于某些原因，現在這個項目正處于停滯狀態。但核心功能已實現，做點總結拿出來分享。

注：該功能屬于西安網開網絡有限公司，我所做的只是技術分享。該功能集成于一款即時通迅辦公軟件。下載地址：www.eoopen.com。下載后在一個類似于QQ應用中心的面板中點擊使用事務流即可打開此應用(打開前需要注冊企業并加載協同辦公業務)。
請大家勿噴。

自定義表單：

在編碼中首先解決的是如何將組件存儲、如何取出的問題。我現采用的方式是在保存表單時將操作區域的HTML片段進行處理后進行存儲，編輯時取出HTML片段后對特定的樣式進行處理。

當表單保存后對當前表單的使用，由于表單中集成了uedit,JS模擬的單選、多選及上傳等功能，在表單使用前需要對取出的HTML版段進行再次編譯。這就需要在編碼時對代碼進行封裝，提供更類初化方法。我現在使用初始化方法如下：

/*
        【用于流程產生的內容頁】
        @init_simulate_data:初始化模擬元素【單選、多選、下拉、聯系人】,并在其擁有值的情況下進行賦值
    */  
    ,init_simulate: function(){
        publicFunction._radio();        //初始化模擬單選
        publicFunction._checkbox();     //初始化模擬多選
        setForm.for_checkboxAndRadio(); //為單選多選進行附值
        setForm.for_select();           //初始化模擬下拉框，并附值
        setForm.for_lxr();              //初始化聯系人控件，并為其已選中的值進行賦值操作   
        publicFunction.UEditInit();     //初始化頁面中的UEdit插件
        } 

自定義表單操作界面：

自定義表單.png

流程中首先需要處理的問題便是鏈線問題。項目啟動時，一直不能確定是否封裝瀏覽器，直到最后鏈線方法還是使用了SVG（總想有個機會寫寫canvas）。現在的鏈線并不完美，但基本功能已實現，等項目重新啟動后再進行優化。SVG鏈線這塊，需要注意的是直接向SVG中插入元素該元素是無法實現效果的，需要使用克隆，在獲得克隆對象后更改屬性值來獲得一個新的鏈線。如下：

else{       
                //當前頁已存在SVG元素
                //克隆已存在的線
                line =  processSvg.find('polyline').eq(0).clone(false);
                line.attr('points',points);
                line.attr('style',line_style);
                line.attr('class',_class);
                line.attr('id',polylineId);     
                processSvg.append(line);
                //克隆已存在的矩形      
                rect = processSvg.find('rect').eq(0).clone(false);
                rect.attr('x',rectX);
                rect.attr('y',rectY);
                rect.attr('style',rect_style);
                rect.attr('id','rect_'+polylineId);
                rect.attr('polylineId',polylineId);     
                processSvg.append(rect);
                //克隆已存在文本
                _text = processSvg.find('text').eq(0).clone(false);
                _text.attr('x',textX);
                _text.attr('y',textY);
                _text.attr('style',text_style);
                _text.attr('id','text_'+polylineId);
                _text.attr('polylineId',polylineId);        
                processSvg.append(_text);
                }

在鏈線上有文字提示，圖上所表示的設置和黃色為初始狀態。點擊可進行編輯，用于設置該鏈線的流向（提交、退回），條件（成立、不成立）；

流程操作界面：

流程操作界面.png

@拭目以待

表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love

《野生前端工程師》專輯中所有文章均為@拭目以待 原創，轉載請注明出處。