微程式用戶手冊
主頁
主頁
  • 佈局控制項

佈局控制項

佈局控制項主要用於對前臺表單的展示做出佈局變更,使表單更爲實用和美觀。

分組標題

表單中的分隔符、訊息提示符,可以把分組標題到下一個分組標題之間的內容全部收起。

注意:分組標題下的控制項都被隱藏時,分組標題自動隱藏

1719825774735-4c1a5e95-9ae6-44a9-9c18-878550e4cdf2.png

分組標題控制項屬性

  • 標題: 顯示的標題,預設是控制項名稱
  • 對齊方式:顯示在頁面中的位置,左/中/右,預設爲左
  • 預設展開:打開表單時,分組標題下的內容是否展開
  • 文字:設定標題文字的大小、顏色、加粗、斜體等,也可使用css編寫樣式
  • 控制項寬度:整行寬度,不可調整

描述說明

用於表單中註釋或提醒的描述,描述說明可以修改顯示內容和對齊方式

1719826194359-30a2d9e2-3ec2-4ff2-8897-9032b05a024a.png

描述說明控制項屬性

  • 描述說明:富文本框填寫說明內容
  • 顯示條件:控制項顯示所設定的條件,滿足條件時控制項顯示
  • 高度:固定高度、根據內容自適應撐滿
  • 邊框:邊框的樣式、寬度、顏色、圓角大小等設定1719826255853-fab292ab-15f1-4331-8e31-7f4e9f904a22.png

子表

子表用於表單中錄入資料的格式固定但資料條數不定的情況,例如物料明細、採購明細等

前臺運行

1720172550923-f316dd43-99b0-4d91-a443-06700c280fd9.png

子表支持對所有子錶行資料進行篩選,支持新增、刪除、批次編輯、匯入、匯出資料,子錶行支持複製、清除行、在上面新增行、在下面新增行等操作

  • 匯入資料:支持新增資料、更新資料、新增和更新資料;更新、新增和更新資料時,需選擇唯一性欄位查找子表資料並更新,邏輯與視圖匯入一致
  • 1720172729595-526c743e-e5f6-4cd2-811b-d780e3de7088.png
  • 匯出資料:查看和編輯時均支持匯出;若子表資料編輯了未保存,匯出時會提示保存後再匯出
  • 批次編輯:支持一次對多行資料的多個欄位編輯修改
  • 1720172972289-e66e900f-8210-4ef3-8f30-726dea11178b.png

後臺設定

1719828207645-edb3e000-5367-4d3f-8d35-00710cbf1c60.png

子表控制項屬性

  • 預設行數:預設子表的行數,整數填寫,預設2
  • 子表篩選條件:此項可設定子表欄位作爲篩選條件,如:勾選銷售額,則前臺對銷售情況子表根據銷售額大小進行查詢,目前僅支持“等於”的查詢條件

1662448679328-a8b02563-d676-424c-9bf0-dffc047ba84f.png

  • 行動端樣式:瀑布式、二維表、分頁樣式
瀑布式二維表分頁樣式
從上到下瀑布式展示
1717156965116-ef44efb1-34e1-4496-9d7d-d94de2a04c06.png
二維表格模式,與web端表子表展示相同
1717156937276-772da7b0-f6ea-481a-8324-50ff12cc2005.png
點擊行資料打開詳情
1717156947155-f846fa8a-94ac-4f91-8ed8-a35a8f9457d1.png
每條資料一頁展示
1717156975473-64091287-17ee-4d6c-8144-cc70c5b8db55.png
  • 從關聯表單匯入:從關聯表單匯入:運行批次匯入關聯單選資料

1717157215635-064726fc-d6ce-4081-8ba2-b42510cc8cbc.png

  • 預設按鈕管理:修改子表內置按鈕的名稱,包括新增、刪除、匯入、匯出、批次編輯、從關聯表單匯入;子表按鈕需在應用權限組中,授權後纔可使用;
    • 新增:新增行
    • 編輯:刪除行、複製行、插入行(向上新增、向下新增)、匯入,清除行資料
  • 自定義按鈕:子表支持設定子表按鈕、子錶行按鈕,設定方式同表單自定義按鈕,可參考【自定義按鈕】
  • 是否顯示彙總行:是否顯示數值的彙總行,在最下面一行彙總數值相關的列;

1662448337376-6492f7dd-859f-4cc6-a17c-d6944e681d7d.png

點擊彙總行,支持設定預設統計方式,統計方式包括:不統計、求和、平均值、最大值、最小值。統計方式在運行時用戶可切換

1662447043952-ea7ecc56-7a37-438f-ad45-a721d83556f0.png

  • 多級表頭:可設定多級表頭樣式,適用於在統計房屋的貨值訊息時,按總貨值、已售出、未售出分類展示相關訊息(套數、面積、單價、貨值),在未售出下展示調整前與調整後的成本單價的場景
    • 點擊"設定",可長按鼠標左鍵從左向右移動選中多列表頭(至少選擇2列),輸入多級表頭名稱並確定

1679909765805-2a258da6-2e53-431f-97db-48fcd8bb39ac.png

- 在彈出框設定完成多級表頭後,點擊確定,表單設計的子表展示多級表頭樣式;表單預覽時,顯示子表多級表頭樣式

1680150108007-51681735-b24e-42b5-9f8b-fa04007de55c.png

  • 是否開啓查看模式:開啓後若子表無可寫權限時,子表使用純淨查看模式進行渲染減少內存消耗,降低性能風險;建議:子表資料量較大或者子表列數較多場景下進行開啓
  • 行動端子表不顯示:開啓後行動端查看表單時子表不進行渲染;注:只適用於以下場景:行動端的業務表單查看及修改表單時對子表無任何修改操作,行動端的流程表單審批時對子表無任何修改操作
  • 每頁預設顯示資料:可選擇10、20、50、100條每頁

子表模型屬性

  • 空行校對:選項false/true,選項false,表單運行時子表沒有資料可以正常送出;選擇true,表單運行時子表沒有資料,不能送出。

  • 顯示條件:設定按照某個條件展示子表資料

  • 子表中的數值欄位支持設定對齊方式:左對齊、右對齊;預設右對齊;
    1706791533336-3c48d324-9563-46b2-91fb-6d345b9f12cd.png

標籤頁

標籤頁組件僅用於表單頁面佈局,不產生資料項。

1719826400983-135017c0-9524-4540-8753-89c65a13eec1.png

標籤設定

  • 標籤彈框中預設有3個,可以繼續新增,也可刪除已有標籤,最後一個標籤時不可刪除,每個標籤可以編輯顯示名稱及上下排序;
  • 表單設計時,多個標籤Tab1、Tab2、Tab3可以相互切換,並且在各自的內容區可以拖放控制項
  • tab頁籤支持設定條件:滿足條件時顯示標籤、滿足條件時選中標籤
    • 滿足條件時顯示標籤
      • 前臺業務人員填寫表單時,,滿足條件就顯示對應的標籤,不滿足條件則標籤及其下的控制項都不可見
      • 適用於前臺用戶選擇用戶身份(比如學生、老師)後只填寫該tab下的控制項訊息,而不需要查看其他tab下的控制項訊息等業務場景
    • 滿足條件時選中標籤
      • 前臺業務人員填寫表單時,滿足條件則自動選中對應的標籤頁(標籤頁必須是顯示狀態)
      • 支持前臺業務人員根據狀態欄位t選擇啟動tab(如進行中、已完成)

1719826424576-a2d31a34-befe-46bc-a1a4-beb9c4dd4b1d.png

風格:

- 卡片![1719826605230-3fecff6e-bde1-4cad-9090-b7e760b018d2.png](./img/eFGe7m6veX2yBJev/1719826605230-3fecff6e-bde1-4cad-9090-b7e760b018d2-085510.png)
- 線條![1719826618622-5c04d99c-2b1d-4c61-a7ea-0958281e89c0.png](./img/eFGe7m6veX2yBJev/1719826618622-5c04d99c-2b1d-4c61-a7ea-0958281e89c0-918226.png)

文字:文字的大小、顏色、加粗、斜體設定,也可使用css編寫

背景:背景的顏色、圓角的大小

運行時:

標籤頁組件跟關聯查詢組件頁籤模式同時存在時:

當關聯查詢設定爲頁籤模式時,保留已實現的效果,即是第一個頁籤時表單詳情,後面依次排列關聯查詢。但表單詳情裏面會存在標籤頁組件。如下圖:

1611817603012-ac26f514-ff4e-41eb-a1f4-877c84f1676e.png

容器

容器控制項用於將佈局切分成更小區塊,實現更靈活、更緊湊的頁面呈現

  1. 容器支持設定寬度和高度
  2. 容器內支持拖入容器
  3. 標籤頁組件可以拖入容器;容器控制項內也支持拖入標籤頁
  4. 容器可作爲佔位區,實現表單中區域留白
  5. 線上開發模式可爲容器增加背景色、邊框
  6. 容器可設定顯示條件,若容器不顯示,容器下的控制項也不顯示

示範:表單中拖入兩個分別佔1/2寬度的容器控制項,每個容器內分別拖入三個佔1/3寬度的控制項,即可實現每行展示6個控制項;

1719827163921-f0d00779-e549-477e-97a9-13b6203171d4.png

容器控制項支持調整展示樣式,高度,邊框粗細、顏色、風格、圓角大小等

分割線

適用版本:8.1以上版本

分割線用於將表單訊息進行分割,可設定線型、線寬、顏色等樣式屬性

1719827294779-ef574f52-bdc1-42d6-bbf5-5c6b132a4fb1.png

網頁嵌入

適用版本:8.1以上版本

網頁嵌入用於在表單內嵌入展示指定連結頁面的場景。

1719827863556-a6c91b4e-2f59-4f6d-ade4-db00f0db111f.png

頁面屬性:

  • 外部頁面:輸入外部頁面的地址即可,也可設定參數傳入值
  • 內部頁面:輸入已註冊的組件名稱

1719827980531-608e3aba-4f85-464e-ac2b-5deeb8f24ede.png

連結地址支持傳參,有2種場景:

1、傳入目前登入用戶的訊息(如用戶ID、手機號、郵箱等),選擇動態參數後,自動獲得值傳入頁面中

1719561208709-14f025d5-c92c-490e-af06-bf8bdb1ba268.png

2、設定參數名稱並輸入值,如搜尋網頁中自動帶搜尋的關鍵字

1719561381256-07ce3d4b-d742-4825-8e73-d3049c07e617.png

樣式屬性:支持設定高度,邊框粗細、顏色、風格、圓角大小,控制項寬度等

更新: 2024-08-08 16:36:25
原文: https://www.yuque.com/skwme4/hyk0u0/axmrn5