默认布局由模块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 基本布局配置，定义一些具有共性的区块，包括：caption、title、subnavbar
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