--- group: title: 通用组件 order: 2 title: StandardModal order: 3 toc: content --- # StandardModal 通用弹窗 > 页面上使用的操作类弹窗 ## 代码演示 ### 基本使用 ## form 配置化表单用法 配置化表单,`type='form'` ### 简单form配置:`formLayout = 'vertical'` ## 按钮栏配置 按钮相关配置参数有footerButtonGroup,hideFooter, footer ## 格式转换 如果提交的表单用于地址栏（或保存提交时）时，可能存在使用的字段不是数组而是单个对象 *例如:* 1. `transform()`将 `creatTime=[date1, date2]`需要转换`startTim`跟`endTime`使用,并且需要将日期格式化成字符串。 2. `parseTransform()`将则将`startTim`跟`endTime`的字符串转换成时间格式并合并成数组 `creatTime=[dayjs('xx'), dayjs('xx')]` ## StepForm 步骤表单`type='stepForm'` * 如果actions配置的的`action='next'或action='submit'`的情况下，会触发当前步骤的表单配置下有 `rules` 的控件进行校验，但是如果是自定义的控件则需要自己在业务层面处理添加校验 ## TabForm 步骤表单`type='tabForm` ## GridForm 栅格组表单`type='gridForm'` [comment]: <> (### 可拖动缩放弹窗) [comment]: <> (升级antd后功能有BUG,暂时未修复) [comment]: <> () ## API | 参数 | 说明 | 类型 | 默认值 | 参考值 | |----------------------------------|-------------------------------------------------|----------------------------------------------------------------------------------------------|-------|-------| | title | 弹窗标题 | String | - |- | | size | 弹窗大小 | String | sm |可选:`xs`,`sm`,`md`,`lg`,`xlg` | | type | 弹窗类型 | String |`normal` |`normal`, `form`, `stepForm`，`tabForm`,`gridForm`[类型说明](#type-类型说明) | | onSubmit | 点击保存（确认）,type为`form`时，参数中才有fields | Function(fields) | - |- | | onCancel | 取消 | Function() | - |- | | footerButtonGroup | 弹窗按钮组，自己定义配置底部按钮组 | Function(modalForm,modalProps)\| Array\|ReactNode\| | - | Array字段参考[footerBtnGroup API](#footerbtngroup-api)| | hideFooter | 是否隐藏底部栏 | Boolean | `false` |- | | footer | 同官网配置，底部内容，当不需要默认底部按钮时，可以设为 footer={null} | | - |- | | formItemGroup | 表单组 | Array | Array字段参考[formItemGroup API](#formitemgroup-api)| | itemGroupConfig | 表单组配置项 | Object | | Array字段查看 [itemGroup API](/components/item-group#api) | | formPrefix | 表单组前置结构 | Function(modalForm, modalProps, forceUpdateForm) | - |modalForm是表示form实例, updateForm指自定义表单变化，需要强制触发更新表单实例 | | formPostfix | 表单组后置结构 | Function(modalForm, modalProps, forceUpdateForm) | - |- | | confirmText/okText | 保存按钮文本 | String | '确认' | | | cancelText | 取消按钮文本 | `String` | '取消' | | | confirmButtonProps/okButtonProps | ok 按钮 props | `ButtonProps` | -| | | cancelButtonProps | cancel 按钮 props | `ButtonProps` |-| | | fieldStatus | 配置化表单展示状态：“viewOnly 只显示值不显示控件”或者"disabled:控件禁用" | `String` | 'default' | | | initialValues | type="form"条件下的表单组默认值配置 | `Object` | - | | | getFormFields | type="form"条件下获取当前弹窗内表单字段值及表单实例 | `Function(fields,form) ` | - | | | formLayout | type="form"条件下的表单布局 | `String` | `horizontal`、`vertical`| | | stepsConfig | type="stepForm"使用,设置当前步骤数等配置，参考官方Steps组件 | `Object` | -| | displayLayout | type="normal"之外使用,自定义标签与控件栅格值 | `Object`[参考](#displaylayout-配置值) | |{labelCol: { span: 7 }, wrapperCol: { span: 15 }} | | ~~dragAble~~（`v6.0.0`移除） | 弹窗显示"可拖动缩放"模式；v6 已移除，需要拖动能力请自行实现 | `Boolean` | | | | ~~initialWidth~~（`v6.0.0`移除） | "dragAble"可拖动缩放模式下配置弹窗宽度；v6 已移除，请直接使用 `width` | `Number` | | | | ~~initialHeight~~（`v6.0.0`移除） | "dragAble"可拖动缩放模式下配置弹窗高度；v6 已移除，高度请使用 `styles.body` | `Number` | | | | getBodyMaxHeight | 获取弹窗最大高度 | `Function(height)` | -| | requiredMark（`v6.0.0`) | 必选样式配置 | `boolean` \| `"optional"`\| `((label: ReactNode, info: { required: boolean }) => ReactNode)` | -| | formConfig（`v6.0.0`) | `
`扩展配置 | `Object` | -| > `formPrefix`与`formPostfix`还有下面`formItemGroup内的customRender` 的 `forceUpdateForm()`参数用于强制更新表单实例赋值 > > 主要业务场景对于一些配置项的表单与此三处设置的值有关联时使用，无关联则尽量不使用 ### formItemGroup API | 参数字段 | 说明 | 类型 |必选项| 参考值| |----------|------|-------------|------|------| | label | 标签名称/条件名称 | String 或 ReactNode | 是 |- | | type | 控件类型 | String | 是 | 可以选择 `input`/`select`/`custom`等，参考[可选值](/field/field-component#type-可选值) | | componentStyle | 表单域样式,可设置宽度等 | Object | 否 | | | extra | 跟在表单域后的结构 | Function ReactNode | 否 | - | | filedName | 控件名称 | String | 是 |参考 [getFieldDecorator(id, options) 参数](https://ant.design/components/form-cn/#getFieldDecorator(id,-options)-参数) | | selectOptions | 选项列表 | Array | 否 | select/radio/checkbox等使用 ,选项值：{'label': 'xxx', value: 'xxx'}| | customRender | 必须结合 type="custom"使用 | Function(itemForm,itemData,fieldStatus, forceUpdateForm) ReactNode | 否 | itemForm表单获取值之类要添加 itemForm.current.getFieldsValue() | | required | 可结合 type="custom"使用,自定义校验规则时，可在label标签前显示* | Boolean| 否 | - | | isHide | 是否隐藏当前配置的组件(需要结合`protoFormItem.shouldUpdate`使用) | Boolean/Function(fieldValues, form)| 否 | fieldValues指当前配置表单内部的所有控件值，form指当前弹窗内部的表单实例 | | protoConfig | 原生的表单控件配置或者antd对应的配置参数,例如配置 protoConfig: { disabled: true }| Object| 否 | - | | protoFormItem | Form.Item 原始API | Objcet | 否|[官网API](https://ant.design/components/form-cn/#Form.Item) | | fields | type=`stepForm`使用 | Array| 是 | 参数集合同`formItemGroup`，但是不包含`fields`,`actions` | | actions |type=`stepForm `使用| Array || 对象值[actions API](#actions-api) 或者`ReactNode` | | transform |提交值格式转换| `(values)=> {}`|否| `transform: (value) => { return { startTime: value[0],endTime: value[1],};}` | | 其他 | 其他配置项目可查看 [itemGroup API](/components/item-group#itemgroup-api) | - |- |-| ### footerBtnGroup API | 参数字段 | 说明 | 类型 |必选项| |----------|------|-------------|------| | name | 按钮文本 | String | 是 | | icon | 图标类名 | String/ReactNode/Array（['speci', 'plus']，至少传一个前缀名，一个图标类名两个值） | 否 | | type | 按钮类型 | String | 否 | | ghost | 幽灵属性，使按钮背景透明 | Boolean | 否 | | fn | 按钮点击事件 | Function | 否 | | isHide | 隐藏按钮 | Boolean | 否 | | 其他 | [参考官网](https://ant.design/components/button-cn/#API) | Boolean | 否 | ### actions API | 参数字段 | 说明 | 类型 |必选项| |----------|------|-------------|------| | name | 按钮文本 | String | 是 | | action | 默认控制类型,指定next,或submit将会在内部默认执行配置表单的校验（不包括type="custom"内相关的表单) | String（可取值'prev','next','submit','cancel'） | 否 | | icon | 图标类名 | String/ReactNode/Array（['speci', 'plus']，至少传一个前缀名，一个图标类名两个值） | 否 | | type | 按钮类型 | String | 否 | | fn | 按钮点击事件 | Function(item,form) | 否 | ### type 类型说明 - `normal`：普通弹窗 - `form`: 配置表单弹窗 - `stepForm`: 带步骤表单弹窗 - `tabForm`：带标签页表单结构 - `gridForm`：带栅格表单结构 ### displayLayout 配置值 **1.针对 formLayout='horizontal'** > 配置值1: 栅格将应用到`display:'side'`的控件,另外有配置`display: 'block'`将会使用原来默认的栅格`general.modalSize[size].formBlockLayout` > > 配置值2: 如果想让`display: 'block'`也更改，则可以使用配置值2，分别配置side与block的栅格 **针对 formLayout='horizontal'** ```javascript // 配置值1： displayLayout={ labelCol: { span: 4 }, wrapperCol: { span: 20 }, } // 配置值2： displayLayout={ // 针对于单行多列展示配置 side: { labelCol: { span: 8}, wrapperCol: { span: 16 }, }, // 单行展1列配置 block: { labelCol: { span: 4 }, wrapperCol: { span: 20 }, } } ``` **2.针对 formLayout='vertical'** > 默认情况下，labelCol与wrapperCol不管在display='size'还是display='block'下都是24