如果我们需要定制原子布局
,只需要按照基础布局
、默认布局
的JSON规范,在业务模块中按需修改即可。系统会自动将三个布局的JSON规范
合并。因此,定制布局的JSON规范
往往是增量部分,所以开发起来非常便捷
下面以业务模块test-party
为例,说明如何配置原子类型party
的table布局
layoutAtomListParty
定制布局
通过静态原子的机制来提供,从而方便版本控制
和在线修改
src/suite-vendor/test-party/modules/test-party/backend/src/config/static/layout/layoutAtomListParty.js
- 1 const content = {
- 2 info: {
- 3 orders: [
- 4 { name: 'partyTypeCode', title: 'Party Type' },
- 5 { name: 'personCount', title: 'Person Count', by: 'asc' },
- 6 ],
- 7 },
- 8 layouts: {
- 9 list: {
- 10 blocks: {
- 11 // title: false,
- 12 },
- 13 },
- 14 table: {
- 15 blocks: {
- 16 items: {
- 17 columns: [
- 18 {
- 19 dataIndex: 'atomName',
- 20 title: 'Atom Name',
- 21 align: 'left',
- 22 component: {
- 23 module: 'a-baselayout',
- 24 name: 'listLayoutTableCellAtomName',
- 25 },
- 26 },
- 27 {
- 28 dataIndex: 'partyTypeCode',
- 29 title: 'Party Type',
- 30 align: 'left',
- 31 params: {
- 32 computed: {
- 33 expression: 'record._partyTypeCodeTitleLocale',
- 34 },
- 35 },
- 36 },
- 37 {
- 38 dataIndex: 'partyTime',
- 39 title: 'Party Time',
- 40 align: 'center',
- 41 params: {
- 42 dateFormat: {
- 43 lines: true,
- 44 },
- 45 },
- 46 },
- 47 {
- 48 dataIndex: '_partyCityTitleLocale',
- 49 title: 'Party City',
- 50 align: 'left',
- 51 },
- 52 {
- 53 dataIndex: 'personCount',
- 54 title: 'Person Count',
- 55 align: 'left',
- 56 },
- 57 {
- 58 dataIndex: 'userName',
- 59 title: 'Creator',
- 60 align: 'left',
- 61 component: {
- 62 module: 'a-baselayout',
- 63 name: 'listLayoutTableCellUserName',
- 64 },
- 65 },
- 66 {
- 67 dataIndex: 'createdAt',
- 68 title: 'Created Time',
- 69 align: 'center',
- 70 params: {
- 71 dateFormat: {
- 72 lines: true,
- 73 },
- 74 },
- 75 },
- 76 {
- 77 dataIndex: 'updatedAt',
- 78 title: 'Modification Time',
- 79 align: 'center',
- 80 params: {
- 81 dateFormat: {
- 82 lines: true,
- 83 },
- 84 },
- 85 },
- 86 ],
- 87 },
- 88 },
- 89 },
- 90 },
- 91 };
关于JSON配置的具体说明,请参见:原子列表布局:默认布局
评论: