web-ai

Jsx渲染模块

Jsx渲染专用模块(等待补充)

1. 函数列表

函数名 说明
aiBreadcrumb 面包屑渲染。
aiLink 渲染单个链接。
aiUrl 计算链接最终地址。

Methods

(static) aiBreadcrumb(items, rest, addOn) → {JSX.Element}

「标准」Ux.aiBreadcrumb

面包屑的渲染,使用Ant中的<Breadcrumb/>元素执行导航渲染

  1. 外层使用<Breadcrumb/>
  2. 元素使用<Breadcrumb.Item/>
  3. 元素内使用Ux.aiLink方法渲染链接地址。
Parameters:
Name Type Description
items Array

每一个链接的配置信息

rest Object

根属性对象

addOn Object

附加属性,应用于内容层

Returns:
Type
JSX.Element

「标准」Ux.aiLink

链接渲染专用流程。

1.item的数据结构

{
    "uri": "链接地址",
    "disabled": "是否禁用该链接",
    "className": "Css中对应的className",
    "text": "文本数据",
    "__uri": (event) => {
         // onClick函数,Function
    }
}

2. 分流程操作

2.1. 条件矩阵

编号 uri disabled __uri
A 无值或EXPAND x x
B 有值不为EXPAND true x
C 有值不为EXPAND false Function
D「默认」 有值不为EXPAND false

2.2. 条件流程

条件 Jsx元素 流程说明
A <span/> 直接显示文本,不显示链接,<span/>元素。
B <span/> 直接显示禁用文本,带ux-disabled的className,<span/>元素。
C <a/> 渲染链接,onClick绑定__uri<a/>元素。
D「默认」 <Link/> (react-router)根据item生成to属性,<Link/>元素,生成调用aiUrl函数。

3. 额外说明

系统中使用了react-router,而在addOn参数中,通常会传入$router变量(DataRouter)以方便在链接中触发路由事件。 路由中的onClick事件必须执行如下流程:

  1. 调用event.preventDefault(或Ux.prevent)禁用<a/>的默认行为。
  2. 然后调用Ux.toRoute来执行链接的跳转(这种做法和直接触发<Link/>中的to类似)。
Parameters:
Name Type Description
item Object

每一个元素的基本配置。

addOn Object

附加属性,应用于内容层。

Returns:
Type
JSX.Element

(static) aiUrl(item, addOn) → {String}

「标准」Ux.aiUrl

链接计算专用方法,第二参addOn中包含了$router(DataRouter)对象。

1.基本说明

代码逻辑分为两部分:基础路径计算和参数计算。

  1. 先根据uri计算基础路径。
  2. 再追加特定的参数信息到链接后缀中。

2.基础路径baseUri

uri 说明
$MAIN$ 该值计算该链接路径为Z_ENTRY_ADMIN(环境变量中配置的主界面)
$SELF$ 该值会将链接设置成当前页面($router.uri()
其他 1)根据/符号的结尾符号执行链接规范化。2)根据Z_ROUTE配置追加应用路径。

3.查询参数

  1. 先计算路径尾部是否包含?操作符。
  2. 维持midpid的基础值。
参数名 含义
mid Menu主键(主菜单参数值)
pid Page主键(页面参数值,二级菜单主键)

此处的midpid是为了用户在点击F5时维持菜单的开合状态而设置,所以在编程过程中避免使用midpid等参数值。

Parameters:
Name Type Description
item Object

每一个元素的基本配置。

addOn Object

附加属性,应用于内容层。

Returns:

跳转链接

Type
String