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