<next-tab-block-files />

Controller：NextFilesController

基本介绍

<next-tab-block-files /> 是嵌入在 <n-tab-block /> 中的文件组件。

img.png

如何使用

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

参数

  1. name： <n-tab-block /> 的名称。
  2. options： 文件组件的选项参数。
  3. refer： 外部传入的params

name

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

options

options 是文件组件的选项参数，必填。以下是 options 的默认参数值：


export default {
  getBaseConfig () {
    return {
      // 文件列表数据id的键名
      idKey: 'FileKey',
      // n-tab-block tag-builder属性
      // http://dev1:810/components/tab-block
      tagBuilder: null
    }
  },
  // getDataList 请求参数 内部合并到nvt.params
  getDefaultParams: null,
  // 用于获取上传参数
  getUploadParams: () => ({}),
  // 用于获取列表数据
  getDataList (nvt) {
    // 默认调用公共获取文件列表接口
    return request.getValue('/api/BaseSystem/Uploadfly/GetFileKeyList', nvt.params, {json: true})
  },
  // 用于获取顶部操作菜单
  getHeaderMenus: (nvt) => {
    const { upload } = nvt.menus
    return [upload]
  },
  // 用于获取文件数据操作菜单
  getDataMenus (nvt) {
    const { preview, download } = nvt.menus
    return [preview, download]
  }
}

refer

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

options配置

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

getBaseConfig

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

// 用于获取基础配置信息
function getBaseConfig () {
  return {
    // 文件列表数据id的键名
    idKey: 'FileKey',
    // n-tab-block tag-builder属性 http://dev1:810/components/tab-block
    // 此参数有值使用此参数，否则tag展示文件条数
    tagBuilder: null
  }
}

getDefaultParams

该执行函数用于传入getDataList函数请求参数

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

getDefaultParams () {
  return null
}

getUploadParams

用于获取上传参数

import { ExcelFileExt } from '@/base/constant'
getUploadParams () {
  return {
    // fileMultiple: false, 文件是否多选
    // fileSize: 50, // 文件大小限制, 单位 M
    fileExt: ExcelFileExt,
    fileType: [400, 401, 402],
    original: {
      ObjectID: nvt.props.refer?.id,
      ObjectType: 'SRMTrackInfo'
    }
  }
}

getDataList

该执行函数用于获取文件列表数据（异步函数）。

默认调用 /api/BaseSystem/Uploadfly/GetFileKeyList 公共获取文件列表接口。

返回值为一个Promise对象。

getDataList (nvt) {
  // 默认调用公共获取文件列表接口
  return request.getValue('/api/BaseSystem/Uploadfly/GetFileKeyList', nvt.params, {json: true})
},

getHeaderMenus

该执行函数用于获取上传文件配置按钮

注意：

  • nvt.menus中默认传出公共upload按钮
  • 如果无需显示上传按钮，则getHeaderMenus函数返回空数组即可
  • 上传操作为公共弹窗，api：/api/BaseSystem/Uploadfly/BindFileToBusiness
// 用于获取顶部操作菜单
getHeaderMenus: (nvt) => {
  const {upload} = nvt.menus
  return [upload]
}

getDataMenus

该执行函数用于获取文件操作菜单配置

注意：

  • nvt.menus中默认传出公共preview, download, remove按钮
  • 如要显示按钮，getDataMenus函数返回数组添加对应Key值即可
  • 删除操作，api：/api/BaseSystem/Uploadfly/DeleteFileToBusiness
getDataMenus (nvt) {
  const {preview, download, remove} = nvt.menus
  return [
    preview,
    download,
    remove
  ]
}

refresh刷新

current

刷新文件列表，内部调用getDataList函数

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

如何实现

props

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

init

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

单例函数

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

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

执行顺序

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

import CollectionLiteController from '@/layout/functional/CollectionLiteController'

class NextFilesController extends CollectionLiteController {
  constructor ({ creator, options, refer }) {
    super({ creator, options, refer })
  }
}