基本概念

为了简化页面的开发，CabloyJS提供了布局管理器的概念

布局管理器 = 数据提供者 + 布局配置

  1. 数据提供者：为页面的显示提供数据

  2. 布局配置：将页面切分为区块的组合，并且可以单独指定每一个区块的渲染组件和渲染参数

基础布局

为了进一步简化布局的配置，CabloyJS提供了基础布局配置。业务模块只需提供页面布局的增量部分（定制布局），所以开发起来非常便捷。比如：

原子列表布局 = 基础布局 + 列表默认布局 + 列表定制布局

原子条目布局 = 基础布局 + 条目默认布局 + 条目定制布局

基础布局配置

src/module-system/a-base-sync/front/src/config/config.js

  1. 1  layoutManager: {
  2. 2    base: {
  3. 3      info: {
  4. 4        data: {
  5. 5          adapter: {
  6. 6            component: {
  7. 7              module: 'a-basefront',
  8. 8              name: 'listLayoutDataAdapter',
  9. 9            },
  10. 10            providers: {
  11. 11              all: {
  12. 12                component: {
  13. 13                  module: 'a-basefront',
  14. 14                  name: 'listLayoutDataProviderAll',
  15. 15                },
  16. 16              },
  17. 17              continuous: {
  18. 18                component: {
  19. 19                  module: 'a-basefront',
  20. 20                  name: 'listLayoutDataProviderContinuous',
  21. 21                },
  22. 22              },
  23. 23              paged: {
  24. 24                component: {
  25. 25                  module: 'a-basefront',
  26. 26                  name: 'listLayoutDataProviderPaged',
  27. 27                },
  28. 28              },
  29. 29              tree: {
  30. 30                component: {
  31. 31                  module: 'a-basefront',
  32. 32                  name: 'listLayoutDataProviderTree',
  33. 33                },
  34. 34                fields: {
  35. 35                  sorting: null,
  36. 36                },
  37. 37                dataSourceAdapter: {
  38. 38                  component: null,
  39. 39                },
  40. 40                treeviewRoot: {
  41. 41                  attrs: {
  42. 42                    itemToggle: false,
  43. 43                    selectable: true,
  44. 44                  },
  45. 45                },
  46. 46              },
  47. 47            },
  48. 48          },
  49. 49        },
  50. 50      },
  51. 51      layouts: {
  52. 52        base: {
  53. 53          blocks: {
  54. 54            caption: {
  55. 55              component: {
  56. 56                module: 'a-baselayout',
  57. 57                name: 'baseLayoutBlockCaption',
  58. 58              },
  59. 59              renderImmediate: true,
  60. 60            },
  61. 61            title: {
  62. 62              component: {
  63. 63                module: 'a-baselayout',
  64. 64                name: 'baseLayoutBlockTitle',
  65. 65              },
  66. 66            },
  67. 67            subnavbar: {
  68. 68              component: {
  69. 69                module: 'a-baselayout',
  70. 70                name: 'baseLayoutBlockSubnavbar',
  71. 71              },
  72. 72            },
  73. 73            main: {
  74. 74              component: {
  75. 75                module: 'a-baselayout',
  76. 76                name: 'baseLayoutBlockMain',
  77. 77              },
  78. 78            },
  79. 79          },
  80. 80        },
  81. 81        default: {
  82. 82          title: 'LayoutDefault',
  83. 83          component: {
  84. 84            module: 'a-baselayout',
  85. 85            name: 'baseLayoutDefault',
  86. 86          },
  87. 87          subnavbar: false,
  88. 88        },
  89. 89        list: {
  90. 90          title: 'LayoutList',
  91. 91          component: {
  92. 92            module: 'a-baselayout',
  93. 93            name: 'baseLayoutList',
  94. 94          },
  95. 95          subnavbar: false,
  96. 96          blocks: {
  97. 97            item: {
  98. 98              component: {
  99. 99                module: 'a-baselayout',
  100. 100                name: 'baseLayoutBlockListItem',
  101. 101              },
  102. 102            },
  103. 103            items: {
  104. 104              component: {
  105. 105                module: 'a-baselayout',
  106. 106                name: 'baseLayoutBlockListItems',
  107. 107              },
  108. 108            },
  109. 109          },
  110. 110        },
  111. 111      },
  112. 112    },
  113. 113  },

info.data.adapter

由于不同的布局对数据的使用方式有所不同，所以在这里定义了一个数据适配器和一组数据提供者

1. 数据适配器

数据适配器用于管理一组数据提供者，同时向外暴露了统一的接口规范。模块a-basefront提供了一个缺省的数据适配器，也定义在JSON规范中。如果我们有特殊的业务需求，可以开发自定义的数据适配器，并覆盖默认的配置

名称 默认组件 说明
component a-basefront + listLayoutDataAdapter 实现该数据适配器的Vue组件

2. 数据提供者

模块a-basefront提供了最常见的4种数据提供者，从而满足大多数布局的使用需求

  • providers
名称 默认组件 说明
all a-basefront + listLayoutDataProviderAll 所有数据模式：用于从后端一次性加载所有数据
continuous a-basefront + listLayoutDataProviderContinuous 连续模式：响应下拉滚动，按连续页依次从后端加载数据，比如list布局
paged a-basefront + listLayoutDataProviderPaged 分页模式：响应用户点击，按指定页从后端加载数据，比如table布局
tree a-basefront + listLayoutDataProviderTree 树型模式：按树型结构从后端加载数据，比如tree布局和treeTable布局

layouts

layouts定义基本的布局配置

名称 说明
base 基本布局配置，定义一些具有共性的区块，包括：caption、title、subnavbar、main
default 默认布局配置。如果没有明确指定，一般的页面都会从default布局继承配置
list 列表布局配置，一般的列表页面都会从list布局继承配置