@hzab/form-render

formily schema 表单渲染组件

组件

Tips

- antd 组件样式需要手动引入

示例

#### 项目初始化时挂载全局组件

``

jsx

import { setFormilyGlobalComponents } from "@hzab/utils/src/formily/global-components";



// 挂载 Test1 组件到 formRender 组件

setFormilyGlobalComponents({

  Test1() {

    return Test1;

  },

});



// 挂载 Test2 组件到 formRender 组件

setFormilyGlobalComponents({

  Test2() {

    return Test2;

  },

  Test3() {

    return Test3;

  },

});

jsx

import FormRender from "@hzab/form-render";



// testSchema 为 formily 生成的 schema json

;





#### 组件远程数据



- 使用 schemaScope 传入全局配置变量，在响应器的动作响应中调用

jsx

// schema

{

  "form": {

    "labelCol": 6,

    "wrapperCol": 12

  },

  "schema": {

    "type": "object",

    "properties": {

      "parentId": {

        "type": "string",

        "title": "上级菜单",

        "x-decorator": "FormItem",

        "x-component": "TreeSelect",

        "x-validator": [],

        "x-component-props": {},

        "x-decorator-props": {},

        "x-reactions": {

          "fulfill": {

            "run": "fetchMenuTree($self);"

          }

        },

        "name": "parentId",

        "x-designable-id": "i012z5nbd5z",

        "x-index": 0

      }

    }

  }

}



// formRender

      schema={testSchema}

    schemaScope={{

      fetchMenuTree(field) {

        // 模拟请求

        setTimeout(() => {

          // field 目标组件的 配置参数

          // 通过 field.component[1] 可以动态配置目标组件的 props

          // 树选择器 数据源

          field.component[1].treeData = [{ value: 1, label: 1 }];

        }, 1000)

      },

    }}

  />





#### 自定义组件



- 使用 components 传入自定义组件，在 schema 中 x-component 配置对应的组件名称

jsx

// schema

{

  "form": {

    "labelCol": 6,

    "wrapperCol": 12

  },

  "schema": {

    "type": "object",

    "properties": {

      "parentId": {

        "type": "string",

        "title": "图标选择器",

        "x-decorator": "FormItem",

        "x-component": "IconSelect",

        "x-validator": [],

        "x-component-props": {},

        "x-decorator-props": {},

        "x-reactions": {},

        "name": "parentId",

        "x-designable-id": "i012z5nbd5z",

        "x-index": 0

      }

    }

  }

}



// formRender

      schema={testSchema}

    components={{

      // 自定义组件

      IconSelect() {

        return "IconSelect";

      },

    }}

  />





API



$3



| 参数               | 类型     | 必填 | 默认值     | 说明                                                                                       |

| ------------------ | -------- | ---- | ---------- | ------------------------------------------------------------------------------------------ |

| schema             | Object   | 是   | -          | 数据信息的 schema                                                                          |

| schemaScope        | Object   | 否   | -          | 全局作用域，用于实现协议表达式变量注入                                                     |

| layout             | Object   | 否   | horizontal | 表单布局，horizontal vertical \ inline                                                     |

| initialValues      | Object   | 否   | -          | form 初始值                                                                                |

| components         | Object   | 否   | -          | 自定义组件                                                                                 |

| formOptions        | Object   | 否   | -          | createForm 的参数                                                                          |

| disabled           | boolean  | 否   | -          | 禁用状态                                                                                   |

| readOnly           | boolean  | 否   | -          | 只读状态                                                                                   |

| onFormValuesChange | Function | 否   | -          | 表单事件 (form)=>{} https://core.formilyjs.org/zh-CN/api/entry/form-effect-hooks           |

| onFieldValueChange | Function | 否   | -          | 表单项事件 (field, form)=>{} https://core.formilyjs.org/zh-CN/api/entry/field-effect-hooks |



$3



| 名称 | 参数      | 说明           |

| ---- | --------- | -------------- |

| init | form 实例 | 组件初始化执行 |



$3



- 使用 表单编辑器生成：https://designable-antd.formilyjs.org/

js

{

  "form": {

    "labelCol": 6,

    "wrapperCol": 12

  },

  "schema": {

    "type": "object",

    "properties": {

      // 参数 key

      "parentId": {

        "type": "string",

        // 参数 label

        "title": "上级菜单",

        "x-decorator": "FormItem",

        // 渲染的组件

        "x-component": "TreeSelect",

        // 组件校验

        "x-validator": [],

        // 组件配置

        "x-component-props": {

          "virtual": true,

          "allowClear": true,

          "showSearch": true

        },

        // 容器配置

        "x-decorator-props": {},

        // 响应器

        "x-reactions": {

          // 依赖字段

          "dependencies": [

            {

              "property": "value",

              "type": "any"

            }

          ],

          // 响应动作

          "fulfill": {

            // 属性响应，只支持 JS 表达式

            "state": {

              "visible": "{{$deps.menuType === \"C\" || $deps.menuType === \"F\"}}"

            },

            // 动作响应，支持 JS 语句

            "run": "fetchMenuTree($self);"

          }

        },

        // 参数 key

        "name": "parentId",

        // 组件在编辑器中的 ID（必须唯一）

        "x-designable-id": "i012z5nbd5z",

        // 组件在表单中的顺序（必须唯一）

        "x-index": 0,

        // 是否在 table 中展示，目前需要手动添加配置

        "inTable": false

      }

    }

  }

}

组件开发流程

- 在 config/webpack.config/webpack.config.dev.js 中按需修改 alias 配置的包名，便于本地调试
- 在 example/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
- npm run dev

文件目录

- example 本地测试代码
- src 组件源码

命令

- 生成文档：npm run docs
- 本地运行：npm run dev
- 打包编译：npm run build

发布

- npm 源和云效源都需要发布

- 命令：npm publish --access public
- 发布目录：
- src

$3

- 安装
npm install -g nrm
- 增加源
nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
- 切换源
nrm use aliyun
nrm use npm
- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/

配置

$3

- 本地配置文件：config/config.js

$3

- config/webpack.config.js

示例

jsx
import { setFormilyGlobalComponents } from "@hzab/utils/src/formily/global-components";

// 挂载 Test1 组件到 formRender 组件
setFormilyGlobalComponents({
Test1() {
return

Test1

;
},
});

// 挂载 Test2 组件到 formRender 组件
setFormilyGlobalComponents({
Test2() {
return

Test2

;
},
Test3() {
return

Test3

;
},
});

jsx
import FormRender from "@hzab/form-render";

// testSchema 为 formily 生成的 schema json
;

#### 组件远程数据

- 使用 schemaScope 传入全局配置变量，在响应器的动作响应中调用

jsx
// schema
{
"form": {
"labelCol": 6,
"wrapperCol": 12
},
"schema": {
"type": "object",
"properties": {
"parentId": {
"type": "string",
"title": "上级菜单",
"x-decorator": "FormItem",
"x-component": "TreeSelect",
"x-validator": [],
"x-component-props": {},
"x-decorator-props": {},
"x-reactions": {
"fulfill": {
"run": "fetchMenuTree($self);"
}
},
"name": "parentId",
"x-designable-id": "i012z5nbd5z",
"x-index": 0
}
}
}
}

// formRender
schema={testSchema}
schemaScope={{
fetchMenuTree(field) {
// 模拟请求
setTimeout(() => {
// field 目标组件的配置参数
// 通过 field.component[1] 可以动态配置目标组件的 props
// 树选择器数据源
field.component[1].treeData = [{ value: 1, label: 1 }];
}, 1000)
},
}}
/>

#### 自定义组件

- 使用 components 传入自定义组件，在 schema 中 x-component 配置对应的组件名称

jsx
// schema
{
"form": {
"labelCol": 6,
"wrapperCol": 12
},
"schema": {
"type": "object",
"properties": {
"parentId": {
"type": "string",
"title": "图标选择器",
"x-decorator": "FormItem",
"x-component": "IconSelect",
"x-validator": [],
"x-component-props": {},
"x-decorator-props": {},
"x-reactions": {},
"name": "parentId",
"x-designable-id": "i012z5nbd5z",
"x-index": 0
}
}
}
}

// formRender
schema={testSchema}
components={{
// 自定义组件
IconSelect() {
return "IconSelect";
},
}}
/>

API

$3

| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------------ | -------- | ---- | ---------- | ------------------------------------------------------------------------------------------ |
| schema | Object | 是 | - | 数据信息的 schema |
| schemaScope | Object | 否 | - | 全局作用域，用于实现协议表达式变量注入 |
| layout | Object | 否 | horizontal | 表单布局，horizontal vertical \ inline |
| initialValues | Object | 否 | - | form 初始值 |
| components | Object | 否 | - | 自定义组件 |
| formOptions | Object | 否 | - | createForm 的参数 |
| disabled | boolean | 否 | - | 禁用状态 |
| readOnly | boolean | 否 | - | 只读状态 |
| onFormValuesChange | Function | 否 | - | 表单事件 (form)=>{} https://core.formilyjs.org/zh-CN/api/entry/form-effect-hooks |
| onFieldValueChange | Function | 否 | - | 表单项事件 (field, form)=>{} https://core.formilyjs.org/zh-CN/api/entry/field-effect-hooks |

$3

| 名称 | 参数 | 说明 |
| ---- | --------- | -------------- |
| init | form 实例 | 组件初始化执行 |

$3

- 使用表单编辑器生成：https://designable-antd.formilyjs.org/

js
{
"form": {
"labelCol": 6,
"wrapperCol": 12
},
"schema": {
"type": "object",
"properties": {
// 参数 key
"parentId": {
"type": "string",
// 参数 label
"title": "上级菜单",
"x-decorator": "FormItem",
// 渲染的组件
"x-component": "TreeSelect",
// 组件校验
"x-validator": [],
// 组件配置
"x-component-props": {
"virtual": true,
"allowClear": true,
"showSearch": true
},
// 容器配置
"x-decorator-props": {},
// 响应器
"x-reactions": {
// 依赖字段
"dependencies": [
{
"property": "value",
"type": "any"
}
],
// 响应动作
"fulfill": {
// 属性响应，只支持 JS 表达式
"state": {
"visible": "{{$deps.menuType === \"C\" || $deps.menuType === \"F\"}}"
},
// 动作响应，支持 JS 语句
"run": "fetchMenuTree($self);"
}
},
// 参数 key
"name": "parentId",
// 组件在编辑器中的 ID（必须唯一）
"x-designable-id": "i012z5nbd5z",
// 组件在表单中的顺序（必须唯一）
"x-index": 0,
// 是否在 table 中展示，目前需要手动添加配置
"inTable": false
}
}
}
}