[發(fā)明專利]一種基于angular通過拖拽生成表單的實現(xiàn)方法

有效

• 申請?zhí)枺?/td>: 202010577666.9
• 申請日: 2020-06-23
• 公開（公告）號: CN111708529B
• 公開（公告）日: 2023-06-16
• 發(fā)明（設計）人: 宋麗芳;宋亞萍;馮永青
• 申請（專利權）人: 浪潮云信息技術股份公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/38
• 代理公司: 濟南信達專利事務所有限公司 37100
• 代理人: 郗艷榮

本發(fā)明特別涉及一種基于angular通過拖拽生成表單的實現(xiàn)方法。該基于angular通過拖拽生成表單的實現(xiàn)方法，使用javascript的超級typescript語言集成的angular框架來開發(fā)項目，typescript使用了ECMAScript?6.0，憑借模塊化、組件化、面向對象編程和MVVM思想對項目代碼進行優(yōu)化。該基于angular通過拖拽生成表單的實現(xiàn)方法，通過angular框架開發(fā)，將MVVM思想應用到代碼的管理中，將代碼進行模塊化，提升了代碼的可復用性，減少了冗余代碼，提高了開發(fā)效率。通過拖拽生成表單，可以編輯不同的表單，提高了交互性，從而極大的改善了用戶的體驗效果。

技術領域

本發(fā)明涉及表單設計技術領域，特別涉及一種基于angular通過拖拽生成表單的實現(xiàn)方法。

背景技術

現(xiàn)有動態(tài)生成表單的方法，是基于原生javascript通過鼠標事件和創(chuàng)建元素，或者是用過使用html5實現(xiàn)，或者使用vue使用等實現(xiàn)的。這些實現(xiàn)方法，各自存在著一些冗余代碼多、可復用性差，兼容性差，耦合性高，開發(fā)效率較低等問題。

為了解決上述問題，本發(fā)明提出了一種基于angular通過拖拽生成表單的實現(xiàn)方法。

發(fā)明內(nèi)容

本發(fā)明為了彌補現(xiàn)有技術的缺陷，提供了一種簡單高效的基于angular通過拖拽生成表單的實現(xiàn)方法。

本發(fā)明是通過如下技術方案實現(xiàn)的：

一種基于angular通過拖拽生成表單的實現(xiàn)方法，其特征在于：使用javascript的超級typescript語言集成的angular框架來開發(fā)項目，typescript使用了ECMAScript?6.0，憑借模塊化、組件化、面向對象編程和MVVM思想對項目代碼進行優(yōu)化；

包括以下步驟：

步驟一：新增各類標簽字段模板組件；

步驟二：新增標簽字段模板組件字段屬性組件；

步驟三：新增表單設計窗體組件；

步驟四：新增表單設計窗體表單屬性組件；

步驟五：集成各類標簽字段模板組件，配置表單設計器的可拖拽工具欄，用戶通過拖拽工具欄中的標簽字段到表單設計窗體，生成相應標簽字段的表單元素；

步驟六：集成標簽字段屬性組件和表單屬性組件，配置成屬性編輯欄，用戶可以設置表單中每個標簽字段對應的元素屬性和表單的屬性；

步驟七：封裝生成表單元素的方法，通過拖拽觸發(fā)鼠標的鼠標按下事件、鼠標移動事件和鼠標移開事件，開發(fā)出拖拽標簽字段到表單設計窗體生成表單元素的方法；

是否要生成相應字段的表單元素，實現(xiàn)流程如下：

(1)鼠標點擊工具欄某字段，記錄下字段文本、字段文本的位置和鼠標點擊的位置；

(2)拖動字段，同時創(chuàng)建臨時字段的層，隨鼠標移動；

(3)當鼠標抬起時，記錄鼠標當前的位置，并判斷鼠標是否在表單設計窗體中；

若在表單設計窗體中，則清除臨時字段層，創(chuàng)建字段對應的表單元素，設置創(chuàng)建表單元素的位置；

若不在表單設計窗體中，則清除臨時字段層。

步驟八：封裝預覽生成表單的方法，通過angular的彈出窗體組件，將表單設計窗體中表單通過實體參數(shù)傳遞到彈出窗體組件，實現(xiàn)預覽表單；

步驟九：封裝保存生成表單的方法，將在表單設計窗體中的表單進行序列化處理保存到數(shù)據(jù)庫中；

步驟十：提供使用生成的表單的接口，通過請求使用接口，獲取到生成的表單數(shù)據(jù)，渲染到目的頁面中。