企業級自定義表單引擎解決方案（十八）--列表視圖屬性設置
表格對于后臺管理類的系統來說，至關重要，系統大多數功能都需要以表格的方式展示業務內容，系統開發人員多數時間也是圍繞著表格進行業務編碼，接觸過很多后臺管理系統的框架，我個人第一首先也是看表格功能是否強大。
對于低代碼平臺來說，也是非常核心的內容，關系到系統好不好用，功能能不能支撐各種業務場景的需求，所以也是至關重要的內容。
列表視圖后續會寫多篇文章來分解具體的功能設計，感興趣可以查看前端相關代碼，這篇文章主要是講一下表格內容的使用配置，不涉及到查詢及各種高級控件的使用。
請參照開源網站的“表單常規示例->控件綜合應用”這個頁面體驗及對照查看相關配置，這個頁面功能單一，但里面的各種列表使用場景比較復雜，將所有平常開發常見的功能的集成到里面了，并且是真正意義的零代碼，全部通過配置完成，前后端都沒有任何代碼，界面配置立馬生效。
基礎功能參見antd的表格使用，特殊功能如下：
- 點擊“字符字段”打開編輯對話框（點擊字段接入規則引擎，將選中的行數據作為事件參數傳入規則引擎，執行打開編輯視圖對話框、根據選擇行Id獲取后端數據、將數據綁定到編輯視圖）
- 日期、字典、電話等字段自定義顯示
- 外鍵字段格式化顯示（數據庫只存儲外鍵Id）
- 人員字段格式化顯示（數據庫只存儲人員外鍵）
- 表格按鈕權限控制
- 表頭分頁
- 是否換行顯示
- 自定義列顯示
- 多選行
- 表格擴展內容顯示
列表視圖屬性設置
屬性常規設置即為設置ant的table控件，其他一些擴展字段如下：
- tableDiv
設置a-table外層的div樣式，默認樣式為：'min-height: 560px' - rowKey
前端表格的行主鍵，一般情況為"id"，可以不設置，當查詢出來的列表數據主鍵不為id是，需要設置，如：id_a - tableType
自定義擴展字段，多數情況不需要設置，如果是樹列表，需要設置為“tree” - columns
參見Table組件設置，定義表格列， 特殊處理（寬度width不設置，默認置為80；對齊align不設置，默認置為center，擴展linked屬性，標識表格字段可以點擊，點擊事件可接入規則引擎；擴展option_is屬性，標識字段列可自定義是否顯示；擴展option_selected屬性，配合option_is使用，標識字段列默認是否顯示） - columnsExpanded columnsExpandedColSpan
columnsExpanded表格展開更多內容字段列定義，columnsExpandedColSpan定義展開顯示多少行，值為1-4，默認為4 - colOperateWidth
定義列表操作列的寬度，當列表操作控件或者列表更多控件定義了，列表中的操作列才會顯示。 - excelTemplate
導入導出Excel配置模版信息，參見附錄【導入導出Excel模版】，如：[{"name":"電話","field":"phoneNumber","fieldType":5,"isRequred":true,"validateType":99,"validateValue":"[{'customerVal':'Phone','trigger':'blur'}]"},{"name":"學歷","field":"education","fieldType":5,"validateType":11}] - excelDicts
字段字典映射集合數據，表示Excel中用到的數據字典映射信息，定義哪個字段用到哪個數據字典，如：[{"dict":"sex","field":"sex"},{"dict":"edu","field":"education"},{"dict":"title","field":"positionalTitle"}] - excelName
導入導出Excel文件名稱，如：人員管理測試Excel數據 - uniqKey
導入時唯一字段檢測（這里的字段為數據庫字段，注意不是轉換為駝峰命名之后的字段，多個字段組合用;號隔開），如：UserName。 - eval_query
執行后端方法獲取查詢參數后執行的JS腳本，自定義擴展處理查詢條件，本質上執行eval函數，特殊場景使用，比如執行查詢之前，將查詢條件做自定義特殊處理，如：界面查詢條件只查詢年月，到后端映射為時間段查詢sqlWhere.children.forEach(r=>{if(r.field==='checkTime'){r.value=[r.value.format('yyyy-MM')+'-01 00:00:00',r.value.add(1,'month').format('yyyy-MM')+'-01 00:00:00']}})，參考附錄：【自定義查詢條件】 - defaultSorting
默認后端查詢方法排序，如：checkTime desc,stockCheckType asc等
高級功能說明
- 表頭分頁
參照antd設置即可，如果存在自定義列顯示，且所有列都不顯示時，分組字段也不顯示
{
"title": "日期字段",
"children": [
{
"dataIndex": "dateTimeField",
"title": "日期字段",
"scopedSlots": {
"customRender": "dateTimeField"
},
"width": 160
},
{
"dataIndex": "dateField",
"title": "日期字段2",
"scopedSlots": {
"customRender": "dateField"
},
"width": 160,
"option_is": true,
"option_selected": true
}
]
}
- 自定義列顯示
在表格右上角，用戶可點擊下拉勾選自定義顯示哪些字段列option_is屬性控制是否允許用戶選擇，option_selected控制默認是否勾選
{
"dataIndex": "dateField",
"title": "日期字段2",
"scopedSlots": {
"customRender": "dateField"
},
"width": 160,
"option_is": true,
"option_selected": true
}
- 是否換行顯示
在表格右上角，checkbox選擇，默認情況表格單元格內容超過展示寬度，用“...”代替，當勾選時，表格單元格內容換行顯示所有內容。 - 超連接字段
擴展linked屬性，點擊單元格內容，可觸發事件，接入規則引擎，觸發的事件會將表格行作為事件參數傳遞到規則引擎，比如點擊“合同編號”字段打開編輯合同對話框等（需要設置scopedSlots屬性）。
{
"align": "center",
"dataIndex": "stringField",
"title": "字符",
"sorter": true,
"linked": true,
"scopedSlots": {
"customRender": "stringField"
}
}
- 表格更多內容
columnsExpanded表格展開更多內容字段列定義，columnsExpandedColSpan定義展開顯示多少行，值為1-4，默認為4，表格更多列不支持option_is和option_selected屬性，支持linked屬性設置，“是否換行顯示”功能也支持
- 超出內容自動橫向滾動
表格控件設置了超出表格所有列長度時，自動出現橫向滾動條
- 其他高級功能
更多高級功能，可增加列表自定義控件，格式化顯示表格內容
個人業余時間開發進度確實快不起來，很多設計思想我認為還是很不錯的，完全可以應用到實際項目中，歡迎關注。
wike文檔地址：https://gitee.com/kuangqifu/sprite/wikis/pages
后端開源地址：https://gitee.com/kuangqifu/sprite
前端開源地址：https://gitee.com/kuangqifu/spritefronts
體驗地址：http://47.108.141.193:8031 （首次加載可能有點慢，用的阿里云最差的服務器）
自定義表單文章地址：http://www.rzrgm.cn/spritekuang/
流程引擎文章地址：http://www.rzrgm.cn/spritekuang/category/834975.html （采用WWF開發，已過時，已改用Elsa實現，http://www.rzrgm.cn/spritekuang/p/14970992.html
posted on 2022-12-16 18:24 spritekuang 閱讀(734) 評論(0) 收藏 舉報
浙公網安備 33010602011771號