1.0.6 • Published 8 days ago
antd-form-mobile v1.0.6
Antd-Form-Mobile
基于ant-design cn 表单设计
一、安装
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>