# 前言

这里介绍如何在插件中设置自定义字段及字段校验处理

# 配置字段

# 配置字段示例

app:
  code: demo 
  name: demo
  desc: demo
  icon: demo
  tag:
    - name: demo
  envs:
    - key: API_SECRET
      secret: strings
  fields:
    - code: field_one
      name: 扩展字段
      desc: 这是一个通过开放应用扩展的字段
      # type可选值:text(单行文本)、multi_select(多选下拉)、select(单选下拉)、checkbox(复选)、radio(单选)、textarea(多行文本)
      type: text 
      # option如下(仅对单选、复选、下拉生效)
      option: 
        - name: 示例选项A
          value: fieldA
        - name: 示例选项B
          value: fieldB
      # 校验逻辑文件
      validate: validate/check
      related: 
        - story 
        - bug
        - task
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 关键配置

fields:
  - code: field_one
    name: 扩展字段
    desc: 这是一个通过开放应用扩展的字段
    # type可选值:text(单行文本)、multi_select(多选下拉)、select(单选下拉)、checkbox(复选)、radio(单选)、textarea(多行文本)
    type: select 
    # 下拉、单选、复选等option配置如下
    option: 
      - name: 示例选项A
        value: fieldA
      - name: 示例选项B
        value: fieldB
    # 校验逻辑文件
    validate: validate/check
    related: 
      - story 
      - bug
      - task
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 校验逻辑

  • 校验文件 如上,validate/check对应文件为resources/validate/check.js
  • 代码示例
(async function () {
  this.sdk = new self.TAPD_JS_SDK.default({
    code: 'demo', // 应用的code,在plugin.yaml中查看
  });

  this.sdk.events.on('checkBeforeRender', () => {
    return false; // return true则开启渲染时自动校验
  });

  this.sdk.events.on('validator', async (params) => {
    const { value } = params;
    console.log('当前参数', params);
    const context = await this.sdk.context.getEntranceData();
	  console.log('上下文信息', context);

    return value === 'fieldB' ? { status: 1 } : {
      status: 0,
      message: '字段校验错误',
    };
  });
}());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 返回数据
参数 类型 说明
status integer 状态,候选值:1(成功)、0(失败)
message string 提示文案,如:字段校验错误

# 应用配置字段

插件安装到项目后,可进入字段设置页面将字段配置到项目中。 enter image description here

上次更新: 2024-07-17 10:30:06