# 窗口Dialog组件

菜单编辑窗口

组件效果如上图,基于element-uiel-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 窗口底部的按钮区域
上次更新: 1/3/2021, 9:01:12 PM