# 实用组件

以下提到的所有实用组件均在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 当页码发生变化时触发

# 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 是否展示

# TwoFAWindow/2FA认证窗口

<TwoFAWindow ref="twoFAWindow"></TwoFAWindow>
1

参数说明

参数 说明
title 标题,默认'安全验证'
message 更多消息内容
confirmText 确认按钮文案
cancelText 取消按钮文案
width 宽度,默认480px

方法说明

方法名称 说明
open 打开窗口

# SearchFormCollapse/搜索条件表单收缩

当一个列表中的搜索条件过多,会将页面撑高,使得页面不美观。SearchFormCollapse组件可以使搜索条件收缩起来以获得更多的列表展示空间。

<!-- 如果是基于TableLayout的列表页面,搜索条件部分需要添加slot="search-form" -->
<SearchFormCollapse slot="search-form">
  <!-- 搜索表单 -->
  <el-form ref="searchForm" :model="searchForm" label-width="100px" inline>
  </el-form>
</SearchFormCollapse>
1
2
3
4
5
6

# NotAllow/不允许访问

用于访问不允许访问的页面时做提示

<NotAllow>
  自定义内容,无自定义内容时采用默认内容展示
</NotAllow>
1
2
3

# PasswordInput/密码输入框

部门属性仅chrome内核和safari支持

通常密码框浏览器会自动装载密码,提交时会提示记住密码。但对于始终都不允许自动填充的密码框,例如2FA认证的密码,这就需要对密码框做进一步处理。这就是PasswordInput的作用。

<PasswordInput v-model="password"/>
1

参数说明

参数 说明
withShowPassword 是否允许显示密码操作,默认为true
withoutAutoFill 不自动填充,仅chrome内核和safari支持,默认为true
maxlength 最大长度

# ImportButton/导入按钮

转为导入制作的组件,点击导入按钮后,自动弹出导入窗口,并根据参数自动完成导入和下载模版功能。

<ImportButton
  text="导入部门"
  template-name="部门.xlsx"
  template-path="/template/department.xlsx"
  action="/system/department/import"
  @success="search"
/>
1
2
3
4
5
6
7

参数说明

参数 说明
text 导入按钮的文案
templatePath 模版地址
templateName 下载后的模版文件名称
action 导入接口地址

# TreeSelect/树选择器

系统内置的岗位选择器、菜单选择器、部门选择器等都是通过树选择器来完成的,详情请查阅vue-treeselect组件 (opens new window)

# DictDataSelect/字典数据选择器

注:定制了字典管理模块后才有此组件

<DictDataSelect code="sex"/>
1

参数说明

参数 说明
code 字典编码
placeholder 空提示,默认"请选择"
inline Boolean,是否设置为行元素,默认为true
disabled Boolean,是否禁用,默认false
placeholder 未选中状态下的提示
clearable Boolean,可否清空,默认false

# 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。

# EmptyTip/空提示

当我们需要一个空提示时,则可以使用EmptyTip组件来完成,这样可以达到空提示高度统一。用法如下

<!-- 默认展示"暂无数据" -->
<EmptyTip/>
1
2
<!-- 自定义提示内容 -->
<EmptyTip>空空如也</EmptyTip>
1
2

# Loading/加载中

当我需要一个加载中的过渡提示时,则可以使用Loading组件来完成。用法如下

<!-- 默认展示加载图标和"加载中..." -->
<Loading/>
1
2
<!-- 自定义提示内容 -->
<Loading>加载中,请稍后...</Loading>
1
2