窗口Dialog组件

组件效果如上图,基于element-ui的el-dialog组件进行封装的,修改了样式,加了很多日常使用的属性及方法。主要用于数据的创建、修改、详情窗口显示。窗口组件内里包含了一个form组件,所以有很多属性事件方法与form组件一样
属性
| 参数 | 说明 | 类型 | 默认值 |
| idKey | id值 | string | id |
| formTextMode | 是否启用详情样式,默认是以编辑样式处理 | boolean | false |
| inDialog | 是否嵌套Dialog,看情况设置,这个没设置好,会导致窗口在遮蔽层下面 | boolean | false |
| showSaveButton | 是否显示保存按钮 | boolean | false |
| getGuidOnCreate | 的最大高度,超过后会出现坚向滚动条 | boolean | false |
| fixedRight | 是否固定在右侧 | boolean | false |
| center | 是否在中间 | boolean | false |
| hideHeader | 是否隐藏标题头部 | boolean | false |
| title | 对话框 | boolean | false |
| editTitle | 是否启用编辑标题,会自动根据当前数据是创建还是修改使用对应的标题 | boolean | false |
| unit | 数据单位 | string | 记录 |
| width | 窗口宽度 | string | undefined |
| closeOnSaved | 是否在保存后关闭窗口 | boolean | false |
| beforeClose | 在关闭窗口之前调用的函数,函数会传入一个表单状态对象{ isChanged,isSaved,isEdit }跟一个done函数,前台根据情况进行判断,然后调用done()就会关闭窗口 | function | undefined |
| formLabelWidth | 窗口里表单的字段标签宽度 | string | 85px |
| formRules | 窗口表单的验证规则 | object | |
| formLabelPosition | 标签对齐位置 | | |
| data | 窗口的数据对象 | object | |
| savedMessage | 保存后提示消息 | string | 保存成功 |
| initBaseDataFunc | 初始化对话框的基础数据的函数,返回一个Promiss,这函数只会调用一次,比如说表单内有一些下拉列表,需进行加载成功后才可以进行其它操作 | function | |
| resetOnClose | 关闭窗口时是否重置表单 | boolean | true |
| beforeSave | 保存之前,返回true进行保存,返回false不进行保存 | function | |
| confirmOnSave | 是否在保存时弹出确认提示 | boolean | false |
| confirmSaveText | 保存确认提示文字 | string | 您确定要保存吗? |
| confirmOnCloseChange | 是否在改变数据关闭窗口时进行提示 | boolean | false |
| confirmCloseChangeText | 数据改变后关闭窗口时的提示文本 | string | 数据已修改未保存,是否确定要关闭窗口? |
| saveButtonText | 保存按钮的文本 | | 保存 |
| getDataFunc | 获取数据的函数 | function | null |
| saveFunc | 保存数据的函数 | function | null |
事件
| 事件名 | 说明 | 参数 |
| opened | 当窗口被调用open方法打开后,这时会传入open方法传的参数 | |
| create-opened | 当窗口被调用openCreate方法打开后,会传入窗口的data数据 | object |
| edit-opened | 当窗口被调用openEdit方法打开后,会传入窗口的data数据 | object |
| detail-opened | 当窗口被调用openDetails方法打开后,会传入窗口的data数据 | object |
| closed | 当关闭窗口后 | |
| close-saved | 有保存数据后关闭窗口时,这个满有用的,比如说,我需要保存后关闭窗口才刷新数据,无保存的话就不刷新。 | |
| close | 当关闭窗口时 | |
| data-got | 当获取详情数据后 | object |
| saved | 当数据保存后 | |
方法
| 方法名 | 说明 | 参数 |
| open | 打开窗口 | object |
| openCreate | 打开创建窗口 | object |
| openEdit | 打开编辑窗口 | object |
| openEditById | 打开编辑窗口,传入id | number |
| openDetail | 打开详情窗口 | object |
| openDetailById | 打开详情窗口,传入id | number |
| close | 关闭窗口,传入true为强制关闭 | boolean |
| loading | 设置窗口加载状态 | boolean |
| change | 更改表单数据的变动状态 | boolean |
| reset | 重置窗口数据 | |
| setData | 设置窗口数据 | object |
| reload | 刷新窗口数据 | |
| getData | 获取窗口数据 | number |
| formValidate | 验证窗口表单字段 | |
| save | 保存窗口数据,传入true为强制保存 | boolean |
| clearValidate | 清空表单验证信息 | |
Slots
| 位置名 | 说明 |
| form | 窗口内的表单区域 |
| default | 窗口内容 |
| footer | 窗口底部的按钮区域 |