@hzab/form-render

@hzab/form-render

formily schema 表单渲染组件

组件

Tips

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

示例

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

// testSchema 为 formily 生成的 schema json
<FormRender schema={testSchema} />;

组件远程数据

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

// 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
  <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 配置对应的组件名称

// 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
  <FormRender
    schema={testSchema}
    components={{
      // 自定义组件
      IconSelect() {
        return "IconSelect";
      },
    }}
  />

API

InfoPanel Attributes

参数	类型	必填	默认值	说明
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

方法 Methods

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

Schema

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

{
  "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 组件源码
• lib 组件打包编译后的代码

命令

• 本地运行：npm run dev
• 测试环境打包编译：npm run build-flow-dev
• 生产环境打包编译：npm run build

发布

• 在 config/webpack.config/webpack.config.prod.js 中按需修改 entry 配置的文件名
• 编译组件：npm run build
• 命令：npm publish --access public
• 发布目录：
  • lib
  • src

配置

配置文件

• 本地配置文件：config/global-config/config.local.js
• 测试环境配置文件：config/global-config/config.flowDev.js
• 生产环境配置文件：config/global-config/config.production.js

webpack 配置文件

• config/webpack.config.js