@digitalzz/x-render NPM

@digitalzz/x-render

Getting Started

Install dependencies,

npm i @digitalzz/x-render -S

yarn add @digitalzz/x-render

提示: 此套组件主要用于对接表单系统

Usage

import React from 'react';
import { FormRender, Generator, TableRender } from '@digitalzz/x-render/lib';

Example

Generator

Generator Attributes

参数	说明	类型	默认值	必填
creator	创建者	string	-	否
createUrl	创建表单的接口	string	-	否
deployUrl	发布表单的接口	string	-	否
onCancel	点击取消按钮	function	() => viod	否
onCallback	触发 submit 的回调函数	function	-	否
showForm	是否展示下方的 form 表单	boolean	true	否
showOk	是否展示确定按钮	boolean	true	否
showCancel	是否展示取消按钮	boolean	true	否
okText	确认按钮文字	ReactNode	确定	否
cancelText	取消按钮文字	ReactNode	取消	否
settings	配置组件	object[]	默认配置	否
widgets	自定义组件	onject	{}	否
defaultValue	默认的配置	object	{}	否

Generator Methods

方法名	说明	参数	返回值
ok	提交选择的表单到后端的函数，提交之前会进行校验，校验成功之后，如果添加了“create-url，deploy-url”参数且“show-form”为 true 会直接调用创建和发布接口，之后调用 callback 函数，其中的参数为发布后的服务端返回的值，如果上述三项有一项不可用则不调用接口直接执行 callback 函数，其中参数为选择的表单组件的值，其值已处理	-	promise

CODE

<Generator
  defaultValue={defaultValue}
  ref={ref}
  creator="sui"
  createUrl={`${apiPrefix}/form/meta/create`}
  deployUrl={`${apiPrefix}/form/meta/deploy`}
  onCallback={onCallback}
/>

FormRender

FormRender Attributes

参数	说明	类型	默认值	必填
schema	表单配置数据(格式参考 form generator 中的查看 json)	object	-	是
onOk	当触发 form 的 submit 时会先检验 form 的中填写是否合规，检验通过会执行 onOk 函数，入参为填写的值	(object) => any	-	是
showReset	是否展示重置按钮	boolean	true	否
showOk	是否展示提交按钮	boolean	true	否
defaultValue	表单中的默认值	object	{}	否
ref	ref.current 指向 form，可通过 ref.current.submit 或者 showOk=true 时点击‘提交’来触发 submit，其他内置属性和方法，请参考	object	-	否

FormRender Methods

方法名	说明	参数	返回值
ref.current 指向 form	请参考中的 form 方法	-	-

CODE

...
const Example = () => {
  const ref = useRef(null);
  // 触发submit

  ...
    ref.current.submit();
  ...

  return (
    <FormRender
      onOk={onOk}
      ref={ref}
      defaultValue={defaultValue}
      schema={schema}
    />
  );
};

TableRender Attributes

参数	说明	类型	默认值	必填
hidden	是否隐藏搜索栏	boolean	false	否
rowKey	表格行 key	string	id	否
align	设置列的对齐方式	left \| center \| right	center	否
headerTitle	headerTitle	string	-	否
metaGetUrl	根据 id 获取 meta 的接口地址	string	-	是
dataGetUrl	获取 meta 中数据的地址	string	-	是
metaGetMethod	根据 id 获取 meta 的请求方式	get \| post	post	否
actionRender	列表中操作栏的 render 函数	function(text, record, index) {}	-	否
toolbarRender	获取表中数据的接口	string	-	否
headers	获取 meta 中数据的请求头	object	{}	否
handleMetaGetParams	处理请求列表的入参	(result, entityName)=> object	-	否
其他	该组件基于 table-render 封装，且参数实现透传，其他可参考		-	-

TableRender Methods

ref.current 中的方法

方法名	说明	参数	返回值
refresh	刷新列表	-	-
setTable	用于修改全局状态的工具函数，setTable 之于 tableState，等同 setState 之于 state	-	-

CODE

<TableRender
  ref={ref}
  align="center"
  actionRender={(_, record) => {
    return (
      <Space>
        <Popconfirm
          onConfirm={() => deleteItem(record)}
          title="确定要删除吗？"
          okText="是"
          cancelText="否"
        >
          <Button type="primary" danger>
            删除
          </Button>
        </Popconfirm>
        <Button
          type="primary"
          onClick={() => {
            history.push(
              `/components/form-render?formId=${history.location.query.id}&id=${record.id}&type=update`,
            );
          }}
        >
          编辑
        </Button>
      </Space>
    );
  }}
  hidden={false}
  headerTitle={entityName}
  metaGetUrl={`${baseUrl}/form/meta/get/${history.location.query.id}`}
  metaGetMethod="post"
  dataGetUrl={`${baseUrl}/form/data/query`}
  headers={{ token: '123' }}
  handleMetaGetParams={(data, entityName) => {
    setEntityName(entityName);
    return data;
  }}
/>

schema 扩展

{
  "type": "object",
  "properties": {
    "addr": {
      "title": "行政区划",
      "type": "object",
      "canSelect": false,
      "isContainer": true,
      "hideId": true,
      "properties": {
        "quxian": {
          "canSelect": false,
          "title": "区县",
          "type": "string",
          "widget": "MyCheckbox"
        },
        "jiedao": {
          "canSelect": false,
          "title": "街道",
          "type": "string",
          "dependencies": [
            "addr.quxian"
          ],
          "widget": "MyCheckbox"
        },
        "shequ": {
          "canSelect": false,
          "title": "社区",
          "type": "string",
          "widget": "MyCheckbox",
          "dependencies": [
            "addr.jiedao"
          ]
        },
        "san": {
          "canSelect": false,
          "title": "三级网格",
          "type": "string",
          "widget": "MyCheckbox",
          "dependencies": [
            "addr.shequ"
          ]
        }
      }
    }
  },
  "labelWidth": 120,
  "displayType": "row"
}

属性	说名	类型	默认值	版本
hideDelete	是否隐藏删除按钮（）	boolean	false	1.3.0
hideCopy	是否隐藏复制按钮	boolean	false	1.3.0
hideMove	是否隐藏拖动按钮	boolean	false	1.3.0
hideId	是否隐藏 id 展示	boolean	false	1.3.0
canSelect	是否可以选中	boolean	true	1.3.0
isContainer	是否是容器(只在 type 为 object 中生效)，为容器时会将嵌套的字段提出来	boolean	false	1.3.0