antd-form-document v5.0.7

Antd-Form-Document

基于ant-design cn 表单设计

• Antd-Form-Document
  • 一、安装
  • 二、示例
    • 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

一、安装

yarn add antd-form-document

npm install antd-form-document --save

二、示例

import FormDocument from 'antd-form-document';

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

const App = () => {
  const [form] = Form.useForm();
  return <FormDocument 
    id={121} 
    form={form} 
    document={documentString} 
    collapse={true} 
    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

表单

例

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

容器

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

Row

行

Col

列

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

分割线

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

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

Steps

步骤条

Step

步骤条内的每一个步骤

Content

步骤条内容

例： 引导用户按照流程完成任务的导航条，切换步骤时，按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

折叠

例：

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

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

Tabs

标签页 — 暂缺

Card

卡片 — 暂缺

组件

功能组件

Label

标签

例：

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

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

Tooltip

提示框

例1：

<Tooltip>提示信息</Tooltip>

例2：

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

Text

文本

例：

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

TextArea

文本域

例：

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

Number

数值框

例：

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

Editor

富文本

例：

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

Select

选择框

例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

复选框

例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

单选框

例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

开关

例：

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

Duration

时长

例：

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

DatePicker

日期选择器

例：

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

TimePicker

时间选择器

例：

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

RangePicker

时间范围选择器 — 暂缺

Upload

上传

例：

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

Photo

上传

例：

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

SuperUpload

分片上传

例：

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

Table

表格

Columns

表格列集合

Column

表格列内容

例：

<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

表格

Columns

表格列集合

Column

表格列内容

例：

<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

例：

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

Conditions

条件集合

Condition

条件

例：

<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

选项内容

例：

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

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

四、应用

FormDocument标签

例：

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

Config配置

例：

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

部门

例：

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

UploadList

上传列表

例：

<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

签名

例：

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