_xweb

自定义Web组件模块

该部分的所有API为自定义Web组件模块专用,自定义组件位于economy目录中。

1. 函数列表

函数名 说明
xtChecked 可选择组件的多选专用计算。
xtExprFlat (内部)构造表达式数据,传入Object,针对Object中所有配置执行解析,得到最终的定义型Array。
xtFormat 多格式计算,二维编辑器(如TableEditor)专用。
xtGet 根据配置信息读取自定义组件中的值。
xtInitArray 多义处理Array类型,任何输入转换成数组。
xtInitArrayMap 多义处理Array类型,生成Map类型(分组,每组一条)。
xtInitFormat 广义初始化(根据format判断,多格式处理)。
xtInitObject 多义处理Object类型,任何输入转换成对象。
xtLazyAjax 带ajax配置(config.ajax)的延迟加载Ajax配置型组件,支持Qr模式。
xtLazyData 带ajax配置的组件的Promise回调的执行函数。
xtLazyUp 「生命周期」带ajax配置型的组件componentDidUpdate方法专用更新方法,若包含form则拥有form级的判断。
xtLazyInit 「生命周期」带ajax配置型的组件componentDidMount方法专用初始化方法。
xtReady (带Loading)判断$ready专用的render准备方法,Ex中使用yoRender,而自定义组件中使用xtReady
xtRender (不带Loading),和xtReady对应,带error渲染。
xtReset Ant Design中的Form的RESET方法专用操作,可重置上层表单,主要应用于allowClear属性。
xtRevert 注意区分xtReset,xtRevert是恢复默认过程中使用,xtReset是提交完成后执行。
xtRowAdd 「事件函数」表格行添加事件函数。
xtRowChange 「事件函数」注入行onChange方法专用函数。
xtRowDel 「事件函数」表格行删除事件函数。
xtSet xtGet的逆方法,用于设置值。
xtUnsafe 「生命周期」UNSAFE_componentWillReceiveProps专用自定义钩子方法。

2. 格式配置表

2.1. optionJsx中的配置数据:

{
    "optionJsx":{
        "format": {
            "type": "可支持的类型",
            "keyField": "主键字段"
        }
    }
}

2.2. format中的type

type值 说明 抛异常
OBJECT 只支持Object类型。 Array和undefined抛异常
ARRAY Array和undefined类型。 其他类型
ARRAY_MAP 使用单字段分组执行(元素为Object)。 x
ARRAY_PURE 使用索引执行内置数据。 x
ARRAY_GROUP 使用单字段分组执行(元素为Array)。 x

3. 自定义模块

_xweb模块的所有API只在自定义组件中使用,使用过程可调用底层的Ux函数,有了这些函数的帮助,可顺利完成很多复杂自定义组件 所需的任务。

  • 多格式支持
  • 二维表编辑
  • 事件生成函数
  • Form表单绑定执行
  • 初始化/更新生命周期执行
  • 带Ajax的远程延迟加载

Methods

(static) xtChecked($keySet, reference) → {Array}

「标准」Ux.xtChecked

该函数主要用于<Select/>多选和<Tree/>的onSelect中,通过配置实现多种模式的选择。

  • 替换模式:直接使用键值集合替换原始选择。
  • 合并模式:执行Save操作选择追加和替换两种。
Parameters:
Name Type Description
$keySet Set | Array

已经选择的主键集合

reference ReactComponent

React组件引用

Returns:

返回最终选择键值集合

Type
Array

(static) xtExprFlat(value) → {Array}

「标准」Ux.xtExprFlat

Object转换成Array专用,如传入:

{
    "field": "expr1",
    "field": "expr2"
}

构造带expression表达式的配置数据信息。

Parameters:
Name Type Description
value Object

传入Object数据

Returns:

执行完成后的数组

Type
Array

(static) xtFormat(internal, format) → {any}

「标准」Ux.xtFormat

TableEditor等专用格式方法,可支持多种不同格式。

Parameters:
Name Type Description
internal Array

二维数据

format Object

格式配置数据

Returns:

返回初始化后的数据

Type
any

(static) xtGet(reference, field) → {Object}

「标准」Ux.xtGet

广义读取当前组件消费的数据信息,外层表单中会用props.value传入设置的值。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

field String

读取字段的数据(只适用于OBJECT类型)。

Returns:

返回最终状态信息。

Type
Object

(static) xtInitArray(props, empty) → {Array}

「标准」Ux.xtInitArray

  • 如果属性 props 中存在 value 变量
    • value本身是一个 Array,直接使用该 Array 初始化(步骤2)。
    • value本身是一个 Object,则使用 value.data 执行初始化(步骤2)。
  • 如果属性 props 中不存在 value 变量。
    • 如果允许空数组,则使用{data:[]}
    • 如果不允许空数组,则使用{data:[{key:"uuid"}]}

返回结构:

{
    "empty模式": {
        data: []
    },
    "非empty模式": {
        data: [
            {
                key: "ef78bf10-4db7-49d1-910d-96bc7eaad3c3"
            }
        ]
    }
}
Parameters:
Name Type Default Description
props Props

React属性信息。

empty boolean false

是否使用空数组作为初始值。

Returns:
Type
Array

(static) xtInitArrayMap(props, empty) → {Object}

「标准」Ux.xtInitArrayMap

(略),直接将Array类型转换成Map类型(Object),字段值为Object的键值。

Parameters:
Name Type Default Description
props Props

React属性信息。

empty boolean false

是否使用空数组作为初始值。

Returns:
Type
Object

(static) xtInitFormat(props) → {Object}

「标准」Ux.xtInitFormat

双格式处理

{
    "Array直接格式":[],
    "Json格式":{}
}
Parameters:
Name Type Description
props Props

React属性信息

Returns:
Type
Object

(static) xtInitObject(props) → {Object}

「标准」Ux.xtInitObject

  • 如果属性 props 中存在 value 变量,则返回该值。
  • 如果属性 props 中不存在 value 变量,则返回 {}
Parameters:
Name Type Description
props Props

React属性信息。

Returns:

返回初始值。

Type
Object

(static) xtLazyAjax(reference, config) → {Object}

「标准」Ux.xtLazyAjax

根据 config 中的 ajax 配置,来执行参数解析,主要用于可执行 Ajax的延迟请求控件,如:

  • ListSelector
  • AddressSelector
  • TreeSelector

上述控件都是复杂的自定义控件,必须解析 ajax 配置执行延迟远程调用。

1. 配置解析流程

config的ajax包含了远程处理的配置信息,分成两种读取数据的模式:

  1. Qr模式:启用查询引擎:ajax.params.criteria
  2. 非Qr模式:直接查询数据:ajax.magic

2. 执行输入解析

调用Ux.parseInput方法解析每个参数的参数来源信息,最终生成不同来源下的数据构造请求参数。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

config Object

Ajax配置专用配置信息。

Returns:

返回参数信息。

Type
Object

(static) xtLazyData(reference, request, fnCallback)

「标准」Ux.xtLazyData

该方法用于在按钮中执行重新加载和刷新时专用,可手动编程的方式触发Ajax操作。

Parameters:
Name Type Description
reference ReactComponent

React组件引用

request Object

请求数据

fnCallback function

Ajax调用的回调函数

(static) xtLazyInit(reference)

「标准」Ux.xtLazyInit

延迟初始化,统一处理,在 componentDidMount 中调用。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

(static) xtLazyUp(reference, virtualRef)

「标准」Ux.xtLazyUp

延迟初始化,统一处理,在 componentDidUpdate 中调用。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

virtualRef Object

包含了propsstate的前一个状态的引用。

(static) xtReady(reference, render, LOG) → {JSX.Element}

「标准」Ux.xtReady

由于 Zero 框架无法调用 Extension 中的yoRender,所以可直接使用xtReady 实现和 yoRender中 同样的逻辑

  1. 检查配置是否准备完成,如果准备完成:$ready = true,否则为false。
  2. 准备没有完成时,则不渲染。
Parameters:
Name Type Description
reference ReactComponent

React组件引用。

render function

执行 render 的函数。

LOG Object

日志配置。

Returns:

直接渲染。

Type
JSX.Element

(static) xtRender(reference, render) → {Jsx|boolean}

「标准」Ux.xtRender

检查系统状态内部是否存在error节点,如果存在error节点,则直接渲染错误信息,配置出错的统一调用流程。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

render function

执行 render 的函数。

Returns:

直接渲染。

Type
Jsx | boolean

(static) xtReset(reference, virtualRef, callback)

「标准」Ux.xtReset

重置专用函数,内部关联 Ant Design 的 Form信息。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

virtualRef Object

带有state和props的前一次状态信息。

callback function

回调函数处理。

(static) xtRevert(reference, virtualRef, callback)

「标准」Ux.xtRevert

自定义组件的新重置处理,用于设置表单的重置相关信息

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

virtualRef Object

带有state和props的前一次状态信息。

callback function

回调函数处理。

(static) xtRowAdd(reference, record, index) → {function}

「标准」Ux.xtRowAdd

表格中的添加行函数(二维表结构)

Parameters:
Name Type Description
reference ReactComponent

React组件引用

record Object

记录专用数据

index Number

记录索引

Returns:

行添加事件函数

Type
function

(static) xtRowChange(reference, rowKey, field) → {function}

「标准」Ux.xtRowChange

构造当前行的onChange专用函数,该API应用于column的render注入事件流程,可实现行数据变动操作,支持多字段数据。

  1. 先使用二义性ambEvent读取数据信息。
  2. 再触发上层的onChange方法,自定义组件中的上层方法会直接被Ant Design注入。
Parameters:
Name Type Description
reference ReactComponent

React组件应用

rowKey String

行记录主键

field String

被操作的字段

Returns:

返回事件函数

Type
function

(static) xtRowDel(reference, record, index) → {function}

「标准」Ux.xtRowDel

表格中的删除行函数(二维表结构)

Parameters:
Name Type Description
reference ReactComponent

React组件引用

record Object

记录专用数据

index Number

记录索引

Returns:

行删除事件函数

Type
function

(static) xtSet(reference, name, value) → {Object}

「标准」Ux.xtSet

(略)

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

name Array

读取字段的数据(只适用于OBJECT类型)。

value any

设置的任何值。

Returns:

返回最终状态信息。

Type
Object

(static) xtUnsafe(reference, nextProps)

「标准」Ux.xtUnsafe

新版中的UNSAFE_componentWillReceiveProps(nextProps,context)的内部调用,虽然不提倡使用, 但在自定义组件中,该函数依然会控制内部状态变更,所以依旧采用该方法。

Parameters:
Name Type Description
reference ReactComponent

React组件引用。

nextProps Props

下一个属性。