CabloyJS提供了与众不同的pc=mobile+pad自适应布局。在mobile尺寸下,出差申请清单显示为列表布局,而在pad和pc尺寸下,则显示为表格布局

默认情况下,表格布局显示以下字段:标题 / 描述 / 创建人 / 创建时间 / 修改时间。在这里,我们要增加两个字段的显示:出差时间 / 出差地点,同时删掉修改时间

修改布局配置

表格布局的配置信息在模块前端的config文件中,修改如下:

src/module/bz-businesstrip/front/src/config/config.js

  1. 1export default {
  2. 2 atoms: {
  3. 3 businesstrip: {
  4. 4 render: {
  5. 5 list: {
  6. 6 layouts: {
  7. 7 table: {
  8. 8 blocks: {
  9. 9 items: {
  10. 10 columns: [
  11. 11 {
  12. 12 dataIndex: 'atomName',
  13. 13 ...
  14. 14 },
  15. 15 {
  16. 16 dataIndex: 'description',
  17. 17 ...
  18. 18 },
  19. 19+ {
  20. 20+ dataIndex: 'tripTime',
  21. 21+ title: 'Trip Time',
  22. 22+ align: 'left',
  23. 23+ params: {
  24. 24+ dateFormat: 'YYYY-MM-DD',
  25. 25+ },
  26. 26+ },
  27. 27+ {
  28. 28+ dataIndex: 'tripAddress',
  29. 29+ title: 'Trip Address',
  30. 30+ align: 'left',
  31. 31+ },
  32. 32 {
  33. 33 dataIndex: 'userName',
  34. 34 ...
  35. 35 },
  36. 36 {
  37. 37 dataIndex: 'atomCreatedAt',
  38. 38 ...
  39. 39 },
  40. 40- {
  41. 41- dataIndex: 'atomUpdatedAt',
  42. 42- title: 'Modification Time',
  43. 43- align: 'left',
  44. 44- },
  45. 45 ],
  46. 46 },
  47. 47 },
  48. 48 },
  49. 49 },
  50. 50 },
  51. 51 },
  52. 52 },
  53. 53 },
  54. 54};
  1. 节点atoms.businesstrip.render.list.layouts.table负责配置表格布局

  2. 一个完整的布局是由不同的区块组成的,比如标题区块清单区块页脚区块等等。比如页脚区块显示分页工具栏。那么,在这里,节点blocks.items就是负责配置清单区块,我们只需修改其中的columns节点即可

  3. 表格布局底层采用Ant Design of Vue中的table进行组件渲染,因此字段的配置参数也与antdv table保持一致,请参见:Table 表格

  4. 配置说明

名称 说明
dataIndex 字段名称
title 字段标题
align 字段对齐方式
params.dateFormat 对日期进行格式化
  1. 字段标题的国际化:我们同样需要提供字段标题的国际化语言资源。不过,在上一章节添加字段中,修改JSON Schema时已经添加了相同的语言资源,这里就不必重复添加了,具体可参见文件:src/module/bz-businesstrip/front/src/config/locale/zh-cn.js

下一步

接下来,我们看看如何添加筛选字段,让我们方便而快速的在清单中查找想要的数据