_ui

界面模块

1. 函数列表

函数名 特征 说明
activeColumn Trigger 触发__BTN_CLEAR_<X>元素的onClick事件。
activeSearch Trigger 触发__BTN_CLEAR_SEARCH元素的onClick事件。
activeTreeOff Trigger 触发__BTN_TREE_OFF元素的onClick事件。
activeTreeOn Trigger 触发__BTN_TREE_ON元素的onClick事件。
anchorColumn Jsx 生成__BTN_CLEAR_<X>模式的隐藏按钮,被外围按钮调connectId链接。
anchorSearch Jsx 生成__BTN_CLEAR_SEARCH用于清除搜索条件专用隐藏条件。
anchorTree Jsx 生成__BTN_TREE_OFF__BTN_TREE_ON树启用禁用菜单。
columnWrapper Column 生成render专用函数(text,record,index) => ...,结合上层配置生成可执行render。
formAdvReset Form 「引擎」formReset的增强版。
formClear Form 清空表单专用,配合$clear配置执行清空操作,该变量提供了需要清空的字段配置信息。
formGet Form 「读多值」根据提供的key值读取表单中的数据,如果是多个key则读取Object,如果单个则读取单个字段数据。
formHit Form 「读写单值」二义性函数,读取某个字段或设置某个字段的值。
formHits Form 「写多值」批量设置值操作,将一个Object的值设置到表单中。
formLinker Form ListSelector,TreeSelector中专用处理linker的特殊方法。
formRead Form (主要用于父表单数据读取)如果包含了$record则从中读取数据,否则直接读取完整的表单数据。
formRedo Form 防重复加载重置。
formReset Form 「重置」表单标准的重置操作,触发reset按钮。
formSubmit Form 「提交」异步提交表单专用方法。
htmlDisabled Html 读取HTML元素的disabled属性。
htmlErrorBlur Html 触发onBlur的错误信息专用函数。
htmlErrorFocus Html 触发onFocus的错误信息专用函数。
htmlReadOnly Html 读取HTML元素的readOnly属性。
onConfirm On 封装Confirm弹出框的确认/取消的onClick事件操作。
onDatum On 「继承」非事件,属性继承专用,处理Assist/Tabular类型的属性集。
onLinker On linker配置数据的专用处理方法,ListSelector/TreeSelector都可能用到。
onReference On 「引擎」(高频)向上递归读取props中的reference引用(父组件引用)。
onRouter On 「引擎」从React Router中读取路由参数(包括QueryString中的参数)。
onSave On DATUM相关字典数据的合并专用操作,应用于很多带有字典类型的表单提交中。
onUniform On 「继承」非事件,属性继承专用,读取$app, $user, $profile, $router, $parent, $submitting等统一属性。
writeDisabled Jsx 表单字段的disabled全计算(依赖、Acl、其他等)。
writeImpact Jsx 表单中的impact配置影响全计算,计算被影响字段状态。
writeInitial Jsx 当disabled为true时,书写特定初始值到jsx属性中(data-initial)。
writeLinker Jsx linker计算过程,用于读取初始化加载过的linker数据,完成引用渲染。
writeReadOnly Jsx 表单字段的readOnly权计算(依赖、Acl、其他等)。
writeSegment Jsx 「总控」表单计算的特殊方法。

Methods

(static) activeColumn($terms)

「标准」Ux.activeColumn

点击查询条件的清除专用激活按钮。

Parameters:
Name Type Description
$terms Object

查询条件专用。

(static) activeSearch()

「标准」Ux.activeSearch

点击清除搜索框的按钮专用触发函数。

(static) activeTreeOff()

「标准」Ux.activeTreeOff

点击树桩菜单禁用按钮

(static) activeTreeOn()

「标准」Ux.activeTreeOn

点击树桩菜单激活按钮

(static) anchorColumn(field, onClick) → {Jsx}

「标准」Ux.anchorColumn

渲染列清除锚点,ID格式:__BTN_CLEAR_<column>

Parameters:
Name Type Description
field String

列名。

onClick function

点击专用回调。

Returns:
Type
Jsx

(static) anchorSearch(reference) → {Jsx}

「标准」Ux.anchorSearch

搜索条件清除专用锚点,清除所有搜索条件,ID格式:__BTN_CLEAR_SEARCH

Parameters:
Name Type Description
reference ReactComponent

React对应组件引用。

Returns:
Type
Jsx

(static) anchorTree(reference) → {Jsx}

「标准」Ux.anchorTree

树专用的状态锚点设置

  • __BTN_TREE_OFF:禁用树菜单。
  • __BTN_TREE_ON:启用树菜单。
Parameters:
Name Type Description
reference ReactComponent

React对应组件引用。

Returns:
Type
Jsx

(static) columnWrapper(column, fnRender)

「标准」Ux.columnWrapper

  1. fnRender 为特殊函数(原始的 render,去除 $render 配置后)
  2. column 为列配置

列配置的数据结构如:

{
     "field": "_children"
}
Parameters:
Name Type Description
column Object

输入列配置相关信息

fnRender any | function

原始函数信息

(static) formAdvReset(reference, response, keys)

「引擎」Ux.formAdvReset

1.基本介绍

formReset的强化版本,内部可调用doReset方法,核心功能如下:

  1. 当前 reference 中绑定了 Ant Design 的 form,执行当前表单的重置。
  2. 如果当前 reference 中没有父项,则递归往上执行,一直调用父类表单重置。
  3. 在重置时有两种支持模式
    • 直接重置(不选择任何字段直接重置)
    • 带字段重置(传入字段信息实现带字段的重置)
  4. 如果系统内部带有doReset方法,则执行该函数
Parameters:
Name Type Description
reference ReactComponent

React对应组件引用。

response Object

响应最终信息数据。

keys Array.<String>

被重设的表单字段。

(static) formClear(reference, data) → {Object}

「标准」Ux.formClear

Ant Design中的表单清空专用方法,用于清空当前 Ant Design表单。

Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

data Object

需要清空的对象值。

Returns:

处理被清空的所有方法。

Type
Object

(static) formGet(reference, key) → {Object|any}

「标准」Ux.formGet

直接从 form 中按 key 读取表单数据值。

  1. 如果传入了 Array 类型的 key,则读取包含了 key 中所有元素的表单对象值。
  2. 如果传入了 String 类型的 key,则直接读取表单字段为 key 的字段值。
  3. 如果什么都没传入,则直接返回所有表单值。
Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

key String | Array

字段名称,有可能是字段集合。

Returns:

返回读取的字段值。

Type
Object | any

(static) formHit(reference, key, value) → {any}

「标准」Ux.formHit

「Ambiguity」Ant Design中的Form操作的二义性函数

  • value有值时直接设置key的表单值;
  • value为undefined时则直接读取Form中的key对应的值

这个方法是一个典型的二义性方法,如果有 value 则设置字段key的值,如果没有value则读取value的值,但是它的读取不如 formGetformGet是增强版的表单读取方法,不仅仅可以读单字段的值,还可以读一个子对象(Object)。

Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

key String

字段名称。

value any

字段值

Returns:

只有在 value 不传入时使用该值。

Type
any

(static) formHits(reference, values)

「标准」Ux.formHits

Ant Design中的Form表单执行值设置,直接使用values执行设置,values中如果有undefined则清空该字段。

Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

values Object

设置Form表单中的字段值

(static) formLinker(data, config, linkerField) → {undefined|*}

「标准」Ux.formLinker

该函数主要使用在ListSelector、TreeSelector这种复杂的自定义组件中。

通过 data 来读取

  1. data 是 Array,则按长度为 1 来处理。
  2. data 是 Object,则直接处理。
Parameters:
Name Type Description
data Object

linker关联的数据信息。

config Object

linker关联的配置信息。

linkerField String

linker关联的字段值。

Returns:

返回undefined或者最终计算的 linker 数据。

Type
undefined | *

(static) formRead(reference, data) → {Object}

「标准」Ux.formRead

根据数据填充 data 变量。

  1. 如果包含了$record在 props 属性中,则直接使用 $record 数据执行填充,$record 的类型是 DataObject。
  2. 如果不包含$record变量,则直接用 form 的 getFieldsValue 读取当前表单值来填充 data 变量。
Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

data Object

需要填充的对象值。

Returns:

返回最终填充的结果。

Type
Object

(static) formRedo(reference)

「标准」Ux.formRedo

重置防重复提交的状态专用方法。

Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

(static) formReset(reference, keys)

「标准」Ux.formReset

重设表单值专用方法。

Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

keys String | Array

字段名称,有可能是字段集合。

(async, static) formSubmit(reference, redux) → {Promise.<T>}

「引擎」Ux.formSubmit

Ant Design中的表单提交函数,返回最终的表单提交数据值。

Parameters:
Name Type Default Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

redux boolean false

是否执行 redux 提交。

Returns:

返回最终的表单提交数据值。

Type
Promise.<T>

(static) htmlDisabled(id) → {boolean}

「标准」Ux.htmlDisabled

必须在componentDidMount之后才能执行。

直接返回id相匹配的 HTML 元素的 disabled 属性,直接判断是否禁用。

Parameters:
Name Type Description
id String

Html中的元素ID。

Returns:

返回元素是否禁用。

Type
boolean

(static) htmlErrorBlur(item) → {function}

「标准」Ux.htmlErrorBlur

「2阶」必须在componentDidMount之后才能执行。

当元素离开焦点时执行该函数,用于验证。

Parameters:
Name Type Description
item Object

被验证的元素配置

Returns:
Type
function

(static) htmlErrorFocus(item) → {function}

「标准」Ux.htmlErrorFocus

「2阶」必须在componentDidMount之后才能执行。

当元素聚焦时执行该函数,用于验证。

Parameters:
Name Type Description
item Object

被验证的元素配置

Returns:
Type
function

(static) htmlReadOnly(id) → {boolean}

「标准」Ux.htmlReadOnly

必须在componentDidMount之后才能执行。

直接返回id相匹配的 HTML 元素的 readOnly 属性,直接判断是否只读。

Parameters:
Name Type Description
id String

Html中的元素ID。

Returns:

返回元素是否只读。

Type
boolean

(static) onConfirm(fnEvent, content) → {function}

「标准」Ux.onConfirm

基础函数,用于执行 confirm,在按钮中执行提交确认注入。

  1. 如果带 content 则将原始函数处理在 onOk 回调中。
  2. 如果不带 content 则直接执行函数。
Parameters:
Name Type Description
fnEvent function

原始事件方法。

content String

提示框中的内容数据。

Returns:

返回事件函数

Type
function

(static) onDatum(reference, key) → {Array}

「标准」Ux.onDatum

辅助数据读取专用函数,可根据 key = xxx.yyy 的值处理辅助数据,主要读取:

  1. 读取Tabular专用辅助数据。
  2. 读取Assist专用辅助数据。
  3. 读取Category专用辅助数据。

根据所需信息读取上述三大类的辅助数据,得到最终的 Array 类型的数组结果。

Parameters:
Name Type Description
reference ReactComponent

React对应组件引用。

key String

需要读取的 Tabular/Assist 的键值。

Returns:

返回最终的数组。

Type
Array

(static) onLinker(config, valueSupplier) → {Object}

「标准」Ux.onLinker

和 linker 配置项目的数据提取。

Parameters:
Name Type Description
config Object

linker相关的配置信息。

valueSupplier function | any

默认值,或值处理函数。

Returns:

生成的最终 linker 数据。

Type
Object

(static) onReference(reference, current) → {ReactComponent}

「引擎」Ux.onReference

直接返回属性中的reference(父类引用),根据current计算将要递归的层级,这里必须是 按照 Zero UI 中的规范传入了 reference 的组件。

// 父类引用
const ref = Ux.onReference(this, 1);

// 爷类引用
const ref - Ux.onReference(this, 2);

// 不断往上递归,读取所需要的 n 层引用信息。
Parameters:
Name Type Default Description
reference ReactComponent

React对应组件引用。

current Number 0

处理层级信息。

Returns:

返回组件引用。

Type
ReactComponent

(static) onRouter(reference, key) → {*}

「引擎」Ux.onRouter

从React Router中读取路由参数的值相关信息,该路由参数包括

  1. 路径参数,在路由中使用/ox/person/:ci类似的ci参数。
  2. 查询请求参数,路由中的/ox/person?a=x&b=y中的a、b参数。
Parameters:
Name Type Description
reference ReactComponent

React对应组件引用。

key String

读取参数的参数名。

Returns:
Type
*

(static) onSave(reference, key, data, isDeleted) → {Array}

「标准」Ux.onSave

  1. 数组合并(添加、更新)处理。
  2. 数组删除。
Parameters:
Name Type Default Description
reference ReactComponent

React对应组件引用。

key String

需要读取的 Tabular/Assist 的键值。

data Object

数据处理信息,包含了数据记录集。

isDeleted boolean false

删除还是合并。

Returns:

返回处理完成的数组信息。

Type
Array

(static) onUniform(props, …keys) → {Object}

「引擎」Ux.onUniform

原生 Zero UI中的组件继承属性专用方法,在 Zero Extension 中会调用yoAmbient方法实现属性继承, 继承过程中包含几个核心数据:

  1. $t_$a_ 的辅助数据,Tabular和Assist两种。
  2. app应用程序相关数据。
  3. user, profile用户登录后的数据。
  4. submitting防重复提交状态数据。
  5. router核心路由数据。
  6. 输入的keys对应的键相关数据。
Parameters:
Name Type Attributes Description
props Props

当前React组件的属性信息。

keys Array.<String> <repeatable>

待提取的属性集合。

Returns:

返回最终的数据信息。

Type
Object

(static) writeDisabled(jsx, reference)

「标准」Ux.writeDisabled

在标准组件类型的依赖设置中,所有的禁用直接绑定 disabled 属性。

Parameters:
Name Type Description
jsx Object

对应表单配置 optionJsx。

reference ReactComponent

React组件引用。

(static) writeImpact(formValues, depend, value)

「标准」Ux.writeImpact

用于处理带依赖的数据相关联字段的影响信息,主要用于联动下拉组件,在 reset 触发时调用。

主要配置如:

{
     "metadata": "type,测试类型,,,aiSelect",
     "optionJsx.config.datum": "source=ci.type,key=key,label=name",
     "optionJsx.depend.impact": {
         "reset": [
             "surety"
         ]
     }
}

这里的配置会被当前方法解析,含义如:

  1. 当前字段的值在发生改变时影响了其他表单字段。
  2. 影响过程中,如果表单发生了重设,那么会将目标字段调整成最早的状态。
  3. 不同类型的下拉值会出现不同的结果。
Parameters:
Name Type Description
formValues Object

Form中初始的 linker 相关数据值。

depend Object

反向依赖专用配置。

value any

输入的值。

(static) writeInitial(optionConfig, optionJsx, cell)

「标准」Ux.writeInitial

追加特殊初始值到Jsx中,等待执行特定流程,初始化数据。

Parameters:
Name Type Description
optionConfig Object

生效配置

optionJsx Object

生效配置

cell Object

当前单元格的专用配置(原始配置)

(static) writeLinker(formValues, config, rowSupplier) → {Object}

「标准」Ux.writeLinker

链接专用处理

  • optionJsx.config.linker
  • optionJsx.config.linkerField

(生成 form values)

  1. config的数据结构
    {
        "linker": {
            "row1": "formField1",
            "row2": "formField2",
            "....": "其他字段"
        },
        "linkerField": "key" // 特殊用法
    }
    
  2. 参数说明
    • config:带有 linker 的配置
    • rowSupplier:执行函数,用于获取单行数据
  3. 使用场景:
    • ListSelector 的使用
    • TreeSelector 的使用
    • AddressSelector 的使用
    • onChange 字段专用的处理(触发专用)
Parameters:
Name Type Description
formValues Object

Form中初始的 linker 相关数据值。

config Object

linker配置信息。

rowSupplier function

读取选中行的数据信息。

Returns:

返回最终表单需要设置关联字段的表单值。

Type
Object

(static) writeReadOnly(jsx, reference)

「标准」Ux.writeReadOnly

标准的 readOnly 的禁用设置,这种类型仅用于 Select 组件,因为 Select 组件不支持 readonly 属性,仅支持 disabled。

Parameters:
Name Type Description
jsx Object

对应表单配置 optionJsx。

reference ReactComponent

React组件引用。

(static) writeSegment(reference, optionJsx, field)

「标准」Ux.writeSegment

表单可读写的特殊方法配置,主要包含几个特殊的设置,该设置和表单只读有关。

支持模式

  • 全表单不可编辑——只读表单。
  • 部分表单不可编辑——部分只读。

这里计算的不可编辑在表单原生的 readOnly 和 disabled 之下,优先级以原表单为主。

提取 $edition 流程

  1. 优先从 props 中读取 $edition 变量,如果不可编辑(直接false),直接返回。
  2. 其次从 state 中读取 $edition 变量,如果不可编辑(直接false),直接返回。
  3. 提取 props 中的 $inited 数据,从数据中提取metadata变量,如果出现了edition属性,则返回可编辑,否则不可编辑。

可编辑的判断

  1. 如果返回值是 false,整个表单不可编辑。
  2. 如果返回值是 {},则字段名为 true 的情况可编辑,否则不可编辑。

返回对象格式如:

{
    "username": true,
    "email": false,
    "age": false
}

上述格式中,username 可编辑,其他两个字段不可编辑。

Parameters:
Name Type Description
reference ReactComponent

React组件引用,必须绑定过 Ant 中的 Form。

optionJsx Object

表单配置中的将要写入数据的 optionJsx 配置。

field String

将会被处理的字段信息。