Skip to main content
Version: Next

--- 备用文档 4.2.2 运维前端开发

1. 概述

2. 菜单节点树

菜单节点树用于配置用户前端页面的路由树，类似传统的文件系统目录树，每个节点即一个页面。
image.png
菜单路径: 用户访问页面时候在浏览器中会键入的URL段，一般由字母、数字、下划线、横杠组成。

3，页面设计器

3.1 主页面​

3.1.1 页面布局​

流式布局:
自定义布局:

3.1.2 页面设置​

源JSON
变量管理

3.1.3 页面元素​

3.1.4 页面数据源​

3.2 页面区块​

3.2.1 区块布局​

3.2.2 区块设置​

3.2.3 区块元素​

3.2.4 区块数据源​

4，元素编辑器

4.1 通用属性​

4.2 卡片包装器​

4.3 业务属性​

4.4 组件数据源​

5，数据源配置

5.1 API​

5.2 JSON Data​

5.3 常量​

5.4 函数​

5.5 数据集​

6，常见配置参考

6.1 操作配置​

6.1.1 通用属性​

前置函数​

定义打开Action前的用户业务逻辑，可以进行Action初始化参数转换/是否可操作等信息提示。
节点参数：

  • nodeParams 节点参数域

返回值对象含义：

  • pass 是否可以启动操作；
  • type: 提示信息类型 值为info/warn/error；
  • message 提示信息,支持jsx；
  • transformParams:表单初始化值对象,可进行参数赋值覆盖等；
  • dynamicItems 动态表单集合定义,可动态控制表单项可见/新增/只读等；
  • width 自定对话框宽度

function beforeHandler(nodeParams){
  //todo 用户逻辑
  return {type:"",message:"",title:"",pass:true,transformParams:false,dynamicItems:[]}
}

提交前置函数​

提交前对提交的数据进行处理函数
节点参数：

  • nodeParams 节点参数域
  • formValues表单参数对象；

返回值对象含义：

  • pass 是否可以提交；
  • type: 提示信息类型 值为info/warn/error；
  • message 提示信息,支持jsx；
  • transformParams:表单提交值转换,可进行赋值覆盖追加等；

function beforeSubmitHandler(nodeParams,formValues){
  //todo 用户逻辑
  return {type:"",message:"",title:"",pass:true,transformParams:{}}
}

动作提示函数​

动态提示，函数需要返回JSX字符串
节点参数：

  • nodeParams 节点参数域
  • formValues表单参数对象；

返回值对象含义：

  • 函数需要返回JSX字符串

function hintHandler(nodeParams,formValues){
  //todo 用户逻辑
  return ""
}

6.1.2 操作表单项​

基础定义​

高级配置​

联动函数​


xxxx

6.2 过滤器配置​

6.2.1 通用属性​

6.2.2 过滤表单项​

6.3 表单项配置参考​

6.3.1 表单项基础配置——基础定义​

image.png

6.3.2 表单项高级配置——参数JSON配置​

分组配置​

在高级配置中配置category后，可使得表单项分组管理
{
"layout": {
"category": "POC信息",
"span": 24
}
}

Label和value配置​

{
"defaultValue": "brief",
"options": [
{
"value": "brief",
"label": "居中对齐"
},
{
"value": "default",
"label": "左对齐"
},
{
"value": "empty",
"label": "无菜单"
}
]
}

6.3.3 常见表单项配置参考​

image.pngimage.png
image.pngimage.png

可编辑tag组​

可实现添加标签按钮的显示文案定制


{
  "newTagLabel": "新建变量"
}

机器选择器​

普通输入​

可实现常见的antd的参数定制


{
  "newTagLabel": "新建变量"
}
addonAfter  带标签的 input，设置后置标签   ReactNode   -   
addonBefore 带标签的 input，设置前置标签   ReactNode   -   
allowClear  可以点击清除图标删除内容    boolean -   
bordered    是否有边框   boolean true    4.5.0
defaultValue    输入框默认内容 string  -   
disabled    是否禁用状态，默认为 false    boolean false   
id  输入框的 id string  -   
maxLength   最大长度    number  -   
prefix  带有前缀图标的 input   ReactNode   -   
size    控件大小。注：标准表单内的输入框大小限制为 large large | middle | small  -   
suffix  带有后缀图标的 input   ReactNode   -   
type    声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")    string  text    
value   输入框内容   string  -   
onChange    输入框内容变化时的回调 function(e) -   
onPressEnter    按下回车的回调 function(e) -

文本输入​

下拉单选​

下拉多选​

日期选择​

日期范围​

可输入标签​

选择树​

Radio单选​

CheckBox多选​

时间选择​

Radio按钮​

Slider滑条​

Switch开关​

级联单选​

密码输入​

人员选择​

分组输入​

JSONEditor​

Table​

可编辑/新增/删除 表格

{
  "enableRemove": true,
  "columns": [
    {
      "editProps": {
        "name": "key",
        "label": "",
        "required": false,
        "inputTip": "key",
        "defModel": {
        "remote":true,
        "optionMapping":{
            "label":"alias",
            "value":"name"
         }
       },
       "api":"gateway/sreworks-job/task/list?page=1&pageSize=9999999",
       "type":3
      },
      "dataIndex": "key",
      "title": "任务名称",
      "key": "key"
    },
    {
      "editProps": {
        "name": "value",
        "label": "",
        "type": 1,
        "required": false,
        "inputTip": "value"
      },
      "dataIndex": "value",
      "title": "任务序号",
      "key": "value"
    }
  ],
  "enableAdd": true,
  "enableEdit": true
}

关联分组​

ACEview​

OamWidget（业务组件）内置业务组件​

区块选择器（新增）​

文件上传（需更新）​

上传图片​

SchemaForm​

脚本气泡卡片​

卡片选择​

7 前端组件扩展

https://yuque.antfin.com/abm/cq9dg6/ngx61f

7.1 基础组件扩展​

7.2 布局组件扩展​

7.3 业务组件扩展​

7.4 表单项扩展​

8 常见前端知识

8.1 JSX​