如果我们需要定制原子布局,只需要按照基础布局默认布局的JSON规范,在业务模块中按需修改即可。系统会自动将三个布局的JSON规范合并。因此,定制布局的JSON规范往往是增量部分,所以开发起来非常便捷

下面以业务模块test-party为例,说明如何配置原子类型partytable布局

layoutAtomListParty

定制布局通过静态原子的机制来提供,从而方便版本控制在线修改

src/suite/test-party/modules/test-party/backend/src/config/static/layout/layoutAtomListParty.js

  1. 1 const content = {
  2. 2 info: {
  3. 3 orders: [
  4. 4 { name: 'partyTypeCode', title: 'Party Type' },
  5. 5 { name: 'personCount', title: 'Person Count', by: 'asc' },
  6. 6 ],
  7. 7 },
  8. 8 layouts: {
  9. 9 list: {
  10. 10 blocks: {
  11. 11 // title: false,
  12. 12 },
  13. 13 },
  14. 14 table: {
  15. 15 blocks: {
  16. 16 items: {
  17. 17 columns: [
  18. 18 {
  19. 19 dataIndex: 'atomName',
  20. 20 title: 'Atom Name',
  21. 21 align: 'left',
  22. 22 component: {
  23. 23 module: 'a-baselayout',
  24. 24 name: 'listLayoutTableCellAtomName',
  25. 25 },
  26. 26 },
  27. 27 {
  28. 28 dataIndex: 'partyTypeCode',
  29. 29 title: 'Party Type',
  30. 30 align: 'left',
  31. 31 params: {
  32. 32 computed: {
  33. 33 expression: 'record._partyTypeCodeTitleLocale',
  34. 34 },
  35. 35 },
  36. 36 },
  37. 37 {
  38. 38 dataIndex: 'partyTime',
  39. 39 title: 'Party Time',
  40. 40 align: 'center',
  41. 41 params: {
  42. 42 dateFormat: {
  43. 43 lines: true,
  44. 44 },
  45. 45 },
  46. 46 },
  47. 47 {
  48. 48 dataIndex: '_partyCityTitleLocale',
  49. 49 title: 'Party City',
  50. 50 align: 'left',
  51. 51 },
  52. 52 {
  53. 53 dataIndex: 'personCount',
  54. 54 title: 'Person Count',
  55. 55 align: 'left',
  56. 56 },
  57. 57 {
  58. 58 dataIndex: 'userName',
  59. 59 title: 'Creator',
  60. 60 align: 'left',
  61. 61 component: {
  62. 62 module: 'a-baselayout',
  63. 63 name: 'listLayoutTableCellUserName',
  64. 64 },
  65. 65 },
  66. 66 {
  67. 67 dataIndex: 'createdAt',
  68. 68 title: 'Created Time',
  69. 69 align: 'center',
  70. 70 params: {
  71. 71 dateFormat: {
  72. 72 lines: true,
  73. 73 },
  74. 74 },
  75. 75 },
  76. 76 {
  77. 77 dataIndex: 'updatedAt',
  78. 78 title: 'Modification Time',
  79. 79 align: 'center',
  80. 80 params: {
  81. 81 dateFormat: {
  82. 82 lines: true,
  83. 83 },
  84. 84 },
  85. 85 },
  86. 86 ],
  87. 87 },
  88. 88 },
  89. 89 },
  90. 90 },
  91. 91 };

关于JSON配置的具体说明,请参见:原子列表布局:默认布局