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