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

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

atoms.{atomClass}.render.list

定制布局JSON配置定义在atoms.{atomClass}.render.list中,在这里就是:atoms.party.render.list。为了让代码简洁,这些JSON配置都放入一个单独的文件中

src/module-vendor/test-party/front/src/config/config.js

  1. 1import configPartyRenderList from './config/configPartyRenderList.js';
  2. 2...
  3. 3export default {
  4. 4 ...
  5. 5 atoms: {
  6. 6 party: {
  7. 7 render: {
  8. 8 list: configPartyRenderList,
  9. 9 ...
  10. 10 },
  11. 11 },
  12. 12 },
  13. 13};

src/module-vendor/test-party/front/src/config/config/configPartyRenderList.js

  1. 1const list = {
  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 table: {
  10. 10 blocks: {
  11. 11 items: {
  12. 12 columns: [
  13. 13 {
  14. 14 dataIndex: 'atomName',
  15. 15 title: 'Atom Name',
  16. 16 align: 'left',
  17. 17 component: {
  18. 18 module: 'a-baselayout',
  19. 19 name: 'listLayoutTableCellAtomName',
  20. 20 },
  21. 21 },
  22. 22 {
  23. 23 dataIndex: 'partyTypeCode',
  24. 24 title: 'Party Type',
  25. 25 align: 'left',
  26. 26 params: {
  27. 27 computed: {
  28. 28 expression: 'record._partyTypeCodeTitleLocale',
  29. 29 },
  30. 30 },
  31. 31 },
  32. 32 {
  33. 33 dataIndex: 'partyTime',
  34. 34 title: 'Party Time',
  35. 35 align: 'left',
  36. 36 },
  37. 37 {
  38. 38 dataIndex: '_partyCityTitleLocale',
  39. 39 title: 'Party City',
  40. 40 align: 'left',
  41. 41 },
  42. 42 {
  43. 43 dataIndex: 'personCount',
  44. 44 title: 'Person Count',
  45. 45 align: 'left',
  46. 46 },
  47. 47 {
  48. 48 dataIndex: 'userName',
  49. 49 title: 'Creator',
  50. 50 align: 'left',
  51. 51 component: {
  52. 52 module: 'a-baselayout',
  53. 53 name: 'listLayoutTableCellUserName',
  54. 54 },
  55. 55 },
  56. 56 {
  57. 57 dataIndex: 'createdAt',
  58. 58 title: 'Created Time',
  59. 59 align: 'left',
  60. 60 },
  61. 61 {
  62. 62 dataIndex: 'updatedAt',
  63. 63 title: 'Modification Time',
  64. 64 align: 'left',
  65. 65 },
  66. 66 ],
  67. 67 },
  68. 68 },
  69. 69 },
  70. 70 },
  71. 71};
  72. 72export default list;

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