表单类

表单

概述

作为输入框、下拉框、日期选择等表单组件的容器，将表单组件拖入到表单内，通过表单实例的formItemList()方法，可以获取到所有的表单组件实例，整体控制表单内子组件的行为样式。

• data

名称	类型	默认值	显示名	说明	示例
formItemList	Array<Object>	无	绑定字段	表单内部组件数组	$("form-1").formItemList

---

• prop

名称	类型	默认值	显示名	说明
labelWidth	string	无	标签宽度	控制输入框的label标签宽度
labelAlign	string	left	标签对齐方式	控制输入框的label标签文字对齐方式

---

• event

无

---

• method

名称	参数	返回值	说明	示例
getFormItems	()	Array	获取表单内部组件数组	$('form-1').getFormItems(1)
validate	()	boolean	校验输入框的值	$('form-1').validate()
show	()	void	显示输入框	$('form-1').show()
hide	()	void	隐藏输入框	$('form-1').hide()

---

表单(封装)

WARNING

对表单和表单组件的封装，他将通过解析表单配置自动生成表单，表单元素可以是任意表单组件，如果您对表单没有特殊需求，使用表单封装可以在一定程度上提升开发效率

• prop

名称	类型	默认值	显示名	说明
columns	array	[]	列信息
colNumber	string	'6'	分栏	将一行分成多少份可选项['1', '2', '3', '4', '6']
rules	string	string	''	输入框的placeholder
label-position	string	'right'	标签位置	可选项:['left', 'right', 'top']
label-width	string	''	标签宽度
autoLayout	boolean	false	自适应

---

• event

名称	类型	说明	示例
form-change	($context: {value: 值, data: 表单数据, field: 字段名}) => void	数据变动时触发	$context.value

---

• method

名称	参数	返回值	说明	示例
setData	(value: string)	void	设置表单数据	$('closure-form-1').setData(data)
getData	()	string	获取表单数据	$('closure-form-1').getData()
validate	()	boolean	校验表单的值	$('closure-form-1').validate()
disabledForm(	(value: boolean)	void	禁用/开启表单封装中表单组件	$('closure-form-1').disabledForm(true)
show	()	void	显示表单	$('closure-form-1').show()
hide	()	void	隐藏表单	$('closure-form-1').hide()

---

输入框

概述

简单的文本输入框，可以设置输入框的标签、提示、校验规则等
通常我们会通过组件实例getValue()方法获取值,也可以监听输入框的相映事件来触发其他动作

• data

名称	类型	默认值	说明	示例
innerValue	Object	无	输入框的值	$("input-1").innerValue

---

• prop

名称	类型	默认值	显示名	说明
v-model	string	无	绑定字段	双向绑定字段到输入框的值
defaultValue	string,number	无	默认值	输入框的默认值
label	string	输入框	标签	输入框的label文字
placeholder	string	请输入	占位提示	输入框的placeholder
required	boolean	false	必填	输入框是否必填
validateType	string	无	校验类型	用于校验输入框的值是否合规，可选值：'正数', '正整数', '邮箱', '手机号', '汉字'
minLength	number	无	最小长度	用于限制输入值的最小长度位数
maxLength	number	无	最大长度	用于限制输入值的最大长度位数
minNumber	number	无	最小值	用于限制输入值的最小值，仅限于输入数字时
maxNumber	number	无	最大值	用于限制输入值的最大值，仅限于输入数字时
pointNumber	number	2	保留小数位	用于限制输入浮点数的小数位数
disabled	boolean	false	是否禁用	控制输入框是否禁用
suffixIcon	string	无	后图标	输入框后面的图标
prefixIcon	string	无	前图标	输入框前面的图标
labelWidth	string	无	标签宽度	控制输入框的label标签宽度
labelAlign	string	left	标签对齐方式	控制输入框的label标签文字对齐方式

---

• event

名称	类型	说明	示例
change	($context: {value: string}) => void	输入框的值改变后触发	$context.value
enter	($context: {value: string, event: KeyboardEvent}) => void	按下enter键时触发	$context.value
input-value	($context: {value: string}) => void	输入框输入时即触发	$context.value
blur	($context: {value: string, event: KeyboardEvent}) => void	输入框失焦时触发	$context.value
focus	$context: {value: string, event: KeyboardEvent}) => void	输入框聚焦时触发	$context.value
clear	() => void	输入框的值被清除时触发

---

• method

名称	参数	返回值	说明	示例
setValue	(value: string)	void	设置输入框的值	$('input-1').setValue(1)
getValue	()	string	获取输入框的值	$('input-1').getValue()
clearValue	()	void	清空输入框	$('input-1').clearValue()
validate	()	boolean	校验输入框的值	$('input-1').validate()
show	()	void	显示输入框	$('input-1').show()
hide	()	void	隐藏输入框	$('input-1').hide()
focus	()	void	使输入框聚焦	$('input-1').focus()
blur	()	void	使输入框失焦	$('input-1').blur()

---

下拉框

概述

常用于可枚举的选项选择，例如字典、省市区等。 通过fetchMethod()为这个下拉框提供数据，通常是一个数组。 通过labelField指定显示字段，valueField指定值字段,valueField将会与innerValue实现双向绑定。

• data

名称	类型	默认值	说明	示例
options	Array	无	下拉框选项	$("select-1").options
innerValue	string	无	当前选中项，多选时通过','拼接	$("select-1").innerValue

---

• prop

名称	类型	默认值	显示名	说明
v-model	string	无	绑定字段	双向绑定字段到输入框的值
defaultValue	string,number	无	默认值	输入框的默认值
label	string	'下拉框'	标签	下拉框的标签文字
required	boolean	false	必填	是否必填字段
labelWidth	string	''	标签宽度	控制下拉框的label标签宽度
labelAlign	string	'right'	标签对齐方式	控制下拉框的label标签文字对齐方式
fetchMethod	function/string	undefined	请求数据方法	请求数据方法
labelField	string	'Value_Desc'	显示字段	用于显示的选项字段名
valueField	string	'Value_Desc'	值字段	用于存储值的选项字段名
placeholder	string	''	占位内容	未选择时,下拉框中浅色显示的提示文字
multiple	boolean	false	是否多选	是否允许多选
filterable	boolean	false	开启过滤	是否允许过滤
clearable	boolean	false	清空	是否允许清空

---

• event

名称	类型	说明	示例
change	($context: {value: string}) => void	下拉框的值改变后触发	$context.value
remove-tag	($context: {removeValue: string}) => void	下拉框多选移除时触发	$context.removeValue
visible-change	($context: {value: string, visible: boolean}) => void	下拉面板显示/隐藏时触发	$context.value
blur	($context: {value: string, event: KeyboardEvent}) => void	输入框失焦时触发	$context.removeValue
focus	$context: {value: string, event: KeyboardEvent}) => void	输入框聚焦时触发	$context.removeValue
clear	() => void	输入框的值被清除时触发

---

• method

名称	参数	返回值	说明	示例
requestData	()	void	请求数据	$('select-1').requestData()
setOptions	(options)	void	设置下拉选项	$('select-1').setOptions(options)
getOptions	()	void	获取下拉选项	$('select-1').getOptions()
getSlectItem	()	boolean	校验输入框的值	$('select-1').getSlectItem()
clearValue	()	void	清空输入框	$('select-1').clearValue()
validate	()	boolean	校验	$('select-1').validate()
validateStatus	()	boolean	校验状态	$('select-1').validateStatus()
show	()	void	显示输入框	$('select-1').show()
hide	()	void	隐藏输入框	$('select-1').hide()
focus	()	void	使输入框聚焦	$('select-1').focus()
blur	()	void	使输入框失焦	$('select-1').blur()

---

字典选择

概述

对下拉框的进一步封装,固定了获取选项的方法以及显示字段和值字段。 指定调用/gateway/v2/FdGetFiledDtl/selectAPI 通过field获取字典表中指定Field_Name的字典选项 除了使用简单，他的另外一个好处是提供了多种样式，如select、radio、checkbox

• data

名称	类型	默认值	说明	示例
innerValue	Object	null	表单控件的值	$("dictionary-1").innerValue
validateStatus	boolean	false	表单控件的校验状态	$("dictionary-1").validateStatus

---

• prop

名称	类型	默认值	显示名	说明
value	string,Number	''	绑定字段	双向绑定字段到输入框的值
label	string	'字典下拉'	标签内容	输入框的label文字
type	string	'select'	类型	可选'select','radio','checkbox'
multiple	boolean	false	是否多选	是否支持多选，多选时字典的值为内码以逗号拼接的字符串
field	string	''	字典字段	字典表中的汇总字段
filterable	boolean	true	过滤	是否过滤功能
placeholder	string	'请选择'	占位内容	请选择
disabled	boolean	false	最大长度	用于限制输入值的最大长度位数
defaultValue	string	false	默认值	用于限制输入值的最小值，仅限于输入数字时
boolEnable	boolean	false	布尔选择	用于限制输入值的最大值，仅限于输入数字时

---

• event

名称	类型	说明	示例
change	($context: {value: string}) => void	下拉框的值改变后触发	$context.value
remove-tag	($context: {removeValue: string}) => void	下拉框多选移除时触发	$context.removeValue
visible-change	($context: {value: string, visible: boolean}) => void	下拉面板显示/隐藏时触发	$context.value
blur	($context: {value: string, event: KeyboardEvent}) => void	输入框失焦时触发	$context.removeValue
focus	$context: {value: string, event: KeyboardEvent}) => void	输入框聚焦时触发	$context.removeValue
clear	() => void	输入框的值被清除时触发

---

• method

名称	参数	返回值	说明	示例
setValue	(value: string)	void	设置输入框的值	$('dictionary-1').setValue(1)
getValue	()	string	获取输入框的值	$('dictionary-1').getValue()
clearValue	()	void	清空字典值	$('dictionary-1').clearValue()
requestData	()	boolean	请求数据	$('dictionary-1').validate()
setOptions	()	boolean	设置下拉选项	$('dictionary-1').validate()
getOptions	()	boolean	获取下拉选项	$('dictionary-1').validate()
getSlectItem	()	boolean	校验输入框的值	$('dictionary-1').validate()
validate	()	boolean	校验输入框的值	$('dictionary-1').validate()
validateStatus	()	boolean	校验输入框的值	$('dictionary-1').validate()
show	()	void	显示输入框	$('dictionary-1').show()
hide	()	void	隐藏输入框	$('dictionary-1').hide()
focus	()	void	使输入框聚焦	$('dictionary-1').focus()
blur	()	void	使输入框失焦	$('dictionary-1').blur()

---

日期框

概述

日期选择，可以指定日期格式 可以为日期选择设置默认值，例如0代表当天，-7代表向前推7天，5代表向后推5天

• data

名称	类型	默认值	说明	示例
innerValue	Object	null	表单控件的值	$("date-picker-1").innerValue

---

• prop

名称	类型	默认值	显示名	说明
v-model	string	undefined	绑定字段
defaultValue	string	null	默认值
label	string	'日期框'	标签内容
required	boolean	false	必填
labelWidth	string	''	标签宽度
labelAlign	string	'right'	标签对齐方式	可选项right/left
type	string	'date'	日期类型	可选项'年-月-日','时间区间','年-月-日-时-分-秒','年','月'，时间
placeholder	string	''	占位内容
disabled	boolean	false	禁用
clearable	boolean	false	清空

---

• event

名称	类型	说明	示例
change	($context: {value: string}) => void	日期选择的值改变后触发	$context.value
blur	($context: {value: string, event: KeyboardEvent}) => void	输入框失焦时触发	$context.removeValue
focus	$context: {value: string, event: KeyboardEvent}) => void	输入框聚焦时触发	$context.removeValue
clear	() => void	输入框的值被清除时触发

---

• method

名称	参数	返回值	说明	示例
setValue	(value: string)	void	设置输入框的值	$('date-picker-1').setValue(1)
getValue	()	string	获取输入框的值	$('date-picker-1').getValue()
clearValue	()	void	清空日期框	$('date-picker-1').clearValue()
validate	()	boolean	校验输入框的值	$('date-picker-1').validate()
validateStatus	()	boolean	校验输入框的值	$('date-picker-1').validate()
show	()	void	显示输入框	$('date-picker-1').show()
hide	()	void	隐藏输入框	$('date-picker-1').hide()
focus	()	void	使输入框聚焦	$('date-picker-1').focus()
blur	()	void	使输入框失焦	$('date-picker-1').blur()

---

数据弹窗

概述

数据弹框由一个弹出框、一个输入框、一个表格组成。
输入框绑定了keywords字段，所以获取表格数据的fetchMethod()方法需要以keywords作为入参数。
与数据开发的分页功能协同可实现内部表格的分页。

• data

名称	类型	默认值	说明	示例
innerValue	Object	null	查询条件输入框的值	$("dialog-input-1").innerValue
data	Object	null	弹窗表格数据	$("dialog-input-1").data

---

• prop

名称	类型	默认值	显示名	说明
v-model	string	undefined	绑定字段
defaultValue	string	null	默认值
columns	array	[]	列配置
label	string	'数据弹窗'	标签内容
placeholder	string	''	占位提示
required	boolean	false	必填
fetchMethod	function	''	数据方法	($context: {keyword: '检索关键字', pageNum: '分页：当前页码', pageSize: '分页：每页条数', startIndex: '分页：开始索引', endIndex: '分页：结束索引', row: '所属行数据(仅限于该组件处于表格列表等list场景中)', resolve: '回传方法'}) => void
title	string	数据弹框	弹窗标题
pageAble	boolean	true	是否分页
pageTotalKey	string	bigTotalItems	条目字段
keyPlaceholder	string	请输入关键字搜索	过滤占位提示
labelWidth	string	''	标签宽度
labelAlign	string	'right'	标签对齐方式	可选项right/left
selectable	boolean	'false'	是否多选	是否支持多选：   关闭时为单选：通过双击触发数据的选取；   打开时为多选：弹框分为待选数据表格和已选数据表格，单击待选数据插入到已选数据表格，不可选取重复数据，点击已选数据删除按钮取消当前数据的选取，点击确认按钮关闭时间，且可在数据弹框事件属性的确定事件里通过$context.data拿到当前选择的数组；

---

• event

名称	类型	说明	示例
select	($context: {value: 值, data: 所选数据, row:所在行数据（仅限于该组件处于表格列表等list场景中})	选择	$context.row
input	($context: {value: string}) => void	查询条件输入时出发	$context.value
page-change	($context: {keyword: '检索关键字', pageNum: '分页：当前页码', pageSize: '分页：每页条数', startIndex: '分页：开始索引', endIndex: '分页：结束索引', row: '所属行数据(仅限于该组件处于表格列表等list场景中)', resolve: '回传方法'}) => void	翻页时触发	$context.keyword
query	($context: {keyword: '检索关键字', pageNum: '分页：当前页码', pageSize: '分页：每页条数', startIndex: '分页：开始索引', endIndex: '分页：结束索引', row: '所属行数据(仅限于该组件处于表格列表等list场景中)', resolve: '回传方法'}) => void	查询时触发	$context.keyword
blur	($context: {value: string, event: KeyboardEvent}) => void	输入框失焦时触发	$context.removeValue
focus	$context: {value: string, event: KeyboardEvent}) => void	输入框聚焦时触发	$context.removeValue
clear	() => void	输入框的值被清除时触发
open	() => void	弹窗打开时触发
close	() => void	弹窗关闭时触发

---

• method

名称	参数	返回值	说明	示例
select	(row: object)	void	选择一行数据,并抛出select事件,关闭弹窗	$('date-picker-1').select(data[0])
setValue	(value: string)	void	设置输入框的值	$('date-picker-1').setValue(1)
getValue	()	array	获取输入框的值	$('dialog-input-1').getValue()
setData	(data: array)	void	设置弹窗表格数据	$('dialog-input-1').setData(data)
getData	()	string	获取弹窗表格数据	$('dialog-input-1').getData()
validate	()	boolean	校验输入框的值	$('dialog-input-1').validate()
validateStatus	()	boolean	校验输入框的值	$('dialog-input-1').validate()
show	()	void	显示输入框	$('dialog-input-1').show()
hide	()	void	隐藏输入框	$('dialog-input-1').hide()
focus	()	void	使输入框聚焦	$('dialog-input-1').focus()
blur	()	void	使输入框失焦	$('dialog-input-1').blur()

---

检索框

概述

类似于百度的搜索框功能，您可以为他提供一个fetchSuggestions()方法用于检索数据，并将其与对应事件绑定，例如，输入、值变化、按下enter、失去焦点等事件下触发搜索

• data

名称	类型	默认值	说明	示例
innerValue	Object	null	查询条件输入框的值	$("autocomplete-1").innerValue
data	Object	null	弹窗表格数据	$("autocomplete-1").data

---

• prop

名称	类型	默认值	显示名	说明
v-model	string	undefined	绑定字段
defaultValue	string	null	默认值
label	string	'检索框'	标签内容
required	boolean	false	必填
placeholder	string	''	占位提示
valueKey	string	'value'	显示字段
fetchSuggestions	function	''	数据方法	($context: {keyword: '检索关键字', row: '所属行数据(仅限于该组件处于表格列表等list场景中)', resolve: '回传方法'}) => void
disabled	boolean	false	禁用
labelWidth	string	''	标签宽度
labelAlign	string	'right'	标签对齐方式	可选项right/left

---

• event

名称	类型	说明	示例
select	($context: {value: 值, selectItem: 所选项数据})	选择	$context.selectItem
change	($context: {value: 值, selectItem: 所选项数据})	值改变	$context.selectItem
enter	($context: {value: 值, event: 原生event对象}) => void	enter键	$context.value
input	($context: {value: 值}) => void	enter键	$context.value
blur	($context: {value: string, event: KeyboardEvent}) => void	输入框失焦时触发	$context.removeValue
focus	$context: {value: string, event: KeyboardEvent}) => void	输入框聚焦时触发	$context.removeValue
clear	() => void	输入框的值被清除时触发

---

• method

名称	参数	返回值	说明	示例
setValue	(value: string)	void	设置输入框的值	$('date-picker-1').setValue(1)
getValue	()	array	获取输入框的值	$('autocomplete-1').getValue()
clearValue	()	void	清空检索框	$('autocomplete-1').clearValue()
validate	()	boolean	校验输入框的值	$('autocomplete-1').validate()
validateStatus	()	boolean	校验输入框的值	$('autocomplete-1').validate()
show	()	void	显示输入框	$('autocomplete-1').show()
hide	()	void	隐藏输入框	$('autocomplete-1').hide()
focus	()	void	使输入框聚焦	$('autocomplete-1').focus()
blur	()	void	使输入框失焦	$('autocomplete-1').blur()

---

选择框

概述

一个简单的布尔类型选择组件

• data

名称	类型	默认值	说明	示例
innerValue	Object	null	查询条件输入框的值	$("checkbox-1").innerValue

---

• prop

名称	类型	默认值	显示名	说明
v-model	string	undefined	绑定字段
defaultValue	string	null	默认值
label	string	'选择框'	标签内容
required	boolean	false	必填
trueLabel	string	'Y'	真值
falseLabel	string	'N'	假值
disabled	boolean	false	禁用
labelWidth	string	''	标签宽度
labelAlign	string	'right'	标签对齐方式	可选项right/left

---

• event

名称	类型	说明	示例
change	($context: {value: 值})	值改变	$context.selectItem

---

• method

名称	参数	返回值	说明	示例
setValue	(value: string)	void	设置输入框的值	$('date-picker-1').setValue(1)
getValue	()	array	获取输入框的值	$('checkbox-1').getValue()
clearValue	()	void	清空选择框	$('checkbox-1').clearValue()

---

文件上传

概述

文件上传下载预览，可与表格配合使用；表格接收的参数为以逗号分隔的字符串。

---

• prop

名称	类型	默认值	显示名	说明
isDisabled	boolean	false	禁用
multiple	multiple	true	多文件
isshowfile	isshowfile	true	显示文件
uploadData	uploadData	Object	上传参数	bucket：桶，path：路径，compress：是否压缩（默认不压缩）

---

• event

名称	类型	说明	示例
handleSuccess	($context: {value: 值})	上传成功	$context.selectItem
handleRemove	($context: {value: 值})	文件删除	$context.selectItem
handleBeforeUpload	($context: {value: 值})	上传之前的回调	$context

---

• method

名称	参数	返回值	说明	示例
setFileList	([{ name: '名称', raw: { type: 'image/png'},response: {path: 'xxx.png'}}])	void	设置当前需要显示的文件列表	$('upload-1').setFileList(1)
getFileList	()	array	获取当前需要显示的文件列表	$('upload-1').getFileList()
disable	()	void	禁止上传	$('upload-1').disable()
enable	()	void	取消禁止上传	$('upload-1').enable()

---

按钮

概述

支持不同样式、图表、文字等，同时您可以设置按钮的禁用

• data

名称	类型	默认值	说明	示例
innerValue	Object	null	查询条件输入框的值	$("checkbox-1").innerValue

---

• prop

名称	类型	默认值	显示名	说明
text	string	按钮	名称
type	string	primary	类型	可选项['primary', 'success', 'warning', 'danger', 'info', 'text']
icon	string	''	图标
disabled	boolean	false	禁用
plain	boolean	false	必填

---

• event

名称	类型	说明	示例
change	($context: {value: 值})	值改变	$context.selectItem

---

• method

名称	参数	返回值	说明	示例
setValue	(value: string)	void	设置输入框的值	$('date-picker-1').setValue(1)
getValue	()	array	获取输入框的值	$('checkbox-1').getValue()

---