Antd-Form-Mobile

基于ant-design cn 表单设计

Antd-Form-Mobile
- 一、安装
- 二、示例
  - 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
    - Upload
    - Photo
    - SuperUpload
    - Table
      - Columns
        
        Column
    - FormList
      - Columns
        
        Column
    - 注：
  - 控件
    - Validates
      - Validate
    - Conditions
      - Condition
    - Collection
    - Compute
    - Options
      - Option
- 四、应用

一、安装

yarn add antd-form-mobile

npm install antd-form-mobile --save

二、示例

import FormDocument from 'antd-form-mobile';

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 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

时间范围选择器 — 暂缺

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

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>

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	-
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} 
  readonly={['gender', 'code']} 
  initialValues={{name: "张三", gender: 'M'}}
/>

Config配置

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

例：

export default defineConfig({
  // 注册自定义组件
  components: {
    Department,
    UploadList
  },
  previewCompoents: {
    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	-

例：

<UploadList code="uploadList" title="附件" labelCol="4" wrapperCol="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>

Sign

签名

参数	说明	类型	默认值	必填项
code	字段编号全局唯一	string	-	✓
title	字段标题	string	-	✓
color	二维码颜色	string	#000
size	二维码大小	number	100
defaultHide	默认是否隐藏	boolean	false	-
tips	字段提示	string	-
hidden	是否隐藏	boolean	false	-
readonly	是否只读	boolean	false	-
labelCol	`title`布局，与同 `<Col>` 组件设置	number	-
wrapperCol	组件布局，同 `<Col>` 组件设置	number	-
style	组件样式	string	-
labelStyle	标签样式	string	-
itemStyle	表单样式	string	-

例：

<Sign code="signature" title="个人签名">
    <Validates>
        <Validate required="true" message="此项为必填项" />
    </Validates>
</Sign>

antd-form-mobile

Antd-Form-Mobile

一、安装

二、示例

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

Upload

Photo

SuperUpload

Table

Columns

Column

FormList

Columns

Column

注：

控件

Validates

Validate

Conditions

Condition

Collection

Compute

Options

Option

四、应用

FormDocument标签

Config配置

自定义组件

Department

UploadList

Sign

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads