web-input

Zero Ui 中的Form组件

(略)基本信息参考web-component部分。

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 web-table
web-dialogeditor-table
web-dialog
弹出框表格编辑器。
FileUpload o o o web-file-upload 上传专用组件。
InputArray x o o web-input-array 数组元素录入组件。
JsonEditor x x x JSON编辑器。
ListSelector x o o web-dialog 列表选择器。
MagicView x x x web-magic-view
web-table
显示数据信息。
MatrixSelector x o o web-table
web-matrixselector-table
web-dialog
弹出框多选器。
SearchInput o o o 「搜索」增强版查询条件输入。
SearchRangeDate o o o web-range-date 「搜索」时间条件输入。
TableEditor o o x web-table-editor 表格编辑器。
TreeSelector x o o web-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 | QR
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是一个字符串,它的计算流程如下:

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

2)直接配置模式

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

3)动态模式

(保留模式,只有一个form的code,用于远程读取表单配置。)

3.2. 子组件继承项

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

1)上层属性

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

2)本层属性

属性名 类型 说明
reference React引用 将DialogEditor的React组件引用赋值给下层成为下层表单父引用标准。
doSubmitting Function 执行提交时防重复提交操作。
doRow Function 「单记录」行保存专用方法。
doRows 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) 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.config.single": true,
     "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 上传文件的大小限制。
config single props Boolean 单文件上传还是多文件上传。
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. 组件核心点

(略)