匿名
未登录
登录
Leon Wiki
搜索
导航
导航
首页
最近更改
随机页面
帮助
Wiki工具
Wiki工具
特殊页面
页面工具
页面工具
用户页面工具
更多
链入页面
相关更改
页面信息
页面日志
查看“前端开发文档”的源代码
名字空间
页面
讨论
页面选项
查看
查看源代码
历史
更多
←
前端开发文档
因为以下原因，您没有权限编辑本页：
您所请求的操作仅限于该用户组的用户使用：
用户
您可以查看与复制此页面的源代码。
{{MARKDOWN}} 组件使用手册 ============ 布局 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.\*）。 属性： | 属性名 | 说明 | 类型 | 可选值 | 默认值 | |------------|------------------------------------------------------------------------------------|---------|------------|--------| | 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。 | ### wf-workflow-designer 工作流设计器组件。此组件位于leon-frame-wf-component包中。 工作流设计器组件基于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 | 重做，恢复被撤销的操作。 | | 事件： | 事件名 | 说明 | 参数 | |---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------| | 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 | *引用路径：import BaseBooleanEnum from 'leon-base-core/lib/constant/BaseBooleanEnum'; BaseEnableStateEnum ------------------- 启用状态枚举。 | 枚举 | 说明（name） | 值（value） | |----------|--------------|-------------| | ENABLED | 启用 | 1 | | DISABLED | 停用 | 0 | *引用路径：import BaseBooleanEnum from 'leon-base-core/lib/constant/BaseEnableStateEnum'; 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 | *引用路径：import BaseBooleanEnum from 'leon-base-core/lib/constant/BaseFlowStateEnum'; BaseFileApi ----------- 服务端文件API常量。 | 项 | 说明 | 值 | |--------------|-------------|---------------------| | UPLOAD_API | 文件上传API | /api/file/upload | | DOWNLOAD_API | 文件下载API | /api/file/download/ | *引用路径：import BaseBooleanEnum from 'leon-base-core/lib/constant/BaseFileApi';
返回至
前端开发文档
。
