• 發貨源資源網

    [質量:5|效率:5|態度:5 ]

  • 當前位置:首頁 > 源碼集市 > 控件應用 >
    收藏商品 分享到:
    舉報
    BS拖拽工作流設計及研發源碼
    • 售  價:
    • 免費
    • 語  言:
    • C#
    • 數 據 庫:
    • 品  牌:
    • WebForm
    • 最后更新:
    • 2012-12-19 21:12:54
    • 大  ?。?
    • 1.15MB MB
    • 演示網站:
    • 安裝服務:
    • 免技術支持

      自動發貨商品,隨時可以購買,零等待。

      購買本商品,交易成功后可獲贈積分。

      擔保交易,有問題不解決24小時內可申請退款,安全保證。

    商品詳情 交易評價 交易規則

    發貨源資源網

    本文主要目錄如下:

    一、概述

    二、需求分析及設計

    三、數據結構設計

    四、技術選型

    五、界面和代碼賞析

    六、Demo源碼下載

     

    一、概述

    BS應用系統或互聯網網站中經?;嵊幸恍┢戀牧鞒掏嫉惱故?,傳統的開發方式一般是由項目經理或產品經理根據客戶的需求畫出流程圖原型,然后交由美工設計效果圖評審并切割,再由研發這邊根據美工切割的html結合實際業務流程實現流程圖的動態顯示,這個過程涉及了各個工作角色,整個過程工作量比較巨大,尤其是在美工和研發這兩方面都需要投入比較多的精力和時間,我這里所說的流程圖并不是行業專用流程,它可能是工作流、自由流、狀態機中的任何一個,那我們如何去抽象出一種能夠滿足大部分應用系統展示漂亮流程圖的組件呢?我覺得有必要結合一種典型的應用場景,去設計、評審和研發,下圖就是一種典型的應用場景,這是運行態的一個流程圖,它主要包括兩部分圖例和流程圖動態解析渲染。

    二、需求分析及設計

    1、用例分析

    <組件總體用例>:主要包括圖例信息、流程設計態和流程運行態3部分;

    <流程設計、圖例信息>:

    <流程運行態>

     

    2、魯棒圖分析

    基于魯棒圖分析我們可以很好的發現一些實體,如下圖:

    通過此圖我們可以很好的發現流程圖的一些實體信息,為以后的數據結構設計做好了充分的鋪墊。

    3、需求矩陣

    三、數據結構設計

    經過充分的需求分析和設計,我們可以進行數據結構設計了,見下圖:

     

    表名:DRAG_FLOW_INFOS 

    序號

    列名

    數據類型

    長度

    小數位

    標識

    主鍵

    允許空

    默認值

    說明

    1

    DF_ID

    varchar

    200

    0

     

     

    流程號

    2

    DFL_ID

    varchar

    200

    0

     

     

     

    流程圖例號

    3

    DF_NAME

    varchar

    200

    0

     

     

     

    流程名稱

    4

    DF_DESC

    varchar

    3900

    0

     

     

     

    流程描述

    5

    DF_DEPTNAME

    varchar

    200

    0

     

     

     

    部門名稱

    6

    DF_DEPTCODE

    varchar

    100

    0

     

     

     

    部門編碼

    7

    DF_CREATER_ID

    varchar

    100

    0

     

     

     

    創建人號

    8

    DF_CREATER

    varchar

    200

    0

     

     

     

    創建者

    9

    DF_CREATETIME

    datetime

    8

    3

     

     

     

    創建時間

    10

    DF_VERSION

    varchar

    10

    0

     

     

     

    版本號(v1.0、v2.0等)

    11

    DF_ISACTIVE

    varchar

    4

    0

     

     

     

    是或否(只有活動的流程才可以使用,可以使用此字段把流程Disable)

    12

    DF_LASTMODIFIED

    datetime

    8

    3

     

     

     

    備用字段1

    13

    DF_ISEDIT

    varchar

    4

    0

     

     

     

    是或否

    表名:DRAG_FLOW_LEGENDELEMENTS 

    序號

    列名

    數據類型

    長度

    小數位

    標識

    主鍵

    允許空

    默認值

    說明

    1

    DFLE_ID

    varchar

    200

    0

     

     

     

    元素號

    2

    DFL_ID

    varchar

    200

    0

     

     

     

    圖例號

    3

    DFLE_INNERTEXT

    varchar

    400

    0

     

     

     

     

    4

    DFLE_TYPE

    varchar

    20

    0

     

     

     

    分為實線矩形、虛線框矩形、橢圓、未辦框、正辦框、已辦框、未辦框等

    5

    DFLE_TEXT_CUTLENGTH

    int

    4

    0

     

     

     

     

    6

    DFLE_ISHIDDEN

    varchar

    4

    0

     

     

     

    是否(顯示是否隱藏,默認為否)

    表名:DRAG_FLOW_LEGENDINFOS 

    序號

    列名

    數據類型

    長度

    小數位

    標識

    主鍵

    允許空

    默認值

    說明

    1

    DFL_ID

    varchar

    200

    0

     

     

     

    圖例號

    2

    DFL_STYLE

    varchar

    20

    0

     

     

     

    樣式

    3

    DFL_ISDEFAULT

    varchar

    4

    0

     

     

     

    是否默認圖例

    4

    DFL_CREATORID

    varchar

    100

    0

     

     

     

    創建者ID

    5

    DFL_CREATOR

    varchar

    200

    0

     

     

     

    創建者

    6

    DFL_CREATDATE

    datetime

    8

    3

     

     

     

    創建時間

    7

    DFL_LASTUPDATEDATE

    datetime

    8

    3

     

     

     

    最近修改時間

    8

    DFLE_ISDRAGED

    varchar

    4

    0

     

     

     

    是否(拖拽)

    表名:DRAG_FLOW_STEPS 

    序號

    列名

    數據類型

    長度

    小數位

    標識

    主鍵

    允許空

    默認值

    說明

    1

    DFS_ID

    varchar

    200

    0

     

     

     

    步驟號

    2

    DF_ID

    varchar

    200

    0

     

     

     

    流程號

    3

    DFS_NAME

    varchar

    200

    0

     

     

     

    步驟名稱

    4

    DFS_DESC

    varchar

    3800

    0

     

     

     

    步驟描述

    5

    DFS_TYPE

    varchar

    20

    0

     

     

     

    步驟類型(實線矩形、虛線矩形、橢圓、空白框等)

    6

    DFS_ORDERNO

    int

    4

    0

     

     

     

    排序號

    7

    DFS_X

    float

    8

    0

     

     

     

    坐標X

    8

    DFS_Y

    float

    8

    0

     

     

     

    坐標Y

    9

    DFS_WIDTH

    int

    4

    0

     

     

     

    寬度

    10

    DFS_HEIGHT

    int

    4

    0

     

     

     

    高度

    11

    DFS_PARENTID

    varchar

    200

    0

     

     

     

    父ID

    12

    DFS_TITLE_CUTLENGTH

    int

    4

    0

     

     

     

    標題切割長度

    13

    DFS_DESC_CUTLENGTH

    int

    4

    0

     

     

     

    描述切割長度

    14

    DFS_STYLE

    varchar

    40

    0

     

     

     

    樣式

    15

    DFS_ISROOTSTEP

    varchar

    4

    0

     

     

     

    是或否(是否首步驟)

    表名:DRAG_FLOW_STEPSRELATION 

    序號

    列名

    數據類型

    長度

    小數位

    標識

    主鍵

    允許空

    默認值

    說明

    1

    DFSR_ID

    varchar

    200

    0

     

     

     

    步驟關系ID

    2

    DF_ID

    varchar

    200

    0

     

     

     

    流程ID

    3

    DFS_SOURCEID

    varchar

    200

    0

     

     

     

    源步驟ID

    4

    DFS_TARGETID

    varchar

    200

    0

     

     

     

    目標步驟號

    5

    DFSR_CSSCLASS

    varchar

    50

    0

     

     

     

    連接器樣式

    6

    DFSR_CONNECTOR

    varchar

    100

    0

     

     

     

    連接器(Flowchart、Bezier、Straight、StateMachine等),默認為Flowchart

    7

    DFSR_ANCHORS

    varchar

    1000

    0

     

     

     

    錨點集合,類似["Center", "Center"]

    8

    DFSR_ANCHOR

    varchar

    100

    0

     

     

     

    錨點類型,此字段優于DFSR_Anchors字段,值有Continuous、AutoDefault、Assign、Perimeter、Center等,默認為Continuous

    9

    DFSR_PAINTSTYLE

    varchar

    1000

    0

     

     

     

    繪制樣式

    10

    DFSR_ENDPOINT

    varchar

    1000

    0

     

     

     

    端點有:Blank、Image、Rectangle、Dot等

    11

    DFSR_ENDPOIONTSTYLE

    varchar

    1000

    0

     

     

     

    端點樣式

    12

    DFSR_HOVERSTYLE

    varchar

    1000

    0

     

     

     

    盤旋樣式

    13

    DFSR_OVERLAYS

    varchar

    1000

    0

     

     

     

    填充物

    14

    DFSR_LABEL

    varchar

    1000

    0

     

     

     

    標簽

    15

    DFSR_LABELSTYLE

    varchar

    1000

    0

     

     

     

    標簽樣式

    表名:DRAG_FLOW_VERSION

    序號

    列名

    數據類型

    長度

    小數位

    標識

    主鍵

    允許空

    默認值

    說明

    1

    DFV_CUR_ID

    varchar

    200

    0

     

     

    當前版本流程號

    2

    DFV_BEF_ID

    varchar

    200

    0

     

     

    之前版本流程號

    四、技術選型

    1、流程圖UI界面主樣式-BootStrap:GitHub上這樣介紹 bootstrap:簡單靈活可用于架構流行的用戶界面和交互接口的html,css,javascript工具集?;趆tml5、css3的bootstrap,具有大量的誘人特性:友好的學習曲線,卓越的兼容性,響應式設計,12列格網,樣式向導文檔,自定義JQuery插件,完整的類庫,基于Less等,BootStrap設計非常優雅,唯一的缺憾是不兼容IE6,不過做應用系統的現在應該可以拋棄 IE6了,據調查IE6是中國的重災區,由于它本身的安全性等缺陷,很容易遭受各種攻擊;

    2、流程圖、圖例管理-EasyUI:jQuery easyui 為網頁開發提供了一堆的常用UI組件,包括菜單、對話框、布局、窗簾、表格、表單等等,它的布局和表格非常簡潔和優雅;

    3、流程圖設計態-JSPlum,我找了半天才找到它,這真是一個優秀的js流程圖框架,封裝的非常好,支持3種主流的渲染模式:SVG、Canvas和VML,技術底層library也支持:JQuery、MoonTools、YUI3,這里我們果斷選擇JQuery+VML模式,做應用嗎要考慮到各種應用場景!  

    五、界面及代碼賞析

    1、流程設計態界面,見下圖:

    2、代碼這一塊我這邊把相關代碼結構進行一下簡答的說明,這里不再贅述,如果有感興趣的朋友,可以下載代碼;

     

     

    交易評價
      (0)
      <

      1/5

      >
    交易規則
    • 交易流程
    • 發貨方式
    • 1、自動:在上方保障服務中標有自動發貨的商品,拍下后,將會自動收到來自賣家的商品獲?。ㄏ略兀┝唇?;

      2、手動:未標有自動發貨的的商品,拍下后,賣家會收到郵件、短信提醒,也可通過QQ或訂單中的電話聯系對方。

    • 退款說明
    • 1、描述:源碼描述(含標題)與實際源碼不一致的(例:描述PHP實際為ASP、描述的功能實際缺少、版本不符等);

      2、演示:有演示站時,與實際源碼小于95%一致的(但描述中有"不保證完全一樣、有變化的可能性"類似顯著聲明的除外);

      3、發貨:手動發貨源碼,在賣家未發貨前,已申請退款的;

      4、服務:賣家不提供安裝服務或需額外收費的(但描述中有顯著聲明的除外);

      5、其他:如質量方面的硬性常規問題等。

      注:經核實符合上述任一,均支持退款,但賣家予以積極解決問題則除外。交易中的商品,賣家無法對描述進行修改!

    • 注意事項
    • 1、在未拍下前,雙方在QQ上所商定的內容,亦可成為糾紛評判依據(商定與描述沖突時,商定為準);

      2、在商品同時有網站演示與圖片演示,且站演與圖演不一致時,默認按圖演作為糾紛評判依據(特別聲明或有商定除外);

      3、在沒有"無任何正當退款依據"的前提下,寫有"一旦售出,概不支持退款"等類似的聲明,視為無效聲明;

      4、雖然交易產生糾紛的幾率很小,但請盡量保留如聊天記錄這樣的重要信息,以防產生糾紛時便于16Aspx源碼介入快速處理。

    • 16Aspx源碼聲明
    • 1、16Aspx源碼作為第三方中介平臺,依據交易合同(商品描述、交易前商定的內容)來保障交易的安全及買賣雙方的權益;

      2、非平臺線上交易的項目,出現任何后果均與16Aspx源碼無關;無論賣家以何理由要求線下交易的,請聯系管理舉報。

  • 寶貝數量:7617
  • 創店時間:2017/5/26 16:11:00
  • 聯系客服

    330199865

    店內搜索
  • 商品:
  • 價格: -
  • 本店銷量榜

    1微信公眾平臺Bee.WeiXin開發源碼

    2BS拖拽工作流設計及研發源碼

    3通用權限管理系統(含文檔、數據庫)源碼

    4Easyui之權限系統源碼

    5ASP.NETMVC+EF框架+EasyUI實現權限管理源碼

    6通用OA系統增強源碼

    7Entity Framework4.1+MVC3+Jquery EasyUI的DEMO源碼

    8基于FineUI的通用權限管理框架源碼

    9WPF仿迅雷7界面UI效果

    10WEB在線流程圖設計器GOOFLOW源碼

    廣而告之