<next-body-viewer />

Controller：NextBodyController
集成组件：<partition-container />

基本介绍

<next-body-viewer /> 是通用编辑视图组件，一般用于定义编辑视图页面。

如何使用

<next-body-viewer :options="options" />

参数

1. options： 是编辑视图的选项参数。

options

options 是组织编辑视图的选项参数，必填。以下是 options 的默认参数值：

export default {
  // 用于获取基础配置信息
  getBaseConfig () {
    return {
      // options 作用域，保留字段
      scope: '',
      // 列表头部 icon
      icon: 'ni-menuicon-default',
      // 列表头部 title
      title: '',
      // 头部 information 的数据来源
      informationBy: 'props.data'
    }
  },
  // 用于获取 partition-container 的默认配置
  getPartitionConfig: () => null,
  // 用于获取统一的props
  getUnifyProps: null,
  // 获取初始化数据
  getContentData: () => null,
  // 获取页面顶部信息
  getHeaderRows: () => [],
  // 获取页面底部按钮
  getFooterMenus: () => null,
  // 确认事件
  onConfirm: () => null,
  // 取消事件
  onCancel: (nvt) => nvt.jumpTo(-1, { close: true })
}

options配置

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

getBaseConfig

该执行函数用于获取基础配置信息。默认值：

// 用于获取基础配置信息
function getBaseConfig () {
  return {
    // options 作用域，保留字段
    scope: '',
    // 列表头部 icon
    icon: 'ni-menuicon-default',
    // 列表头部 title
    title: '',
    // 头部 information 的数据来源
    informationBy: 'props.data'
  }
}

getPartitionConfig

该函数用于获取 partition-container 的默认配置。查看>

getUnifyProps

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

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

function getUnifyProps (nvt) {
  return null
}

getContentData

该执行函数用于获取页面渲染需要的数据。

function getContentData (nvt) {
  return {
    // ...数据
    loading: false, // 固定返回字段, 组件内部状态
    loaded: true // 固定返回字段, 组件内部状态
  }
}

getHeaderRows

该执行函数用于获取页面顶部信息。

function getHeaderRows (nvt) {
  return []
}

getFooterMenus

该执行函数用于获取页面底部按钮列表。

function getFooterMenus (nvt) {
  return nvt.menus
}

onConfirm

该执行函数用于页面默认底部按钮的确认回调事件。

function onConfirm (nvt) {
}

onCancel

该执行函数用于页面默认底部按钮的取消回调事件。

function onCancel (nvt) {
  return nvt.jumpTo(-1, { close: true })
}

如何实现

props

任意选项回调中，均可使用 nvt.props 获取 props。

init

NextCollectionController 使用 init 单例函数进行初始化。

单例函数

因为是单例函数，所以可以直接调用函数检测等待初始化完毕。

await controller.init()
// 初始化完毕后执行

执行顺序

init 内部的执行内容/顺序如下：

// 初始化 Actuator
await this._initActuator()

// 初始化props
// 【hook】 getUnifyProps
await this._initProps()

// 初始化config
// 【hook】 getBaseConfig
await this._initConfig()

getContentData

NextCollectionController 使用 getContentData 单例函数获取页面渲染需要的数据。

任意选项回调中，均可使用 nvt.getContentData 获取页面渲染数据。

单例函数

因为是单例函数，所以可以直接调用函数检测等待页面渲染数据加载完毕。

const state = await controller.getContentData()
// 渲染数据加载完毕后执行

partition-container

组件内部集成 <partition-container /> 组件，作为详情管理器。