接下来,我们给出差申请添加两个字段:出差时间出差地点

1. 修改SQL语句

CabloyJS中的每一个业务模块都单独管理自己的数据版本,不同的数据版本都对应一段相应的升级逻辑,从而方便每一个业务模块的无缝升级

更详细说明,请参见:模块数据版本与变更

新建的业务模块数据版本为1,在这个数据版本中通过SQL语句直接创建了一个数据表bzBusinesstrip。该表除了约定的基础字段id / createdAt / updatedAt / deleted / iid / atomId,还有一个业务字段description。在这里,我们新增两个业务字段tripTime / tripAddress

src/module/bz-businesstrip/backend/src/bean/version.manager.js

  1. 1 async update(options) {
  2. 2 if (options.version === 1) {
  3. 3 // create table: bzBusinesstrip
  4. 4 const sql = `
  5. 5 CREATE TABLE bzBusinesstrip (
  6. 6 id int(11) NOT NULL AUTO_INCREMENT,
  7. 7 createdAt timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  8. 8 updatedAt timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  9. 9 deleted int(11) DEFAULT '0',
  10. 10 iid int(11) DEFAULT '0',
  11. 11 atomId int(11) DEFAULT '0',
  12. 12 description varchar(255) DEFAULT NULL,
  13. 13+ tripTime timestamp DEFAULT NULL,
  14. 14+ tripAddress varchar(255) DEFAULT '',
  15. 15 PRIMARY KEY (id)
  16. 16 )
  17. 17 `;
  18. 18 await this.ctx.model.query(sql);
  19. 19 }
  20. 20 }

在实际的开发当中,我们可能会对同一个数据版本中的代码逻辑进行重构。为了让重构的代码得到重新执行,从而使修改后的SQL语句生效,我们只需要执行如下指令:

  1. 1# 1. 停止后端服务(ctrl+c)
  2. 2# 2. 重建数据库
  3. 3$ npm run db:reset
  4. 4# 3. 启动后端服务
  5. 5$ npm run dev:backend

2. 修改JSON Schema

CabloyJS采用JSON Schema来描述业务表单的字段信息。这里的JSON Schema有两个作用:

  1. 前端使用JSON Schema自动渲染表单,包括只读模式和编辑模式

  2. 后端使用JSON Schema对前端提交的数据进行有效性校验

更详细说明,请参见:表单验证与渲染

src/module/bz-businesstrip/backend/src/config/validation/schema/businesstrip.js

  1. 1 // businesstrip
  2. 2 schemas.businesstrip = {
  3. 3 type: 'object',
  4. 4 properties: {
  5. 5 atomName: {
  6. 6 ...
  7. 7 },
  8. 8 description: {
  9. 9 ...
  10. 10 },
  11. 11+ tripTime: {
  12. 12+ type: ['object', 'null'],
  13. 13+ ebType: 'datePicker',
  14. 14+ ebTitle: 'Trip Time',
  15. 15+ ebParams: {
  16. 16+ dateFormat: 'YYYY-MM-DD',
  17. 17+ header: false,
  18. 18+ toolbar: true,
  19. 19+ },
  20. 20+ notEmpty: true,
  21. 21+ },
  22. 22+ tripAddress: {
  23. 23+ type: 'string',
  24. 24+ ebType: 'text',
  25. 25+ ebTitle: 'Trip Address',
  26. 26+ notEmpty: true,
  27. 27+ },
  28. 28 },
  29. 29 };
  • 字段属性说明
名称 说明
type 字段值的类型
ebType 前端渲染时所使用的渲染组件类型
ebTitle 前端渲染时显示的字段标题
ebParams 前端渲染参数,具体配置由渲染组件决定
notEmpty 指定该字段是否是必填项

我们看到字段的ebTitle指定的是英文,如果要显示中文,只需要添加相应的中文资源即可

src/module/bz-businesstrip/front/src/config/locale/zh-cn.js

  1. 1export default {
  2. 2 Name: '名称',
  3. 3 Description: '描述',
  4. 4+ 'Trip Time': '出差时间',
  5. 5+ 'Trip Address': '出差地点',
  6. 6};

atomName字段在哪里?

我们看到在JSON Schema指定了字段atomName,但是数据表bzBusinesstrip的SQL语句中并没有atomName的信息,那么atomName到底存到哪里去了呢?

在CabloyJS中,业务数据是由基础表+业务表两部分组成的,基础表存储一些共性的字段,从而提供一些共性的业务逻辑,那么atomName字段就在基础表中

更详细信息,请参见:原子基本概念

下一步

现在,当我们新建出差申请时,就会自动渲染新添加的字段。当我们保存或者提交草稿时也会自动把所有字段值存入数据库。接下来,我们看看如何在表格布局中显示新添加的字段