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

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

修改布局配置

表格布局的配置信息在模块后端的布局配置文件中，修改如下：

src/module/bz-businesstrip/backend/src/config/static/layout/layoutAtomListBusinesstrip.js

1. 修改布局配置

  1. 1  const content = {
  2. 2    layouts: {
  3. 3      table: {
  4. 4        blocks: {
  5. 5          items: {
  6. 6            columns: [
  7. 7              {
  8. 8                dataIndex: 'atomName',
  9. 9                ...
  10. 10              },
  11. 11              {
  12. 12                dataIndex: 'description',
  13. 13                ...
  14. 14              },
  15. 15+             {
  16. 16+               dataIndex: 'tripTime',
  17. 17+               title: 'Trip Time',
  18. 18+               align: 'left',
  19. 19+               params: {
  20. 20+                 dateFormat: 'YYYY-MM-DD',
  21. 21+               },
  22. 22+             },
  23. 23+             {
  24. 24+               dataIndex: 'tripAddress',
  25. 25+               title: 'Trip Address',
  26. 26+               align: 'left',
  27. 27+             },
  28. 28              {
  29. 29                dataIndex: 'userName',
  30. 30                ...
  31. 31              },
  32. 32              {
  33. 33                dataIndex: 'atomCreatedAt',
  34. 34                ...
  35. 35              },
  36. 36-             {
  37. 37-               dataIndex: 'atomUpdatedAt',
  38. 38-               title: 'Modification Time',
  39. 39-               align: 'left',
  40. 40-             },
  41. 41            ],
  42. 42          },
  43. 43        },
  44. 44      },
  45. 45    },
  46. 46  };

  1. 节点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

2. 修改布局版本号

  1. 1const layout = {
  2. 2    atomName: 'Businesstrip',
  3. 3    atomStaticKey: 'layoutAtomListBusinesstrip',
  4. 4-   atomRevision: 0,
  5. 5+   atomRevision: 1,  
  6. 6    description: '',
  7. 7    layoutTypeCode: 3,
  8. 8    content: JSON.stringify(content),
  9. 9    resourceRoles: 'root',
  10. 10  };

  • 将布局资源的atomRevision递增

  • 我们不需要重启服务，后端服务会自动检测到更新，并使修改后的布局资源自动生效

下一步

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

延伸阅读