uca/zest

Zero Ui 中的Form组件

（略）基本信息参考uca/economy部分。

1.组件列表

组件名	生命周期	className	说明
AddressSelector	x o o	无	地址选择器。
BraftEditor	x x o	web-braft-editor	富文本编辑器。
CheckJson	x o o	web-check-json	多选框生成Json数据。
CheckTransfer	x o o	web-transfer	带选择的穿梭框。
DialogEditor	x o o	ux_table ux_dialogeditor-table ux_dialog	弹出框表格编辑器。
FileUpload	o o o	web-file-upload	上传专用组件。
InputArray	x o o	uca/zest-array	数组元素录入组件。
JsonEditor	x x x	无	JSON编辑器。
ListSelector	x o o	ux_dialog	列表选择器。
MagicView	x x x	web-magic-view ux_table	显示数据信息。
MatrixSelector	x o o	ux_table web-matrixselector-table ux_dialog	弹出框多选器。
SearchInput	o o o	无	「搜索」增强版查询条件输入。
SearchRangeDate	o o o	web-range-date	「搜索」时间条件输入。
TableEditor	o o x	ux_table_editor	表格编辑器。
TreeSelector	x o o	ux_dialog	树选择器。

2.组件配置矩阵

组件名	配置render	2阶render	相关Ant组件
AddressSelector	aiAddressSelector	Ok	`<Cascader/>`
BraftEditor	aiBraftEditor	x	`<BraftEditor/>`
CheckJson	aiCheckJson	x	`<Checkbox/>`
CheckTransfer	aiTransfer	ai2Transfer	`<Transfer/>`
DialogEditor	aiDialogEditor	x	`<Table/>` `<Dialog/>`
FileUpload	aiFileUpload	x	`<Upload/>`
InputArray	aiInputMulti	ai2InputMulti	`<Input/>` `<Button/>`
JsonEditor	aiJsonEditor	x	`<JSONInput/>`
ListSelector	aiListSelector	ai2ListSelector	`<Input/>` `<Dialog/>` `<Table/>`
MagicView	aiMagic	x	`<Table/>` `<ColumnUser/>` `<span/>`
MatrixSelector	aiMatrixSelector	ai2MatrixSelector	`<Table/>` `<Dialog/>`
SearchInput	aiSearchInput	x	`<Input/>` `<Checkbox/>`
SearchRangeDate	aiSearchRangeDate	x	`<DatePicker/>`
TableEditor	aiTableEditor	x	`<Table/>` `<Button/>`
TreeSelector	aiTreeSelector	ai2TreeSelector	`<Input/>` `<Dialog/>` `<Tree/>`
	aiInput	ai2Input	`<Input/>`
	aiPassword	ai2Password	`<Input.Password/>`
	aiInputNumber	ai2InputNumber	`<InputNumber/>`
	aiCheckbox	ai2Checkbox	`<Checkbox/>`
	aiSubmit	x	`<Button/>`
	aiAction	x	`<Button/>`
	aiHidden	x	`<Input/>`
	aiSelect	ai2Select	`<Select/>`
	aiTextArea	ai2TextArea	`<Input.TextArea/>`
	aiDatePicker	ai2DatePicker	`<DatePicker/>`
	aiTimePicker	x	`<TimePicker/>`
	aiTreeSelect	ai2TreeSelect	`<TreeSelect/>`
	aiRadio	ai2Radio	`<Radio/>`
	aiButton	x	`<Button/>`
	aiButtonGroup	x	`<Button/>`

Methods

(static) AddressSelector()

「组件」`AddressSelector`

地址选择器

import { AddressSelector } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "regionId,选择地址,12,,,placeholder=选择地址",
     "optionJsx.config.ajax": "DIRECT",
     "optionJsx.config.country": "/api/countries,name",
     "optionJsx.config.state": "/api/states/query/:key,name,countryId",
     "optionJsx.config.city": "/api/cities/query/:key,name,stateId",
     "optionJsx.config.region": "/api/regions/query/:key,name,cityId",
     "optionJsx.config.init": "/api/regions/meta/:key"
}

0.2. Js注入

// 调用2阶函数执行渲染，最终传入`ExForm`组件。
const jsx = {
     regionId: Ux.ai2AddressSelector(Op.onChange)
};

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	ajax	props	String	地址选择器的Ajax类型设置，目前支持两种`DIRECT
config	country	props	String	读取国家数据专用Ajax配置。
config	state	props	String	读取省会数据专用Ajax配置。
config	city	props	String	读取城市数据专用Ajax配置。
config	region	props	String	读取区域数据专用Ajax配置。
config	init	props	String	初始化数据专用Ajax配置。

3. 组件核心点

3.1. 关于流程

如果value无值，则只读取国家数据，执行country加载。
如果value有值，则执行初始化数据，走完加载全流程。

3.2. 关于请求初始参数

初始参数表格如下

参数名	说明
language	环境变量中配置`Z_LANGUAGE`，当前应用运行的语言信息。
sigma	从`$app`变量（应用配置）中读取`sigma`变量，可租户，可应用分割。
key	直接读取`props`中的value（Ant Form自定义组件专用字段）。

4. 配置详解

整个加载流程全部走GET方法，而不走POST方法，这是组件限制，底层调用Ux.ajaxGet实现。

4.1. init节点

该节点只有一个路径信息，没有其他信息。

/api/regions/meta/:key

4.2. state,city,region节点

中间节点有三个，对应省会、城市、区域三个维度，格式都如：

<uri>,<responseField>,<requestField>

4.3. country节点

顶层节点主要针对国家，格式如：

<uri>,<responseField>

4.4. 节点语法

上述表达式是这三种节点的专用表达式

参数名	说明
uri	读取当前数据的Ajax路径。
responseField	读取的Array数据中需要显示的字段信息，如使用name则响应数据中使用name作为显示字段。
requestField	上层请求数据，最终会转换成key信息，（顶层国家不需要该配置）。

(static) BraftEditor()

「组件」`BraftEditor`

富文本编辑器

import { BraftEditor } from 'web';

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	x	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
config		state	Object	当前编辑器的配置。
config	controls	state	Array	打开或禁用编辑器的工具栏选项。
content		state	EditorState	当前编辑器的内容。

3. 组件核心点

目前富文本编辑器还未执行重置以及content部分的上层onChange方法调用，后续需要补充开发。

(static) CheckJson()

「组件」`CheckJson`

多选框生成Json格式数据

import { CheckJson } from 'web';

0. 示例

{
     "metadata": "metadata,基本配置,24,,aiCheckJson",
     "optionJsx.config.items": [
         "design,可设计",
         "deletion,可删除"
     ]
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	源	类型	说明
value	props	Any	Ant Form给当前组件传入的值。
$source	props	Array	多选框专用的选项信息，构造Options。
selected	state	Array	当前组件选中的值。
$ready	state	Boolean	标识当前组件已经加载完成。

3. 组件核心点

3.1. Option数据结构

$source会生成选项数据

{
    "label": "选项显示文本",
    "value": "选项值",
    "disabled": "是否禁用"
}

3.2. 值结构

selected中保存的是value的集合，而组件调用上层onChange时传入的值结构为：

{
    "field1": true,
    "field2": true,
    "...": true
}

之中的field1, field2，...等构造的是每个Checkbox的字段的名称，最终生成的是Json结构的数据。

(static) CheckTransfer()

「组件」`CheckTransfer`

Transfer穿梭框

import { CheckTransfer } from 'web';

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Array	Ant Form给当前组件传入的值，表示选中的值。
config	valueKey	props	String	取值的字段信息，默认为`key`。
config	limit	props	Object	选择项限制信息，用于验证，如果选择项目过多会提示错误信息。
$source		props	Array	穿梭框中可选择的数据源信息。
$transfer	onChange	state	Function	改变值时的操作。
$transfer	onSelectChange	state	Function	选中选项时的回调函数，执行选择。
$transfer	render	state	Function	`<Transfer/>`中的render渲染函数设置。
$sourceKeys		state	Array	选择过程中的源选择值。
$targetKeys		state	Array	选择过程中的目标选择值。
$ready		state	Boolean	标识当前组件已经加载完成。

3. 选项设置

3.1. dataSource数据格式如：

{
    "key": "数据记录键",
    "title": "标题",
    "description": "描述信息",
    "disabled": "禁用/启用"
}

3.2. limit数据结构

{
    "max": "最大选项数"，
    "message": "验证错误信息"
}

如果选项超过了max的限制，则显示错误消息，调用Ux.messageFailure函数显示错误信息。

(static) DialogEditor()

「组件」`DialogEditor`

弹出框表格编辑器

import { DialogEditor } from 'web';

0. 示例

{
     "metadata": "subTasks,,24,,aiDialogEditor",
     "optionJsx.config": {
         "form": "FormSub",
         "dialog": "新增数据导入子任务,保存,关闭,false,1024,true,$opSaveTask",
         "op": {
             "add": "$opShowSub"
         },
         "table": {
             "columns": [
                 "source,导入表",
                 "target,目标表",
                 "runAt,上次导入时间",
                 "runCount,上次导入条数",
                 "nextAt,下次导入时间",
                 "isRun,是否执行",
                 {
                     "title": "操作",
                     "dataIndex": "key",
                     "fixed": "right",
                     "$render": "EXECUTOR",
                     "$option": [
                         {
                             "text": "编辑",
                             "executor": "fnEdit"
                         },
                         "divider",
                         {
                             "text": "删除",
                             "executor": "fnDelete",
                             "confirm": "确认删除选择的实体记录？"
                         }
                     ]
                 }
             ]
         }
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
readOnly		props	Boolean	当前字段是否只读，可编辑走yiEdition，只读走yiView。
config	table	props	Object	表格基本配置。
config	dialog	props	String/Object	弹出框的专用配置。
config	form	props	Object	当前DialogEditor所需的表单数据。
config	op	props	Object	按钮链接，可触发对应按钮执行窗口操作。
$rows		props	Object	构造行操作符，用于增加更多的操作，`fnEdit/fnDelete`是默认值。
$forms		props	Object	传入的表单哈希表`name = Jsx`格式。
$executor		props	Object	行操作的执行函数哈希表`name = Function`格式。
$op		props	Object	执行二阶段专用操作，可绑定到二级form中。
$record		props	Object	「数据」执行可传的数据记录。
$options		props	Object	「配置」执行科传的配置记录。
$table		state	Object	表格配置`<Table/>`。
$dialog		state	Object	窗口配置`<Dialog/>`。
$button		state	Array	按钮配置`<Button/>`，右上角点击的按钮。
$visible		state	Boolean	窗口显示/隐藏。
$inited		state	Object	表单初始化数据，点击按钮时会生效。
$mode		state	String	表单支持的模式，ADD/EDIT，添加和编辑。
$submitting		state	Boolean	表单是否在提交（防重复提交专用）。
$keyField		state	String	主键字段名，`<Table/>`使用该字段作为主键，计算时读取`config.table.rowKey`。
$ready		state	Boolean	标识当前组件已经加载完成。
fnComponent		state	Function	渲染窗口内组件的专用函数。

$rows和$executor可能重复了，因为该组件位于两个不同阶段的开发周期，最早使用过$rows，后续改成了$executor，文档之后来更新。

3. 组件核心点

3.1. 表单配置的模式

DialogEditor表单来源分成三种模式：

1）编程模式

编程模式中的config.form是一个字符串，它的计算流程如下：

读取父引用reference（该引用绑定了Ant Form，带有form引用）。
从props中读取$form对象（name = Jsx），并且使用$form[form]去读取子组件。
用该子组件构造fnComponent渲染外层表单。

2）直接配置模式

直接构造fnComponent方法，此时使用组件为UI.Form.js中的组件
构造fnComponent渲染新表单

3）动态模式

（保留模式，只有一个form的code，用于远程读取表单配置。）

3.2. 子组件继承项

在渲染表单过程中，继承项主要用于往Form中传入数据，传如的数据如

1）上层属性

直接调用Ux.onUniform构造的继承属性。

2）本层属性

属性名	类型	说明
reference	React引用	将DialogEditor的React组件引用赋值给下层成为下层表单`父引用`标准。
rxRow	Function	「单记录」行保存专用方法。
rxRows	Function	「批量」行保存专用方法。
$record	Any	直接传入$record。
$options	Any	直接传入$options。
$op	Any	直接传入$op。
$a_form_xxx	Any	将上层表单中的数据存储到这里执行`name=value`的传入（一般用于配置型）。

3.3. fnEdit/fnOpen更改状态

1）打开新窗口生成状态

{
    $inited: {
        key: "随机UUID（新记录主键）",
        parentId: "读取$inited的key（父记录主键）"
    },
    $mode: "ADD",
    $visible: true
}

2）选中记录打开窗口

{
    $inited: {
        key: "根据$keyField计算，从记录中读取主键。",
        parentId: "读取$inited的key（父记录主键）"
    },
    $mode: "EDIT",
    $visible: true
}

4. 子组件Form核心点

只有配置型（非编程模式）才会启用UI.Form.js中的表单。

4.1. 数据传入

$op：直接传入。
$options：配置选项，在ExListComplex等类型组件传入的配置信息。
$record：数据传入，可自定义，也可传入数据。

4.2. 关于$op的使用

按钮绑定在执行的时候可以直接往下传递，在特别复杂或者层级比较多的场景中非常使用，此处后续使用时来补充教程文档。

4.3. 关于$executor

$executor主要用于构造表格中的操作列，默认有

fnEdit：编辑链接
fnDelete：删除连接

$executor配合列中的CONNECT渲染可执行动态注入流程，最新的ExListOpen组件中有使用，可参考。

(static) FileBatch()

「组件」`FileBatch`

上传专用组件

import { FileBatch } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "logo,应用Logo,18,,aiFileUpload,listType=picture-card,text=上传",
     "optionJsx.accept": "image/*",
     "optionJsx.config.filekey": "key",
     "optionJsx.config.limit": 10240,
     "optionJsx.ajax.uri": "/api/file/upload/:category",
     "optionJsx.ajax.download": "/api/file/download/:key",
     "optionJsx.ajax.params": {
         "category": "FIX:logo-item"
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	filekey	props	String	下载文件的文件主键（fileKey）。
config	limit	props	Number	上传文件的大小限制。
ajax	uri	props	String	上传专用Ajax基础配置，POST。
ajax	download	props	String	生成的文件下载链接，GET。
ajax	params	props	Object	上传专用Ajax中的参数信息，支持标准解析，parser的应用。
fileList		state	Array	当前组件中已经上传的文件列表。
handler		state	Object	当前组件构造的`handler`信息。
$counter		state	Number	已上传的文件数量。

3. 组件核心点

（略）后续补充

(static) FileUpload()

「组件」`FileUpload`

上传专用组件

import { FileUpload } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "logo,应用Logo,18,,aiFileUpload,listType=picture-card,text=上传",
     "optionJsx.accept": "image/*",
     "optionJsx.config.filekey": "key",
     "optionJsx.config.limit": 10240,
     "optionJsx.ajax.uri": "/api/file/upload/:category",
     "optionJsx.ajax.download": "/api/file/download/:key",
     "optionJsx.ajax.params": {
         "category": "FIX:logo-item"
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	filekey	props	String	下载文件的文件主键（fileKey）。
config	limit	props	Number	上传文件的大小限制。
ajax	uri	props	String	上传专用Ajax基础配置，POST。
ajax	download	props	String	生成的文件下载链接，GET。
ajax	params	props	Object	上传专用Ajax中的参数信息，支持标准解析，parser的应用。
fileList		state	Array	当前组件中已经上传的文件列表。
handler		state	Object	当前组件构造的`handler`信息。
$counter		state	Number	已上传的文件数量。

3. 组件核心点

（略）后续补充

(static) FileUpload()

「组件」`FileUpload`

上传专用组件

import { FileUpload } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "logo,应用Logo,18,,aiFileUpload,listType=picture-card,text=上传",
     "optionJsx.accept": "image/*",
     "optionJsx.config.filekey": "key",
     "optionJsx.config.limit": 10240,
     "optionJsx.ajax.uri": "/api/file/upload/:category",
     "optionJsx.ajax.download": "/api/file/download/:key",
     "optionJsx.ajax.params": {
         "category": "FIX:logo-item"
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	filekey	props	String	下载文件的文件主键（fileKey）。
config	limit	props	Number	上传文件的大小限制。
ajax	uri	props	String	上传专用Ajax基础配置，POST。
ajax	download	props	String	生成的文件下载链接，GET。
ajax	params	props	Object	上传专用Ajax中的参数信息，支持标准解析，parser的应用。
fileList		state	Array	当前组件中已经上传的文件列表。
handler		state	Object	当前组件构造的`handler`信息。
$counter		state	Number	已上传的文件数量。

3. 组件核心点

（略）后续补充

(static) InputArray()

「组件」`InputArray`

数组录入组件

import { InputArray } from 'web';

0. 示例

{
     "metadata": "dependValue,条件字段值,24,,aiInputMulti",
     "optionJsx.styleInput": {
         "width": "30%"
     },
     "optionJsx.depend.enabled": {
         "dependType": [
             "DATUM"
         ]
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Array	Ant Form给当前组件传入的值。
config	limit	props	Object	当前组件录入数组的长度限制。
disabled		props	Boolean	是否禁用当前组件。
styleInput		props	Object	当前组件中输入框风格。
$holder		state	Number	当前数据的长度信息。
$ready		state	Boolean	标识当前组件已经加载完成。

3. 组件核心点

3.1. 关于限制处理

这个组件的限制处理并不是弹出错误信息，而是直接禁用添加按钮，当选项数量$holder大于了限制数量，则会禁用添加按钮。

3.2. 禁用

如果传入了disabled=true则会禁用当前组件的所有操作。

(static) JsonEditor()

「组件」`JsonEditor`

数组录入组件

import { JsonEditor } from 'web';

0. 示例

{
     "metadata": "options,配置数据,24,,aiJsonEditor",
     "optionJsx.height": 220
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	x	x

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
height		props	Number	当前Json编辑器的高度。

3. 组件核心点

（略）

(static) ListSelector()

「组件」`ListSelector`

列表选择器

import { ListSelector } from 'web';

0. 示例

{
     "metadata": "username,关联账号,8,,aiListSelector,placeholder=（请选择账号）",
     "optionJsx.config": {
         "ajax": {
             "metadata": "POST,/api/user/search,1,10,sorter=updatedAt`DESC",
             "params.criteria": {
                 "modelId": "FIX:employee",
                 "": "OPERATOR:AND"
             }
         },
         "linker": {
             "key": "userId",
             "username": "username",
             "realname": "viceName",
             "email": "viceEmail",
             "mobile": "viceMobile"
         },
         "table": {
             "columns": [
                 "username,用户账号",
                 "realname,用户名称",
                 "mobile,手机号",
                 "email,邮箱"
             ]
         },
         "validation": "请选择关联账号！",
         "window": "关联账号,选择,关闭,false,800,false",
         "search": {
             "username,c": "账号",
             "realname,c": "姓名"
         }
     },
     "optionJsx.allowClear": true
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	ajax	props	Object	带表达式的Ajax请求专用配置。
config	linker	props	Object	当前选择数据和表单之间的链接配置（linker）。
config	table	props	Object	当前列表选择器中表格`<Table/>`的配置。
config	validation	props	String	选择验证器，验证是否选择了记录。
config	window	props	String/Object	弹出窗口专用配置信息。
config	search	props	Object	是否启用搜索项相关信息。
config	selection	props	Object	多选还是单选的控制。
dialog		state	Object	「直接使用」处理过的窗口配置。
table		state	Object	「直接使用」处理过的表格配置。
search		state	Object	「直接使用」开启搜索框操作。
$visible		state	Boolean	是否显示弹出框。
$loading		state	Boolean	是否执行提交操作，造成加载效果。
$data		state	Array	当前组件中拥有的表格数据。
$keySet		state	Any	选中数据的组件集合。
$filters		state	Object	搜索产生的搜索条件信息。
$tableKey		state	String	专用的表格绑定的key信息。
$ready		state	Boolean	标识当前组件已经加载完成。
onClick		state	Function	点击函数构造。

3. 组件核心点

3.1. Ajax解析

该解析可参考xtLazyAjax的详细说明。

3.2. 双选择配置

「只支持单选」选择配置位于config.selection，如果selection.multiple为true，则选择的时候直接执行多选操作，而不使用单选，表格之前的类型是checkbox，而单选则使用radio，这个组件通常不使用该配置。

(static) MagicView()

「组件」`MagicView`

数组录入组件

import { MagicView } from 'web';

0. 示例

0.1. 时间

{
     "metadata": "infoAt,记录时间,10,,aiMagic",
     "optionJsx.config.format": "YYYY年MM月DD日 HH:mm",
     "moment": true
}

0.2. Ajax加载

{
     "metadata": "logUser,记录人,14,,aiMagic",
     "optionJsx.config.user": {
         "uri": "/api/user/:key",
         "field": "realname"
     },
     "optionJsx.$empty": "（系统）"
}

0.3. 带图标选项

{
     "metadata": "level,级别,10,,aiMagic",
     "optionJsx.config.items": [
         "INFO,信息:info-circle,16:#6495ED",
         "WARN,警告:warning,16:#EEB422",
         "ERROR,错误:issues-close,16:#EE2C2C"
     ]
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	x	x

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
format		props	String	时间格式专用格式化的Pattern（开发模式）。
$empty		props	String	如果数据为空则使用空的字符串呈现。
config	items	props	Array	静态选项。
config	datum	props	String/Object	动态选项。
config	moment	props	Boolean	是否时间格式。
config	boolean	props	Boolean	是否Boolean类型。
config	table	props	Object	表格渲染专用配置。
config	expr	props	String	「特定配置」table不存在时，使用表达式模式。
config	currency	props	String/Object	「特定配置」table不存在，并且不带expr，则直接使用currency。
config	format	props	String	时间格式专用格式化的Pattern（配置模式）。
config	user	props	Object	Ajax配置，原生配置是为创建人、更新人量身打造，所以该配置目前使用`user`。
config	record	props	Boolean	是否执行记录解析，使用Json模式呈现。
config	rxRecord	props	Function	记录解析函数，配合record配置使用。

3. 组件核心点

3.1. 货币双格式

currency有两种格式，默认是字符串，还有下边格式：

{
    "unit": "货币单位",
    "right": "是否位于右侧"
}

默认格式：String也是这个格式，<单位><值>。
right = true：<值><单位>。

3.2. Icon格式

示例格式：

INFO,信息:info-circle,16:#6495ED

上述格式转换成：

<值>,<显示文字:图标类型>,<图标尺寸:图标颜色>

(static) MatrixSelector()

「组件」`MatrixSelector`

列表选择器

import { MatrixSelector } from 'web';

0.示例

{
     "metadata": "actions,关联操作,24,,aiMatrixSelector",
     "optionConfig.rules": [
         {
             "validator": "required",
             "message": "对不起，关联操作不可为空，请添加关联操作！"
         }
     ],
     "optionJsx.config": {
         "ajax": {
             "metadata": "POST,/api/action/search,1,10,sorter=updatedAt`DESC",
             "params.criteria": {
                 "permissionId,n": true
             }
         },
         "table": {
             "columns": [
                 "name,操作名称",
                 "code,操作编码",
                 {
                     "metadata": "method,HTTP方法,MAPPING",
                     "$mapping": {
                         "GET": "GET,download,,#268941",
                         "PUT": "PUT,edit,,#0a7bed",
                         "POST": "POST,plus,,#f6af03",
                         "DELETE": "DELETE,delete,,#e22015"
                     }
                 },
                 {
                     "dataIndex": "uri",
                     "title": "请求路径"
                 }
             ]
         },
         "validation": "请选择关联操作！",
         "window": "关联操作,选择,关闭,false,980,false",
         "search": {
             "name,c": "名称",
             "code,c": "编码"
         },
         "selection": {
             "multiple": true,
             "multipleMode": {
                 "replace": false
             }
         },
         "dynamic": {
             "dataIndex": "key",
             "title": "添加",
             "config": {
                 "text": "移除",
                 "confirm": "该操作会从当前权限中移除选中操作，确认？"
             }
         }
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	ajax	props	Object	带表达式的Ajax请求专用配置。
config	linker	props	Object	当前选择数据和表单之间的链接配置（linker）。
config	table	props	Object	当前列表选择器中表格`<Table/>`的配置。
config	validation	props	String	选择验证器，验证是否选择了记录。
config	window	props	String/Object	弹出窗口专用配置信息。
config	search	props	Object	是否启用搜索项相关信息。
config	selection	props	Object	多选还是单选的控制。
config	dynamic	props	Object	动态操作列（添加、删除）。
dialog		state	Object	「直接使用」处理过的窗口配置。
table		state	Object	「直接使用」处理过的表格配置。
search		state	Object	「直接使用」开启搜索框操作。
$visible		state	Boolean	是否显示弹出框。
$loading		state	Boolean	是否执行提交操作，造成加载效果。
$data		state	Array	当前组件中拥有的表格数据。
$keySet		state	Any	选中数据的组件集合。
$filters		state	Object	搜索产生的搜索条件信息。
$tableKey		state	String	专用的表格绑定的key信息。
$ready		state	Boolean	标识当前组件已经加载完成。
onClick		state	Function	点击函数构造。

3. 组件核心点

3.1. 多选专用配置

「只支持多选」选择配置位于config.selection，如果selection.multiple为true，则选择的时候直接执行多选操作，多选操作中会包含额外的模式信息。

{
    "multiple": true,
    "multipleMode":{
        "replace": true
    }
}

replace设置的模式

true：替换模式，每次选择的时候直接替换原始内容。
false：追加模式，每次选择的时候直接追加新的（如果有旧的直接合并）。

3.2. 动态列操作

动态列操作提供添加，删除两个选项，这两个选项负责针对数据执行增删的细节操作，以完善对应的选择信息。

(static) SearchInput()

「组件」`SearchInput`

搜索专用输入

import { SearchInput } from 'web';

0. 示例

{
     "metadata":"contactName,联系人,12,,aiSearchInput",
     "optionJsx.layout":{
         "left": 14,
         "right": 10
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	layout	props	Object	左右布局信息，左边输入框，右边Checkbox。
$data		state	Object	构造的查询条件信息。

3. 组件核心点

查询条件支持两种：

模糊匹配：op值c。
精确匹配：op值=。

(static) SearchRangeDate()

「组件」`SearchRangeDate`

搜索专用输入

import { SearchRangeDate } from 'web';

0. 示例

{
     "metadata":"infoAt,日志记录时间,24,,aiSearchRangeDate",
     "optionJsx.config":{
         "mode":"FULL",
         "format":"YYYY-MM-DD HH:mm",
         "placeholder":["开始时间","结束时间"]
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	format	props	String	时间格式专用数据信息。
config	mode	props	String	查询条件的模式。
config	placeholder	props	Array	水印效果，左水印和右水印，长度为2的数组。
config	grid	props	Array	左中右的`span`值，默认`11,2,11`。
config	style	props	Object	左风格left，右风格right。
$data	start	state	Moment	开始时间。
$data	end	state	Moment	结束时间。

3. 组件核心点。

3.1. 关于模式

mode的值如下：

FULL：全模式，设置showTime = true。
DATE：日期模式，关闭showTime = false。
MONTH：月份模式，设置只选择月份。
TIME：时间模式（开发中）。

3.2. 日期时间

日期和时间格式全部使用Moment类型。

(static) TableEditor()

「组件」`TableEditor`

列表选择器

import { TableEditor } from 'web';

0. 示例

{
     "metadata": "items,选项表,24,,aiTableEditor",
     "optionJsx.depend.enabled": {
         "dataSource": [
             "items"
         ]
     },
     "optionJsx.config": {
         "format": {
             "type": "ARRAY",
             "keyField": "name"
         },
         "table": {
             "columns": [
                 {
                     "dataIndex": "name",
                     "title": "固定值",
                     "$render": "EDITOR"
                 },
                 {
                     "dataIndex": "label",
                     "title": "显示字段",
                     "$render": "EDITOR"
                 }
             ]
         }
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	x

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	format	props	Object	多格式表格编辑。
config	table	props	Object	表格专用配置。
data		state	Any	根据格式计算的最终数据信息。
$table		state	Object	处理过的表格配置。
$ready		state	Boolean	标识当前组件已经加载完成。

3. 组件核心点

包含了添加、删除两个操作，新增和删除按钮会在执行过程中被禁用或启用。

(static) TreeSelector()

「组件」`TreeSelector`

树选择器

import { TreeSelector } from 'web';

0. 示例

{
     "metadata": "source,导入数据源,10,,aiTreeSelector,placeholder=（选择数据源）",
     "optionJsx.config": {
         "ajax": {
             "uri": "/api/search/data-source"
         },
         "selection": {
             "checkStrictly": true,
             "multiple": true,
             "showLine": false,
             "display": "name",
             "limitOp": "LE",
             "limitConfig": {
                 "_level": 1
             }
         },
         "tree": {
             "title": "name"
         },
         "validation": "请选择数据源！",
         "window": "选择导入数据源,选择,取消,false,400,false"
     },
     "optionJsx.allowClear": true,
     "optionConfig.rules": [
         "required,请选择导入数据源"
     ]
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	ajax	props	Object	带表达式的Ajax请求专用配置。
config	linker	props	Object	当前选择数据和表单之间的链接配置（linker）。
config	tree	props	Object	当前列表选择器中表格`<Tree/>`的配置。
config	validation	props	String	选择验证器，验证是否选择了记录。
config	window	props	String/Object	弹出窗口专用配置信息。
config	selection	props	Object	多选还是单选的控制。
dialog		state	Object	「直接使用」处理过的窗口配置。
tree		state	Object	「直接使用」处理过的树配置。
search		state	Object	「直接使用」开启搜索框操作。
$visible		state	Boolean	是否显示弹出框。
$loading		state	Boolean	是否执行提交操作，造成加载效果。
$data		state	Array	当前组件中拥有的表格数据。
$keySet		state	Any	选中数据的组件集合。
$ready		state	Boolean	标识当前组件已经加载完成。
onClick		state	Function	点击函数构造。

3. 组件核心点

（略）

子系统：UCA

Methods

(static) AddressSelector()

「组件」`AddressSelector`

地址选择器

import { AddressSelector } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "regionId,选择地址,12,,,placeholder=选择地址",
     "optionJsx.config.ajax": "DIRECT",
     "optionJsx.config.country": "/api/countries,name",
     "optionJsx.config.state": "/api/states/query/:key,name,countryId",
     "optionJsx.config.city": "/api/cities/query/:key,name,stateId",
     "optionJsx.config.region": "/api/regions/query/:key,name,cityId",
     "optionJsx.config.init": "/api/regions/meta/:key"
}

0.2. Js注入

// 调用2阶函数执行渲染，最终传入`ExForm`组件。
const jsx = {
     regionId: Ux.ai2AddressSelector(Op.onChange)
};

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	ajax	props	String	地址选择器的Ajax类型设置，目前支持两种`DIRECT
config	country	props	String	读取国家数据专用Ajax配置。
config	state	props	String	读取省会数据专用Ajax配置。
config	city	props	String	读取城市数据专用Ajax配置。
config	region	props	String	读取区域数据专用Ajax配置。
config	init	props	String	初始化数据专用Ajax配置。

3. 组件核心点

3.1. 关于流程

如果value无值，则只读取国家数据，执行country加载。
如果value有值，则执行初始化数据，走完加载全流程。

3.2. 关于请求初始参数

初始参数表格如下

参数名	说明
language	环境变量中配置`Z_LANGUAGE`，当前应用运行的语言信息。
sigma	从`$app`变量（应用配置）中读取`sigma`变量，可租户，可应用分割。
key	直接读取`props`中的value（Ant Form自定义组件专用字段）。

4. 配置详解

整个加载流程全部走GET方法，而不走POST方法，这是组件限制，底层调用Ux.ajaxGet实现。

4.1. init节点

该节点只有一个路径信息，没有其他信息。

/api/regions/meta/:key

4.2. state,city,region节点

中间节点有三个，对应省会、城市、区域三个维度，格式都如：

<uri>,<responseField>,<requestField>

4.3. country节点

顶层节点主要针对国家，格式如：

<uri>,<responseField>

4.4. 节点语法

上述表达式是这三种节点的专用表达式

参数名	说明
uri	读取当前数据的Ajax路径。
responseField	读取的Array数据中需要显示的字段信息，如使用name则响应数据中使用name作为显示字段。
requestField	上层请求数据，最终会转换成key信息，（顶层国家不需要该配置）。

(static) BraftEditor()

「组件」`BraftEditor`

富文本编辑器

import { BraftEditor } from 'web';

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	x	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
config		state	Object	当前编辑器的配置。
config	controls	state	Array	打开或禁用编辑器的工具栏选项。
content		state	EditorState	当前编辑器的内容。

3. 组件核心点

目前富文本编辑器还未执行重置以及content部分的上层onChange方法调用，后续需要补充开发。

(static) CheckJson()

「组件」`CheckJson`

多选框生成Json格式数据

import { CheckJson } from 'web';

0. 示例

{
     "metadata": "metadata,基本配置,24,,aiCheckJson",
     "optionJsx.config.items": [
         "design,可设计",
         "deletion,可删除"
     ]
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	源	类型	说明
value	props	Any	Ant Form给当前组件传入的值。
$source	props	Array	多选框专用的选项信息，构造Options。
selected	state	Array	当前组件选中的值。
$ready	state	Boolean	标识当前组件已经加载完成。

3. 组件核心点

3.1. Option数据结构

$source会生成选项数据

{
    "label": "选项显示文本",
    "value": "选项值",
    "disabled": "是否禁用"
}

3.2. 值结构

selected中保存的是value的集合，而组件调用上层onChange时传入的值结构为：

{
    "field1": true,
    "field2": true,
    "...": true
}

之中的field1, field2，...等构造的是每个Checkbox的字段的名称，最终生成的是Json结构的数据。

(static) CheckTransfer()

「组件」`CheckTransfer`

Transfer穿梭框

import { CheckTransfer } from 'web';

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Array	Ant Form给当前组件传入的值，表示选中的值。
config	valueKey	props	String	取值的字段信息，默认为`key`。
config	limit	props	Object	选择项限制信息，用于验证，如果选择项目过多会提示错误信息。
$source		props	Array	穿梭框中可选择的数据源信息。
$transfer	onChange	state	Function	改变值时的操作。
$transfer	onSelectChange	state	Function	选中选项时的回调函数，执行选择。
$transfer	render	state	Function	`<Transfer/>`中的render渲染函数设置。
$sourceKeys		state	Array	选择过程中的源选择值。
$targetKeys		state	Array	选择过程中的目标选择值。
$ready		state	Boolean	标识当前组件已经加载完成。

3. 选项设置

3.1. dataSource数据格式如：

{
    "key": "数据记录键",
    "title": "标题",
    "description": "描述信息",
    "disabled": "禁用/启用"
}

3.2. limit数据结构

{
    "max": "最大选项数"，
    "message": "验证错误信息"
}

如果选项超过了max的限制，则显示错误消息，调用Ux.messageFailure函数显示错误信息。

(static) DialogEditor()

「组件」`DialogEditor`

弹出框表格编辑器

import { DialogEditor } from 'web';

0. 示例

{
     "metadata": "subTasks,,24,,aiDialogEditor",
     "optionJsx.config": {
         "form": "FormSub",
         "dialog": "新增数据导入子任务,保存,关闭,false,1024,true,$opSaveTask",
         "op": {
             "add": "$opShowSub"
         },
         "table": {
             "columns": [
                 "source,导入表",
                 "target,目标表",
                 "runAt,上次导入时间",
                 "runCount,上次导入条数",
                 "nextAt,下次导入时间",
                 "isRun,是否执行",
                 {
                     "title": "操作",
                     "dataIndex": "key",
                     "fixed": "right",
                     "$render": "EXECUTOR",
                     "$option": [
                         {
                             "text": "编辑",
                             "executor": "fnEdit"
                         },
                         "divider",
                         {
                             "text": "删除",
                             "executor": "fnDelete",
                             "confirm": "确认删除选择的实体记录？"
                         }
                     ]
                 }
             ]
         }
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
readOnly		props	Boolean	当前字段是否只读，可编辑走yiEdition，只读走yiView。
config	table	props	Object	表格基本配置。
config	dialog	props	String/Object	弹出框的专用配置。
config	form	props	Object	当前DialogEditor所需的表单数据。
config	op	props	Object	按钮链接，可触发对应按钮执行窗口操作。
$rows		props	Object	构造行操作符，用于增加更多的操作，`fnEdit/fnDelete`是默认值。
$forms		props	Object	传入的表单哈希表`name = Jsx`格式。
$executor		props	Object	行操作的执行函数哈希表`name = Function`格式。
$op		props	Object	执行二阶段专用操作，可绑定到二级form中。
$record		props	Object	「数据」执行可传的数据记录。
$options		props	Object	「配置」执行科传的配置记录。
$table		state	Object	表格配置`<Table/>`。
$dialog		state	Object	窗口配置`<Dialog/>`。
$button		state	Array	按钮配置`<Button/>`，右上角点击的按钮。
$visible		state	Boolean	窗口显示/隐藏。
$inited		state	Object	表单初始化数据，点击按钮时会生效。
$mode		state	String	表单支持的模式，ADD/EDIT，添加和编辑。
$submitting		state	Boolean	表单是否在提交（防重复提交专用）。
$keyField		state	String	主键字段名，`<Table/>`使用该字段作为主键，计算时读取`config.table.rowKey`。
$ready		state	Boolean	标识当前组件已经加载完成。
fnComponent		state	Function	渲染窗口内组件的专用函数。

$rows和$executor可能重复了，因为该组件位于两个不同阶段的开发周期，最早使用过$rows，后续改成了$executor，文档之后来更新。

3. 组件核心点

3.1. 表单配置的模式

DialogEditor表单来源分成三种模式：

1）编程模式

编程模式中的config.form是一个字符串，它的计算流程如下：

读取父引用reference（该引用绑定了Ant Form，带有form引用）。
从props中读取$form对象（name = Jsx），并且使用$form[form]去读取子组件。
用该子组件构造fnComponent渲染外层表单。

2）直接配置模式

直接构造fnComponent方法，此时使用组件为UI.Form.js中的组件
构造fnComponent渲染新表单

3）动态模式

（保留模式，只有一个form的code，用于远程读取表单配置。）

3.2. 子组件继承项

在渲染表单过程中，继承项主要用于往Form中传入数据，传如的数据如

1）上层属性

直接调用Ux.onUniform构造的继承属性。

2）本层属性

属性名	类型	说明
reference	React引用	将DialogEditor的React组件引用赋值给下层成为下层表单`父引用`标准。
rxRow	Function	「单记录」行保存专用方法。
rxRows	Function	「批量」行保存专用方法。
$record	Any	直接传入$record。
$options	Any	直接传入$options。
$op	Any	直接传入$op。
$a_form_xxx	Any	将上层表单中的数据存储到这里执行`name=value`的传入（一般用于配置型）。

3.3. fnEdit/fnOpen更改状态

1）打开新窗口生成状态

{
    $inited: {
        key: "随机UUID（新记录主键）",
        parentId: "读取$inited的key（父记录主键）"
    },
    $mode: "ADD",
    $visible: true
}

2）选中记录打开窗口

{
    $inited: {
        key: "根据$keyField计算，从记录中读取主键。",
        parentId: "读取$inited的key（父记录主键）"
    },
    $mode: "EDIT",
    $visible: true
}

4. 子组件Form核心点

只有配置型（非编程模式）才会启用UI.Form.js中的表单。

4.1. 数据传入

$op：直接传入。
$options：配置选项，在ExListComplex等类型组件传入的配置信息。
$record：数据传入，可自定义，也可传入数据。

4.2. 关于$op的使用

按钮绑定在执行的时候可以直接往下传递，在特别复杂或者层级比较多的场景中非常使用，此处后续使用时来补充教程文档。

4.3. 关于$executor

$executor主要用于构造表格中的操作列，默认有

fnEdit：编辑链接
fnDelete：删除连接

$executor配合列中的CONNECT渲染可执行动态注入流程，最新的ExListOpen组件中有使用，可参考。

(static) FileBatch()

「组件」`FileBatch`

上传专用组件

import { FileBatch } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "logo,应用Logo,18,,aiFileUpload,listType=picture-card,text=上传",
     "optionJsx.accept": "image/*",
     "optionJsx.config.filekey": "key",
     "optionJsx.config.limit": 10240,
     "optionJsx.ajax.uri": "/api/file/upload/:category",
     "optionJsx.ajax.download": "/api/file/download/:key",
     "optionJsx.ajax.params": {
         "category": "FIX:logo-item"
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	filekey	props	String	下载文件的文件主键（fileKey）。
config	limit	props	Number	上传文件的大小限制。
ajax	uri	props	String	上传专用Ajax基础配置，POST。
ajax	download	props	String	生成的文件下载链接，GET。
ajax	params	props	Object	上传专用Ajax中的参数信息，支持标准解析，parser的应用。
fileList		state	Array	当前组件中已经上传的文件列表。
handler		state	Object	当前组件构造的`handler`信息。
$counter		state	Number	已上传的文件数量。

3. 组件核心点

（略）后续补充

(static) FileUpload()

「组件」`FileUpload`

上传专用组件

import { FileUpload } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "logo,应用Logo,18,,aiFileUpload,listType=picture-card,text=上传",
     "optionJsx.accept": "image/*",
     "optionJsx.config.filekey": "key",
     "optionJsx.config.limit": 10240,
     "optionJsx.ajax.uri": "/api/file/upload/:category",
     "optionJsx.ajax.download": "/api/file/download/:key",
     "optionJsx.ajax.params": {
         "category": "FIX:logo-item"
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	filekey	props	String	下载文件的文件主键（fileKey）。
config	limit	props	Number	上传文件的大小限制。
ajax	uri	props	String	上传专用Ajax基础配置，POST。
ajax	download	props	String	生成的文件下载链接，GET。
ajax	params	props	Object	上传专用Ajax中的参数信息，支持标准解析，parser的应用。
fileList		state	Array	当前组件中已经上传的文件列表。
handler		state	Object	当前组件构造的`handler`信息。
$counter		state	Number	已上传的文件数量。

3. 组件核心点

（略）后续补充

(static) FileUpload()

「组件」`FileUpload`

上传专用组件

import { FileUpload } from 'web';

0. 示例

0.1. Json配置

{
     "metadata": "logo,应用Logo,18,,aiFileUpload,listType=picture-card,text=上传",
     "optionJsx.accept": "image/*",
     "optionJsx.config.filekey": "key",
     "optionJsx.config.limit": 10240,
     "optionJsx.ajax.uri": "/api/file/upload/:category",
     "optionJsx.ajax.download": "/api/file/download/:key",
     "optionJsx.ajax.params": {
         "category": "FIX:logo-item"
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Any	Ant Form给当前组件传入的值。
reference		props	React	父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
config	filekey	props	String	下载文件的文件主键（fileKey）。
config	limit	props	Number	上传文件的大小限制。
ajax	uri	props	String	上传专用Ajax基础配置，POST。
ajax	download	props	String	生成的文件下载链接，GET。
ajax	params	props	Object	上传专用Ajax中的参数信息，支持标准解析，parser的应用。
fileList		state	Array	当前组件中已经上传的文件列表。
handler		state	Object	当前组件构造的`handler`信息。
$counter		state	Number	已上传的文件数量。

3. 组件核心点

（略）后续补充

(static) InputArray()

「组件」`InputArray`

数组录入组件

import { InputArray } from 'web';

0. 示例

{
     "metadata": "dependValue,条件字段值,24,,aiInputMulti",
     "optionJsx.styleInput": {
         "width": "30%"
     },
     "optionJsx.depend.enabled": {
         "dependType": [
             "DATUM"
         ]
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Array	Ant Form给当前组件传入的值。
config	limit	props	Object	当前组件录入数组的长度限制。
disabled		props	Boolean	是否禁用当前组件。
styleInput		props	Object	当前组件中输入框风格。
$holder		state	Number	当前数据的长度信息。
$ready		state	Boolean	标识当前组件已经加载完成。

3. 组件核心点

3.1. 关于限制处理

这个组件的限制处理并不是弹出错误信息，而是直接禁用添加按钮，当选项数量$holder大于了限制数量，则会禁用添加按钮。

3.2. 禁用

如果传入了disabled=true则会禁用当前组件的所有操作。

(static) JsonEditor()

「组件」`JsonEditor`

数组录入组件

import { JsonEditor } from 'web';

0. 示例

{
     "metadata": "options,配置数据,24,,aiJsonEditor",
     "optionJsx.height": 220
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	x	x

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
height		props	Number	当前Json编辑器的高度。

3. 组件核心点

（略）

(static) ListSelector()

「组件」`ListSelector`

列表选择器

import { ListSelector } from 'web';

0. 示例

{
     "metadata": "username,关联账号,8,,aiListSelector,placeholder=（请选择账号）",
     "optionJsx.config": {
         "ajax": {
             "metadata": "POST,/api/user/search,1,10,sorter=updatedAt`DESC",
             "params.criteria": {
                 "modelId": "FIX:employee",
                 "": "OPERATOR:AND"
             }
         },
         "linker": {
             "key": "userId",
             "username": "username",
             "realname": "viceName",
             "email": "viceEmail",
             "mobile": "viceMobile"
         },
         "table": {
             "columns": [
                 "username,用户账号",
                 "realname,用户名称",
                 "mobile,手机号",
                 "email,邮箱"
             ]
         },
         "validation": "请选择关联账号！",
         "window": "关联账号,选择,关闭,false,800,false",
         "search": {
             "username,c": "账号",
             "realname,c": "姓名"
         }
     },
     "optionJsx.allowClear": true
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	ajax	props	Object	带表达式的Ajax请求专用配置。
config	linker	props	Object	当前选择数据和表单之间的链接配置（linker）。
config	table	props	Object	当前列表选择器中表格`<Table/>`的配置。
config	validation	props	String	选择验证器，验证是否选择了记录。
config	window	props	String/Object	弹出窗口专用配置信息。
config	search	props	Object	是否启用搜索项相关信息。
config	selection	props	Object	多选还是单选的控制。
dialog		state	Object	「直接使用」处理过的窗口配置。
table		state	Object	「直接使用」处理过的表格配置。
search		state	Object	「直接使用」开启搜索框操作。
$visible		state	Boolean	是否显示弹出框。
$loading		state	Boolean	是否执行提交操作，造成加载效果。
$data		state	Array	当前组件中拥有的表格数据。
$keySet		state	Any	选中数据的组件集合。
$filters		state	Object	搜索产生的搜索条件信息。
$tableKey		state	String	专用的表格绑定的key信息。
$ready		state	Boolean	标识当前组件已经加载完成。
onClick		state	Function	点击函数构造。

3. 组件核心点

3.1. Ajax解析

该解析可参考xtLazyAjax的详细说明。

3.2. 双选择配置

(static) MagicView()

「组件」`MagicView`

数组录入组件

import { MagicView } from 'web';

0. 示例

0.1. 时间

{
     "metadata": "infoAt,记录时间,10,,aiMagic",
     "optionJsx.config.format": "YYYY年MM月DD日 HH:mm",
     "moment": true
}

0.2. Ajax加载

{
     "metadata": "logUser,记录人,14,,aiMagic",
     "optionJsx.config.user": {
         "uri": "/api/user/:key",
         "field": "realname"
     },
     "optionJsx.$empty": "（系统）"
}

0.3. 带图标选项

{
     "metadata": "level,级别,10,,aiMagic",
     "optionJsx.config.items": [
         "INFO,信息:info-circle,16:#6495ED",
         "WARN,警告:warning,16:#EEB422",
         "ERROR,错误:issues-close,16:#EE2C2C"
     ]
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	x	x

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
format		props	String	时间格式专用格式化的Pattern（开发模式）。
$empty		props	String	如果数据为空则使用空的字符串呈现。
config	items	props	Array	静态选项。
config	datum	props	String/Object	动态选项。
config	moment	props	Boolean	是否时间格式。
config	boolean	props	Boolean	是否Boolean类型。
config	table	props	Object	表格渲染专用配置。
config	expr	props	String	「特定配置」table不存在时，使用表达式模式。
config	currency	props	String/Object	「特定配置」table不存在，并且不带expr，则直接使用currency。
config	format	props	String	时间格式专用格式化的Pattern（配置模式）。
config	user	props	Object	Ajax配置，原生配置是为创建人、更新人量身打造，所以该配置目前使用`user`。
config	record	props	Boolean	是否执行记录解析，使用Json模式呈现。
config	rxRecord	props	Function	记录解析函数，配合record配置使用。

3. 组件核心点

3.1. 货币双格式

currency有两种格式，默认是字符串，还有下边格式：

{
    "unit": "货币单位",
    "right": "是否位于右侧"
}

默认格式：String也是这个格式，<单位><值>。
right = true：<值><单位>。

3.2. Icon格式

示例格式：

INFO,信息:info-circle,16:#6495ED

上述格式转换成：

<值>,<显示文字:图标类型>,<图标尺寸:图标颜色>

(static) MatrixSelector()

「组件」`MatrixSelector`

列表选择器

import { MatrixSelector } from 'web';

0.示例

{
     "metadata": "actions,关联操作,24,,aiMatrixSelector",
     "optionConfig.rules": [
         {
             "validator": "required",
             "message": "对不起，关联操作不可为空，请添加关联操作！"
         }
     ],
     "optionJsx.config": {
         "ajax": {
             "metadata": "POST,/api/action/search,1,10,sorter=updatedAt`DESC",
             "params.criteria": {
                 "permissionId,n": true
             }
         },
         "table": {
             "columns": [
                 "name,操作名称",
                 "code,操作编码",
                 {
                     "metadata": "method,HTTP方法,MAPPING",
                     "$mapping": {
                         "GET": "GET,download,,#268941",
                         "PUT": "PUT,edit,,#0a7bed",
                         "POST": "POST,plus,,#f6af03",
                         "DELETE": "DELETE,delete,,#e22015"
                     }
                 },
                 {
                     "dataIndex": "uri",
                     "title": "请求路径"
                 }
             ]
         },
         "validation": "请选择关联操作！",
         "window": "关联操作,选择,关闭,false,980,false",
         "search": {
             "name,c": "名称",
             "code,c": "编码"
         },
         "selection": {
             "multiple": true,
             "multipleMode": {
                 "replace": false
             }
         },
         "dynamic": {
             "dataIndex": "key",
             "title": "添加",
             "config": {
                 "text": "移除",
                 "confirm": "该操作会从当前权限中移除选中操作，确认？"
             }
         }
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	ajax	props	Object	带表达式的Ajax请求专用配置。
config	linker	props	Object	当前选择数据和表单之间的链接配置（linker）。
config	table	props	Object	当前列表选择器中表格`<Table/>`的配置。
config	validation	props	String	选择验证器，验证是否选择了记录。
config	window	props	String/Object	弹出窗口专用配置信息。
config	search	props	Object	是否启用搜索项相关信息。
config	selection	props	Object	多选还是单选的控制。
config	dynamic	props	Object	动态操作列（添加、删除）。
dialog		state	Object	「直接使用」处理过的窗口配置。
table		state	Object	「直接使用」处理过的表格配置。
search		state	Object	「直接使用」开启搜索框操作。
$visible		state	Boolean	是否显示弹出框。
$loading		state	Boolean	是否执行提交操作，造成加载效果。
$data		state	Array	当前组件中拥有的表格数据。
$keySet		state	Any	选中数据的组件集合。
$filters		state	Object	搜索产生的搜索条件信息。
$tableKey		state	String	专用的表格绑定的key信息。
$ready		state	Boolean	标识当前组件已经加载完成。
onClick		state	Function	点击函数构造。

3. 组件核心点

3.1. 多选专用配置

「只支持多选」选择配置位于config.selection，如果selection.multiple为true，则选择的时候直接执行多选操作，多选操作中会包含额外的模式信息。

{
    "multiple": true,
    "multipleMode":{
        "replace": true
    }
}

replace设置的模式

true：替换模式，每次选择的时候直接替换原始内容。
false：追加模式，每次选择的时候直接追加新的（如果有旧的直接合并）。

3.2. 动态列操作

动态列操作提供添加，删除两个选项，这两个选项负责针对数据执行增删的细节操作，以完善对应的选择信息。

(static) SearchInput()

「组件」`SearchInput`

搜索专用输入

import { SearchInput } from 'web';

0. 示例

{
     "metadata":"contactName,联系人,12,,aiSearchInput",
     "optionJsx.layout":{
         "left": 14,
         "right": 10
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	layout	props	Object	左右布局信息，左边输入框，右边Checkbox。
$data		state	Object	构造的查询条件信息。

3. 组件核心点

查询条件支持两种：

模糊匹配：op值c。
精确匹配：op值=。

(static) SearchRangeDate()

「组件」`SearchRangeDate`

搜索专用输入

import { SearchRangeDate } from 'web';

0. 示例

{
     "metadata":"infoAt,日志记录时间,24,,aiSearchRangeDate",
     "optionJsx.config":{
         "mode":"FULL",
         "format":"YYYY-MM-DD HH:mm",
         "placeholder":["开始时间","结束时间"]
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	format	props	String	时间格式专用数据信息。
config	mode	props	String	查询条件的模式。
config	placeholder	props	Array	水印效果，左水印和右水印，长度为2的数组。
config	grid	props	Array	左中右的`span`值，默认`11,2,11`。
config	style	props	Object	左风格left，右风格right。
$data	start	state	Moment	开始时间。
$data	end	state	Moment	结束时间。

3. 组件核心点。

3.1. 关于模式

mode的值如下：

FULL：全模式，设置showTime = true。
DATE：日期模式，关闭showTime = false。
MONTH：月份模式，设置只选择月份。
TIME：时间模式（开发中）。

3.2. 日期时间

日期和时间格式全部使用Moment类型。

(static) TableEditor()

「组件」`TableEditor`

列表选择器

import { TableEditor } from 'web';

0. 示例

{
     "metadata": "items,选项表,24,,aiTableEditor",
     "optionJsx.depend.enabled": {
         "dataSource": [
             "items"
         ]
     },
     "optionJsx.config": {
         "format": {
             "type": "ARRAY",
             "keyField": "name"
         },
         "table": {
             "columns": [
                 {
                     "dataIndex": "name",
                     "title": "固定值",
                     "$render": "EDITOR"
                 },
                 {
                     "dataIndex": "label",
                     "title": "显示字段",
                     "$render": "EDITOR"
                 }
             ]
         }
     }
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
Ok	Ok	x

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	format	props	Object	多格式表格编辑。
config	table	props	Object	表格专用配置。
data		state	Any	根据格式计算的最终数据信息。
$table		state	Object	处理过的表格配置。
$ready		state	Boolean	标识当前组件已经加载完成。

3. 组件核心点

包含了添加、删除两个操作，新增和删除按钮会在执行过程中被禁用或启用。

(static) TreeSelector()

「组件」`TreeSelector`

树选择器

import { TreeSelector } from 'web';

0. 示例

{
     "metadata": "source,导入数据源,10,,aiTreeSelector,placeholder=（选择数据源）",
     "optionJsx.config": {
         "ajax": {
             "uri": "/api/search/data-source"
         },
         "selection": {
             "checkStrictly": true,
             "multiple": true,
             "showLine": false,
             "display": "name",
             "limitOp": "LE",
             "limitConfig": {
                 "_level": 1
             }
         },
         "tree": {
             "title": "name"
         },
         "validation": "请选择数据源！",
         "window": "选择导入数据源,选择,取消,false,400,false"
     },
     "optionJsx.allowClear": true,
     "optionConfig.rules": [
         "required,请选择导入数据源"
     ]
}

1. 生命周期

Hoc高阶周期	Mount初始化	Update更新
x	Ok	Ok

2. 属性说明

该属性说明位于optionJsx.config节点中，即jsx中的config对象信息。

属性名	二级属性	源	类型	说明
value		props	Object	Ant Form给当前组件传入的值。
config	ajax	props	Object	带表达式的Ajax请求专用配置。
config	linker	props	Object	当前选择数据和表单之间的链接配置（linker）。
config	tree	props	Object	当前列表选择器中表格`<Tree/>`的配置。
config	validation	props	String	选择验证器，验证是否选择了记录。
config	window	props	String/Object	弹出窗口专用配置信息。
config	selection	props	Object	多选还是单选的控制。
dialog		state	Object	「直接使用」处理过的窗口配置。
tree		state	Object	「直接使用」处理过的树配置。
search		state	Object	「直接使用」开启搜索框操作。
$visible		state	Boolean	是否显示弹出框。
$loading		state	Boolean	是否执行提交操作，造成加载效果。
$data		state	Array	当前组件中拥有的表格数据。
$keySet		state	Any	选中数据的组件集合。
$ready		state	Boolean	标识当前组件已经加载完成。
onClick		state	Function	点击函数构造。

3. 组件核心点

（略）

uca/zest

Zero Ui 中的Form组件

1.组件列表

2.组件配置矩阵

Methods

(static) AddressSelector()

「组件」AddressSelector

0. 示例

0.1. Json配置

0.2. Js注入

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 关于流程

3.2. 关于请求初始参数

4. 配置详解

4.1. init节点

4.2. state,city,region节点

4.3. country节点

4.4. 节点语法

(static) BraftEditor()

「组件」BraftEditor

1. 生命周期

2. 属性说明

3. 组件核心点

(static) CheckJson()

「组件」CheckJson

0. 示例

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. Option数据结构

3.2. 值结构

(static) CheckTransfer()

「组件」CheckTransfer

1. 生命周期

2. 属性说明

3. 选项设置

3.1. dataSource数据格式如：

3.2. limit数据结构

(static) DialogEditor()

「组件」DialogEditor

0. 示例

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 表单配置的模式

3.2. 子组件继承项

3.3. fnEdit/fnOpen更改状态

4. 子组件Form核心点

4.1. 数据传入

4.2. 关于$op的使用

4.3. 关于$executor

(static) FileBatch()

「组件」FileBatch

0. 示例

0.1. Json配置

1. 生命周期

2. 属性说明

3. 组件核心点

(static) FileUpload()

「组件」FileUpload

0. 示例

0.1. Json配置

1. 生命周期

2. 属性说明

3. 组件核心点

(static) FileUpload()

「组件」FileUpload

0. 示例

0.1. Json配置

1. 生命周期

2. 属性说明

3. 组件核心点

(static) InputArray()

「组件」InputArray

0. 示例

1. 生命周期

2. 属性说明

3. 组件核心点

「组件」`AddressSelector`

「组件」`BraftEditor`

「组件」`CheckJson`

「组件」`CheckTransfer`

「组件」`DialogEditor`

「组件」`FileBatch`

「组件」`FileUpload`

「组件」`FileUpload`

「组件」`InputArray`

「组件」`JsonEditor`

「组件」`ListSelector`

「组件」`MagicView`

「组件」`MatrixSelector`

「组件」`SearchInput`

「组件」`SearchRangeDate`

「组件」`TableEditor`

「组件」`TreeSelector`