畫畫一樣開發軟體 申請審批管理系統開發案例1.3

7) 主管審批頁中申請內容表格復用（復用員工審請頁表格）、批准、不批准按鈕顯示設計：

在TERSUS開發平台中，複製元件有兩種方式，一種是右鍵->Copy，然後在需放置的位置點右鍵->Paste(Reuse)即可；另一種是選中要複製的元件，然後右鍵->Show in Respository Explorer,就會在左側項目目錄文件中顯示元件在文件中的位置，選中拖放到開發區域中的新位置即可完成復用。將員工申請頁中的「申請信息」表在此用以上任意方式復用一個。

在主管審批頁中放入兩個按鈕（右側元件欄->Display->Button），分別命名為「批准」「不批准」。

瀏覽器刷新後顯示如下：

8) 採購管理頁中供應商信息的上傳按鈕、上傳彈窗、供應商信息表格、申請內容表格復用、需求轉採購單按鈕、採購單表格設計：

* 在採購管理面中，放入一個新的分頁顯示元件（右側元件欄->Display->Tabbed Pane），先保存後命名名為「採購事務管理」（快捷鍵「F2」），將其中的顯示塊pane1、pane2分別重命名(快捷鍵「F2」)為「供應商管理」、「採購單管理」：

* 在「供應商管理」分頁下，先添加一個按鈕（右側元件欄->Display->Button），命名為「上傳供應商」，再添加一個新的簡單表格（右側元件欄->Display->Simple Table），命名為「供應商信息表」；雙擊進入「上傳供應商」元件，雙擊其內部<On Click>元件，添加一個彈窗（右側元件欄->Display->Modal Dialog）命名為「供應商信息上傳」，雙擊進入彈窗及內部的「<>Body」並重命名其中LABEL元件（快捷鍵「F2」）為「上傳：」，再在「上傳：」右下添加一個文件輸入元件（右側元件欄->Display->File Field）。

* 同上面一樣重命名彈窗下面Footer中兩個按鈕（快捷鍵「F2」）為「取消」（Close）和「批量上傳」（Save Changes）

瀏覽器刷新顯示：

* 在「採購單管理」分頁下，將員工申請頁中的「申請信息」表在此也復用一個（找到表，右鍵->Show in Respository Explorer,選中左側項目目錄文件中已變灰顯示的元件拖放到新位置），再添加一個按鈕（右側元件欄->Display->Button），命名為「轉為訂單」，雙擊進入後再雙擊進入「<On Click>」元件，添加一個彈窗元件（右側元件欄->Display->Modal Dialog）並命名為「錄入訂單」，雙擊其進入再雙擊進入「<>Body」，刪除「LABEL」元件，添加以下帶標籤的元件（右側元件欄->Display->Selection Labeled Field/Number Labeled Field）命名為「供應商：」和「單價：」，退出並進入「<>Footer」,將「Close」按鈕改名為「取消」，「Save Changes」按鈕改名為「轉為訂單」：

* 退出到「採購單管理」分頁，添加一個複雜表（右側元件欄->Display->Tabl）放入在「轉為訂單」按鈕下方，命名為「訂單信息表」，瀏覽器刷新後顯示效果如下：

9) 簡單表格顯示元件中的子元件設置：

* 簡單表中顯示內容的添加命名：

雙擊「員工申請」頁，雙擊之前添加的「申請信息」表格，表格中有個「Data」數據元件（此元件不能改名），其中放了數據類型元件，將其中默認的「Number」數據類型元件重命名為「序號」；將「Date and Time」刪除，添加文本/數字/日期數據類型（右側元件欄->Data Types->Text/Number/Text/Date/Text）放入並命名為「品名」、「數量」、「申請狀態」、「申請日期」和「緊急性」。整個設計如下：

* 在保存時，會彈出一個提示框，其中英文信息指出有一個問題，請查看驗證（Validation）欄詳情，點確認後，下面驗證欄出現信息，其中信息如下：

「Root Model」指問題所在元件名稱；「Package ID」指問題所在元件在項目文件夾和目錄中的位置；「Problem」是問題是什麼（當前是說缺一個元件）；「Details」是問題詳細說明（上圖中這個是說默認有「Date and Time」這個元件，現在沒有了）；單擊這個問題行，然後會在開發區中跳出具體問題對應的顯示界面，我們這個問題是因為前面刪除了日期時間元件，這是個默認有的元件但被我們刪除了，所以彈不出元件但沒其他問題，在驗證結果欄選中此行問題信息，直接點右驗證欄右上角的一個眼鏡帶叉號的忽略錯誤符號。然後將開發區中彈出的問題顯示界面關閉（開發區此項頭部名稱門旁有個叉號點擊關閉）。重新保存，在瀏覽器中刷新查看結果：

可以查看在主管審批頁面及採購管理下採購單管理下的復用的表格也顯示這樣子了；同樣方式更改「採購管理」分頁下「供應商管理」分頁中的表格，改為以下效果並查看結果：

* 複雜表格中顯示元件的添加及命名：

在「採購單管理」頁面下選中「訂單信息表」元件，雙擊進入，雙擊「<>Body」元件，雙擊「<>Body Row」,其中默認放了Text,Number,Date等顯示元件，注意區別於簡單表格中的元件，這裡不是數據類型元件。將Number改名為「申請序號」並放在相對其他元件左上的位置，讓它第一個顯示，Text改名為「供應商」放在序號後面，其後復用一個Text命名為「詳情」,其後放「Date」改名為「訂單日期」，然後復用一個Number,命名為「單價」，最後再復用一個Number,命名為「總價」：

10) 表格屬快，顯示樣式調整：

選中「訂單信息表」，在開發區下部屬性欄位點屬性欄右上角第二個圖標（Add Property），在彈窗內輸入本地樣式的屬性名稱「html.style」

屬性框會出現一行新屬性，在「html.style」屬性對應的shared欄中輸入樣式屬性值「width:800px」,意思是表格寬度是800px;在其他兩個表格屬性下查看並更改寬度為600px(簡單表格默認是400px);瀏覽器刷新顯示：

* 以上是顯示元件樣式設計的方式之一，樣式在軟體設計中就是style，樣式名稱也是標準的一些標籤，建議查看我們相關介紹文檔或在網路查學更多信息，我們在TERSUS無代碼開發平台上的樣式設計會用到以下幾個：width;height;margin;padding;float;color;backgrond-color;font-size;font-weight;display;inline-height;text-align;部分框架設計用到了calc等其他標籤會在示例項目中說明；

* 屬性設定一定要用英文，屬性名稱大小寫要區分；

* 系統中大量共用的樣式可以用樣式類（style class）進行統一定義並在多個元件上用屬性名稱「html.styleClass」來傳入類的名稱進行樣式管理，比如以上點選放置或拖放過來的元件，大多都有這個樣式類屬性值。在學習掌握一些技能知識後，可以自己在項目文件夾中web文件夾下找到對應的類定義進行個性化調整。比如對表格頭部、表格內的顯示間距，選中時的背景色等都是用類進行統一控制並且是可隨意調整的；

* TERSUS無代碼開發中的樣式與有代碼開發中的樣式管理完全一樣，對於CSS樣式及我們所用的LESS樣式框架我們會有一篇文章詳細介紹，屬於設計開發中的前端UI美工部分。

推薦閱讀：