前端开发文档
目录
组件使用手册
布局 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-container子一级的base-section中 时（base-container > base-section > base-footer），当前组件将在页面滚动到父级section区域时被固定到底部。
左侧菜单导航器。
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 | 自定义设置日期面板上每个日期单元的内容。 |
base-cascader
级联选择框。修改自element-ui的组件el-cascader。本文档设计的属性及特性进描述作出扩展和修改的部分。其他部分参考element-ui官方文档（版本：2.5.*）。
属性：
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| plain-options | 是否使用平滑列表格式的options数据。 | Boolean | true/false | false |
props属性：
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| id | 当cascader组件的plain-options属性设为true时，用于指定数据唯一id的属性名。 | String | - | id |
| pid | 当cascader组件的plain-options属性设为true时，用于指定数据父级id的属性名。 | String | - | pid |
弹出窗口 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.*）。
属性：
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| plain-data | 当前是否接收平铺列表数据。如接收平铺列表数据，则会自动将传入数据序列化为树形数据。 | Boolean | true/false | false |
treeProps属性：
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| readonly | 节点checkbox只读。禁用节点checkbox，但与disabled不同的是，readonly为true时也允许其处于选中状态。 | Boolean | true/false | true |
| id | 节点的主键字段名。 | String | - | id |
| pid | 节点的父级id字段名。 | String | - | pid |
其他 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。 |
base-workflow-designer
工作流设计器组件。工作流设计器组件基于go.js进行封装，go.js的官方文档请参阅：https://gojs.net/latest/api/index.html
属性：
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| mode | 组件调用模式。design模式为工作流设计模式，绘制剪贴板，允许移动、拖放、粘贴、删除元素，允许拖移画布；view模式为工作流展示模式，不绘制剪贴板，不允许对元素进行修改变更，允许拖移画布；fixed模式为工作流展示模式，与view模式的区别在于fixed模式不允许拖移画布 | String | design/view/ fixed | design |
| data | 工作流json数据对象。应当至少具有nodeDataArray（节点数组）和linkDataArray（跳转数组）两个属性。其他属性请参阅: https://gojs.net/latest/api/symbols/GraphLinksModel.html 。 *注意：在此对象上入的nodeKeyProperty、linkFromKeyProperty、linkToKeyProperty 属性将被忽略。 | Object | - | {} |
| width | 组件宽度 | String | - | 100% |
| height | 组件高度 | String | - | 500px |
| auto-layout | 自动进行布局 | Boolean | true | |
| layout | 布局类型。具体类型请参阅官方文档。 | String | - | TreeLayout |
| angle | 跳转线拐角的角度 | Number | - | 90 |
| node-spacing | 同级节点最小间距 | Number | - | 40 |
| layer-spacing | 层间距：树形布局中父级节点和子节点的最小间距 | Number | - | 30 |
| node-name-field | 在data对象上的节点数组中每一个节点数据对象上，指定为节点名称的字段名 | String | - | nodeName |
| node-key-field | 在data对象上的节点数组中在每一个节点数据对象上，指定为节点ID的字段名 | String | - | nodeKey |
| node-menu-btns | 节点右键上下文菜单的按钮数组（开始、结束节点不适用右键上下文菜单）。数组中的元素必须具有text（指定按钮的显示文本）和action（函数，接收两个参数，第一个为按钮本身，第二个为事件，为按钮指定点击后的操作）两个属性。 *注意：design模式下自动向数组末尾追加删除按钮，无需手动配置。 | Array | - | - |
| link-name-field | 指定为跳转名称的字段名 | String | - | linkName |
| link-from-key-property | 在data对象上的跳转数组中每一个跳转数据对象上，被指定为跳转起点节点ID的属性 | String | - | from |
| link-to-key-property | 在data对象上的跳转数组每一个跳转数据对象上，被指定为跳转终点节点ID的属性 | String | - | to |
| link-menu-btns | 跳转右键上下文菜单的按钮数组。数组中的元素必须具有text（指定按钮的显示文本）和action（函数，接收两个参数，第一个为按钮本身，第二个为事件，为按钮指定点击后的操作）两个属性。 *注意：design模式下自动向数组末尾追加删除按钮，无需手动配置。 | Array | - | - |
| before-remove-node | 执行删除节点之前的操作。接收当前正在被删除的节点作为参数，返回值为是否确认删除。如果返回true，则确认删除，如果返回false，则取消删除 | Function | - | - |
| before-remove-link | 执行删除跳转之前的操作。接收当前正在被删除的跳转作为参数，返回值为是否确认删除。如果返回true，则确认删除，如果返回false，则取消删除 | Function | - | - |
方法：
| 方法名 | 说明 | 参数 |
|---|---|---|
| removeNode | 删除节点。删除前会执行before-remove-node方法进行确认。 | node |
| removeLink | 删除跳转。删除前会执行before-remove-link方法进行确认。 | link |
| clear | 清空画布。 | |
| undo | 撤销上一步操作。 | |
| redo | 重做，恢复被撤销的操作。 | |
| getJSONData | 获取model的JSON字符串。 |
事件：
| 事件名 | 说明 | 参数 |
|---|---|---|
| node-drop | 节点被拖放到画布上的事件。e.subject属性为拖放到画布的节点的集合，通过each遍历进行操作。通过设置e.cancel属性为true，可以取消被拖放到画布上的节点。 | event |
| link-drawn | 拖拽绘制出跳转线的事件。e.subject属性为此次拖拽出的跳转。通过设置e.cancel属性为true，可以取消被绘制出的跳转。 | event |
| node-deleting | 选中节点按下Delete键删除的事件。e.subject属性为当前选中的节点对象。如果选中多个节点并进行删除，此事件将被触发多次。通过设置e.cancel属性为true，可以取消对当前节点的删除操作。 | event |
| link-deleting | 选中跳转按下Delete键删除的事件。e.subject属性为当前选中的跳转对象。如果选中多个跳转并进行删除，此事件将被触发多次。通过设置e.cancel属性为true，可以取消对当前跳转的删除操作。 | event |
| node-click | 节点单击事件。此事件与双击事件冲突。e.subject属性为被单击的节点。 | event |
| link-click | 跳转单击事件。此事件与双击事件冲突。e.subject属性为被单击的跳转。 | event |
| node-dblclick | 节点双击事件。此事件与单击事件冲突，如果同时声明单击、双击事件，则只会触发单击事件。e.subject属性为被双击的节点。 | event |
| link-dblclick | 跳转双击事件。此事件与单击事件冲突，如果同时声明单击、双击事件，则只会触发单击事件。e.subject属性为被双击的跳转。 | event |
工具类使用手册
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 |
TreeHelper
用于处理树形数据的工具类。
方法：
| 方法名 | 说明 | 参数 |
|---|---|---|
| serialize | 此方法为静态方法。用于将平铺列表/数组数据转为树形数据。传入4个参数：list（数据源）、childrenPropName（用于存放子节点数组的属性名，默认值为children）、keyPropName（主键属性名，默认值为id）、parentKeyPropName（父级ID属性名，默认值为pid）。返回经过序列化的树形数据列表。 | list, childrenPropName, keyPropName, parentKeyPropName |
自定义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/ |
