E_cology8.0新表單設(shè)計(jì)器操作的指南

1、 表單設(shè)計(jì)器1. 概述表單設(shè)計(jì)器是系統(tǒng)提供的一種基于Html語言的表單設(shè)計(jì)模塊，除了可以滿足用戶對表單樣式的需求之外，還彌補(bǔ)了圖形化表單中無法支持多瀏覽器、加載速度慢等問題。在表單設(shè)計(jì)器中可以實(shí)現(xiàn)以下的功能· 用戶可以象在Excel中一樣自由繪制表格，這些繪制的表格可以在各個(gè)節(jié)點(diǎn)甚至不同的系統(tǒng)之間調(diào)用，而且可以為手機(jī)版設(shè)計(jì)獨(dú)有的顯示樣式；· 可以在表格中插入圖片、甚至是一段代碼程序，以滿足用戶對表單功能的特殊要求；· 與其它表格模式不同除了設(shè)置字段的編輯屬性之外，還可以給每個(gè)字段都添加屬性，可以是一個(gè)簡單的計(jì)算公式，也可以是復(fù)雜的邏輯運(yùn)算，甚至可以與SAP等外部系

2、統(tǒng)相結(jié)合；· 而且在繪制明細(xì)表的時(shí)候，不用象模板模式一樣考慮明細(xì)表由多少列，主表有多少列，在表單設(shè)計(jì)器中主表的設(shè)計(jì)和明細(xì)表的設(shè)計(jì)是分開的，只是顯示的時(shí)候才會(huì)放在一起顯示，列數(shù)行數(shù)互不影響。2. Html模板設(shè)計(jì)2.1. 表單格式我們選擇創(chuàng)建Html模板之后顯示如圖1所示圖1· 在模板編輯頁面我們看到了Excel編輯器一樣的設(shè)計(jì)頁面，我們可以在上面直接繪制表格，注意表格中需要為字段的顯示名和字段本身分別留出對應(yīng)的單元格；· 在表格設(shè)計(jì)器中有按鈕，點(diǎn)擊后可以編輯單元格的屬性，先選中單元格，在點(diǎn)擊后顯示如圖2所示，我們可以和Excel表格一樣設(shè)定單元格的屬性，包括了單元

3、格容的顯示方式、對齊方式、邊框和底色等；圖2· 在表格設(shè)計(jì)器中還有按鈕，點(diǎn)擊后可以選擇讓單元格容是否折行顯示；· 其它的一些功能都是畫表格的功能，當(dāng)鼠標(biāo)移動(dòng)到快捷按鈕上的時(shí)候會(huì)顯示按鈕的名稱。 2.2. 添加主字段在表格的右側(cè)顯示了主字段的顯示名和字段，· 先在繪制好的表格中選中某一個(gè)單元格，然后將右側(cè)對應(yīng)的顯示名或字段雙擊后可以添加到指定的單元格中，如圖3所示；· 已經(jīng)添加過的顯示名或字段會(huì)變?yōu)榛疑?#183; 如果需要?jiǎng)h除已經(jīng)添加的字段，同樣還是先選中單元格，再點(diǎn)擊頂部的快捷按鈕，就可以把這個(gè)字段清除了；· 添加了字段我們可以在

4、快捷菜單中選擇需要的字體樣式，包括了字體、顏色、加粗等，如果需要重新設(shè)計(jì)字體樣式只要點(diǎn)擊按鈕，就可以把我們設(shè)計(jì)的顯示樣式給清除了；· 點(diǎn)擊按鈕，除了會(huì)刪除字段外，還會(huì)將單元格的設(shè)置屬性，包括字體、顏色、加粗、表格線框、背景色等全部清除。圖32.3. 添加明細(xì)字段如果表單有明細(xì)字段的話，我們將Html設(shè)計(jì)器頂部菜單切換到明細(xì)表，顯示如圖4所示，先要在主表中選擇將明細(xì)表放在哪一行，然后點(diǎn)擊【明細(xì)表】，選擇要添加的明細(xì)表，就可以將明細(xì)表添加到Html模板中了，添加明細(xì)表的時(shí)候注意，同一行中不能有其它字段了，包括主表顯示名、字段、節(jié)點(diǎn)意見等。圖4雙擊剛剛添加的明細(xì)表，如圖5所示，我們需要設(shè)置

5、明細(xì)表的詳細(xì)信息了，這里看到的表格行列與主字段頁面看到的行列無關(guān)圖5· 添加明細(xì)字段的時(shí)候注意，顯示名和字段需要縱向排列，明細(xì)字段盡量放在同一行中顯示，如圖6所示，如果這里設(shè)計(jì)成折行的話，將來用戶在前端使用的時(shí)候看到的也是折行顯示的，非常不方便；圖6· 明細(xì)字段需要表頭表尾標(biāo)識(shí)進(jìn)行框定，只有這個(gè)標(biāo)識(shí)的行才可以在前臺(tái)通過添加刪除按鈕增加明細(xì)行，所以如圖6所示，需要先選中字段那一行，再點(diǎn)擊上方的【表頭標(biāo)識(shí)】按鈕，就會(huì)在顯示名上方添加一個(gè)表頭標(biāo)識(shí)，再次選中字段那一行，添加【表尾標(biāo)識(shí)】，結(jié)果如圖7所示圖7· 在圖5所示的明細(xì)表詳細(xì)設(shè)計(jì)頁面右下角有明細(xì)表的屬性選項(xiàng)，用來控制

6、當(dāng)前節(jié)點(diǎn)是否允許添加明細(xì)容等；· 如果有多個(gè)明細(xì)表的話，直接點(diǎn)擊上方菜單【明細(xì)表1】左右箭頭可以直接切換到其它的明細(xì)編輯頁面。2.4. 節(jié)點(diǎn)意見在圖3所示的添加字段的頁面，我們將主表字段頁面切換到流程節(jié)點(diǎn)，顯示如圖8所示，我們可以如添加字段的方法一樣，將節(jié)點(diǎn)的簽字意見添加到表單中去。圖83. 字段屬性1、添加了字段之后前端的用戶需要能夠操作這些字段，所以點(diǎn)擊編輯菜單的【字段屬性】我們需要給每個(gè)字段設(shè)置查看、編輯和必填屬性，如圖9所示，選中字段后選擇對應(yīng)屬性即可，明細(xì)字段一樣的操作方法；圖92、除了查看、編輯、必填三個(gè)基本屬性之外，我們在Html模板中可以對單個(gè)字段添加Sql操作，這也

7、是Html模板表單的一大特色，如圖10所示，在后面第六節(jié)中介紹了一些使用方法。圖103、在字段屬性中還有一個(gè)【更多屬性】按鈕，點(diǎn)擊后顯示如圖11所示，這里是針對SAP集成進(jìn)行的字段屬性設(shè)置。圖114. 插入容1、為了美化Html表單，我們可以點(diǎn)擊Html模板編輯器的菜單【插入】，顯示如圖12所示，圖12· 我們可以在指定的位置插入圖片，如圖13所示，Ø 單元格：在選定的單元格中插如圖片；Ø 背景圖：整個(gè)Html模板表單的背景圖片，不局限于單元格了；Ø 浮動(dòng)：插入的圖片會(huì)在表單中浮動(dòng)；Ø 圖片來源可以分為本地和網(wǎng)絡(luò)。圖13· 點(diǎn)擊【】按

8、鈕后我們可以插入一個(gè)地址，用戶在前端訪問這個(gè)表單的時(shí)候點(diǎn)擊可以到指定的地址；· 點(diǎn)擊【代碼】是在Html模板中插入一段js代碼，完成某個(gè)動(dòng)作。5. 模板管理1、最后回到模板管理頁面，如圖14所示，在這里我們直接對流程中所有的節(jié)點(diǎn)進(jìn)行Html顯示模板、打印模板及Mobile模板進(jìn)行設(shè)計(jì)。圖14· 使用左側(cè)的模板導(dǎo)入模板導(dǎo)出功能，我們可以將設(shè)計(jì)的Html模板導(dǎo)出后在其它系統(tǒng)中進(jìn)行導(dǎo)入；· 點(diǎn)擊節(jié)點(diǎn)后的同步按鈕，顯示如圖15所示，選擇需要同步的節(jié)點(diǎn)，可以將當(dāng)前節(jié)點(diǎn)的模板設(shè)計(jì)同步到其它節(jié)點(diǎn)中，注意，這里選擇完節(jié)點(diǎn)之后，必需回到圖1所示的表單編輯頁面點(diǎn)擊【保存】之后才會(huì)同步

9、，否則是不會(huì)同步的。圖152、對于不擅長Html語言的用戶來說，初始化模板是一個(gè)好用的工具，它可以幫助用戶快速設(shè)計(jì)一個(gè)美觀的Html表單模板· 點(diǎn)擊【初始化模板】按鈕后顯示如圖16所示，我們在這里直接設(shè)置表單字段的編輯、必填屬性，最重要的是不要忘記設(shè)置每行顯示幾個(gè)字段；圖16· 設(shè)置完成后點(diǎn)擊【下一步】后顯示如圖17所示，我們選擇Html模板的配色，選中需要使用的顏色后點(diǎn)擊【完成】，一個(gè)Html模板就制作完成了，非常方便。圖176. 實(shí)戰(zhàn)案例1、概述為了更加清晰了解表單設(shè)計(jì)器的功能，將通過以下3個(gè)實(shí)例來了解表單的設(shè)計(jì)步驟。2、案例一案例一介紹的是一個(gè)最簡單的留言流程，我們通

10、過初始化模板的方式來自動(dòng)創(chuàng)建一個(gè)Html表單，文檔介紹的是模板的制作過程，表單字段管理、節(jié)點(diǎn)設(shè)置、出口設(shè)置這里就不做介紹了，詳細(xì)的設(shè)計(jì)步驟見文檔自動(dòng)生成Html模板。通過文檔的學(xué)習(xí)，我們看到使用初始化模板的方式就算不懂Html語言，不會(huì)設(shè)計(jì)表格都沒有關(guān)系，我們只要簡單的兩步就可以設(shè)計(jì)一個(gè)美觀的Html顯示模板。3、案例二案例二介紹的是一個(gè)發(fā)文流程的顯示模板，通過文檔我們可以了解以下容· 如何在表單設(shè)計(jì)器中手動(dòng)繪制表格；· 如何添加字段及設(shè)計(jì)字段的編輯屬性；· 如何將表單引用到其它節(jié)點(diǎn)中；· 顯示模板和打印模板的區(qū)別。詳細(xì)的設(shè)計(jì)步驟見文檔手動(dòng)創(chuàng)建Html模

11、板。4、案例三案例三介紹的是一個(gè)資產(chǎn)采購流程的顯示模板，通過文檔我們可以了解以下容· 如何在表單設(shè)計(jì)器中添加明細(xì)表；· 如何在表單設(shè)計(jì)器中進(jìn)行字段間的計(jì)算；詳細(xì)的設(shè)計(jì)步驟見文檔Html模板的擴(kuò)展設(shè)計(jì)。7. 字段屬性案例1、金額轉(zhuǎn)換功能在涉及財(cái)務(wù)方面的流程經(jīng)常會(huì)用到兩種樣式，一個(gè)是金額千分位顯示，另外一個(gè)是金額大寫顯示，所以在設(shè)置Html顯示模板的時(shí)候需要進(jìn)行設(shè)置。在Html顯示模板編輯頁面中，選中需要千分位顯示或者金額大寫顯示的字段進(jìn)行設(shè)置，當(dāng)然這個(gè)字段是有要求的。· 必需是單行文本框-浮點(diǎn)類型的字段；· 字段在表單中必需是只讀，不能是可編輯；·

12、; 明細(xì)字段不支持此功能。在圖18所示的字段屬性設(shè)置頁面，我們需要將【總價(jià)】這個(gè)字段進(jìn)行金額轉(zhuǎn)換顯示圖18· 首先點(diǎn)擊【字段賦值設(shè)置】，會(huì)在下面的白框中增加一個(gè)公式doFieldMath("  ")；· 將光標(biāo)點(diǎn)中公式的兩個(gè)引號(hào)中間，然后雙擊表單字段中選擇要顯示為金額大寫的字段；· 在顯示方式中選擇【金額轉(zhuǎn)換顯示】Ø 比如圖示的例子，我要在“總價(jià)（大寫）”這個(gè)字段以財(cái)務(wù)大寫的方式進(jìn)行顯示，所以我在圖5-1中選中的是“總價(jià)”字段進(jìn)行【字段屬性】設(shè)置；Ø 總價(jià)（大寫）字段顯示的數(shù)值是哪里來的呢，選擇的就是“總價(jià)”這個(gè)字

13、段，簡單說就是將將“總價(jià)”這個(gè)字段的數(shù)值在“總價(jià)（大寫）”字段中以財(cái)務(wù)大寫的方式進(jìn)行顯示；Ø 注意，這里不能選擇“總價(jià)（大寫）”本身哦，必需選擇其它字段；添加的字段支持計(jì)算公式，如圖19所示圖192、日期時(shí)間計(jì)算在使用系統(tǒng)的時(shí)候，我們經(jīng)常需要對時(shí)間進(jìn)行計(jì)算，這個(gè)是在一般模式或者圖形化模式中非常困擾管理員的一件事情，但是在Html表單中就很好的解決了這個(gè)問題。同樣，我們先選擇一個(gè)存放時(shí)間計(jì)算結(jié)果的字段，點(diǎn)擊右鍵進(jìn)入【字段屬性】后選擇【時(shí)間日期計(jì)算】，顯示如圖20所示，時(shí)間的計(jì)算都是后面的時(shí)間減去前面的時(shí)間得到一個(gè)值，所以如圖20所示，應(yīng)該就是到達(dá)的日期時(shí)間減去出發(fā)的日期時(shí)間，所以我們就

14、在公式的雙引號(hào)中添加“出發(fā)日期”，然后點(diǎn)擊【插入日期時(shí)間合并符】，再點(diǎn)擊“出發(fā)時(shí)間”，這樣出發(fā)的日期時(shí)間就被合并了，然后繼續(xù)輸入減號(hào)，再按前面的辦法輸入“到達(dá)日期”【插入日期時(shí)間合并符】“到達(dá)時(shí)間”，這樣一個(gè)計(jì)算公式就做好了，最終結(jié)果如圖21。圖20圖21除了以上介紹的最常用的時(shí)間計(jì)算方法，還可以做如下一些時(shí)間計(jì)算· 表單中的兩個(gè)日期進(jìn)行計(jì)算doFieldDate("$日期1$ $datetime$時(shí)間1$日期2$ $datetime$時(shí)間2$")· 表單中的日期時(shí)間與系統(tǒng)當(dāng)前日期的某個(gè)時(shí)間進(jìn)行計(jì)算，$currentdate$是指系統(tǒng)當(dāng)前日期，需要說明的

15、是只能取系統(tǒng)日期，沒有辦法取系統(tǒng)時(shí)間doFieldDate("$日期1$ $datetime$時(shí)間1$currentdate$ $datetime$時(shí)間2$")· 系統(tǒng)日期與表單日期進(jìn)行計(jì)算doFieldDate("$日期1$ $currentdate$ ")· 系統(tǒng)日期與表單某個(gè)整數(shù)進(jìn)行計(jì)算，必需是整數(shù)，不能是浮點(diǎn)數(shù)doFieldDate("$currentdate$ + $整數(shù)1$")如果設(shè)置了一般時(shí)間我們還可以設(shè)置時(shí)間的計(jì)算是否跳過非工作時(shí)間，只要將圖5-4中的【日期計(jì)算排除非工作日】即可。8. 插入代碼案例

16、1、概述在第四節(jié)插入容中我們了解到可以在模板中插入一些代碼，用來執(zhí)行一些操作或完成一些動(dòng)作。注：以下說明中看到的代碼是截圖，如果需要使用的話可以到本文檔的附件中提取，附件與圖片一致。2、字段聯(lián)動(dòng)案例明細(xì)表中當(dāng)某字段值為相關(guān)值時(shí)，選擇框字段自動(dòng)為是或否，如圖22所示，當(dāng)“總分”字段小于15的時(shí)候，選擇框字段顯示“否”，“總分”字段大于等于15的時(shí)候，選擇框字段顯示“是”。圖22假設(shè)“總分”字段的ID號(hào)為6407，選擇框字段的ID號(hào)為6408，實(shí)際操作過程中字段的ID號(hào)可以在Html編輯頁面中查看。圖233、時(shí)間腳本判斷在表單中經(jīng)常會(huì)用到一些日期類型的字段，填寫的日期必需有一個(gè)標(biāo)準(zhǔn)，例如結(jié)束時(shí)間不能早于開始時(shí)間等，以下兩個(gè)案例可以做為參考· 請假開始日期<=請假結(jié)束日期，7241是請假開始日期的字段ID，7242是請假結(jié)束日期的字段ID，實(shí)際使用過程中，請用實(shí)際的ID進(jìn)行替換，alert后面的容為前臺(tái)表單提示容；圖24· 項(xiàng)目實(shí)際開工日期<=填寫日期<=項(xiàng)目結(jié)束日期，7243是開工日期的字段ID，7244是填寫日期的字段ID，7245是結(jié)束日期的字段ID，實(shí)際使用過程中，請用實(shí)際的I