# 实用组件

以下提到的所有实用组件均在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>
1
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>
1
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>
1
2
3

参数说明

参数 说明
roles 角色数组,满足其中一个表示视图存在访问权限
permissions 权限数组,满足其中一个表示视图存在访问权限

如果同时存在roles和permissions,表示必须满足其中一个role和其中一个permission。

# Pagination/分页器

分页器用于实现列表分页功能,基于element-ui实现。内置的分页器是为了使得网页所有的分页保持一致而存在。所以,您应该尽可能的使用它来完成分页。

<pagination
  :pagination="tableData.pagination"
  @size-change="handleSizeChange"
  @current-change="handlePageChange"
></pagination>
1
2
3
4
5

参数说明

参数 说明
pagination 分页对象,来自BaseTable.vue组件,详见分页-删除-批量删除的实现
@size-change 当页容量发生变化时触发
@current-change 当页码发生变化时触发

# SearchFormCollapse/搜索表单收缩

如果你希望你的搜索表单可以进行收缩,那么此组件可以满足你的需求。

<SearchFormCollapse slot="search-form">
  <el-form ref="searchForm">...</el-form>
</SearchFormCollapse>
1
2
3

注:原本放在el-form上的slot属性需要移动至SearchFormCollapse组件上。

# ColumnDetail/列详情

当某一个有限的空间要展示很多内容时,您可以采用此组件来完成,可提高用户体验。你可以在线上演示 (opens new window)/操作日志模块预览效果。

<ColumnDetail :content="content"/>
1

参数说明

参数 说明
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>
1
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"/>
1

参数说明

参数 说明
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"/>
1

参数说明

参数 说明
value 值,通常使用v-model绑定
inline Boolean,是否设置为行元素,默认为true
append-to-body 是否将下拉选项添加到body标签中
multiple 是否可多选
placeholder 未选中状态下的提示
clearable Boolean,可否清空,默认false
excludeId 需要被排除选中的岗位ID
<MenuSelect placeholder="请选择菜单" v-model="menuId" :inline="false"/>
1

参数说明

参数 说明
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="请选择地区"
/>
1
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"/>
1

参数说明

参数 说明
data 值归属对象
prop 值属性
suffix 后缀
handler 值处理函数,接收参数value

# Light/光球

光球用于表示紧急状态。你可以在线上演示 (opens new window)/实用组件模块预览效果。

<Light :warn="" :danger="" :mini=""/>
1

参数说明

参数 说明
warn Boolean,是否展示为警告
danger Boolean,是否展示为紧急(或危险)
mini mini大小,宽高为12px,默认为16px

当warn和danger同时为true时优先使用danger。