@digitalzz/x-render

x-render components for digitalcnzz

Usage no npm install needed!

<script type="module">
  import digitalzzXRender from 'https://cdn.skypack.dev/@digitalzz/x-render';
</script>

README

@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;
  }}
/>