@digitalzz/x-render
Getting Started
Install dependencies,
npm i @digitalzz/x-render -S
or
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;
}}
/>