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

layoutAtomListBase

默认布局通过静态原子的机制来提供，从而方便版本控制和在线修改

src/module-system/a-basefront/backend/src/config/static/layout/layoutAtomListBase.js

  1. 1module.exports = app => {
  2. 2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const content = {
  4. 4    info: {
  5. 5      layout: {
  6. 6        viewSize: {
  7. 7          small: 'list',
  8. 8          medium: 'table',
  9. 9          large: 'table',
  10. 10        },
  11. 11      },
  12. 12      ordersBase: [
  13. 13        { name: 'atomCreatedAt', title: 'Created Time', by: 'desc', tableAlias: '' },
  14. 14        { name: 'atomUpdatedAt', title: 'Modification Time', by: 'desc', tableAlias: '' },
  15. 15        { name: 'atomName', title: 'Atom Name', by: 'asc', tableAlias: 'a' },
  16. 16      ],
  17. 17      orders: [],
  18. 18      filter: {
  19. 19        actionPath: '/a/baselayout/listLayoutFilter',
  20. 20        tabs: {
  21. 21          basic: {
  22. 22            schema: {
  23. 23              module: 'a-baselayout',
  24. 24              schema: 'filterTabBasic',
  25. 25            },
  26. 26          },
  27. 27          general: {
  28. 28            schema: {
  29. 29              module: 'a-baselayout',
  30. 30              schema: 'filterTabGeneral',
  31. 31            },
  32. 32          },
  33. 33        },
  34. 34      },
  35. 35      export: {
  36. 36        fields: [
  37. 37          { name: 'atomName', title: 'AtomName' },
  38. 38          { name: 'userName', title: 'Creator' },
  39. 39          { name: 'atomCreatedAt', title: 'Created Time' },
  40. 40          { name: 'atomUpdatedAt', title: 'Modification Time' },
  41. 41        ],
  42. 42      },
  43. 43    },
  44. 44    layouts: {
  45. 45      base: {
  46. 46        blocks: {
  47. 47          caption: {
  48. 48            component: {
  49. 49              module: 'a-baselayout',
  50. 50              name: 'listLayoutBlockListCaption',
  51. 51            },
  52. 52          },
  53. 53          title: {
  54. 54            component: {
  55. 55              module: 'a-baselayout',
  56. 56              name: 'baseLayoutBlockListTitle',
  57. 57            },
  58. 58          },
  59. 59          subnavbar: {
  60. 60            component: {
  61. 61              module: 'a-baselayout',
  62. 62              name: 'baseLayoutBlockListSubnavbar',
  63. 63            },
  64. 64          },
  65. 65        },
  66. 66      },
  67. 67      card: {
  68. 68        title: 'LayoutCard',
  69. 69        component: {
  70. 70          module: 'a-baselayout',
  71. 71          name: 'baseLayoutList',
  72. 72        },
  73. 73        subnavbar: {
  74. 74          policyDefault: true,
  75. 75        },
  76. 76        blocks: {
  77. 77          items: {
  78. 78            component: {
  79. 79              module: 'a-baselayout',
  80. 80              name: 'baseLayoutBlockCardItems',
  81. 81            },
  82. 82          },
  83. 83          item: {
  84. 84            component: {
  85. 85              module: 'a-baselayout',
  86. 86              name: 'listLayoutBlockCardItem',
  87. 87            },
  88. 88          },
  89. 89          itemHeader: {
  90. 90            component: {
  91. 91              module: 'a-baselayout',
  92. 92              name: 'listLayoutBlockListItem',
  93. 93            },
  94. 94            summary: false,
  95. 95          },
  96. 96        },
  97. 97      },
  98. 98      list: {
  99. 99        title: 'LayoutList',
  100. 100        component: {
  101. 101          module: 'a-baselayout',
  102. 102          name: 'baseLayoutList',
  103. 103        },
  104. 104        subnavbar: {
  105. 105          policyDefault: true,
  106. 106        },
  107. 107        blocks: {
  108. 108          items: {
  109. 109            component: {
  110. 110              module: 'a-baselayout',
  111. 111              name: 'baseLayoutBlockListItems',
  112. 112            },
  113. 113          },
  114. 114          item: {
  115. 115            component: {
  116. 116              module: 'a-baselayout',
  117. 117              name: 'listLayoutBlockListItem',
  118. 118            },
  119. 119          },
  120. 120        },
  121. 121      },
  122. 122      table: {
  123. 123        title: 'LayoutTable',
  124. 124        component: {
  125. 125          module: 'a-baselayout',
  126. 126          name: 'baseLayoutTable',
  127. 127        },
  128. 128        subnavbar: {
  129. 129          policyDefault: true,
  130. 130        },
  131. 131        blocks: {
  132. 132          items: {
  133. 133            component: {
  134. 134              module: 'a-baselayout',
  135. 135              name: 'baseLayoutBlockTableItems',
  136. 136            },
  137. 137            columns: [
  138. 138              {
  139. 139                dataIndex: 'atomName',
  140. 140                title: 'Atom Name',
  141. 141                align: 'left',
  142. 142                component: {
  143. 143                  module: 'a-baselayout',
  144. 144                  name: 'listLayoutTableCellAtomName',
  145. 145                },
  146. 146              },
  147. 147              {
  148. 148                dataIndex: 'userName',
  149. 149                title: 'Creator',
  150. 150                align: 'left',
  151. 151                component: {
  152. 152                  module: 'a-baselayout',
  153. 153                  name: 'listLayoutTableCellUserName',
  154. 154                },
  155. 155              },
  156. 156              {
  157. 157                dataIndex: 'atomCreatedAt',
  158. 158                title: 'Created Time',
  159. 159                align: 'center',
  160. 160                params: {
  161. 161                  dateFormat: {
  162. 162                    lines: true,
  163. 163                  },
  164. 164                },
  165. 165              },
  166. 166              {
  167. 167                dataIndex: 'atomUpdatedAt',
  168. 168                title: 'Modification Time',
  169. 169                align: 'center',
  170. 170                params: {
  171. 171                  dateFormat: {
  172. 172                    lines: true,
  173. 173                  },
  174. 174                },
  175. 175              },
  176. 176            ],
  177. 177          },
  178. 178          bottombar: {
  179. 179            component: {
  180. 180              module: 'a-baselayout',
  181. 181              name: 'baseLayoutBlockTableBottombar',
  182. 182            },
  183. 183          },
  184. 184        },
  185. 185      },
  186. 186      tree: {
  187. 187        title: 'LayoutTree',
  188. 188        component: {
  189. 189          module: 'a-baselayout',
  190. 190          name: 'baseLayoutTree',
  191. 191        },
  192. 192        subnavbar: false,
  193. 193        blocks: {
  194. 194          title: {
  195. 195            component: {
  196. 196              module: 'a-baselayout',
  197. 197              name: 'listLayoutBlockTreeTitle',
  198. 198            },
  199. 199          },
  200. 200          items: {
  201. 201            component: {
  202. 202              module: 'a-baselayout',
  203. 203              name: 'listLayoutBlockTreeItems',
  204. 204            },
  205. 205          },
  206. 206        },
  207. 207      },
  208. 208      treeTable: {
  209. 209        title: 'LayoutTreeTable',
  210. 210        component: {
  211. 211          module: 'a-baselayout',
  212. 212          name: 'baseLayoutTreeTable',
  213. 213        },
  214. 214        subnavbar: false,
  215. 215        blocks: {
  216. 216          title: {
  217. 217            component: {
  218. 218              module: 'a-baselayout',
  219. 219              name: 'listLayoutBlockTreeTitle',
  220. 220            },
  221. 221          },
  222. 222          items: {
  223. 223            component: {
  224. 224              module: 'a-baselayout',
  225. 225              name: 'baseLayoutBlockTableItems',
  226. 226            },
  227. 227            sorter: false,
  228. 228            columns: [
  229. 229              {
  230. 230                dataIndex: 'atomName',
  231. 231                title: 'Atom Name',
  232. 232                align: 'left',
  233. 233                component: {
  234. 234                  module: 'a-baselayout',
  235. 235                  name: 'listLayoutTableCellAtomName',
  236. 236                },
  237. 237              },
  238. 238              {
  239. 239                dataIndex: 'userName',
  240. 240                title: 'Creator',
  241. 241                align: 'left',
  242. 242                component: {
  243. 243                  module: 'a-baselayout',
  244. 244                  name: 'listLayoutTableCellUserName',
  245. 245                },
  246. 246              },
  247. 247              {
  248. 248                dataIndex: 'atomCreatedAt',
  249. 249                title: 'Created Time',
  250. 250                align: 'center',
  251. 251                params: {
  252. 252                  dateFormat: {
  253. 253                    lines: true,
  254. 254                  },
  255. 255                },
  256. 256              },
  257. 257              {
  258. 258                dataIndex: 'atomUpdatedAt',
  259. 259                title: 'Modification Time',
  260. 260                align: 'center',
  261. 261                params: {
  262. 262                  dateFormat: {
  263. 263                    lines: true,
  264. 264                  },
  265. 265                },
  266. 266              },
  267. 267            ],
  268. 268          },
  269. 269          bottombar: false,
  270. 270        },
  271. 271      },
  272. 272      select: {
  273. 273        component: {
  274. 274          module: 'a-baselayout',
  275. 275          name: 'baseLayoutList',
  276. 276        },
  277. 277        subnavbar: {
  278. 278          policyDefault: true,
  279. 279        },
  280. 280        blocks: {
  281. 281          title: {
  282. 282            component: {
  283. 283              module: 'a-baselayout',
  284. 284              name: 'listLayoutBlockSelectTitle',
  285. 285            },
  286. 286          },
  287. 287          items: {
  288. 288            component: {
  289. 289              module: 'a-baselayout',
  290. 290              name: 'listLayoutBlockSelectItems',
  291. 291            },
  292. 292          },
  293. 293        },
  294. 294      },
  295. 295      selecting: {
  296. 296        component: {
  297. 297          module: 'a-baselayout',
  298. 298          name: 'baseLayoutList',
  299. 299        },
  300. 300        subnavbar: {
  301. 301          policyDefault: true,
  302. 302        },
  303. 303        blocks: {
  304. 304          title: {
  305. 305            component: {
  306. 306              module: 'a-baselayout',
  307. 307              name: 'listLayoutBlockSelectingTitle',
  308. 308            },
  309. 309          },
  310. 310          items: {
  311. 311            component: {
  312. 312              module: 'a-baselayout',
  313. 313              name: 'listLayoutBlockSelectingItems',
  314. 314            },
  315. 315          },
  316. 316        },
  317. 317      },
  318. 318    },
  319. 319  };
  320. 320  const layout = {
  321. 321    atomName: 'Base',
  322. 322    atomStaticKey: 'layoutAtomListBase',
  323. 323    atomRevision: 0,
  324. 324    description: '',
  325. 325    layoutTypeCode: 3,
  326. 326    content: JSON.stringify(content),
  327. 327    resourceRoles: 'root',
  328. 328  };
  329. 329  return layout;
  330. 330};

info.layout.viewSize

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

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

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 基本布局配置，定义一些具有共性的区块，包括：caption、title、subnavbar
card 卡片布局配置，通用于mobile/pad/pc场景
list 列表布局配置，一般用于mobile场景
table 表格布局配置，一般用于pad/pc场景
tree 树型布局配置，一般用于mobile场景的树型列表页面，如角色管理
treeTable 树型表格布局配置，一般用于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