添加字段

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

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

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

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

2. 修改JSON Schema

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

前端使用JSON Schema自动渲染表单，包括只读模式和编辑模式
后端使用JSON Schema对前端提交的数据进行有效性校验

更详细说明，请参见：表单验证与渲染

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

1  // businesstrip
2  schemas.businesstrip = {
3    type: 'object',
4    properties: {
5      atomName: {
6        ...
7      },
8      description: {
9        ...
10      },
11+     tripTime: {
12+       type: ['object', 'null'],
13+       ebType: 'datePicker',
14+       ebTitle: 'Trip Time',
15+       ebParams: {
16+         dateFormat: 'YYYY-MM-DD',
17+         header: false,
18+         toolbar: true,
19+       },
20+       notEmpty: true,
21+     },
22+     tripAddress: {
23+       type: 'string',
24+       ebType: 'text',
25+       ebTitle: 'Trip Address',
26+       notEmpty: true,
27+     },
28    },
29  };

字段属性说明

名称	说明
type	字段值的类型
ebType	前端渲染时所使用的渲染组件类型
ebTitle	前端渲染时显示的字段标题
ebParams	前端渲染参数，具体配置由渲染组件决定
notEmpty	指定该字段是否是`必填项`

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

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

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

atomName字段在哪里？

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

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

更详细信息，请参见：原子基本概念

下一步

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

1. 修改SQL语句

2. 修改JSON Schema

atomName字段在哪里？

下一步

评论: