EView 支持的类型:有 list,gvp-dashboard,left-right,top-left-right 四种。其中,EView/list 列表组件,设置 template 属性为 list。主要功能如下:

  • 头部
    • 左侧 - 实体LOGO,(上下文名称)实体名称,视图下拉列表,列表设置,列表数据统计以及列表数据筛选条件,视图保存等功能
    • 右侧 - 批量处理按钮(config.batchButtons),显示名称,数据筛选框,列表刷新、报表等按钮,其中,报表按钮配合名为 ListDrawer slot 可实现点击显示右侧抽屉功能
  • table-body
    • 表头 - 支持排序、是否折行显示、筛选,其中,某一列的筛选可以使用默认的筛选,也可通过 config.columns 中的 template 指定 column 的组件或指定 EColumn 组件模版进行筛选
    • 列表的数据展示方式有两种:分页展示和无限滚动展示

如果下面的接口报权限错误,请先登录 Engage 集成环境,并具备管理员的角色。

# 组件接口

名称 位置 描述
config props Object,列表视图通用配置
selectedRows props Object[],选中行,透传给 ListTable 组件
refresh props Number,选中行,刷新时间
sidebarVisible props Boolean,是否显示右边抽屉
changedRows props Object,当分页类型为 infinitscroll时,此字段有效,表示变更的数据,用于无限滚动列表新建、编辑、删除数据后不刷新列表的场景,不设置时,新增、编辑、删除数据都需要调用查询接口刷新数据。字段一 type(string 类型): remove(删除)
pageType props String,'pagination' 分页展示,'infinitscroll' 无限滚动
dataQueryUrl event 列表数据查询url

# Slots

名称 描述
默认 slot 默认 slot 用来放一些 Dialog
列的id 自定义列
batch-buttons 批量处理或上下文无关按钮
inline-buttons 行处理按钮
query-buttons 筛选框后的按钮组,位于头部右下放
loading 分页模式下,数据加载动画
message 没有数据时的提示信息
ListDrawer 右侧抽屉,一般放置一些图表信息,slot-scope="{filter, dataScope, term}"

# config 字段详细说明

名称 描述
entity String,实体,用来查询数据,保存视图等使用,如列表数据查询 url 为: {config.urlPrefix}/v1/{config.entity}/query/{dataScope}
name String,实体名称,在列表头部显示
icon String,实体 logo,也可以直接填写 font icon 名称,列表头部 icon
urlPrefix String,所有数据查询、设置相关接口的 URL 前缀,不需要包含实体名称
context Object,上下文信息,默认点击会导致页面后退。一般要跟 overrideRequestParams 一起使用
overrideRequestParams Object,往请求 body 中加参数
overrideRequestOptions Function,修改请求参数函数,入参是请求参数对象,要求返回请求参数对象,如:(reqOpt) => ({url: reqOpt.url, body: reqOpt.body, headers: {...reqOpt.headers, timestamp: '1592202404353'}})
supportDataScopes String[],支持的数据权限列表。ListView 组件会根据该值自动创建这些值对应的列表视图,其中 profile 代表租户,一般显示为“全部客户”;organization-and-sub 代表我的部门,一般显示为“我部门的客户” ;position-and-sub 代表团队,一般显示为“我团队的客户”;position-current 代表个人,一般显示为“我的客户”
columns Object[],所有的列集合,包括不展示的
  id String,列 Id,用于 slot 等功能中,列自定义时,id 作为具名 slot 的名称
  name String,列名
  field String,对应的字段名称,和查询接口 filter 参数的 items: [{field: 'name', op: 'eq', value: 'xxx'}] 中的 field 字段对应
  dataType String,字段的数值类型,字符串(string)、数字(number)、日期(date)、布尔(boolean)。不同值类型支持的筛选操作不一样,如日期不支持”包含“。
  template String,可以通过 slot 指定 column 的组件,也可以在这里指定 column 要用的 EColumn 模板,EColumn 模版包括 lov、date、pick-list
  templateProps String,和 template 搭配,slot 指定 column 的组件的 props
  visible Boolean,是否展示在表格列中
  sortable Boolean,是否可以排序
  filterable Boolean,是否可以筛选
  termQuery Boolean,是否支持全文检索(模糊查询)
  wordWrap Boolean,是否折行展示
  width Number,默认宽度,像素
batchButtons Object[],支持自定义,批量处理按钮,位于大列表头部右上位置,最多出现三个,超过显示下拉,出现在下拉中,结构为{name: String, icon: String, loadingIcon: String, event: String},name: 按钮名称。如果是行内按钮,则一般不会显示出来;icon:按钮 Icon。行内按钮一般只展示 Icon;loadingIcon: 如果不填,则是用默认的 Loading。如果填入 false,则不显示加载中状态;event:点击时抛出的事件
inlineButtons Object[],支持自定义,行内按钮列表,参考 batchButtons 的定义。行内按钮抛出事件时,事件内容就是所在行记录
queryButtons Object[],支持自定义,头部右下按钮组,参考 batchButtons 的定义。不显示名称,仅仅显示 icon