****# Antd-Form-Document

基于ant-design cn 表单设计

• 一、安装
• 二、示例
  • XML Document 格式
• 三、XML 文档说明
  • 表单
    • Form
  • 容器
    • Row
    • Col
    • Divider
    • Steps
      • Step
      • Content
    • Collapse
    • Tabs
    • Card
  • 组件
    • Label
    • Tooltip
    • Text
    • TextArea
    • Number
    • Editor
    • Select
    • Checkbox
    • Radio
    • Switch
    • Duration
    • DatePicker
    • TimePicker
    • RangePicker
    • Rate
    • Upload
    • Photo
    • Audio
    • Video
    • SuperUpload
    • Table
      • Columns
        • Column
    • FormList
      • Columns
        • Column
    • 注：
  • 控件
    • Validates
      • Validate
    • Conditions
      • Condition
    • Collection
    • Compute
    • Options
      • Option
• 四、应用
  • FormDocument标签
  • Config配置
  • 自定义组件
    • Department
    • UploadList
    • Sign

一、安装

yarn add antd-form-document

npm install antd-form-document --save

二、示例

import FormDocument from 'antd-form-document';

const App = () => (
  <FormDocument document={documentString} />
);

const App = () => {
  const [form] = Form.useForm();
  return <FormDocument 
    id={121} 
    form={form} 
    document={documentString} 
    collapse={true}
    preview={true}
    tooltip={false}
    readonly={["name"]}} 
    initialValues={{name: "张三", xb: 'M', gender: "F", nationality:"778"}}
  />
}

XML Document 格式

<?xml version="1.0" encoding="UTF-8"?>
<Form labelCol="8" wrapperCol="16" style="text-align: left; color: blue;" showTitle="true">
  <Row>
    <Col span="4"/>
    <Col span="12">
      <Steps direction="horizontal">
        <Step title="基本信息" />
        <Step title="扩展信息" />
        <Step title="文件信息" />
      </Steps>
    </Col>
  </Row>
  <Content stepIndex="0">
    <Divider orientation="left">基本信息填写</Divider>
    <Row>
      <Col span="12">
        <Text code="code" title="编码">
          <Compute>
            <![CDATA[
              return code ? 't_' + code: undefined;
            ]]>
          </Compute>
        </Text>
      </Col>
      <Col span="12">
        <Text code="name" title="姓名" placeholder="请输入姓名">
          <Validates>
            <Validate required="true" message="此项为必填项" />
          </Validates>
        </Text>
      </Col>
      <Col span="12">
        <DatePicker code="birthday" title="出生日期" defaultValue="2000-10-01" placeholder="请输入出生日期">
          <Validates>
            <Validate required="true" message="此项为必填项" />
          </Validates>
        </DatePicker>
      </Col>
      <Col span="12">
        <Radio code="gender" title="性别" defaultValue="M" placeholder="请选择" >
          <Validates>
            <Validate required="true" message="此项为必填项" />
          </Validates>
          <Options>
            <Option value="M">男</Option>
            <Option value="F">女</Option>
          </Options>
        </Radio>
      </Col>
      <Col span="12">
        <Select code="nationality" title="民族" placeholder="请输入民族" remote="/design/dict/775">
          <Validates>
            <Validate required="true" message="此项为必填项" />
          </Validates>
          <Collection>
              <![CDATA[ 
                if (gender == 'M') {
                  return ['776', '777'];
                } else if (gender == 'F') {
                  return ['778', '779'];
                }
                return ['776', '778'];
              ]]>
          </Collection>
        </Select>
      </Col>
    </Row>
  </Content>
  <Content stepIndex="1">
    <Divider orientation="left">扩展信息填写</Divider>
    <Row>
      <Col span="12">
        <Text code="job" title="工作" placeholder="请输入工作">
          <Validates>
            <Validate required="true" message="此项为必填项" />
          </Validates>
        </Text>
      </Col>
      <Col span="12">
        <Text code="telephone" title="办公电话" placeholder="请输入办公电话" readonly="true">
          <Validates>
            <Validate required="true" message="此项为必填项" />
          </Validates>
        </Text>
      </Col>
      <Col span="12">
        <Text code="mobile" title="手机" placeholder="请输入手机号码" hidden="true">
          <Validates>
            <Validate required="true" message="此项为必填项"/>
            <Validate type="phone"  message="请填写正确的手机号码"/>
          </Validates>
        </Text>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <TextArea code="remark" title="备注" labelCol="4" wrapperCol="20" maxLength="100" placeholder="请输入备注" tips="按照要求填写备注！">  
        </TextArea>
      </Col>
      <Col span="24">
        <Table code="group" title="组员" labelCol="4" wrapperCol="20">
          <Columns>
            <Column title="序号" dataIndex="index" />
            <Column title="类型" dataIndex="item1" placeholder="请输入类型" />
            <Column title="姓名" dataIndex="item2" placeholder="请输入姓名" />
          </Columns>
        </Table>
      </Col>
    </Row>
  </Content>
  <Content stepIndex="2">
    <Divider orientation="left">文件信息填写</Divider>
    <Row>
      <Col span="12">
        <Upload code="files" title="文件" maxCount="2" fileSize="2MB" fileType="image/png" fileTypeMessage="上传文件类型，仅支持图片类型！" placeholder="请输入文件" tips="按照要求填写文件！">  
          <Validates>
            <Validate required="true" message="至少上次一份文件！"/>
          </Validates>
        </Upload>
      </Col>
      <Col span="12">
        <Upload code="video" title="视频" maxCount="1" fileSize="1GB" fileType="video/mp4" fileTypeMessage="上传文件类型，仅支持视频类型！" placeholder="请输入视频" tips="按照要求填写视频！">  
        </Upload>
      </Col>
      <Col span="24">
        <Editor code="words" title="文本说明" labelCol="4" wrapperCol="20" placeholder="请输入文本说明">  
        </Editor>
      </Col>
    </Row>
  </Content>
</Form> 

三、XML 文档说明

通过把xml字符串文档，传入Design标签中，生成对应的antd组件及布局。并通过ref属性获得，form表单所录入内容。

表单

Form

表单

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ---------- | -------------------------------- | ------- | ------ | ------ | | style | css表单样式 | string | - | | | showTitle | 是否显示控件的标题title | boolean | true | - | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | labelCol | 全局title 标签布局 | number | - | | | wrapperCol | 全局控件布局，同labelCol对应使用 | number | - | |

例

<Form labelCol="8" wrapperCol="16" style="text-align: left; color: blue;" showTitle="true">
    XXX子控件
</Form>

容器

容器是对页面控件的位置定位布局

Row

行

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------ | -------- | ------ | ------ | ------ | | gutter | 栅格间隔 | number | - | |

Col

列

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ---- | ------------------------------------------- | ------ | ------ | ------ | | span | 栅格占位格数，为 0 时相当于 display: none | number | - | ✓ |

例： Row与Col配合使用，对页面组件进行栅格化处理

<Row gutter="8">
  <Col span="24">col-24</Col>
</Row>
<Row gutter="10">
  <Col span="12">col-12</Col>
  <Col span="12">col-12</Col>
</Row>
<Row gutter="12">
  <Col span="8">col-8</Col>
  <Col span="8">col-8</Col>
  <Col span="8">col-8</Col>
</Row>
<Row gutter="14">
  <Col span="6">col-6</Col>
  <Col span="6">col-6</Col>
  <Col span="6">col-6</Col>
  <Col span="6">col-6</Col>
</Row>

Divider

分割线

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ----------- | ---------------- | ----------------------------- | ------ | ------ | | dashed | 是否虚线 | boolean | false | - | | orientation | 分割线标题的位置 | left 丨 right 丨 center | center | |

例： 对不同章节的文本段落进行分割

<Divider orientation="left">基本信息填写</Divider>

Steps

步骤条

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------- | ------------------------------------------------------------ | -------------------------- | ------------ | ------ | | direction | 指定步骤条方向。水平（horizontal）和竖直（vertical）方向 | horizontal 丨 vertical | horizontal | - |

Step

步骤条内的每一个步骤

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ----------- | -------------- | ------ | ------ | ------ | | title | 标题 | string | - | ✓ | | description | 步骤的详情描述 | string | - | |

Content

步骤条内容

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------- | -------------- | ------ | ------ | ------ | | style | css样式 | string | - | | | stepIndex | 步骤条位置下标 | number | - | ✓ |

例： 引导用户按照流程完成任务的导航条，切换步骤时，按Content 位置下标 stepIndex开始。stepIndex从0开始

<Steps direction="horizontal">
  <Step title="基本信息"/>
  <Step title="扩展信息"/>
  <Step title="文件信息"/>
</Steps>
<Content stepIndex="0">XXX</Content>
<Content stepIndex="1">XXX</Content>
<Content stepIndex="2">XXX</Content>

Collapse

折叠

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | -------------------- | ------- | ------ | ------ | | style | css样式 | string | - | | | defaultExpanded | 默认是否展开 | boolean | true | - | | on | 展开名称；如：展开 | string | - | ✓ | | off | 合上名称；如：收起 | string | - | ✓ |

例：

<Collapse defaultExpanded="true" on="展开" off="收起">
  XXX
</Collapse>

• 注意：该控件为默认不生效，使用时需在 Design标签中，明确设置collapse={true}

Tabs

标签页 — 暂缺

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

Card

卡片 — 暂缺

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

组件

功能组件

Label

标签

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------ | -------- | ------- | ------ | ------ | | title | 标题 | string | - | ✓ | | hidden | 是否隐藏 | boolean | false | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Label title="标题信息" />

• 注意：该组件不包含任何子标签控件

Tooltip

提示框

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ---------------- | -------- | ------- | ------ | ------ | | title / children | 标题 | string | - | ✓ | | hidden | 是否隐藏 | boolean | false | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例1：

<Tooltip>提示信息</Tooltip>

例2：

<Tooltip title="提示信息">
  XXX控件
</Tooltip>

Text

文本

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------------------------------------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | type | 类型标记，不做验证 | text 丨 url 丨 email 丨 phone | text | | | maxLength | 最大输入字符长度 | number | - | | | placeholder | 输入框提示信息 | string | - | | | defaultValue | 默认输入框内容 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | allowClear | 是否有清除按钮 | boolean | false | - | | showCount | 是否展示输入字数 | boolean | false | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | | 例：

<Text code="code" title="编码" labelCol="8" wrapperCol="16">
    XXX子控件
</Text>

TextArea

文本域

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | maxLength | 最大输入字符长度 | number | - | | | placeholder | 文本域提示信息 | string | - | | | defaultValue | 默认文本域内容 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | allowClear | 是否有清除按钮 | boolean | false | - | | showCount | 是否展示输入字数 | boolean | false | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<TextArea code="remark" title="备注" labelCol="4" wrapperCol="20" maxLength="100" placeholder="请输入备注" tips="按照要求填写备注！"> 
    XXX子控件
</TextArea>

Number

数值框

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | -------------------------------------- | ----------------------------------------------- | -------- | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | type | 数值框类型，数字、小数、货币、百分比 | number 丨 digits 丨 money 丨 percentage | number | - | | precision | 数值精度，当type等于 digits时有效 | number | 2 | | | max | 最大值 | number | - | | | min | 最小值 | number | - | | | defaultValue | 默认数值框内容 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Number code="num" title="数量" min="0" max="100" placeholder="请输入数量">
    XXX子控件
</Number>

Editor

富文本

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | | | placeholder | 富文本提示信息 | string | - | | | defaultValue | 默认富文本内容 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Editor code="words" placeholder="请输入文本">
    XXX子控件
</Editor>

Select

选择框

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | -------------------------------------------------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | multiple | 选择框是否可以多选 | boolean | false | | | placeholder | 选择框提示信息 | string | - | | | defaultValue | 默认选择框value | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | remote | 远程请求数据项url地址，优先级低于<Options>,响应数据以List内容为结果 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | allowClear | 是否有清除按钮 | boolean | true | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例1：

<Select code="type" title="类型" remote="/api/getType" placeholder="请选择作品类型" tips="按照要求填写类型！">
    XXX子控件
</Select>

例2：

<Select code="type" title="类型" multiple="true" defaultValue="1" placeholder="请选择作品类型" tips="按照要求填写类型！">
    <Options>
        <Option value="1">类型一</Option>
        <Option value="2">类型二</Option>
    </Options>
    XXX子控件
</Select>

Checkbox

复选框

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | -------------------------------------------------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | defaultValue | 默认复选框value | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | remote | 远程请求数据项url地址，优先级低于<Options>,响应数据以List内容为结果 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例1：

<Checkbox code="type" title="类型" remote="/api/getType" placeholder="请选择作品类型" tips="按照要求填写类型！">
    XXX子控件
</Checkbox>

例2：

<Checkbox code="type" title="类型" defaultValue="1" placeholder="请选择作品类型" tips="按照要求填写类型！">
    <Options>
        <Option value="1">类型一</Option>
        <Option value="2">类型二</Option>
    </Options>
    XXX子控件
</Checkbox>

Radio

单选框

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | -------------------------------------------------------------------------- | --------------------- | --------- | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | defaultValue | 默认单选框value | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | remote | 远程请求数据项url地址，优先级低于<Options>,响应数据以List内容为结果 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | optionType | 按钮风格:默认风格、按钮风格 | default 丨 button | default | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例1：

<Radio code="gender" title="性别" remote="/api/getGender" defaultValue="M" placeholder="请选择性别">
    XXX子控件
</Radio>

例2：

<Radio code="gender" title="性别" defaultValue="M" placeholder="请选择性别">
    <Options>
        <Option value="M">男</Option>
        <Option value="F">女</Option>
    </Options>
    XXX子控件
</Radio>

Switch

开关

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | defaultValue | 默认开关value | boolean | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Switch code="on" title="是否允许">	
    XXX子控件
</Switch>

Duration

时长

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------- | --------- | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | defaultValue | 默认时长value | string | 000:00:00 | - | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Duration code="duration" title="时长">	
    XXX子控件
</Duration>

DatePicker

日期选择器

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ------------------------------------------------------------------------ | -------------------------------------------------- | ---------- | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | type | 日期选择框类型，日期、星期、月份、季度、年份 | date 丨 week 丨 month 丨 quarter 丨 year | date | - | | format | 日期显示格式，moment格式 | string | YYYY-MM-DD | - | | showTime | 显示时间选择功能 | boolean | false | - | | placeholder | 日期选择框提示信息 | string | - | | | defaultValue | 默认日期选择框value,格式YYYY-MM-DD | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | allowClear | 是否有清除按钮 | boolean | true | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<DatePicker code="date" title="日期" defaultValue="2000-01-01" placeholder="请输入日期">	
    XXX子控件
</DatePicker>

TimePicker

时间选择器

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ------------------------------------------------------------------------ | ------- | -------- | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | format | 时间显示格式，moment格式 | string | HH:mm:ss | - | | placeholder | 时间选择框提示信息 | string | - | | | defaultValue | 默认时间选择器value,格式HH:mm:ss | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | allowClear | 是否有清除按钮 | boolean | true | - | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<TimePicker code="time" title="时间" placeholder="请输入时间">	
    XXX子控件
</TimePicker>

RangePicker

时间范围选择器 — 暂缺

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

Rate

评分

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | count | star 总数 | number | 5 | | | allowHalf | 是否允许半选 | boolean | false | | | defaultValue | 默认开关value | boolean | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Rate code="mark" title="评分" count="true">	
    XXX子控件
</Rate>

Upload

上传

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | action | 暂缺 | string | - | ✓ | | multiple | 暂缺 | boolean | false | - | | maxCount | 最大上传文件个数 | number | - | ✓ | | fileSize | 单个文件最大字节；1B、1KB、1MB、1GB、1TB、1PB | string | - | | | fileType | 上传文件类型；mime-type 或文件扩展名 需预先配置 | string | - | | | fileTypeMessage | 上传文件类型提示说明 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Upload code="files" title="文件" maxCount="2" fileSize="2MB" fileType="image/png" fileTypeMessage="上传文件类型，仅支持图片类型！" tips="按照要求上传文件！">
    XXX子控件
</Upload>

Photo

上传图片

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | maxCount | 最大上传文件个数 | number | - | ✓ | | fileSize | 单个文件最大字节；1B、1KB、1MB、1GB、1TB、1PB | string | - | | | fileWidth | 文件宽度比 | number | 100 | | | fileHeight | 文件高度比 | number | 100 | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Photo code="files" title="图片" maxCount="2" fileSize="2MB" fileWidth="390" fileHeight="567" tips="按照要求上传图片！">
    XXX子控件
</Photo>

Audio

上传

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | maxCount | 最大上传文件个数 | number | - | ✓ | | fileSize | 单个文件最大字节；1B、1KB、1MB、1GB、1TB、1PB | string | - | | | fileWidth | 文件宽度比 | number | 100 | | | fileHeight | 文件高度比 | number | 100 | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | autoplay | 是否自动播放 | booolean | false | | | muted | 是否静音 | booolean | false | | | loop | 是否循环播放 | booolean | false | | | preload | 预加载方式 | string | auto丨metadata丨none | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Audio code="mp3" title="音频" maxCount="2" fileSize="20MB" fileWidth="390" fileHeight="567" tips="按照要求上传音频！" preload="metadata">
    XXX子控件
</Audio>

Video

上传视频

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | maxCount | 最大上传文件个数 | number | - | ✓ | | fileSize | 单个文件最大字节；1B、1KB、1MB、1GB、1TB、1PB | string | - | | | fileWidth | 文件宽度比 | number | 100 | | | fileHeight | 文件高度比 | number | 100 | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | controls | 是否显示播放控件 | booolean | true | | | autoplay | 是否自动播放 | booolean | false | | | muted | 是否静音 | booolean | false | | | loop | 是否循环播放 | booolean | false | | | preload | 预加载方式 | string | auto丨metadata丨none | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Video code="mp4" title="视频" maxCount="2" fileSize="200MB" fileWidth="390" fileHeight="567" tips="按照要求上传视频！" controls="true">
    XXX子控件
</Video>

SuperUpload

分片上传

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | action | 暂缺 | string | - | ✓ | | multiple | 暂缺 | boolean | false | - | | maxCount | 最大上传文件个数 | number | - | ✓ | | fileSize | 单个文件最大字节；1B、1KB、1MB、1GB、1TB、1PB | string | - | | | fileType | 上传文件类型；mime-type 或文件扩展名 需预先配置 | string | - | | | fileTypeMessage | 上传文件类型提示说明 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<SuperUpload code="bigfiles" title="大文件" maxCount="2" fileSize="2MB" fileType="image/png" fileTypeMessage="上传文件类型，仅支持图片类型！" tips="按照要求上传文件！">
    XXX子控件
</SuperUpload>

Table

表格

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ----------- | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

Columns

表格列集合

Column

表格列内容

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ----------- | ------------------------------- | ------ | ------ | ------ | | title | 表列标题 | string | - | ✓ | | type | 暂缺 | string | text | - | | dataIndex | 数据索引 index、item1~item2 | string | - | ✓ | | placeholder | 表列提示信息 | string | - | |

例：

<Table code="group" title="组员">
  <Columns>
    <Column title="序号" dataIndex="index" />
    <Column title="类型" dataIndex="item1" placeholder="请输入类型" />
    <Column title="姓名" dataIndex="item2" placeholder="请输入姓名"> XXX子控件 </Column>
  </Columns>
  XXX子控件
</Table>

FormList

表格

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ----------- | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | witdh | 模态框宽度 | number | 740 | - | | formId | 模板id标识,配合config.form使用 | string | - | ✓ | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hideClear | 是否在控件隐藏时清除数据 | boolean | false | - | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

Columns

表格列集合

Column

表格列内容

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ----------- | ------------------------------- | ------ | ------ | ------ | | title | 表列标题 | string | undefined | | | dataIndex | 数据编号 index、from表单对应code | string | - | ✓ |

例：

<FormList code="author" title="作者信息" witdh="740" formId="12123">
  <Columns>
    <Column title="序号" dataIndex="index" />
    <Column title="类型" dataIndex="title" />
    <Column title="姓名" dataIndex="name" />
  </Columns>
  XXX子控件
</FormList>

注：

• defaultHide：通过脚本条件显示或隐藏。并且在隐藏状态下，form不会获得值信息。
• hidden：不能通过脚本控制显示或隐藏，只能通过传参方式控制显示或隐藏。form可以获得值信息。

控件

应用程序

Validates

验证集合

Validate

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------ | ------ | | type | 验证类型 | string 丨 number 丨 integer 丨 float 丨 boolean 丨 url 丨 email 丨 phone 丨 date 丨 regexp | string | - | | required | 是否为必选字段 | boolean | - | | | minlength | type：string 类型为字符串最小长度 | number | - | | | maxlength | type：string 类型为字符串最大长度 | number | - | | | min | type：number 类型时为最小值；array 类型时为数组最小长度 | number | - | | | max | type：number 类型时为最大值；array 类型时为数组最大长度 | number | - | | | pattern | type：regexp 类型时，使用正则表达式匹配 | RegExp | - | | | message | 触发验证提示信息 | string | - | ✓ |

例：

<Validates>
    <Validate required="true" message="此项为必填项"/>
    <Validate minlength="3" maxlength="50" message="输入字符长度要在3与50之间！"/>
    <Validate type="phone" message="请填写正确的手机号码"/>
</Validates>

Conditions

条件集合

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------ | ------------------------ | ---------------- | ------ | ------ | | action | 执行动作，显示、隐藏 | show 丨 hide | - | ✓ | | type | 条件类型：并、或 | and 丨 or | - | ✓ |

Condition

条件

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ---- | ---------- | ------ | ------ | ------ | | test | 判断表达式 | string | - | ✓ |

例：

<Conditions action="hide" type="and">
  <Condition test="gender==='F'" />
  <Condition test="nationality==='777'" />
</Conditions>

Collection

集合：通过条件过滤组件中选项

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

例：

<Collection>
  <![CDATA[ 
    if (gender == 'M') {
      return ['776', '777'];
    } else if (gender == 'F') {
      return ['778', '779'];
    }
    return ['776', '778'];
  ]]>
</Collection>

注： 仅Select、Checkbox、Radio组件支持该子控件

Compute

计算：结果赋值个value

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

例1：

<Compute>
  <![CDATA[
    return code ? 't_' + code : undefined;
  ]]>
</Compute>

例2：

<Compute>
  <![CDATA[ 
    return startDate ? moment().diff(moment(endDate),'years') : undefined; 
  ]]>
</Compute>

注： 支持moment使用

Options

选项集合

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

Option

选项内容

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | -------- | -------- | ------ | ------ | ------ | | value | 选项值 | string | - | ✓ | | children | 选项标题 | string | - | ✓ |

例：

<Options>
  <Option value="M">男</Option>
  <Option value="F">女</Option>
</Options>

注： 仅Select、Checkbox、Radio组件支持该子控件

四、应用

FormDocument标签

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------ | ------ | | document | xml document 由容器、组件、控件组成 | string | - | ✓ | | form | form 控制实例，不提供时会自动创建 | React.RefObject | - | | | preview | 是否启用预览模式 | boolean | false | - | | tooltip | 是否显示提示框内容 | boolean | true | - | | collapse | 是否显示启用展示标签<Collapse> | boolean | false | - | | readonly | boolean：是否开启只读模式；array：开启只读模式，并以数组方式，指定需要只读字段；object：开启只读模式，并以对象方式，指定需要只读字段； | boolean丨array丨object | false | - | | hidden | boolean：是否开启隐藏模式；array：开启隐藏模式，并以数组方式，指定需要隐藏字段；object：开启隐藏模式，并以对象方式，指定需要隐藏字段； | boolean丨array丨object | false | - | | params | 附加fetch请求的参数 | object | - | | | 自定义 | 自定义标签属性及参数，可通过context方式获取 | any | - | |

例：

<FormDocument
  id={1}
  form={form} 
  document={documentString} 
  collapse={true}
  preview={true}
  tooltip={false}
  readonly={['gender', 'code']} 
  initialValues={{name: "张三", gender: 'M'}}
/>

Config配置

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ---------- | ---------- | ------ | ------ | ------ | | components | 自定义组件 | object | - | | | previewComponents | 预览组件 | { PreviewText文本预览、PreviewDuration时长预览、PreviewSwitch切换预览、PreviewList列表预览、PreviewImage图片预览、PreviewFile文件预览 } | - | | | request | 请求参数 | object | - | | | file | 文件参数 | object | - | | | chunk | 大文件上传参数 | object | - | | | form | 表单参数 | object | - | |

例：

export default defineConfig({
  // 注册自定义组件
  components: {
    Department,
    UploadList
  },
  previewComponents: {
    PreviewFile
  },
  mimeType: {
    ".doc": "application/msword",
    ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    ".xls": "application/vnd.ms-excel",
    ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    ".ppt": "application/vnd.ms-powerpoint",
    ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
    ".pdf": "application/pdf",
    ".txt": "text/plain",
    ".mp3": "audio/mpeg",
    ".wma": "audio/x-ms-wma",
    ".wav": "audio/wav",
    ".mp4": "video/mp4",
    ".m4v": "video/x-m4v",
    ".wmv": "video/x-ms-wmv",
    ".avi": "video/x-msvideo",
    ".mov": "video/quicktime",
    ".mkv": "video/x-matroska",
    ".png": "image/png",
    ".jpeg": "image/jpeg",
    ".jpg": "image/jpeg",
    ".zip": "application/x-zip-compressed",
    ".rar": "application/octet-stream",
    ".tar": "application/x-tar",
    ".gz": "application/x-gzip",
  },
  request: {
    prefix: "api",
  },
  file: {
    listUrl: "'/api/fileList'",
    downloadUrl: "/api/fileDownload",
    uploadUrl: "/api/file/upload"
  },
  chunk: {
    checkFile: "/api/checkFile",
    checkChunk: "/api/checkChunk",
    chunkUpload: "/api/chunkUpload",
    doMerge: "/api/doMerge",
    mergeProgress: "/api/mergeProgress",
    onComplete: "/api/onComplete",
    completeProgress: "/api/completeProgress"
  }
  form: {
	  documentUrl: "/form/:formId"
  }
});

自定义组件

Department

部门

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | ------------ | ---------------------------------- | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | placeholder | 选择框提示信息 | string | - | | | defaultValue | 默认选择框value | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - | |

例：

<Department code="department" title="部门" placeholder="请选择部门" remote="/api/getDepartment">
    <Validates>
        <Validate required="true" message="此项为必填项" />
    </Validates>
</Department>

UploadList

上传列表

| 参数 | 说明 | 类型 | 默认值 | 必填项 | | --------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------ | ------ | | code | 字段编号全局唯一 | string | - | ✓ | | title | 字段标题 | string | - | ✓ | | maxCount | 最大上传文件个数 | number | - | ✓ | | fileSize | 单个文件最大字节；1B、1KB、1MB、1GB、1TB、1PB | string | - | | | fileType | 上传文件类型；mime-type | string | - | | | fileTypeMessage | 上传文件类型提示说明 | string | - | | | defaultHide | 默认是否隐藏 | boolean | false | - | | tips | 字段提示 | string | - | | | hidden | 是否隐藏 | boolean | false | - | | readonly | 是否只读 | boolean | false | - | | labelCol | title布局，与同 <Col> 组件设置 | number | - | | | wrapperCol | 组件布局，同 <Col> 组件设置 | number | - | | | style | 组件样式 | string | - | | | labelStyle | 标签样式 | string | - | | | itemStyle | 表单样式 | string | - |