帮助首页开发工具控件类型配置

控件类型配置

InputField 为配置连接器输入项渲染的 schema 文件，一个连接器的一个 action 对应一个 inputFields，由各个配置项组合而成的列表（支持嵌套）;

配置项具体说明及 demo
可视化配置：
![](/media/202310/2023-10-19_114328_9289580.7055124744466988.png)

源码配置：

```json
{
     "defaultValue":"XXX",            //默认值  
     "helpText":"...",                //帮助说明文档
     "key":"page",                    // 唯一 key ,同一层级必须唯一
     "label":"名称",                   // label 
     "placeholder":"请输入名称",        //提示文字
     "required": true,                //是否必填
     "type":"string",                 // 输出类型
     "widget":"Input",                // 输入控件
     "widgetConfig":{   //控件配置字段， 非必须
         "multiple": true, //当 type 为 array 时，支持多选
         "format": "YYYY-MM-DD HH:mm:ss", //格式化日期
         "inputType": "password" //密码模式，不展示输入值
      }            
}
```

## 1.输入框

### Input :  普通文本输入框

* widget: Input
* 样式示例

![](/media/202308/2023-08-30_1627510.709151299818079.png)

* 配置字段说明

| 参数      | 说明                   | 类型          | 是否必填 |
| ----------- | ------------------------ | --------------- | ---------- |
| maxlength | 最大输入长度           | integer       |          |
| minlength | 原生属性，最小输入长度 | integer       |          |
| inputType | 输入方式               | text/password |          |
| isCopy    | 是否可拷贝             | boolean       |          |
点击高级配置，在控件配置中填写：
![](/media/202310/2023-10-19_114527_1952260.5492659315452673.png)

### InputNumber:  普通数字输入框

* widget: InputNumber
* 样式示例

![](/media/202308/2023-08-30_1627510.931852598079879.png)

* 配置字段说明

| 参数      | 说明                   | 类型    | 是否必填 |
| ----------- | ------------------------ | --------- | ---------- |
| min       | 设置计数器允许的最小值 | integer |          |
| max       | 设置计数器允许的最大值 | integer |          |
| step      | 计数器步长 默认：1     | float   |          |
| percision | 浮点精确位数 默认：2   | integer |          |
点击高级配置，在控件配置中填写：
![](/media/202310/2023-10-19_114701_9411810.8807064667959245.png)

### SeniorInput:  可输入并可上下文选择组件

* widget: SeniorInput
* 样式示例

![](/media/202308/2023-08-30_1627510.5519890191588632.png)

* 配置字段说明
  
  无

## 2.下拉框

### Select：普通选择下拉框

* widget: Select
* ![](/media/202310/2023-10-19_114822_3439770.07330617343390211.png)
  在高级配置中配置数据：
  
  ![](/media/202310/2023-10-19_114944_2710480.4217511872093047.png)
* 样式示例

![](/media/202308/2023-08-30_1627510.6174239779672577.png)

* 字段说明

type 为 array 时可多选 其他单选

需配置

```
"multiple": true
```

![](/media/202310/2023-10-19_115139_2945220.6192813616450508.png)

### CreateSelect：普通自定义创建下拉框

* widget: CreateSelect
* 样式示例

![](/media/202308/2023-08-30_1627510.17998308780161032.png)

* 字段说明
  
  可配置待选项 datasource：备选，返回数组；

### SeniorSelect：可选上下文下拉框

* widget: SeniorSelect
* 样式示例

![](/media/202308/2023-08-30_1627510.6863848739896184.png)

### SeniorCreateSelect:  可选上下文自定义创建下拉框

* widget: SeniorCreateSelect
* 样式示例

![](/media/202308/2023-08-30_1627510.4781530434769232.png)

### RequestInput ：动态请求下拉框

* widget: RequestInput
* 样式示例

![](/media/202308/2023-08-30_1627510.27516122063394455.png)

* 配置说明
  
  具体查看 Request Input 配置说明, type: array 为多选，其他为单选

### WidgetList： 可选上下文且支持动态请求下拉框

* widget: WidgetList
* 样式示例

![](/media/202308/2023-08-30_1627510.2302637516640078.png)

## 3.选择框

### CheckBox: 普通多项选择框

* widget: CheckBox
* 样式示例

![](/media/202308/2023-08-30_1627510.8797801389253838.png)

* 配置说明
  
  需配置可选项：datasource

### RadioGroup: 普通单项选择框

* widget: RadioGroup
* 样式示例

![](/media/202308/2023-08-30_1627510.9780694022491481.png)

* 配置说明
  
  需配置可选项：datasource

## 4.日期组件

### DateTime：日期时间选择组件

* widget: DateTime
* 样式示例

![](/media/202308/2023-08-30_1627510.9182199240452905.png)

* 配置字段说明

| 参数   | 说明                                          | 类型   | 是否必填 |
| -------- | ----------------------------------------------- | -------- | ---------- |
| format | 可选，绑定值的格式，默认：YYYY-MM-DD HH:mm:ss | 字符型 | 否       |

![](/media/202310/2023-10-19_115302_0822930.15858021281650792.png)

注：type 类型为：timestamp  返回时间戳  timestampMills 返回毫秒时间戳 ，无需配置 format；  其他返回字符串

### Time: 普通时间选择组件

* widget: Time
* 样式示例

![](/media/202308/2023-08-30_1627510.6701742108878488.png)

* 配置字段说明

| 参数   | 说明                              | 类型   | 是否必填 |
| -------- | ----------------------------------- | -------- | ---------- |
| format | 可选，绑定值的格式，默认 HH:mm:ss | 字符型 | 否       |

### Date： 普通日期选择组件

* widget:

Date

* 样式示例

![](/media/202308/2023-08-30_1627510.7679534862701554.png)

* 配置字段说明

| 参数   | 说明                                | 类型   | 是否必填 |
| -------- | ------------------------------------- | -------- | ---------- |
| format | 可选，绑定值的格式，默认 YYYY-DD-SS | 字符型 | 否       |

### SeniorDateTime :  可选上下文的日期时间组件

* widget: SeniorDateTime
* 样式示例

![](/media/202308/2023-08-30_1627510.6446209626820179.png)
在高级配置中配置格式：
![](/media/202310/2023-10-19_115354_7086300.5981232136251343.png)

## 5.分组组件

### Group: 普通分组组件

* widget: Group
* 样式示例

![](/media/202308/2023-08-30_1627510.729236433420359.png)

* 配置说明

需配置 children

### SeniorGroup: 可选上下文分组组件

* widget: SeniorGroup
* 样式示例

![](/media/202308/2023-08-30_1627520.6814126607439072.png)

### FlatGroup: 组合行内组件

* widget: FlatGroup
* 样式示例

![](/media/202308/2023-08-30_1627520.2811142774327492.png)

## 6.其他组件

### CallbackMarkdown: markdown 资产 ID 替换组件

* widget: CallbackMarkdown
* 样式示例

![](/media/202308/2023-08-30_1627520.5924731835291912.png)

### RandomKey:  生成 uuid 组件

* widget: RandomKey
* 配置说明

| 参数         | 说明       | 类型         | 枚举值                         | 是否必填         |
| -------------- | ------------ | -------------- | -------------------------------- | ------------------ |
| length       | uuid 位数  | number       | --                             | 否               |
| content_type | 内容组合   | string(枚举) | character:纯字母 number：纯数字 | 否(不填则不限制) |
| case_type    | 大小写组合 | string(枚举) | lower:全小写 upper:全小大写     | 否(不填则不限制) |

### ObjectGenerator :  KV 对象生成组件

* widget: ObjectGenerator
* 样式示例

![](/media/202308/2023-08-30_1627520.43384596040446977.png)

### 选择代理网关 widget

* widget:  ProxySelectInput
* * 需要在开放服务中新增代理网关，之后才能在支持的连接器中选择代理网关授权

### 选择单个节点数据(支持对象、数组)

* widget: DataNodeSelect
* widgetConfig 配置

```json
acceptType: ["array", "object"]
```

### 提取选中节点的字段(只支持单一层级)

* widget: FieldSelect
* widgetConfig 配置

```json
// 当前入参中那个 key 作为筛选条件
fromInputName: "listObject"
```

* 只支持两种前置的 widget（DataNodeSelect、SeniorInput）

### 选择数据表

widget：SelectCreateOption

widgetConfig 配置

```python
#模拟后端返回数据格式 
 {
    "success": true,
    "data": {
        "table": [
            {
                "list": {
                    "id": 1
                },
                "display": {
                    "label": "测试名称 1"
                }
            },
            {
                "list": {
                    "id": 2
                },
                "display": {
                    "label": "测试名称 2"
                }
            },
            {
                "list": {
                    "id": 3
                },
                "display": {
                    "label": "测试名称 3"
                }
            },
            {
                "list": {
                    "id": 4
                },
                "display": {
                    "label": "测试名 4"
                }
            }
        ]
    }
}

widgetConfig 配置
      ...
      widgetConfig：{
        query: {
        params: { query: "123" },
        refOperation: "query",
        refValue: "self.table.display.label",
        refLabel: "self.table.list.id",
      },
      create: {
        refOperation: "create",
        createKey: "listId",
        params: {
          key: "12132",
          value: "abc",
        },
      },
    }
```

### 查询触发选择数据

widget：TriggerSelectData

上一篇连接器源码配置

下一篇脚本配置说明