web-component

扩展组件Ex/Ix/Ox

1.组件分组

组件前缀 含义
Ix 内置专用组件，Internal Extension X。
Ex 扩展组件，Extension Component X。
Ox 配置组件，Origin Extension X。

名字中带有*号的是私有属性，不可直接从ei中导入。

1.Ex组件

组件名 生命周期 私有 表单组件 含义
* ExAction x x x v 否 「外层」按钮和链接专用封装组件。
* ExButton x x x v 否 「内层」按钮和连接专用封装组件。
* ExDialog x o x v 否 弹出框专用组件。
* ExEditorBatch x o x v 否 批量编辑器。
* ExEditorColumn x o x v 否 模型列选择器。
* ExEditorExport x o x v 否 导出数据编辑器。
* ExEditorImport x o x v 否 导入数据编辑器。
* ExNavigation x x x v 否 导航栏专用扩展组件。
* ExSearch x o x v 否 搜索栏专用。
* ExSider x o x v 否 侧边栏专用菜单组件。
* ExTable x o o v 否 表格专用内部渲染组件。
ExAccount o o x 否 否 显示用户账号信息专用数据呈现组件，目前用于用户的Profile页面。
ExAdmin x o x 否 否 渲染模板专用（整个站点的模板页，动态模板）。
ExApps x o x 否 否 渲染Dashboard专用的界面，主页的图标链接看板。
ExArbor x x x 否 否 渲染左边选择树，带Collapse折叠板，折叠根面板。
ExCategory x o x 否 否 使用X_CATEGORY构造标准的树形菜单。
ExDeploy o o x 否 否 PPT引导专用，Ox专用展示流程模板，G6实现。
ExEntry o x x 否 否 「登录」登录框组件（上下排版）。
ExForm x o o 否 否 标准表单。
ExGraphicEditor o o o 否 否 基于X6的拓扑图编辑器。
ExGraphicViewer o o o 否 否 基于X6的拓扑图查看器。
ExHistory o o x 否 否 历史记录专用查看组件。
ExListComplex x o o 否 否 「高频」复杂列表组件。
ExListOpen x o o 否 否 「高频」动态行操作列表组件。
ExListQuery x o o 否 否 「高频」查询列表组件（无增删改）。
ExLogged x x x 否 否 已经登录的用户状态组件。
ExLogin x x x 否 否 「登录」登录框组件（标准版）。
ExRecord x o o 否 否 记录呈现专用。
ExRegiment o o o 否 否 专用配置项选择器，搜索、选择、多选、反选。
ExRelation o o x 否 否 关系呈现专用。
ExService o o x 否 否 服务页编辑器，I_API/I_JOB专用编辑控件。
ExSubmit o o x 否 否 「登录」登录框组件（带有记忆功能）。
ExTab x o x 否 否 页签容器专用扩展组件。
ExTabular x o x 否 否 使用X_TABULAR构造标准的树形菜单。
ExTrackField o o x 否 否 字段对比专用呈现组件。
ExWizard x o x 否 否 双表单依赖搜索专用组件。

2.Ox组件

组件名 生命周期 表单组件 含义
OxAnchor o o x 否 链接专用锚点，带Dialog模式的按钮或链接，窗口打开是配置项详情。
OxCard x o x 否 PageCard专用的封装型组件，为了可直接在系统中配置界面。
OxCategory o x x 否 带Collapse面板的配置项，等价于ExArbor，但是配置型，所以使用了高阶注解。
OxCi o o o 否 显示配置项信息专用表单，弹出框或者其他容器都可呈现。
OxForm x o x 否 配置型表单，等价于ExForm。
OxHistory o o x 否 配置型历史记录，等价于ExHistory。
OxModule x o o 否 配置型模块容器，无等价组件。
OxRelation x o x 否 配置型关系信息，等价于ExRelation。
OxTab x o x 否 配置型页签容器，等价于ExTab。
OxTopology o o o 否 配置型拓扑图，呈现CMDB关系拓扑图。

3.Ix组件

组件名 生命周期 私有 表单组件 含义
* IxChannel x x x v 是 通道配置自定义组件。
* IxDatabase o o x v 是 数据库配置自定义组件。
* IxDict x x x v 是 字典配置自定义组件。
* IxIntegration o o x v 是 集成配置自定义组件。
* IxMapping o o x v 是 映射配置自定义组件。
* IxRule o o x v 是 标识规则编辑器。
* IxService x x x v 是 服务组件编辑器。

Methods

(static) *ExAction()

「组件」ExAction

1. 生命周期

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

2. 核心点

2.1. 按钮分流操作

Action分流，包含几种：

  1. 普通的Button
    1. 带有tooltip的专用按钮。
    2. 不带tooltip的专用按钮。
  2. 带有窗口的Button
    1. 带有Modal弹出窗口按钮。
    2. 带有Drawer抽屉窗口按钮。
    3. 带有Popover浮游窗口按钮。

2.2. 配置数据

$category默认为BUTTON类型，渲染<Button/>，如果为LINK则直接渲染链接，如果是BUTTON类型，系统根据长度计算是否包含<Button.Group/>。

2.3. 内置渲染

  • ExButton
  • ExDialog：根据类型计算，type值不为NONE

(static) *ExButton()

「组件」ExButton

1. 生命周期

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

2. 核心

该按钮有两种形态

  1. 按钮形态：<Button/>。
  2. 链接形态：<Link/>。

(static) *ExDialog()

「组件」ExDialog

1. 生命周期

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

2. 基础信息

React中的props属性

{
     $app: DataObject - X_APP 应用程序数据,
     $router: DataRouter - （react-router）构造对象,
     $user: DataArray - 登录的用户基本数据,
     fnOut: 专用 redux 写树函数,
     config = {
         窗口专用配置
     },
     children = 子组件（直接外层放到子组件中的内容）
     $visible = false：当前窗口的显示和隐藏
     $submitting = false：当前窗口是否处于提交过程
}

React属性state：

{
     $visible: "窗口是否隐藏"
}

3.核心

窗口支持两种模式：

  1. WINDOW：弹出对话框专用<Modal/>
  2. POPOVER：浮游对话框专用<Popover/>

(static) *ExEditorBatch()

「组件」ExEditorBatch

1. 生命周期

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

1.1. 布局

|-----------------------|
| ------- | ___________ |  （输入框），TEXT
| ------- | o____ o____ |  （单选框），RADIO
| ------- | _________|-||  （日期选择框），DATE
|-----------------------|

(static) *ExEditorColumn()

「组件」ExEditorColumn

1. 生命周期

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

(static) *ExEditorExport()

「组件」ExEditorExport

1. 生命周期

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

1.1. 布局

|-------------------------------|
| o___ o___ o___ o___ o___ o___ |
| o___ o___ o___ o___ o___ o___ |
| o___ o___ o___ o___ o___ o___ |
| o___ o___ o___                |
|          Save  Cancel         |
|-------------------------------|

(static) *ExEditorImport()

「组件」ExEditorImport

1. 生命周期

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

1.1. 布局

|-------------------------------|
|         |------------|        |
|         |    File    |        |
|         |------------|        |
|                               |
|          Save  Cancel         |
|-------------------------------|

(static) *ExNavigation()

「组件」ExNavigation

1. 生命周期

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

2. 核心

React属性props:

  1. 全局：$router, $menus, $app, $user
  2. 统一：config, data
  3. 函数：fnApp, fnOut
  4. 风格：css

css =

{
     clsNav,
     clsBreadcrumb
}

config =

{
     homepage
}

(static) *ExSearch()

「组件」ExSearch

1. 生命周期

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

(static) *ExSider()

「组件」ExSider

1. 生命周期

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

2. 核心

React属性props:

  1. 全局：$router, $menus, $app, $user
  2. 统一：config, data
  3. 函数：fnApp, fnOut
  4. 风格：css

css =

{
     clsSider: "",
     clsSiderExpand: ""
}

config =

{
     $collapsed,
     $theme
}

(static) *ExSider()

「组件」ExSider

1. 生命周期

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

2. 核心

React属性props:

  1. 全局：$router, $menus, $app, $user
  2. 统一：config, data
  3. 函数：fnApp, fnOut
  4. 风格：css

css =

{
     clsSider: "",
     clsSiderExpand: ""
}

config =

{
     $collapsed,
     $theme
}

(static) *ExTable()

「组件」ExTable

1. 生命周期

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

(static) *IxChannel()

「组件」IxChannel

1. 生命周期

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

(static) *IxDatabase()

「组件」IxDatabase

1. 生命周期

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

(static) *IxDict()

「组件」IxDict

1. 生命周期

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

(static) *IxIntegration()

「组件」IxIntegration

1. 生命周期

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

(static) *IxMapping()

「组件」IxMapping

1. 生命周期

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

(static) *IxRule()

「组件」IxRule

1. 生命周期

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

(static) *IxService()

「组件」IxService

1. 生命周期

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

(static) ExAccount()

「组件」ExAccount

import { ExAccount } from 'ei';

1. 生命周期

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

1.1. 布局

|-----------------|
|      name       |
| |-------------| |
| |             | |
| |     icon    | |
| |             | |
| |-------------| |
|                 |
| workNumber      |
| workTitle       |
| workLocation    |
|-----------------|

(static) ExAdmin()

「组件」ExAdmin

import { ExAdmin } from 'ei';

1. 生命周期

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

1.1. 布局

|------------------------------------------------|
|   Sider   |  Header                     Notify |
|  Menu     |------------------------------------|
|  Menu     |                                    |
|  Menu     |                                    |
|  Menu     |                                    |
|  Menu     |                                    |
|  Menu     |                                    |
|------------------------------------------------|

(static) ExAdmin()

「组件」ExAdmin

import { ExAdmin } from 'ei';

1. 生命周期

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

1.1. 布局

|------------------------------------------------|
|   Sider   |  Header                     Notify |
|  Menu     |------------------------------------|
|  Menu     |                                    |
|  Menu     |                                    |
|  Menu     |                                    |
|  Menu     |                                    |
|  Menu     |                                    |
|------------------------------------------------|

(static) ExApps()

「组件」ExApps

import { ExApps } from 'ei';

1. 生命周期

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

1.1. 布局

|------------------------------------------------|
|                                                |
|------------------------------------------------|
|  |------|  |------|  |------|                  |
|  |      |  |      |  |      |  ......          |
|  |------|  |------|  |------|                  |
|------------------------------------------------|

2. 核心

2.1.菜单执行

菜单只提取APP-MENU类型，X_MENU数据对接，并转换成react-router常用链接。

(static) ExArbor()

「组件」ExArbor

import { ExArbor } from 'ei';

1. 生命周期

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

1.1. 布局

| Collapse -------|
|  Menu           |
|    |-- Menu     |
|    |-- Menu     |
|                 |
| Collapse -------|
| Collapse -------|
|  Menu           |
|    |-- Menu     |
|                 |
| Collapse -------|
|  Menu           |
|    |-- Menu     |
|    |-- Menu     |
|                 |
|-----------------|

(static) ExCategory()

「组件」ExCategory

import { ExCategory } from 'ei';

1. 生命周期

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

1.1. 布局

|-----------------|
|  Menu           |
|    |-- Menu     |
|    |-- Menu     |
|  Menu           |
|    |-- Menu     |
|  Menu           |
|    |-- Menu     |
|    |-- Menu     |
|                 |
|-----------------|

(static) ExDeploy()

「组件」ExDeploy

import { ExDeploy } from 'ei';

1. 生命周期

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

1.1. 布局

|-------------------------------------------------------------------------------------|
|                  Node  ----> Node                                                   |
|                  /             \                                                    |
|                 /               \                                                   |
|   Start ----> Node              Node ----> Node ----> Node ----> Node ----> End     |
|                 \               /            \                           /          |
|                  \             /              \                         /           |
|                  Node  ----> Node             Node ----> Node ----> Node            |
|-------------------------------------------------------------------------------------|

(static) ExEntry()

「组件」ExEntry

import { ExEntry } from 'ei';

1. 生命周期

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

2. 运行时

componentDidMount执行完成后。

2.1. 容器属性

属性名 类型 含义
$app DataObject 应用程序基本数据。
$router DataRouter 路由基本信息。
$collapsed Boolean 是否展开左侧的主菜单。
fnApp Function 关联Ex.epicApp函数，读取应用程序配置数据专用函数。
fnOut Function Redux专用函数，写状态树。
react ReactComponent 顶层组件引用。
reference ReactComponent 父类组件引用。

2.1. 属性props

属性名 类型 含义
$options Object 基础选项配置数据。
form Object Ant Form构造的专用表单变量。
rxLogin Function 登录专用回调函数。

2.2. 状态state

状态名 类型 含义
$op Object 登录专用操作，主要会触发$opLogin函数。
$hoc HocI18n 绑定好的资源文件，对应cab/<LANG>/extension/ecosystem/ExEntry.json资源文件。
$ready Boolean 是否加载完成，此时已为true。
raft Object 构造完成的表单配置数据raftForm结果。

3.核心点

3.1.关于rxLogin回调

标准的$opLogin方法执行流程如下：

  1. POST /oauth/login登录系统拿到clientSecret密钥。
  2. POST /oauth/authorize请求申请临时授权码。
  3. POST /oauth/token使用临时授权码交换令牌token。
  4. GET /api/user执行用户信息读取，不同用户读取到的信息结构会有所区别。
  5. 将所有信息合并，然后调用rxLogin回调函数，该函数必须返回Promise，异步调用。
  6. 执行最终三步。

辅助接口：

  1. POST /oauth/image-code生成验证码
  2. 直接在登录流程中追加验证码功能（后台开启）

3.2.关于密码

在调用/oauth/login方法时，密码会执行MD5加密，发送密文到后端。

3.3.最终三步执行流程

  1. Ux.storeUser将数据存储到SessionStorage中。
  2. Ux.writeSubmit方法将Redux树中的重复提交修正到false位置（提交完成）。
  3. Ux.toOriginal方法执行原始路径重定向。
    1. 如果有target=xxx则重定向到target中。
    2. 如果没有target参数，则直接重定向到管理主界面Z_ENTRY_ADMIN页中。

Ux.storeUser在整个流程中调用了两次，第一次是直接提取用户信息，第二次会将rxLogin以及用户数据合并到一起重写SessionStorage中存储的数据。

(static) ExForm()

「组件」ExForm

import { ExForm } from 'ei';

1. 生命周期

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

2. 核心

React属性props：

{
     $app: DataObject - X_APP 应用程序数据,
     $router: DataRouter - （react-router）构造对象,
     $user: DataArray - 登录的用户基本数据,
     fnOut: 专用 redux 写树函数,
     form: Ant-Design Form,
     $actions: {
         $opProfile ( id = opProfile, function = $opProfile )
     },
     config:{
         dialog: {
             modal: { 窗口数据 }
             title: { 窗口标题 }
         },
         form: {
             原始配置 _form 中的内容
         }
     },
     $height: "200px",
     $inited: {
         初始值
     }
}

React属性state:

{
     $ready: "当前组件是否可渲染？配置处理完成",
     $loading: "当前表单提交状态（防重复提交）",
     $metadata: {}
     $action: {
         opProfile: true ( id = opProfile )
     },
     raft: {
         enabled: 启用Raft表单模式,
         form:{ },
         hidden: { inputs:[] },
         options: { },
         rows: [
             []
         ]
     }
}

(static) ExGraphicEditor()

「组件」ExGraphicEditor

import { ExGraphicEditor } from 'ei';

1. 生命周期

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

(static) ExGraphicViewer()

「组件」ExGraphicViewer

import { ExGraphicViewer } from 'ei';

1. 生命周期

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

(static) ExHistory()

「组件」ExHistory

import { ExHistory } from 'ei';

1. 生命周期

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

(static) ExListComplex()

「组件」ExListComplex

1. 生命周期

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

2. 核心

React属性props:

{
     $app: DataObject - X_APP 应用程序数据,
     $router: DataRouter - （react-router）构造对象,
     $user: DataArray - 登录的用户基本数据,
     fnOut: 专用 redux 写树函数,
     config:{
         query: （静态默认 query，主要包含四个键：projection, pager, sorter, criteria）,
         options: （选项处理）,
         mock: {},
         component: {},
         table: {}
     },
     $query：从外层传入的查询条件

     rxInject: 注入函数用于修改 options（工具专用）
     rxSearch: 函数用于调用搜索方法，传入参数
}

React状态state:

{
     options: （原始选项）
     query：（核心query）
     $submitting: 提交
     $loading：加载
}

步骤处理： 0. Verify, ./specification/verify.js

  1. Init, ./specification/workflow.js

(static) ExListOpen()

「组件」ExListOpen

1. 生命周期

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

2. 核心

属性 props

{
    "config": {
         "query": "默认查询",
         "table": "表格配置"
    }
}

(static) ExListQuery()

「组件」ExListQuery

1. 生命周期

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

2. 核心

React属性props:

{
     $app: DataObject - X_APP 应用程序数据,
     $router: DataRouter - （react-router）构造对象,
     $user: DataArray - 登录的用户基本数据,
     fnOut: 专用 redux 写树函数,
     config:{
         query: （静态默认 query，主要包含四个键：projection, pager, sorter, criteria）,
         options: （选项处理）,
         mock: {},
         component: {},
         table: {}
     },
     $query：从外层传入的查询条件

     rxInject: 注入函数用于修改 options（工具专用）
     rxSearch: 函数用于调用搜索方法，传入参数
}

React状态state:

{
     options: （原始选项）
     query：（核心query）
     $submitting: 提交
     $loading：加载
}

步骤处理： 0. Verify, ./specification/verify.js

  1. Init, ./specification/workflow.js

(static) ExLogged()

「组件」ExLogged

import { ExLogged } from 'ei';

1. 生命周期

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

2. 核心

React属性props:

  1. 全局：$router, $menus, $app, $user
  2. 统一：config, data
  3. 函数：fnApp, fnCollapse, fnOut
  4. 风格：css

css =

{
     clsDropdown: "",
     clsAccount: "",
     clsAvatar: "",
     clsUser: ""
}

config =

{
     window:{
         logout
     }
}

(static) ExLogged()

「组件」ExLogged

import { ExLogged } from 'ei';

1. 生命周期

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

2. 核心

React属性props:

  1. 全局：$router, $menus, $app, $user
  2. 统一：config, data
  3. 函数：fnApp, fnCollapse, fnOut
  4. 风格：css

css =

{
     clsDropdown: "",
     clsAccount: "",
     clsAvatar: "",
     clsUser: ""
}

config =

{
     window:{
         logout
     }
}

(static) ExLogin()

「组件」ExLogin

import { ExLogin } from 'ei';

1. 生命周期

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

(static) ExRecord()

「组件」ExRecord

import { ExRecord } from 'ei';

1. 生命周期

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

(static) ExRegiment()

「组件」ExRegiment

import { ExRegiment } from 'ei';

1. 生命周期

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

(static) ExRelation()

「组件」ExRelation

import { ExRelation } from 'ei';

1. 生命周期

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

(static) ExService()

「组件」ExService

import { ExService } from 'ei';

1. 生命周期

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

(static) ExSubmit()

「组件」ExSubmit

import { ExSubmit } from 'ei';

1. 生命周期

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

(static) ExTab()

「组件」ExTab

import { ExTab } from 'ei';

1. 生命周期

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

2. 核心

React属性props:

{
     $app: DataObject - X_APP 应用程序数据,
     $router: DataRouter - （react-router）构造对象,
     $user: DataArray - 登录的用户基本数据,
     fnOut: 专用 redux 写树函数,
     config:{
         tabs的基本配置信息
     },

     // 上层传入
     $activeKey: "被激活的tabs页",
     $items: [
         所有目前打开的 tabs 页的数量
     ]
}

(static) ExTabular()

「组件」ExTabular

import { ExTabular } from 'ei';

1. 生命周期

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

(static) ExTrackField()

「组件」ExTrackField

import { ExTrackField } from 'ei';

1. 生命周期

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

(static) ExWizard()

「组件」ExWizard

import { ExWizard } from 'ei';

1. 生命周期

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

(static) OxAnchor()

「组件」OxAnchor

1. 生命周期

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

(static) OxCard()

「组件」OxCard

1. 生命周期

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

(static) OxCategory()

「组件」OxCategory

1. 生命周期

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

(static) OxCi()

「组件」OxCi

1. 生命周期

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

(static) OxForm()

「组件」OxForm

1. 生命周期

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

(static) OxHistory()

「组件」OxHistory

1. 生命周期

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

(static) OxList()

「组件」OxList

1. 生命周期

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

(static) OxModule()

「组件」OxModule

1. 生命周期

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

(static) OxRelation()

「组件」OxRelation

1. 生命周期

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

(static) OxTab()

「组件」OxTab

1. 生命周期

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

(static) OxTopology()

「组件」OxTopology

1. 生命周期

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