如果我们需要定制原子布局
,只需要按照默认布局
的JSON规范,在业务模块中按需修改即可。系统会自动将两个JSON规范
合并。因此,定制布局的JSON规范
往往是增量部分,所以开发起来非常便捷
下面以业务模块test-party
为例,说明如何配置原子类型party
的table布局
atoms.{atomClass}.render.list
定制布局
的JSON配置
定义在atoms.{atomClass}.render.list
中,在这里就是:atoms.party.render.list
。为了让代码简洁,这些JSON配置都放入一个单独的文件中
src/module-vendor/test-party/front/src/config/config.js
- 1import configPartyRenderList from './config/configPartyRenderList.js';
- 2...
- 3export default {
- 4 ...
- 5 atoms: {
- 6 party: {
- 7 render: {
- 8 list: configPartyRenderList,
- 9 ...
- 10 },
- 11 },
- 12 },
- 13};
src/module-vendor/test-party/front/src/config/config/configPartyRenderList.js
- 1const list = {
- 2 info: {
- 3 orders: [
- 4 { name: 'partyTypeCode', title: 'Party Type' },
- 5 { name: 'personCount', title: 'Person Count', by: 'asc' },
- 6 ],
- 7 },
- 8 layouts: {
- 9 table: {
- 10 blocks: {
- 11 items: {
- 12 columns: [
- 13 {
- 14 dataIndex: 'atomName',
- 15 title: 'Atom Name',
- 16 align: 'left',
- 17 component: {
- 18 module: 'a-baselayout',
- 19 name: 'listLayoutTableCellAtomName',
- 20 },
- 21 },
- 22 {
- 23 dataIndex: 'partyTypeCode',
- 24 title: 'Party Type',
- 25 align: 'left',
- 26 params: {
- 27 computed: {
- 28 expression: 'record._partyTypeCodeTitleLocale',
- 29 },
- 30 },
- 31 },
- 32 {
- 33 dataIndex: 'partyTime',
- 34 title: 'Party Time',
- 35 align: 'left',
- 36 },
- 37 {
- 38 dataIndex: '_partyCityTitleLocale',
- 39 title: 'Party City',
- 40 align: 'left',
- 41 },
- 42 {
- 43 dataIndex: 'personCount',
- 44 title: 'Person Count',
- 45 align: 'left',
- 46 },
- 47 {
- 48 dataIndex: 'userName',
- 49 title: 'Creator',
- 50 align: 'left',
- 51 component: {
- 52 module: 'a-baselayout',
- 53 name: 'listLayoutTableCellUserName',
- 54 },
- 55 },
- 56 {
- 57 dataIndex: 'createdAt',
- 58 title: 'Created Time',
- 59 align: 'left',
- 60 },
- 61 {
- 62 dataIndex: 'updatedAt',
- 63 title: 'Modification Time',
- 64 align: 'left',
- 65 },
- 66 ],
- 67 },
- 68 },
- 69 },
- 70 },
- 71};
- 72export default list;
关于JSON配置的具体说明,请参见:原子列表布局:默认布局
评论: