antd-form-document 0.1.0

package/README.md

@@ -0,0 +1,1133 @@
+# Antd-Form-Document
+
+基于[ant-design](https://ant.design/) [cn](https://ant-design.gitee.io/) 表单设计
+
+## 一、安装
+
+```shell
+yarn add antd-form-document
+
+npm install antd-form-document --save
+```
+
+## 二、示例
+
+```jsx
+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} 
+    readonly={["name"]}} 
+    initialValues={{name: "张三", xb: 'M', gender: "F", nationality:"778"}}
+  />
+}
+```
+
+### XML Document 格式
+
+```xml
+<?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   | -  |
+| labelCol   | 全局`title` 标签布局 | number  | - |  |
+| wrapperCol | 全局控件布局，同labelCol对应使用 | number  | - |  |
+
+**例**
+
+```xml
+<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配合使用，对页面组件进行栅格化处理
+
+```xml
+<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 |        |
+
+**例：**对不同章节的文本段落进行分割
+
+```xml
+<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开始
+
+```xml
+<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  | -      | ✓      |
+
+**例：**
+
+```xml
+<Collapse defaultExpanded="true" on="展开" off="收起">
+  XXX
+</Collapse>
+```
+
+- 注意：该控件为默认不生效，使用时需在 Design标签中，明确设置`collapse={true}`
+
+
+
+#### **Tabs**
+
+标签页 — 暂缺
+
+| 参数 | 说明 | 类型 | 默认值 | 必填项 |
+| ---- | ---- | ---- | ------ | ------ |
+|      |      |      |        |        |
+|      |      |      |        |        |
+|      |      |      |        |        |
+
+
+
+#### **Card**
+
+卡片 — 暂缺
+
+| 参数 | 说明 | 类型 | 默认值 | 必填项 |
+| ---- | ---- | ---- | ------ | ------ |
+|      |      |      |        |        |
+|      |      |      |        |        |
+|      |      |      |        |        |
+
+
+
+### 组件
+
+功能组件
+
+#### **Label**
+
+标签
+
+| 参数   | 说明     | 类型    | 默认值 | 必填项 |
+| ------ | -------- | ------- | ------ | ------ |
+| style  | css样式  | string  | -      |        |
+| title  | 标题     | string  | -      | ✓      |
+| hidden | 是否隐藏 | boolean | false  | -      |
+
+**例：**
+
+```xml
+<Label title="标题信息" />
+```
+
+- 注意：该组件不包含任何子标签控件
+
+
+
+#### **Tooltip**
+
+提示框
+
+| 参数             | 说明     | 类型    | 默认值 | 必填项 |
+| ---------------- | -------- | ------- | ------ | ------ |
+| style            | css样式  | string  | -      |        |
+| title / children | 标题     | string  | -      | ✓      |
+| hidden           | 是否隐藏 | boolean | false  | -      |
+
+**例1：**
+
+```xml
+<Tooltip>提示信息</Tooltip>
+```
+
+**例2：**
+
+```xml
+<Tooltip title="提示信息">
+  XXX控件
+</Tooltip>
+```
+
+
+
+#### **Text**
+
+文本
+
+| 参数          | 说明                          | 类型                    | 默认值 | 必填项 |
+| ------------- | ----------------------------- | ----------------------- | ------ | ---- |
+| style         | css样式                       | string                  | -      |      |
+| code          | 字段编号全局唯一              | string                  | -      | ✓ |
+| title         | 字段标题                      | string                  | -      | ✓ |
+| type          | 类型标记，不做验证       | `text` 丨 `url` 丨 `email` 丨 `phone` | `text` |      |
+| maxLength     | 最大输入字符长度                | number                  | -      |      |
+| placeholder   | 输入框提示信息                | string                  | -      |      |
+| defaultValue  | 默认输入框内容                | string                  | -      |      |
+| defaultHide   | 默认是否隐藏                  | boolean                 | false  | - |
+| tips          | 字段提示                      | string                  | -      |      |
+| hidden        | 是否隐藏                      | boolean                 | false  | - |
+| readonly      | 是否只读                      | boolean                 | false  | - |
+| labelCol | `title`布局，与同 `<Col>` 组件设置   | number                  | -      |      |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置 | number                  | -      |      |
+| allowClear    | 是否有清除按钮                | boolean                 | false  | - |
+| showCount     | 是否展示输入字数              | boolean                 | false  | - |
+
+**例：**
+
+```xml
+<Text code="code" title="编码" labelSpan="8" wrapperSpan="16">
+    XXX子控件
+</Text>
+```
+
+
+
+#### **TextArea**
+
+文本域
+
+| 参数         | 说明                               | 类型    | 默认值 | 必填项 |
+| ------------ | ---------------------------------- | ------- | ------ | ------ |
+| style        | css样式                            | string  | -      |        |
+| code         | 字段编号全局唯一                   | string  | -      | ✓      |
+| title        | 字段标题                           | string  | -      | ✓      |
+| maxLength    | 最大输入字符长度                   | number  | -      |        |
+| placeholder  | 文本域提示信息                     | string  | -      |        |
+| defaultValue | 默认文本域内容                     | string  | -      |        |
+| defaultHide  | 默认是否隐藏                       | boolean | false  | -      |
+| tips         | 字段提示                           | string  | -      |        |
+| hidden       | 是否隐藏                           | boolean | false  | -      |
+| readonly     | 是否只读                           | boolean | false  | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置 | number  | -      |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置      | number  | -      |        |
+| allowClear   | 是否有清除按钮                     | boolean | false  | -      |
+| showCount    | 是否展示输入字数                   | boolean | false  | -      |
+
+**例：**
+
+```xml
+<TextArea code="remark" title="备注" labelCol="4" wrapperCol="20" maxLength="100" placeholder="请输入备注" tips="按照要求填写备注！"> 
+    XXX子控件
+</TextArea>
+```
+
+
+
+#### **Number**
+
+数值框
+
+| 参数         | 说明                                   | 类型                                            | 默认值   | 必填项 |
+| ------------ | -------------------------------------- | ----------------------------------------------- | -------- | ------ |
+| style        | css样式                                | string                                          | -        |        |
+| 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                                          | -        |        |
+| hidden       | 是否隐藏                               | boolean                                         | false    | -      |
+| readonly     | 是否只读                               | boolean                                         | false    | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置     | number                                          | -        |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置          | number                                          | -        |        |
+
+**例：**
+
+```xml
+<Number code="num" title="数量" min="0" max="100" placeholder="请输入数量">
+    XXX子控件
+</Number>
+```
+
+
+
+#### **Editor**
+
+富文本
+
+| 参数         | 说明                               | 类型    | 默认值 | 必填项 |
+| ------------ | ---------------------------------- | ------- | ------ | ------ |
+| style        | css样式                            | string  | -      |        |
+| code         | 字段编号全局唯一                   | string  | -      | ✓      |
+| title        | 字段标题                           | string  | -      |        |
+| placeholder  | 富文本提示信息                     | string  | -      |        |
+| defaultValue | 默认富文本内容                     | string  | -      |        |
+| defaultHide  | 默认是否隐藏                       | boolean | false  | -      |
+| tips         | 字段提示                           | string  | -      |        |
+| hidden       | 是否隐藏                           | boolean | false  | -      |
+| readonly     | 是否只读                           | boolean | false  | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置 | number  | -      |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置      | number  | -      |        |
+
+**例：**
+
+```xml
+<Editor code="words" placeholder="请输入文本">
+    XXX子控件
+</Editor>
+```
+
+
+
+#### **Select**
+
+选择框
+
+| 参数         | 说明                                                         | 类型    | 默认值 | 必填项 |
+| ------------ | ------------------------------------------------------------ | ------- | ------ | ------ |
+| style        | css样式                                                      | string  | -      |        |
+| code         | 字段编号全局唯一                                             | string  | -      | ✓      |
+| title        | 字段标题                                                     | string  | -      | ✓      |
+| multiple     | 选择框是否可以多选                                           | boolean | false  |        |
+| placeholder  | 选择框提示信息                                               | string  | -      |        |
+| defaultValue | 默认选择框`value`                                            | string  | -      |        |
+| defaultHide  | 默认是否隐藏                                                 | boolean | false  | -      |
+| tips         | 字段提示                                                     | string  | -      |        |
+| remote       | 远程请求数据项url地址，优先级低于`<Options>`,响应数据以List<Map>内容为结果 | string  | -      |        |
+| hidden       | 是否隐藏                                                     | boolean | false  | -      |
+| readonly     | 是否只读                                                     | boolean | false  | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置                           | number  | -      |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置                                | number  | -      |        |
+| allowClear   | 是否有清除按钮                                               | boolean | true   | -      |
+
+**例1：**
+
+```xml
+<Select code="type" title="类型" remote="/api/getType" placeholder="请选择作品类型" tips="按照要求填写类型！">
+    XXX子控件
+</Select>
+```
+
+**例2：**
+
+```xml
+<Select code="type" title="类型" multiple="true" defaultValue="1" placeholder="请选择作品类型" tips="按照要求填写类型！">
+    <Options>
+        <Option value="1">类型一</Option>
+        <Option value="2">类型二</Option>
+    </Options>
+    XXX子控件
+</Select>
+```
+
+
+
+#### **Checkbox**
+
+复选框
+
+| 参数         | 说明                                                         | 类型    | 默认值 | 必填项 |
+| ------------ | ------------------------------------------------------------ | ------- | ------ | ------ |
+| style        | css样式                                                      | string  | -      |        |
+| code         | 字段编号全局唯一                                             | string  | -      | ✓      |
+| title        | 字段标题                                                     | string  | -      | ✓      |
+| defaultValue | 默认复选框`value`                                            | string  | -      |        |
+| defaultHide  | 默认是否隐藏                                                 | boolean | false  | -      |
+| tips         | 字段提示                                                     | string  | -      |        |
+| remote       | 远程请求数据项url地址，优先级低于`<Options>`,响应数据以List<Map>内容为结果 | string  | -      |        |
+| hidden       | 是否隐藏                                                     | boolean | false  | -      |
+| readonly     | 是否只读                                                     | boolean | false  | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置                           | number  | -      |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置                                | number  | -      |        |
+
+**例1：**
+
+```xml
+<Checkbox code="type" title="类型" remote="/api/getType" placeholder="请选择作品类型" tips="按照要求填写类型！">
+    XXX子控件
+</Checkbox>
+```
+
+**例2：**
+
+```xml
+<Checkbox code="type" title="类型" defaultValue="1" placeholder="请选择作品类型" tips="按照要求填写类型！">
+    <Options>
+        <Option value="1">类型一</Option>
+        <Option value="2">类型二</Option>
+    </Options>
+    XXX子控件
+</Checkbox>
+```
+
+
+
+#### **Radio**
+
+单选框
+
+| 参数         | 说明                                                         | 类型                 | 默认值  | 必填项 |
+| ------------ | ------------------------------------------------------------ | -------------------- | ------- | ------ |
+| style        | css样式                                                      | string               | -       |        |
+| code         | 字段编号全局唯一                                             | string               | -       | ✓      |
+| title        | 字段标题                                                     | string               | -       | ✓      |
+| defaultValue | 默认单选框`value`                                            | string               | -       |        |
+| defaultHide  | 默认是否隐藏                                                 | boolean              | false   | -      |
+| tips         | 字段提示                                                     | string               | -       |        |
+| remote       | 远程请求数据项url地址，优先级低于`<Options>`,响应数据以List<Map>内容为结果 | string               | -       |        |
+| hidden       | 是否隐藏                                                     | boolean              | false   | -      |
+| readonly     | 是否只读                                                     | boolean              | false   | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置                           | number               | -       |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置                                | number               | -       |        |
+| optionType   | 按钮风格:`默认风格`、`按钮风格`                              | `default` 丨 `button` | `default` |        |
+
+**例1：**
+
+```xml
+<Radio code="gender" title="性别" remote="/api/getGender" defaultValue="M" placeholder="请选择性别">
+    XXX子控件
+</Radio>
+```
+
+**例2：**
+
+```xml
+<Radio code="gender" title="性别" defaultValue="M" placeholder="请选择性别">
+    <Options>
+        <Option value="M">男</Option>
+        <Option value="F">女</Option>
+    </Options>
+    XXX子控件
+</Radio>
+```
+
+
+
+#### **Switch**
+
+开关
+
+| 参数         | 说明                               | 类型    | 默认值 | 必填项 |
+| ------------ | ---------------------------------- | ------- | ------ | ------ |
+| style        | css样式                            | string  | -      |        |
+| code         | 字段编号全局唯一                   | string  | -      | ✓      |
+| title        | 字段标题                           | string  | -      | ✓      |
+| defaultValue | 默认开关`value`                    | boolean | -      |        |
+| defaultHide  | 默认是否隐藏                       | boolean | false  | -      |
+| tips         | 字段提示                           | string  | -      |        |
+| hidden       | 是否隐藏                           | boolean | false  | -      |
+| readonly     | 是否只读                           | boolean | false  | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置 | number  | -      |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置      | number  | -      |        |
+
+**例：**
+
+```xml
+<Switch code="on" title="是否允许">	
+    XXX子控件
+</Switch>
+```
+
+
+
+#### **Duration**
+
+时长
+
+| 参数         | 说明                               | 类型    | 默认值    | 必填项 |
+| ------------ | ---------------------------------- | ------- | --------- | ------ |
+| style        | css样式                            | string  | -         |        |
+| code         | 字段编号全局唯一                   | string  | -         | ✓      |
+| title        | 字段标题                           | string  | -         | ✓      |
+| defaultValue | 默认时长`value`                    | string  | 000:00:00 | -      |
+| defaultHide  | 默认是否隐藏                       | boolean | false     | -      |
+| tips         | 字段提示                           | string  | -         |        |
+| hidden       | 是否隐藏                           | boolean | false     | -      |
+| readonly     | 是否只读                           | boolean | false     | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置 | number  | -         |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置      | number  | -         |        |
+
+**例：**
+
+```xml
+<Duration code="duration" title="时长">	
+    XXX子控件
+</Duration>
+```
+
+
+
+#### **DatePicker**
+
+日期选择器
+
+| 参数         | 说明                                                         | 类型                                               | 默认值     | 必填项 |
+| ------------ | ------------------------------------------------------------ | -------------------------------------------------- | ---------- | ------ |
+| style        | css样式                                                      | string                                             | -          |        |
+| code         | 字段编号全局唯一                                             | string                                             | -          | ✓      |
+| title        | 字段标题                                                     | string                                             | -          | ✓      |
+| type         | 日期选择框类型，`日期`、`星期`、`月份`、`季度`、`年份`       | `date` 丨 `week` 丨 `month` 丨 `quarter` 丨 `year` | `date`     | -      |
+| format       | 日期显示格式，[moment](http://momentjs.cn/docs/#/displaying/format/)格式 | string                                             | YYYY-MM-DD | -      |
+| showTime     | 显示时间选择功能                                             | boolean                                            | false      | -      |
+| placeholder  | 日期选择框提示信息                                           | string                                             | -          |        |
+| defaultValue | 默认日期选择框`value`,格式`YYYY-MM-DD`                       | string                                             | -          |        |
+| defaultHide  | 默认是否隐藏                                                 | boolean                                            | false      | -      |
+| tips         | 字段提示                                                     | string                                             | -          |        |
+| hidden       | 是否隐藏                                                     | boolean                                            | false      | -      |
+| readonly     | 是否只读                                                     | boolean                                            | false      | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置                           | number                                             | -          |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置                                | number                                             | -          |        |
+| allowClear   | 是否有清除按钮                                               | boolean                                            | true       | -      |
+
+**例：**
+
+```xml
+<DatePicker code="date" title="日期" defaultValue="2000-01-01" placeholder="请输入日期">	
+    XXX子控件
+</DatePicker>
+```
+
+
+
+#### **TimePicker**
+
+时间选择器
+
+| 参数         | 说明                                                         | 类型    | 默认值   | 必填项 |
+| ------------ | ------------------------------------------------------------ | ------- | -------- | ------ |
+| style        | css样式                                                      | string  | -        |        |
+| code         | 字段编号全局唯一                                             | string  | -        | ✓      |
+| title        | 字段标题                                                     | string  | -        | ✓      |
+| format       | 时间显示格式，[moment](http://momentjs.cn/docs/#/displaying/format/)格式 | string  | HH:mm:ss | -      |
+| placeholder  | 时间选择框提示信息                                           | string  | -        |        |
+| defaultValue | 默认时间选择器`value`,格式`HH:mm:ss`                         | string  | -        |        |
+| defaultHide  | 默认是否隐藏                                                 | boolean | false    | -      |
+| tips         | 字段提示                                                     | string  | -        |        |
+| hidden       | 是否隐藏                                                     | boolean | false    | -      |
+| readonly     | 是否只读                                                     | boolean | false    | -      |
+| labelCol     | `title`布局，与同 `<Col>` 组件设置                           | number  | -        |        |
+| wrapperCol   | 组件布局，同 `<Col>` 组件设置                                | number  | -        |        |
+| allowClear   | 是否有清除按钮                                               | boolean | true     | -      |
+
+**例：**
+
+```xml
+<TimePicker code="time" title="时间" placeholder="请输入时间">	
+    XXX子控件
+</TimePicker>
+```
+
+
+
+#### RangePicker
+
+时间范围选择器 — 暂缺
+
+| 参数 | 说明 | 类型 | 默认值 | 必填项 |
+| ---- | ---- | ---- | ------ | ------ |
+|      |      |      |        |        |
+|      |      |      |        |        |
+|      |      |      |        |        |
+
+
+
+#### **Upload**
+
+上传
+
+| 参数            | 说明                                                         | 类型    | 默认值 | 必填项 |
+| --------------- | ------------------------------------------------------------ | ------- | ------ | ------ |
+| style           | css样式                                                      | string  | -      |        |
+| code            | 字段编号全局唯一                                             | string  | -      | ✓      |
+| title           | 字段标题                                                     | string  | -      | ✓      |
+| action          | 暂缺                                                         | string  | -      | ✓      |
+| multiple        | 暂缺                                                         | boolean | false  | -      |
+| maxCount        | 最大上传文件个数                                             | number  | -      |        |
+| fileSize        | 单个文件最大字节；`1B`、`1KB`、`1MB`、`1GB`、`1TB`、`1PB`    | string  | -      |        |
+| fileType        | 上传文件类型；[mime-type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string  | -      |        |
+| fileTypeMessage | 上传文件类型提示说明                                         | string  | -      |        |
+| defaultHide     | 默认是否隐藏                                                 | boolean | false  | -      |
+| tips            | 字段提示                                                     | string  | -      |        |
+| hidden          | 是否隐藏                                                     | boolean | false  | -      |
+| readonly        | 是否只读                                                     | boolean | false  | -      |
+| labelCol        | `title`布局，与同 `<Col>` 组件设置                           | number  | -      |        |
+| wrapperCol      | 组件布局，同 `<Col>` 组件设置                                | number  | -      |        |
+
+**例：**
+
+```xml
+<Upload code="files" title="文件" maxCount="2" fileSize="2MB" fileType="image/png" fileTypeMessage="上传文件类型，仅支持图片类型！" tips="按照要求上传文件！">
+    XXX子控件
+</Upload>
+```
+
+
+
+#### **Table**
+
+表格
+
+| 参数        | 说明                               | 类型    | 默认值 | 必填项 |
+| ----------- | ---------------------------------- | ------- | ------ | ------ |
+| style       | css样式                            | string  | -      |        |
+| code        | 字段编号全局唯一                   | string  | -      | ✓      |
+| title       | 字段标题                           | string  | -      | ✓      |
+| defaultHide | 默认是否隐藏                       | boolean | false  | -      |
+| tips        | 字段提示                           | string  | -      |        |
+| hidden      | 是否隐藏                           | boolean | false  | -      |
+| readonly    | 是否只读                           | boolean | false  | -      |
+| labelCol    | `title`布局，与同 `<Col>` 组件设置 | number  | -      |        |
+| wrapperCol  | 组件布局，同 `<Col>` 组件设置      | number  | -      |        |
+
+
+
+#### **Columns**
+
+表格列集合
+
+##### **Column**
+
+表格列内容
+
+| 参数        | 说明                            | 类型   | 默认值 | 必填项 |
+| ----------- | ------------------------------- | ------ | ------ | ------ |
+| title       | 表列标题                        | string | -      | ✓      |
+| type        | 暂缺                            | string | `text` | -      |
+| dataIndex   | 数据索引 `index`、`item1~item2` | string | -      | ✓      |
+| placeholder | 表列提示信息                    | string | -      |        |
+
+**例：**
+
+```xml
+<Table code="group" title="组员">
+  <Columns>
+    <Column title="序号" dataIndex="index" />
+    <Column title="类型" dataIndex="item1" placeholder="请输入类型" />
+    <Column title="姓名" dataIndex="item2" placeholder="请输入姓名"> XXX子控件 </Column>
+  </Columns>
+  XXX子控件
+</Table>
+```
+
+#### 注：
+
+- `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                                                       | -      | ✓      |
+
+**例：**
+
+```xml
+<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 | -      | ✓      |
+
+**例：**
+
+```xml
+<Conditions action="hide" type="and">
+  <Condition test="gender==='F'" />
+  <Condition test="nationality==='777'" />
+</Conditions>
+```
+
+
+
+#### **Collection**
+
+集合：通过条件过滤组件中选项
+
+| 参数 | 说明 | 类型 | 默认值 | 必填项 |
+| ---- | ---- | ---- | ------ | ------ |
+
+**例：**
+
+```xml
+<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：**
+
+```xml
+<Compute>
+  <![CDATA[
+    return code ? 't_' + code : undefined;
+  ]]>
+</Compute>
+```
+
+**例2：**
+
+```xml
+<Compute>
+  <![CDATA[ 
+    return startDate ? moment().diff(moment(endDate),'years') : undefined; 
+  ]]>
+</Compute>
+```
+
+ **注：**支持[moment](http://momentjs.cn)使用
+
+
+
+#### **Options**
+
+选项集合
+
+| 参数 | 说明 | 类型 | 默认值 | 必填项 |
+| ---- | ---- | ---- | ------ | ------ |
+
+##### **Option**
+
+选项内容
+
+| 参数     | 说明     | 类型   | 默认值 | 必填项 |
+| -------- | -------- | ------ | ------ | ------ |
+| value    | 选项值   | string | -      | ✓      |
+| children | 选项标题 | string | -      | ✓      |
+
+**例：**
+
+```xml
+<Options>
+  <Option value="M">男</Option>
+  <Option value="F">女</Option>
+</Options>
+```
+
+**注：**仅`Select`、`Checkbox`、`Radio`组件支持该子控件
+
+
+
+## 四、应用
+
+
+
+### **FormDesign标签**
+
+| 参数     | 说明                                                         | 类型                          | 默认值 | 必填项 |
+| -------- | ------------------------------------------------------------ | ----------------------------- | ------ | ------ |
+| document | xml document 由`容器`、`组件`、`控件`组成                    | string                        | -      | ✓      |
+| form     | form 控制实例，不提供时会自动创建                            | React.RefObject<FormInstance> | -      |        |
+| preview  | 是否启用预览模式                                             | boolean                       | false  | -      |
+| 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                           | -      |        |
+
+**例：**
+
+```xml
+<FormDocument
+  id={1}
+  form={form} 
+  document={documentString} 
+  collapse={true} 
+  readonly={['gender', 'code']} 
+  initialValues={{name: "张三", gender: 'M'}}
+/>
+```
+
+
+
+### Config配置
+
+| 参数       | 说明       | 类型   | 默认值 | 必填项 |
+| ---------- | ---------- | ------ | ------ | ------ |
+| components | 自定义组件 | object | -      |        |
+| request    | 请求参数   | object | -      |        |
+| file       | 文件参数   | object | -      |        |
+
+**例：**
+
+```js
+export default defineConfig({
+  // 注册自定义组件
+  components: {
+    Department,
+    UploadList
+  },
+  request: {
+    prefix: "api",
+  },
+  file: {
+    listUrl: "'/api/fileList'",
+    downloadUrl: "/api/fileDownload",
+    uploadUrl: "/api/file/upload"
+  }
+});
+```
+
+
+
+###  自定义组件
+
+#### Department
+
+部门
+
+| 参数         | 说明                               | 类型    | 默认值 | 必填项 |
+| ------------ | ---------------------------------- | ------- | ------ | ------ |
+| style        | css样式                            | string  | -      |        |
+| 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  | -      |        |
+
+**例：**
+
+```xml
+<Department code="department" title="部门" placeholder="请选择部门" remote="/api/getDepartment">
+    <Validates>
+        <Validate required="true" message="此项为必填项" />
+    </Validates>
+</Department>
+```
+
+
+
+#### UploadList
+
+上传列表
+
+| 参数            | 说明                                                         | 类型    | 默认值 | 必填项 |
+| --------------- | ------------------------------------------------------------ | ------- | ------ | ------ |
+| style           | css样式                                                      | string  | -      |        |
+| code            | 字段编号全局唯一                                             | string  | -      | ✓      |
+| title           | 字段标题                                                     | string  | -      | ✓      |
+| maxCount        | 最大上传文件个数                                             | number  | -      |        |
+| fileSize        | 单个文件最大字节；`1B`、`1KB`、`1MB`、`1GB`、`1TB`、`1PB`    | string  | -      |        |
+| fileType        | 上传文件类型；[mime-type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string  | -      |        |
+| fileTypeMessage | 上传文件类型提示说明                                         | string  | -      |        |
+| defaultHide     | 默认是否隐藏                                                 | boolean | false  | -      |
+| tips            | 字段提示                                                     | string  | -      |        |
+| hidden          | 是否隐藏                                                     | boolean | false  | -      |
+| readonly        | 是否只读                                                     | boolean | false  | -      |
+| labelCol        | `title`布局，与同 `<Col>` 组件设置                           | number  | -      |        |
+| wrapperCol      | 组件布局，同 `<Col>` 组件设置                                | number  | -      |        |
+
+**例：**
+
+```xml
+<UploadList code="uploadList" title="附件" labelSpan="4" wrapperSpan="20" fileType="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf" fileSize="20MB" maxCount="5" fileTypeMessage="上传文件类型，仅支持word、pdf类型！">
+    <Validates>
+        <Validate required="true" message="此项为必填项" />
+    </Validates>
+</UploadList>
+```
+