前端开发文档

组件使用手册

布局 Layout

base-container

外层容器。当子一级元素中包含base-section时，固定当前可视的base-section中的header和footer元素（base-section的子一级base-header、base-footer，以及base-main子一级的el-table（及其衍生组件）的表头和表尾行、el-pagination组件），直到页面滑动到其他section。

base-section

分节容器。当外层元素为base-container时，固定当前可视节的头、尾类元素。

base-header

分节头部元素的容器。将该组件置于base-container子一级的base-section中 时（base-container > base-section > base-header），当前组件将在页面滚动到父级section区域时被固定到顶部。也可以通过设置inline-title属性为true的方式将其用作某一部分内容的小节标题。

属性：

属性名	说明	类型	可选值	默认值
inline-title	是否启用行内标题模式。如果该属性值为真，base-header元素是将表示为一个小节标题的形式。	Boolean	true/false	false

base-main

分节主体元素的容器。当将该组件置于base-container子一级的base-section中时（base-container > base-section > base-main），如果子一级元素中存在el-table及其衍生组件，固定表头到顶部并将表尾行固定到底部；如果子一级元素中存在el-pagination组件，将其固定到尾部。

base-footer

分节尾部元素的容器。将该组件置于base-container子一级的base-section中 时（base-container > base-section > base-footer），当前组件将在页面滚动到父级section区域时被固定到底部。

导航 Navigation

base-navigator

左侧菜单导航器。

属性名	说明	类型	可选值	默认值
nodes	节点列表。	Array	-	-

base-tabs

标签页组件。扩展自element-ui的组件el-tabs。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。

方法：

方法名	说明	参数
addTab	新增标签页。接受参数为一个包含label、name、singleton、data属性的对象。此方法通过provide提供给子组件使用，子组件增加inject: ['addTab ']属性即可调用。	tab

base-tab-pane

标签页组件。扩展自element-ui的组件el-tabs。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。

方法：

方法名	说明	参数
closeTab	关闭当前标签页。接受参数为一个包含label、name、singleton、data属性的对象。此方法通过provide提供给子组件使用，子组件增加inject: ['closeTab ']属性即可调用。	-

事件：

事件名	说明	参数
tab-activated	当前标签页被激活的事件，接收参数为当前tab页的tab属性	tab

输入 Input

base-input-number

数字输入框。修改自element-ui的组件el-input-number。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。

属性：

属性名	说明	类型	可选值	默认值
controls	是否使用控制按钮。本组件仅修改默认值	Boolean	true/false	false
type	非必须属性。当指定为amount时，输入框中的值将以带千分符的格式显示，并自动右对齐，amount模式下增加默认前缀人民币符（￥）；当指定为percent时，输入框中的值为百分比值，百分比模式下增加默认后缀百分号（%）。（例：输入15，显示15，实际数值为0.15）	String	amount/percent	-
readonly	是否只读	Boolean	true/false	false
align	文本对齐	String	left/center/right	left
prefix	输入框前缀字符	String	-	-
suffix	输入框后缀字符	String	-	-

slots:

名称	说明
prefix	输入框前缀。如已指定prefix属性，该slot不生效。
suffix	输入框后缀。如已指定suffix属性，该slot不生效。
prepend	输入框前置内容
append	输入框后置内容

base-date-picker

日期选择框。修改自element-ui的组件el-date-picker。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。

picker-options属性：

属性名	说明	类型	可选值	默认值
timeSelectableRange	当日期时间选择框为date-time模式时，限定可选的时间范围。可为字符串（HH:mm:ss –HH:mm:ss），也可为字符串数组（字符串格式同上）	String/Array	-	-

slots:

名称	说明
date-content	自定义设置日期面板上每个日期单元的内容。

弹出窗口 Dialogs

base-approve-dialog

审批弹出框。用于审批操作的通用组件。

属性：

属性名	说明	类型	可选值	默认值
operation-name	审批操作名称。	String	-	审批
apv-result-options	审批结果可选项。	Array	-	-

方法：

方法名	说明	参数
open	打开对话框。	-
close	关闭对话框。	-
stopLoading	停止对话框的loading加载中状态，使审批按钮可点击。	-

事件：

事件名	说明	参数
save	保存审批结果。参数为包含审批结果的对象。apvResult选中的审批结果值，apvOpinion审批意见值。	data

base-export-dialog

导出弹框。用于批量导出操作的通用组件。

属性：

属性名	说明	类型	可选值	默认值
file-suffix	导出文件后缀名。	String	-	xlsx
can-export-all	导出全部选项是否禁用。	Boolean	true/false	false
template-options	可选模板列表{templateId, templateName}。	Array	-	[]

方法：

方法名	说明	参数
open	打开对话框。	-
close	关闭对话框。	-
stopLoading	停止对话框的loading加载中状态，使审批按钮可点击。	-

事件：

事件名	说明	参数
export-data	提交导出请求。{fileName, exportRange, exportTemplate}	data

base-import-dialog

导入弹框。用于批量导入操作的通用组件。

属性：

属性名	说明	类型	可选值	默认值
need-template	是否需要下载模板	Boolean	true/false	true

方法：

方法名	说明	参数
open	打开对话框。	-
close	关闭对话框。	-

事件：

事件名	说明	参数
download-template	下载模板	-
upload-success	上传成功，参数为包含上传结果result、响应response、当前文件file及文件列表fileList的对象	data
upload-error	上传失败，参数为包含错误信息err、当前文件file及文件列表fileList的对象	data
import-data	提交导入请求，参数为上传成功的上传结果对象	data

数据 Data

base-scroll-table

滚动加载表格，扩展自element-ui的组件el-table。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。

属性：

属性名	说明	类型	可选值	默认值
fetch-method	查询数据方法，必需属性，参数为页码page，分页大小size，查询参数params，返回一个Promise对象。	Function	-	-
virtual-scroll	是否虚拟滚动	Boolean	true/false	true
size	分页大小，必需属性。	Number	-	-
span-columns	需要合并的列。需要注意要使用此属性，必须设置row-key属性。	Array	-	[]
span-key	合并列依据的属性名称。需要注意要使用此属性，必须设置row-key属性。	String	-	-
header-height	表头高度。	Number	-	-
footer-height	表尾高度。	Number	-	-

base-tree

树形组件。扩展自element-ui的el-tree组件。本文档涉及的属性及特性仅描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。

treeProps属性：

属性名	说明	类型	可选值	默认值
readonly	节点checkbox只读。禁用节点checkbox，但与disabled不同的是，readonly为true时也允许其处于选中状态。	Boolean	true/false	true

其他 Others

base-calendar

日历日程组件。

属性：

属性名	说明	类型	可选值	默认值
locale	语言	String	en-US/zh-CN	en-US
month-name-format	月份名称格式	String	short/long	short
weekday-name-format	星期名称格式	String	short/long	short
start-day-of-week	周起始日	Number	0-6	0
display-period-type	显示模式	String	month/week/day	month
data	日程数据	Array	-	[]
date-classes	自定义每个日期单元格的class	Object	-	-

事件：

事件名	说明	参数
click-date	日期点击事件	day
click-event	日程项目点击事件	event,day
period-change	切换日历时间段事件，参数： {calendarStart, calendarEnd, periodStart, periodEnd}	Data

base-smart-search

智能搜索组件。

属性：

属性名	说明	类型	可选值	默认值
search-width	搜索框宽度	String	-	450px
disabled	是否已禁用	Boolean	true/false	false
selectable	是否启用左侧下拉选	Boolean	true/false	true
default-search	左侧下拉选默认搜索项{label, name}	Object	-	-
select-data	左侧下拉选可选项列表	Array	-	[]
form-model	高级查询表单model	Object	-	{}
form-label-width	表单label宽度	String	-	120px

slots:

名称	说明
search-bar	查询框右侧空白粗靠左部分的工具栏slot。
tool-bar	查询框右侧空白靠右部分，高级查询按钮左侧的工具栏slot。
group-tool-bar	高级查询所在按钮组中的工具栏slot。
adv-search-items	高级查询项。
adv-search-operations	高级查询表单按钮左侧的工具栏slot。
adv-form-tool-bar	高级查询表单按钮右侧的工具栏slot。
bottom-bar	高级查询表单底部的工具栏slot。

工具类使用手册

Pager

前端分页器。用于向服务端发送分页请求，并自动为elmenti-ui的el-pagination组件附加事件处理函数。

属性：

属性名	说明	类型	默认值
data	当前页数据。可以将el-table的data属性值指向Pager实例的data属性，以将服务端返回的数据展示到el-table中。	Array	[]
loading	可以在el-table上附加v-loading并指向Pager实例的loading属性，以控制表格的加载状态显示。	Boolean	false
current	将el-pagination的current-page属性指向Pager实例的current属性，以控制当前页码。	Number	1
size	将el-pagination的size属性指向Pager实例的size属性，以控制分页大小。	Number	10
total	将el-pagination的total属性指向Pager实例的total属性，以在分页组件上显示数据总量。	Number	0

方法：

方法名	说明	参数
init	初始化当前Pager实例。参数为el-pagination组件实例，以及用于向后端请求的方法，该方法必须返回一个Promise。	pagination, queryApi
search	向服务端发起请求，进行传参查询，并重置当前页码。	params

使用说明：要使用Pager类自动管理分页请求，在组件的data() 函数中增加一个属性，值为Pager类的实例。在组件的生命周期函数上调用Pager实例的init方法，并将el-pagination实例（通过\$refs属性获取）和请求数据的方法传入。（一般选择组件的mounted方法，如果存在如el-dialog之类lazy-render的情况，在初次渲染内容时进行调用，需要保证调用init方法时页面上的el-pagination组件已经渲染）。

ScrollHelper

用于配合base-section使用，计算当前节的头部、尾部高度，传入base-scroll-table中使用。

属性：

属性名	说明	类型	默认值
headerHeight	头部高度。将base-scroll-table的header-height属性值指向ScrollHelper实例的headerHeight属性，用以辅助base-scroll-table进行滚动加载时的高度计算。	Number	0
footerheight	尾部高度。将base-scroll-table的footer-height属性值指向ScrollHelper实例的footerheight属性，，用以辅助base-scroll-table进行滚动加载时的高度计算。	Number	0

自定义Vue指令使用手册

dbl-click-edit

双击编辑。接收一个函数作为值，该函数将在编辑框失去焦点时执行，参数为编辑框的值。

修饰符：

名称	说明
mutiLine	是否支持多行编辑。

el-date-range

专用于处理element-ui组件el-date-picker的指令。当且仅当组件的type属性为daterange、datetimerange或timerange时有效。使用该指令，需要为组件设置data -range-start和data-range-end属性。这些属性通过HTML5 Dataset对象向该指令传递一个vue数据对象的属性路径（例如：form.params.datestart），用于将日期区间的起始、结束值赋值到指定的属性上。

el-single-select

专用于处理elment-ui组件el-select的指令。当且仅当组件的multiple属性为false（不指定默认为false）时有效。使用该指令，必须为组件设置value-key属性，并以data-map.*的形式将需要映射到vue数据对象的通过HTML5 Dataset对象向该指令传递一个将需要映射到vue数据对象的属性路径传入该指令，用法如下：data-map.optionProperty="form.params.property"，其中属性名中的optionProperty为选项列表中的对象属性名，用于将选中的选项的指定属性赋值到vue数据对象中指定的属性上。

常量/枚举列表

BaseBooleanEnum

布尔值枚举。

枚举	说明（name）	值（value）
TRUE	是	1
FALSE	否	0

BaseEnableStateEnum

启用状态枚举。

枚举	说明（name）	值（value）
ENABLED	启用	1
DISABLED	停用	0

BaseFlowStateEnum

流程状态枚举。

枚举	说明（name）	值（value）
SAVED	待提交	1
PENDING	审批中	5
UNCONFIRMED	待确认	8
CONFIRMED	已确认	9
PROCESSED	已审批	10
PROCESSING	处理中	11
PROCESS_FAILED	处理失败	12
TERMINATED	已终止	85
APPROVED	已办结	90
ADOPT	条件通过	91
REJECTED	驳回	95
CANCELED	作废	99

BaseFileApi

服务端文件API常量。

项	说明	值
UPLOAD_API	文件上传API	/api/file/upload
DOWNLOAD_API	文件下载API	/api/file/download/