# 实用组件
以下提到的所有实用组件均在src/components/common目录下存放，文件名称与组件名称一致。
# AppLayout/全局页面布局组件
AppLayout是一个布局组件，规定了菜单、头部的位置，在Eva中，所有的页面都会被AppLayout包裹起来。你可以修改此组件以达到您需要的自定义样式。
<TableLayout>
<el-form slot="search-form">
<!-- 搜索表单内容 -->
</el-form>
<div slot="space">
<!-- 搜索表单与表格之间的内容，通常啥也没有 -->
</div>
<template v-slot:table-wrap>
<!-- 表格与分页 -->
</template>
<!-- 新建/编辑 -->
</TableLayout>
2
3
4
5
6
7
8
9
10
11
12
# TableLayout/列表页面布局组件
TableLayout也是一个布局组件，为了能够更好统一列表页面的内容和样式，所有的列表页面均通过该组件进行布局。你可以修改此组件以达到您需要的自定义样式。
<TableLayout>
<el-form slot="search-form">
<!-- 搜索表单内容 -->
</el-form>
<div slot="space">
<!-- 搜索表单与表格之间的内容，通常啥也没有 -->
</div>
<template v-slot:table-wrap>
<!-- 表格与分页 -->
</template>
<!-- 新建/编辑 -->
</TableLayout>
2
3
4
5
6
7
8
9
10
11
12
参数说明
| 参数 | 说明 |
|---|---|
| with-breadcrumb | 是否包含面包屑 |
| roles | 角色数组，满足其中一个表示列表存在访问权限 |
| permissions | 权限数组，满足其中一个表示列表存在访问权限 |
slots
| 参数 | 说明 |
|---|---|
| default | 默认插槽，用于存放新建/编辑DOM和其它内容处理的DOM对象 |
| search-form | 搜索表单 |
| space | 搜索表单与表格之间的区域 |
| table-wrap | 表格区域，包含分页都应在此处理 |
# Profile/视图访问控制
视图访问控制组件用于控制用户是否有权限访问视图。
<profile :roles="roles" :permissions="permissions">
满足权限后展示，否则展示无权限视图。
</profile>
2
3
参数说明
| 参数 | 说明 |
|---|---|
| roles | 角色数组，满足其中一个表示视图存在访问权限 |
| permissions | 权限数组，满足其中一个表示视图存在访问权限 |
如果同时存在roles和permissions，表示必须满足其中一个role和其中一个permission。
# Pagination/分页器
分页器用于实现列表分页功能，基于element-ui实现。内置的分页器是为了使得网页所有的分页保持一致而存在。所以，您应该尽可能的使用它来完成分页。
<pagination
:pagination="tableData.pagination"
@size-change="handleSizeChange"
@current-change="handlePageChange"
></pagination>
2
3
4
5
参数说明
| 参数 | 说明 |
|---|---|
| pagination | 分页对象，来自BaseTable.vue组件，详见分页-删除-批量删除的实现 |
| @size-change | 当页容量发生变化时触发 |
| @current-change | 当页码发生变化时触发 |
# SearchFormCollapse/搜索表单收缩
如果你希望你的搜索表单可以进行收缩，那么此组件可以满足你的需求。
<SearchFormCollapse slot="search-form">
<el-form ref="searchForm">...</el-form>
</SearchFormCollapse>
2
3
注：原本放在el-form上的slot属性需要移动至SearchFormCollapse组件上。
# ColumnDetail/列详情
当某一个有限的空间要展示很多内容时，您可以采用此组件来完成，可提高用户体验。你可以在线上演示 (opens new window)/操作日志模块预览效果。
<ColumnDetail :content="content"/>
参数说明
| 参数 | 说明 |
|---|---|
| button-type | 按钮类型，详情参考Button组件 (opens new window) |
| content | 全部内容 |
| limit | 数字，默认为12，当超过该值时展示为查看按钮 |
| analyse | Boolean，是否自动对内容进行分析，开启后将自动识别是否为JSON字符串（如果是则会格式化后展示）。默认为true |
| allow-copy | 是否允许复制，默认为true |
# GlobalWindow/全局窗口
新建/编辑/详情等页面中的子页面，都应该使用全局窗口来完成，让使用体验保持高度一致。
<GlobalWindow
width="80%"
:title="XXX"
:visible.sync="visible"
>
</GlobalWindow>
2
3
4
5
6
参数说明
| 参数 | 说明 |
|---|---|
| width | 宽度，单位可以是px，也可以是% |
| withFooter | 是否包含底部操作 |
| confirmWorking | 确认按钮loading状态 |
| title | 窗口标题 |
| visible | 是否展示 |
# TreeSelect/树选择器
系统内置的岗位选择器、菜单选择器、部门选择器等都是通过树选择器来完成的，详情请查阅vue-treeselect组件 (opens new window)
# DepartmentSelect/部门选择器
注：定制了部门管理模块后才有此组件
<DepartmentSelect placeholder="请选择上级部门" v-model="deptId" :inline="false"/>
参数说明
| 参数 | 说明 |
|---|---|
| value | 值，通常使用v-model绑定 |
| inline | Boolean，是否设置为行元素，默认为true |
| append-to-body | 是否将下拉选项添加到body标签中 |
| multiple | 是否可多选 |
| placeholder | 未选中状态下的提示 |
| clearable | Boolean，可否清空，默认false |
| excludeId | 需要被排除选中的部门ID |
# PositionSelect/岗位选择器
注：定制了岗位管理模块后才有此组件
<PositionSelect placeholder="请选择岗位" v-model="positionId" :inline="false"/>
参数说明
| 参数 | 说明 |
|---|---|
| value | 值，通常使用v-model绑定 |
| inline | Boolean，是否设置为行元素，默认为true |
| append-to-body | 是否将下拉选项添加到body标签中 |
| multiple | 是否可多选 |
| placeholder | 未选中状态下的提示 |
| clearable | Boolean，可否清空，默认false |
| excludeId | 需要被排除选中的岗位ID |
# MenuSelect/菜单选择器
<MenuSelect placeholder="请选择菜单" v-model="menuId" :inline="false"/>
参数说明
| 参数 | 说明 |
|---|---|
| value | 值，通常使用v-model绑定 |
| inline | Boolean，是否设置为行元素，默认为true |
| append-to-body | 是否将下拉选项添加到body标签中 |
| placeholder | 未选中状态下的提示 |
| clearable | Boolean，可否清空，默认false |
| excludeId | 需要被排除选中的菜单ID |
# LocationSelect/地区选择器
注：定制了地区管理模块后才有此组件
<LocationSelect
:province-id.sync="provinceId"
:city-id.sync="cityId"
:area-id.sync="areaId"
:level="3"
placeholder="请选择地区"
/>
2
3
4
5
6
7
参数说明
| 参数 | 说明 |
|---|---|
| province-id | 省ID，添加.sync修复符可自动更新数据 |
| city-id | 市ID，添加.sync修复符可自动更新数据 |
| area-id | 区ID，添加.sync修复符可自动更新数据 |
| level | 等级，1省，2市，3区，默认为区 |
| clearable | 是否可清空 |
| placeholder | 未选中状态下的提示 |
| @change | 发生变化时触发 |
# Value/值加载
有时候你可能希望某一个值存在加载效果，那么你可以使用此组件来实现。你可以在线上演示 (opens new window)/服务监测模块预览效果。
<Value :data="data" prop="cpu.physicalCount"/>
参数说明
| 参数 | 说明 |
|---|---|
| data | 值归属对象 |
| prop | 值属性 |
| suffix | 后缀 |
| handler | 值处理函数，接收参数value |
# Light/光球
光球用于表示紧急状态。你可以在线上演示 (opens new window)/实用组件模块预览效果。
<Light :warn="" :danger="" :mini=""/>
参数说明
| 参数 | 说明 |
|---|---|
| warn | Boolean，是否展示为警告 |
| danger | Boolean，是否展示为紧急（或危险） |
| mini | mini大小，宽高为12px，默认为16px |
当warn和danger同时为true时优先使用danger。