<next-collection-viewer />
Controller：NextCollectionController
集成组件：<partition-container />
基本介绍
<next-collection-viewer /> 是通用列表视图组件，一般用于定义列表视图页面。
如何使用
<next-collection-viewer :options="options" :columns="columns" />参数
options： 是列表视图的选项参数。columns： 是列表表格的列配置项。
options
options 是组织列表视图的选项参数，必填。以下是 options 的默认参数值：
export default {
// 用于获取基础配置信息
getBaseConfig: () => {
return {
// options 作用域，保留字段
scope: '',
// 列表头部 icon
icon: 'ni-menuicon-default',
// 列表头部 title
title: '',
// 列表数据id的键名
idKey: 'id',
// 是否有页码总数
hasTotal: true,
// 列表单页数据长度, -1时隐藏页码组件
pageSize: 50,
// 自动刷新（分钟）
autoRefresh: 0,
// 动态列表样式
classIndex: null,
// 自定义表格的参数
tableProps: {
// 允许拖动表格表头
hasResize: true,
// 表格自动占满页面
fillHeight: true,
// 表格等级样式
level: 'strong',
// 表格 selection 列宽度
selectionWidth: 41,
// 表格 operation 列宽度
operationWidth: 104
}
}
},
// 用于获取 partition-container 的默认配置
getPartitionConfig: () => null,
// 用于获取统一的props
getUnifyProps: () => null,
// 用于获取默认参数
getDefaultParams: () => null,
// 用于获取筛选项配置
getFilterInputs: () => [],
// 用于获取表格的列配置项（优先于外部的columns参数）
getColumns: () => null,
// 用于获取列表数据
getDataList: () => ({ dataList: [] }),
// 用于刷新指定数据
getDataListSync: () => [],
// 用于获取列表数据的合计概况
getDataListSummary: null,
// 用于获取顶部操作菜单
getHeaderMenus: () => [],
// 用于获取表格数据操作菜单
getDataMenus: null,
// 用于获取表格所选数据操作菜单
getSelectionMenus: null,
// 用于数据点击事件的回调
onDataClick: null,
// 获取详情组件
getDetailComponent: null
}columns
columns 是列表表格的列配置项，如果已在 options.getColumns 中定义，则可以忽略该参数。
columns 允许以下两种类型：
Array简单列配置项，同n-table中的columns。Object带缓存的列配置项：{ name, data }name：用于定义缓存的id，单文件中可使用@CURRENT_PATH@快速配置。data：用于定义实际的列配置内容，同上面的Array类型。
options配置
在 NextCollectionController 控制器中，会将默认options与外部传入的 options 进行合并。
getBaseConfig
该执行函数用于获取基础配置信息。默认值：
// 用于获取基础配置信息
function getBaseConfig () {
return {
// options 作用域，保留字段
scope: '',
// 列表头部 icon
icon: 'ni-menuicon-default',
// 列表头部 title
title: '',
// 列表数据id的键名
idKey: 'id',
// 是否有页码总数
hasTotal: true,
// 列表单页数据长度, -1时隐藏页码组件
pageSize: 50,
// 自动刷新（分钟）
autoRefresh: 0,
// 动态列表样式
classIndex: null,
// 自定义表格的参数
tableProps: {
// 允许拖动表格表头
hasResize: true,
// 表格自动占满页面
fillHeight: true,
// 表格等级样式
level: 'strong',
// 表格 selection 列宽度
selectionWidth: 41,
// 表格 operation 列宽度
operationWidth: 104
// virtualCount: 30
}
}
}getPartitionConfig
该函数用于获取 partition-container 的默认配置。查看>
getUnifyProps
该执行函数用于获取统一的props。抹平由于不同入口导致的参数差异。
在任意事件中均可使用 nvt.props 获取当前函数的返回值。
function getUnifyProps (nvt) {
return null
}getDefaultParams
该执行函数用于获取默认参数，会将页面跳转携带的参数作为 nvt.params 参数传给执行函数。
返回值可包含以下：
FilterParamsDefault：默认的筛选过滤值FilterParams：筛选过滤值SourceParams：资源值（后期将进行调整）
function getDefaultParams (nvt) {
// 页面跳转携带的参数
// nvt.params
return {
FilterParams: {
StorageId: '1468a59a-0f9f-4ef2-a98c-923fbbbb0fcc'
}
}
}getFilterInputs
该执行函数用于获取筛选项配置（支持异步函数）。
返回值为可用于 n-filter 组件的 inputs 参数值：
function getFilterInputs (nvt) {
return [
{
label: '模糊搜索',
type: 'search',
clearable: true,
name: 'QueryKeywords',
placeholder: '请输入物料型号',
filterHidden: false
}
]
}getColumns
该执行函数用于获取表格的列配置项。
优先于外部的 columns 参数，即定义该函数后，将忽略外部的 columns 参数。
返回值与外部 columns 相同：
function getColumns (nvt) {
return {
name: '@CURRENT_PATH@',
data: [
{
title: '状态',
key: 'StatusStr',
width: 80
}
]
}
}getDataList
该执行函数用于获取列表数据（支持异步函数）。
返回值需要是包含 dataList 的分页数据类型。
function getDataList (nvt) {
// 请求参数
// nvt.params
return {
index: 1,
total: 0,
dataList: [],
hasMore: false
}
}getDataListSummary
该执行函数用于获取列表数据的合计概况。
返回值为table的sum参数。
function getDataListSummary (nvt) {
// 当前参数
// nvt.params
return {}
}getDataListSync
该执行函数用于刷新指定数据。
返回值需要是数组。
function getDataListSync (nvt) {
// 需要的数据id
// nvt.getIds()
return []
}getHeaderMenus
该执行函数用于获取顶部操作菜单（支持异步函数）。
返回值是 menus 类型。
function getHeaderMenus (nvt) {
return [
{
power: false,
label: '上传质检图片',
quick: 1,
onClick: nvt => console.log(nvt)
}
]
}getDataMenus
该执行函数用于获取表格数据操作菜单（支持异步函数）。
返回值是 menus 类型。
function getDataMenus (nvt) {
return [
{
power: false,
label: '编辑',
quick: 1,
onClick: nvt => console.log(nvt)
}
]
}getSelectionMenus
该执行函数用于获取表格所选数据操作菜单（支持异步函数）。
返回值是 menus 类型。
function getSelectionMenus (nvt) {
return [
{
power: false,
label: '编辑',
quick: 1,
onClick: nvt => console.log(nvt)
}
]
}onDataClick
该执行函数用于数据点击事件的回调。
function onDataClick (nvt) {
console.log(nvt)
}getDetailComponent
该执行函数用于默认详情组件。
function getDetailComponent (nvt) {
return Detail
}refresh刷新
current
刷新列表，一般用于新建，轻量编辑等场景。
在 menu.onClick 回调中，均可使用 nvt.refresh.current() 即可刷新列表数据。
列表数据刷新后，会以 dataList 作为标准，自动更新 side/selection 中的相同数据。如果数据在 dataList 中不存在，则不更新。
// hook：getDataList
nvt.refresh.current()force
刷新列表，一般用于新建，重度编辑，需要强制更新数据状态的场景。
在 menu.onClick 回调中，均可使用 nvt.refresh.force() 即可刷新列表数据。
列表数据刷新后，会以 dataList 作为标准，自动更新 side/selection 中的相同数据。如果数据在 dataList 中不存在，则调用 options.getDataListSync 进行更新。
// hook：getDataList + getDataListSync
nvt.refresh.force()remove
刷新列表，一般用于删除数据等场景。
在 menu.onClick 回调中，均可使用 nvt.refresh.remove() 即可删除当前操作的数据，并刷新列表。
nvt.refresh.remove()viewer
刷新 <next-collection-viewer /> 列表视图组件。
内部是调用了 refreshManager.viewer()
nvt.refresh.viewer()side
刷新 <next-side-viewer /> 详情视图组件的 getContentData。
内部是调用了 refreshManager.side()
nvt.refresh.side()discard
关闭 <next-side-viewer /> 详情视图组件。
内部是调用了 refreshManager.discard()
nvt.refresh.discard()chunk
刷新 <next-side-viewer /> 详情视图组件的 <n-tab-chunk />。
内部是调用了 refreshManager.chunk()
nvt.refresh.chunk()如何实现
props
任意选项回调中，均可使用 nvt.props 获取 props。
init
NextCollectionController 使用 init 单例函数进行初始化。
单例函数
因为是单例函数，所以可以直接调用函数检测等待初始化完毕。
await controller.init()
// 初始化完毕后执行执行顺序
init 内部的执行内容/顺序如下：
// 初始化 Actuator/Action
// 【hook】 getColumns
await this._initActions()
// 初始化props
// 【hook】 getUnifyProps
await this._initProps()
// 初始化参数
// 【hook】 getDefaultParams
await this._initParams()
// 初始化config
// 【hook】 getBaseConfig
await this._initConfig()
// 初始化分页
await this._initPaginate()partition-container
组件内部集成 <partition-container /> 组件，作为详情管理器。