默认布局由模块a-basefront提供,下面介绍默认布局JSON规范

atom.render.list

所有与原子列表相关的布局配置都定义在atom.render.list中。为了让代码简洁,这些JSON配置都放入一个单独的文件中

src/module-system/a-basefront/front/src/config/config.js

  1. 1import configAtomRenderList from './config/configAtomRenderList.js';
  2. 2...
  3. 3export default {
  4. 4 atom: {
  5. 5 render: {
  6. 6 list: configAtomRenderList,
  7. 7 ...
  8. 8 },
  9. 9 },
  10. 10 ...
  11. 11};

src/module-system/a-basefront/front/src/config/config/configAtomRenderList.js

  1. 1const list = {
  2. 2 info: {
  3. 3 layout: {
  4. 4 viewSize: {
  5. 5 small: { name: 'list' },
  6. 6 medium: { name: 'table' },
  7. 7 large: { name: 'table' },
  8. 8 },
  9. 9 },
  10. 10 data: {
  11. 11 adapter: {
  12. 12 component: {
  13. 13 module: 'a-basefront',
  14. 14 name: 'listLayoutDataAdapter',
  15. 15 },
  16. 16 providers: {
  17. 17 continuous: {
  18. 18 component: {
  19. 19 module: 'a-basefront',
  20. 20 name: 'listLayoutDataProviderContinuous',
  21. 21 },
  22. 22 },
  23. 23 paged: {
  24. 24 component: {
  25. 25 module: 'a-basefront',
  26. 26 name: 'listLayoutDataProviderPaged',
  27. 27 },
  28. 28 },
  29. 29 },
  30. 30 },
  31. 31 },
  32. 32 ordersBase: [
  33. 33 { name: 'atomCreatedAt', title: 'Created Time', by: 'desc', tableAlias: '' },
  34. 34 { name: 'atomUpdatedAt', title: 'Modification Time', by: 'desc', tableAlias: '' },
  35. 35 { name: 'atomName', title: 'Atom Name', by: 'asc', tableAlias: 'a' },
  36. 36 ],
  37. 37 filter: {
  38. 38 actionPath: '/a/baselayout/listLayoutFilter',
  39. 39 tabs: {
  40. 40 basic: {
  41. 41 schema: {
  42. 42 module: 'a-baselayout',
  43. 43 schema: 'filterTabBasic',
  44. 44 },
  45. 45 },
  46. 46 general: {
  47. 47 schema: {
  48. 48 module: 'a-baselayout',
  49. 49 schema: 'filterTabGeneral',
  50. 50 },
  51. 51 },
  52. 52 },
  53. 53 },
  54. 54 export: {
  55. 55 fields: [
  56. 56 { name: 'atomName', title: 'AtomName' },
  57. 57 { name: 'userName', title: 'Creator' },
  58. 58 { name: 'atomCreatedAt', title: 'Created Time' },
  59. 59 { name: 'atomUpdatedAt', title: 'Modification Time' },
  60. 60 ],
  61. 61 },
  62. 62 },
  63. 63 layouts: {
  64. 64 base: {
  65. 65 blocks: {
  66. 66 caption: {
  67. 67 component: {
  68. 68 module: 'a-baselayout',
  69. 69 name: 'listLayoutBlockListCaption',
  70. 70 },
  71. 71 },
  72. 72 title: {
  73. 73 component: {
  74. 74 module: 'a-baselayout',
  75. 75 name: 'listLayoutBlockListTitle',
  76. 76 },
  77. 77 },
  78. 78 subnavbar: {
  79. 79 component: {
  80. 80 module: 'a-baselayout',
  81. 81 name: 'listLayoutBlockListSubnavbar',
  82. 82 },
  83. 83 },
  84. 84 },
  85. 85 },
  86. 86 card: {
  87. 87 title: 'LayoutCard',
  88. 88 component: {
  89. 89 module: 'a-baselayout',
  90. 90 name: 'listLayoutCard',
  91. 91 },
  92. 92 blocks: {
  93. 93 items: {
  94. 94 component: {
  95. 95 module: 'a-baselayout',
  96. 96 name: 'listLayoutBlockCardItems',
  97. 97 },
  98. 98 },
  99. 99 item: {
  100. 100 component: {
  101. 101 module: 'a-baselayout',
  102. 102 name: 'listLayoutBlockCardItem',
  103. 103 },
  104. 104 },
  105. 105 itemHeader: {
  106. 106 component: {
  107. 107 module: 'a-baselayout',
  108. 108 name: 'listLayoutBlockListItem',
  109. 109 },
  110. 110 summary: false,
  111. 111 },
  112. 112 },
  113. 113 },
  114. 114 list: {
  115. 115 title: 'LayoutList',
  116. 116 component: {
  117. 117 module: 'a-baselayout',
  118. 118 name: 'listLayoutList',
  119. 119 },
  120. 120 blocks: {
  121. 121 items: {
  122. 122 component: {
  123. 123 module: 'a-baselayout',
  124. 124 name: 'listLayoutBlockListItems',
  125. 125 },
  126. 126 },
  127. 127 item: {
  128. 128 component: {
  129. 129 module: 'a-baselayout',
  130. 130 name: 'listLayoutBlockListItem',
  131. 131 },
  132. 132 },
  133. 133 },
  134. 134 },
  135. 135 table: {
  136. 136 title: 'LayoutTable',
  137. 137 component: {
  138. 138 module: 'a-baselayout',
  139. 139 name: 'listLayoutTable',
  140. 140 },
  141. 141 blocks: {
  142. 142 items: {
  143. 143 component: {
  144. 144 module: 'a-baselayout',
  145. 145 name: 'listLayoutBlockTableItems',
  146. 146 },
  147. 147 columns: [
  148. 148 {
  149. 149 dataIndex: 'atomName',
  150. 150 title: 'Atom Name',
  151. 151 align: 'left',
  152. 152 component: {
  153. 153 module: 'a-baselayout',
  154. 154 name: 'listLayoutTableCellAtomName',
  155. 155 },
  156. 156 },
  157. 157 {
  158. 158 dataIndex: 'userName',
  159. 159 title: 'Creator',
  160. 160 align: 'left',
  161. 161 component: {
  162. 162 module: 'a-baselayout',
  163. 163 name: 'listLayoutTableCellUserName',
  164. 164 },
  165. 165 },
  166. 166 {
  167. 167 dataIndex: 'atomCreatedAt',
  168. 168 title: 'Created Time',
  169. 169 align: 'left',
  170. 170 },
  171. 171 {
  172. 172 dataIndex: 'atomUpdatedAt',
  173. 173 title: 'Modification Time',
  174. 174 align: 'left',
  175. 175 },
  176. 176 ],
  177. 177 },
  178. 178 bottombar: {
  179. 179 component: {
  180. 180 module: 'a-baselayout',
  181. 181 name: 'listLayoutBlockTableBottombar',
  182. 182 },
  183. 183 },
  184. 184 },
  185. 185 },
  186. 186 select: {
  187. 187 component: {
  188. 188 module: 'a-baselayout',
  189. 189 name: 'listLayoutList',
  190. 190 },
  191. 191 blocks: {
  192. 192 title: {
  193. 193 component: {
  194. 194 module: 'a-baselayout',
  195. 195 name: 'listLayoutBlockSelectTitle',
  196. 196 },
  197. 197 },
  198. 198 items: {
  199. 199 component: {
  200. 200 module: 'a-baselayout',
  201. 201 name: 'listLayoutBlockSelectItems',
  202. 202 },
  203. 203 },
  204. 204 },
  205. 205 },
  206. 206 selecting: {
  207. 207 component: {
  208. 208 module: 'a-baselayout',
  209. 209 name: 'listLayoutList',
  210. 210 },
  211. 211 blocks: {
  212. 212 title: {
  213. 213 component: {
  214. 214 module: 'a-baselayout',
  215. 215 name: 'listLayoutBlockSelectingTitle',
  216. 216 },
  217. 217 },
  218. 218 items: {
  219. 219 component: {
  220. 220 module: 'a-baselayout',
  221. 221 name: 'listLayoutBlockSelectingItems',
  222. 222 },
  223. 223 },
  224. 224 },
  225. 225 },
  226. 226 },
  227. 227};
  228. 228export default list;

info.layout.viewSize

定义不同尺寸所支持的布局清单

名称 默认值 说明
small list(列表) 小尺寸,相当于mobile场景
medium table(表格) 中尺寸,相当于pad场景
large table(表格) 大尺寸,相当于pc场景

info.data.adapter

由于不同的布局对数据的使用方式有所不同,所以在这里定义了一个数据适配器和一组数据提供者

1. 数据适配器

数据适配器用于管理一组数据提供者,同时向外暴露了统一的接口规范。模块a-basefront提供了一个缺省的数据适配器,也定义在JSON规范中。如果我们有特殊的业务需求,可以开发自定义的数据适配器,并覆盖默认的配置

名称 默认组件 说明
component a-basefront + listLayoutDataAdapter 实现该数据适配器的Vue组件

2. 数据提供者

模块a-basefront提供了最常见的两种数据提供者,从而满足大多数布局的使用需求

  • providers
名称 默认组件 说明
continuous a-basefront + listLayoutDataProviderContinuous 连续模式:响应下拉滚动,按连续页依次从后端加载数据,比如list布局
paged a-basefront + listLayoutDataProviderPaged 分页模式:响应用户点击,按指定页从后端加载数据,比如table布局

info.ordersBase / info.orders

ordersBase提供了一组基础的排序字段orders用于提供扩展的排序字段。系统会将二者的数组配置进行合并

名称 说明
name 字段名称
title 字段标题,支持国际化
by 默认排序方向
tableAlias 在后端查询时定义的表别名,比如atomName字段位于aAtom数据表,表别名为a

关于表别名,请参见:原子查询

info.filter

info.filter定义数据筛选器,提供页面供用户选择筛选条件

名称 默认值 说明
actionPath /a/baselayout/listLayoutFilter 前端页面路由
tabs.basic.schema a-baselayout + filterTabBasic 基本页签对应的JSON Schema
tabs.basic.general a-baselayout + filterTabGeneral 通用页签对应的JSON Schema

info.export.fields

CabloyJS内置了数据导出功能,允许将用户选择的数据导出到EXCEL文件中。info.export.fields定义需要导出的字段清单

名称 说明
name 字段名称
title 字段标题,支持国际化

layouts

layouts定义所有的布局配置。在不同的场景具体使用哪些配置,由info.layout.viewSize定义

名称 说明
base 基本布局配置,定义一些具有共性的区块,包括:captiontitlesubnavbar
card 卡片布局配置,通用于mobile/pad/pc场景
list 列表布局配置,一般用于mobile场景
table 表格布局配置,一般用于pad/pc场景
select 选择布局配置,用于选择原子结果页面
selecting 选择中布局配置,用于选择原子选择中页面

layouts.table

下面以layouts.table为例,说明具体布局的JSON规范

名称 默认值 说明
title LayoutTable 布局标题,支持国际化
component a-baselayout + listLayoutTable 实现该布局的Vue组件
blocks 组成布局的区块

layouts.table.blocks

一个完整的表格布局通常包含以下区块:

名称 默认Vue组件 说明
caption a-baselayout + listLayoutBlockListCaption 标题栏的左侧:通常显示标题
title a-baselayout + listLayoutBlockListTitle 标题栏的右侧:通常显示一组功能按钮
subnavbar a-baselayout + listLayoutBlockListSubnavbar 副标题栏:根据尺寸不同动态决定是否显示
items a-baselayout + listLayoutBlockTableItems 表格正文:默认采用Ant Design of Vue中的table组件进行渲染
bottombar a-baselayout + listLayoutBlockTableBottombar 页脚栏:通常显示汇总值分页按钮
  • 由于layouts.base已经定义了通用的区块:caption、title、subnavbar,因此在layouts.table中只需定义区块:items、bottombar

layouts.table.blocks.items

下面以layouts.table.blocks.items为例,说明具体区块的JSON规范

名称 默认值 说明
component a-baselayout + listLayoutBlockTableItems 实现该区块的Vue组件
其他配置,比如:columns 区块Vue组件决定具体的JSON配置规范

layouts.table.blocks.items.columns

由于该区块采用表格组件来渲染,因此需要定义一组用于显示表格Header的字段

  • column
名称 说明
dataIndex 字段名称
title 字段标题,支持国际化
align 字段对齐方式
params 渲染参数
component 如果需要定制字段值的渲染逻辑,可以指定一个自定义Vue组件。比如,对字段标题的渲染,就是采用自定义Vue组件a-baselayout + listLayoutTableCellAtomName
  • 除了这些最常用的字段配置,还可以使用Ant Design of Vue中的列配置,请参见:Table 表格

  • params

名称 默认值 说明 举例
default 空字符串 当字段值为空时显示default
dateFormat YYYY-MM-DD HH:mm:ss 对日期类型的字段值进行格式化
currency false 对货币值进行格式化处理
locale false 对字段值进行国际化翻译
computed.expression 指定动态表达式,对字段值进行动态计算 ‘The title is: ’ + record.atomName