uca/zion

Methods

(static) * Dialog()

「组件」Dialog

旧名称依然可用：DynamicDialog

import { DynamicDialog } from 'web';     // 旧版本
import { Dialog } from 'web';

1. 生命周期

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

2. 属性说明

属性名 二级属性 源 类型 说明
className props String 当前窗口设置的className，默认web-dynamic-dialog。
children props Jsx React中专用的children子元素信息。
$visible props Boolean 当前窗口是否显示（直接外层传入该变量）。
$loading props Boolean 当前窗口是否处于提交加载状态。
$footer props Jsx 是否定制过窗口的底部按钮，要重写Ok/Cancel时使用。
rxOk props Function 点击确认按钮外置函数。
rxCancel props Function 点击取消按钮外置函数。
$dialog props String/Object String格式通过aiExprWindow转换成Object。
$dialog title props String 「Ant」窗口标题。
$dialog okText props String 「Ant」OK按钮使用文字。
$dialog cancelText props String 「Ant」取消按钮使用文字。
$dialog visible props Boolean 「Deprecated」直接使用$visible代替。
$dialog width props Number 「Ant」窗口宽度。
$dialog maskClosable props Boolean 「Ant」点击遮罩是否触发关闭动作。
$dialog onOk props String 「自定义」点击onOk按钮触发的Ux.connectId锚点，该事件会被外层的rxOk覆盖。
$dialog component props Jsx 「自定义」新版支持，窗口内的children元素的替换元素，当前组件不用，但外层解析会使用。
$ready state Boolean 标识当前组件已经加载完成。

3. 组件核心点

3.1. 资源解析

配置信息$dialog的示例如（String模式）：

title,okText,cancelText,visible,width,maskClosable,onOk,component

3.2. 关于$footer

只有okText属性没有传值时，$footer设置的内容才会生效，也就是说如果要定制footer，那么需要将okText设置 为空字符串""。

3.3. 关于onOk

onOk在不传入rxOk外层函数时会直接触发Ux.connectId去点击链接的onOk元素的onClick事件，如果传入了 rxOk则默认的链接点击行为会被废弃，而使用外层属性。

(static) * DialogButton()

「组件」DialogButton

import { DialogButton } from 'web';

1. 生命周期

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

2. 属性说明

属性名 二级属性 源 类型 说明
children props Jsx React级别的子组件。
$content props Jsx 传入的子组件，该子组件优先级低于children。
$hidden props Boolean 是否隐藏当前按钮，如果为true则隐藏按钮。
$mode props String 设置三种模式：`DIALOG
$button props String/Object 调用aiExprAction解析该配置生成按钮专用配置。
$dialog props Object 不同窗口模式使用不同配置完成。
$loading props Boolean 是否处于提交/加载状态。
rxClick props Function 按钮点击的回调函数，在点击按钮设置visible=true过后执行该回调。
rxOk props Function 优先考虑使用外层rxOk执行该函数，如果是String则直接触发Ux.connectId操作。
button state Object 存储在当前组件的按钮配置。
dialog state Object 存储在当前组件的窗口配置。
visible state Boolean 显示/隐藏窗口专用配置。
render state Function 专用Jsx的渲染函数。

3. 组件核心点

3.1. 关于子组件的计算

  1. 过滤掉的属性表：
    • $disabled
    • $button
    • $dialog
    • $mode
    • $inited
    • $content
  2. 其他属性再追加rxClose专用方法关闭窗口进行继承。
  3. 内置窗口使用Dialog组件替换原生的<Modal/>操作，来完成状态注入。

3.2. 模式解析

$mode设置的值生成三种不同的窗口：

  • DIALOG：弹出窗口组件<Modal/>。
  • DRAWER：抽屉窗口组件<Drawer/>。
  • POPOVER：浮游窗口组件<Popover/>。

3.3. 状态说明

  • $loading：组件是否处于加载状态，当前按钮的加载状态等价于提交状态，这个值会传递给子组件。
  • visible：用于记录当前组件的现实和隐藏的专用属性，注意这个属性和Zero Ui规范中的$visible有一定区别，原因是这个组件是旧组件，历史太长，暂时没做更改。

(static) * DialogMenu()

「组件」DialogMenu

import { DialogMenu } from 'web';

1. 生命周期

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

2. 属性说明

属性名 二级属性 源 类型 说明
$mode props String 设置窗口模式：`DIALOG
$items props Array 菜单项相关配置。
$button props String/Object 调用aiExprAction解析该配置生成按钮专用配置。
$content props Object 不同菜单渲染的组件对象，上层传入外置对象。
$inited props Object 初始化表单值信息。
$loading props Boolean 是否处于提交/加载状态。
$functions props Object 执行CONFIRM时的回调函数，用于处理回调信息。
button state Object 主按钮配置信息。
items state Array 菜单项专用配置。
renders state Object 生成的子组件渲染器。
visible state Object key=true/false，记录每个菜单项组件的显示/隐藏。
windows state Object key=配置，记录每个窗口的配置信息。

3. 组件核心点

3.1. 单个选项结构

{
    "button": "按钮配置",
    "dialog": "窗口配置",
    "component": "使用的组件key，对应$content变量",
    "confirm": "删除专用，带有浮游提示窗口（是否）",
    "init": "布尔值，是否给子组件传入初始化数据信息。"
}

3.2. 三种执行器

  • DIRECT：直接执行函数的执行器。
  • DIALOG：窗口执行器，设置显示/隐藏专用执行器。
  • CONFIRM：直接应用Modal.confirm的执行器。

3.3. 初始化数据渲染器

  1. 先从props中读取$inited变量作为表单初始化变量。
  2. 判断init的值，过滤
    • $disabled
    • $disabledItems
    • $inited
    • $items
    • $button
    • $functions
    • $content
    • $mode
  3. 为$inited和$parent赋值
    • 带_前缀的字段直接放到$inited中。
    • $parent中存储的就是$inited数据。
  4. 追加rxClose专用方法进入子组件。

3.4. 状态说明

  • $loading：组件是否处于加载状态，当前按钮的加载状态等价于提交状态，这个值会传递给子组件。
  • visible：此处是一个Object类型，记录了每个组件的显示和隐藏状态。

(static) ColumnUser()

「组件」ColumnUser

import { ColumnUser } from 'web';

1. 生命周期

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

2. 属性说明

属性名 二级属性 源 类型 说明
config uri props String Ajax加载专用uri配置。
config field props String Ajax响应读取字段field提取为最终渲染。
config expr props String Ajax更新的表达式，如果存在expr则使用响应数据执行格式化。
config icon props Boolean 是否在当前列中显示图标信息。
$icon props String/Object 当前列所使用的<Icon/>相关信息。
$key props Any 加载记录的专用主键信息，只提供主键信息。
$empty props String 如果没有读取到数据则传入该值表示空数据渲染。
value state String 计算出来的最终呈现的文字信息。
$system state Boolean 是显示系统图标还是应用图标。
$ready state Boolean 标识当前组件已经加载完成。

3. 组件核心点

3.1. 关于Ajax加载

  • 该组件位于<Table/>元素中渲染特定列USER专用，此处有个误区就是列的名称，这里应用了ColumnUser是因为最早的设计中它是为了加载创建人、更新人而量身定制的列，而后续更改过后，依旧维持了这个名字，没有更改。
  • 该组件中的Ajax只支持GET方法，内部调用Ux.ajaxGet(uri,{key});方法执行相关操作，这也是该列的限制。

3.2. 关于Icon计算

  1. 如果state中计算的$system=true，则直接设置图标为type = setting为图标类型，颜色#7D7D7D。
  2. 相反则直接读取$icon图标信息，如果没有提供则直接使用type = user为图标类型，颜色#CD2990。

图标类型的格式为：

<type>,<color>

图标的尺寸不能设置，只能是16，但是颜色可以根据提供的$icon来进行设置。

(static) Dialog()

「组件」Dialog

旧名称依然可用：DynamicDialog

import { DynamicDialog } from 'web';     // 旧版本
import { Dialog } from 'web';

1. 生命周期

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

2. 属性说明

属性名 二级属性 源 类型 说明
className props String 当前窗口设置的className，默认web-dynamic-dialog。
children props Jsx React中专用的children子元素信息。
$visible props Boolean 当前窗口是否显示（直接外层传入该变量）。
$loading props Boolean 当前窗口是否处于提交加载状态。
$footer props Jsx 是否定制过窗口的底部按钮，要重写Ok/Cancel时使用。
rxOk props Function 点击确认按钮外置函数。
rxCancel props Function 点击取消按钮外置函数。
$dialog props String/Object String格式通过aiExprWindow转换成Object。
$dialog title props String 「Ant」窗口标题。
$dialog okText props String 「Ant」OK按钮使用文字。
$dialog cancelText props String 「Ant」取消按钮使用文字。
$dialog visible props Boolean 「Deprecated」直接使用$visible代替。
$dialog width props Number 「Ant」窗口宽度。
$dialog maskClosable props Boolean 「Ant」点击遮罩是否触发关闭动作。
$dialog onOk props String 「自定义」点击onOk按钮触发的__Zn.connectId锚点，该事件会被外层的rxOk覆盖。
$dialog component props Jsx 「自定义」新版支持，窗口内的children元素的替换元素，当前组件不用，但外层解析会使用。
$ready state Boolean 标识当前组件已经加载完成。

3. 组件核心点

3.1. 资源解析

配置信息$dialog的示例如（String模式）：

title,okText,cancelText,visible,width,maskClosable,onOk,component

3.2. 关于$footer

只有okText属性没有传值时，$footer设置的内容才会生效，也就是说如果要定制footer，那么需要将okText设置 为空字符串""。

3.3. 关于onOk

onOk在不传入rxOk外层函数时会直接触发__Zn.connectId去点击链接的onOk元素的onClick事件，如果传入了 rxOk则默认的链接点击行为会被废弃，而使用外层属性。

(static) LoadingContent()

「组件」LoadingContent

import { LoadingContent } from 'web';

1. 生命周期

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

2. 属性说明

属性名 二级属性 源 类型 说明
$height props Number/String 当前加载遮罩的高度，默认高度为100%（自动填充满）
$tip props String 当前组件呈现的文字信息，默认根据资源文件计算。
$top props String 高度单位，可设置成paddingTop的值，默认：窗口高度 x 1/4。

3. 组件核心点

3.1. 资源文件

文件位置：cab/<LANGUAGE>/economy/web/LoadingContent.json

文件内容：

{
     "loading": "数据加载中……"
}

3.2. 属性计算

传入的三个属性主要是为计算最外层<div/>的style属性，

(inner) @uca()