<next-tab-block-collection />

Controller：CollectionController

基本介绍

<next-tab-block-collection /> 是嵌入在 <n-tab-block /> 中的列表视图组件。

如何使用

<next-tab-block-collection :name="name" :options="options" :params="params" :refer="refer" />

参数

1. name： <n-tab-block /> 的名称。
2. options： 列表视图的选项参数。
3. params： 组件参数。
4. refer： 组件参照内容。

name

name 是 <n-tab-block /> 的名称。会显示在列表卡片顶部。

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,
      // 表格 props
      tableProps: {
        // 表格 允许拖动表头
        hasResize: true,
        // 表格 selection 宽度
        selectionWidth: 41,
        // 表格 operation 宽度
        operationWidth: 104
      }
    }
  },
  // 用于获取统一的props
  getUnifyProps: null,
  // 用于获取默认参数
  getDefaultParams: null,
  // 用于获取筛选项配置
  getFilterInputs: () => [],
  // 用于获取表格的列配置项（优先于外部的columns参数）
  getColumns: null,
  // 用于获取列表数据
  getDataList: () => ({ dataList: [] }),
  // 用于获取列表数据的合计概况
  getDataListSummary: null,
  // 用于刷新指定数据
  getDataListSync: () => [],
  // 用于获取顶部操作菜单
  getHeaderMenus: () => [],
  // 用于获取表格数据操作菜单
  getDataMenus: null,
  // 用于获取表格所选数据操作菜单
  getSelectionMenus: null,
  // 用于数据点击事件的回调
  onDataClick: null
}

options

在 NextCollectionController 控制器中，会将默认options与外部传入的 options 进行合并。

params

params 是组件参数，会注入到请求参数中。

refer

refer 是组件参照内容，可用于获取外部数据。
在任意事件中均可使用 nvt.props.refer 获取当前函数的返回值。

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,
      // 表格 selection 列宽度
      selectionWidth: 41,
      // 表格 operation 列宽度
      operationWidth: 104
    }
  }
}

getUnifyProps

该执行函数用于获取统一的props。抹平由于不同入口导致的参数差异。

在任意事件中均可使用 nvt.props 获取当前函数的返回值。

function getUnifyProps (nvt) {
    return null
}

getDefaultParams

该执行函数用于获取默认参数，会将页面传入的 nvt.params 参数传给执行函数。

返回值将注入到组件参数。

function getDefaultParams (nvt) {
    // 页面跳转携带的参数
    // nvt.params
    return nvt.params
}

getFilterInputs

该执行函数用于获取筛选项配置（支持异步函数）。

返回值为可用于 n-filter 组件的 inputs 参数值：

function getFilterInputs (nvt) {
    return [
      {
        label: '模糊搜索',
        type: 'search',
        clearable: true,
        name: 'QueryKeywords',
        placeholder: '请输入物料型号',
        filterHidden: false
      }
    ]
}

getColumns

该执行函数用于获取表格的列配置项。
优先于外部的 columns 参数，即定义该函数后，将忽略外部的 columns 参数。

返回值与外部 columns 相同：

function getFilterInputs (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)
}

refresh刷新

current

刷新列表，一般用于新建，轻量编辑等场景。

在 menu.onClick 回调中，均可使用 nvt.refresh.current() 即可刷新列表数据。
列表数据刷新后，会以 dataList 作为标准，自动更新 selection 中的相同数据。如果数据在 dataList 中不存在，则不更新。

// hook：getDataList
nvt.refresh.current()

force

刷新列表，一般用于新建，重度编辑，需要强制更新数据状态的场景。

在 menu.onClick 回调中，均可使用 nvt.refresh.force() 即可刷新列表数据。
列表数据刷新后，会以 dataList 作为标准，自动更新 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()

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()