Skip to content

Latest commit

 

History

History
270 lines (237 loc) · 7.88 KB

3-3-BaseDetail-introduction.md

File metadata and controls

270 lines (237 loc) · 7.88 KB
Raw

简体中文 | English

用途

详情页

  • 各资源详情页的基类
  • 支持返回列表页
  • 支持与列表页一致的数据操作
  • 支持详情页头部的展示与折叠
  • 支持基于 Tab 形式展示的基本信息与相关资源信息
  • 支持上下分层的展示方案
  • 需要复写部分函数即可完成页面的开发

BaseDetail 代码文件

  • src/containers/TabDetail/index.jsx

BaseDetail 属性与函数定义介绍

  • 资源详情继承于 BaseDetail 组件
  • 代码位置：pages/xxxx/containers/XXXX/Detail/index.jsx
  • 只需要复写部分函数即可完成页面的开发
  • 属性与函数分为以下四种，
    • 通常需要复写的属性与函数，主要包含：
      • 详情页的权限
      • 详情页的资源名称
      • 详情页对应的列表页
      • 详情页的操作配置
      • 详情页的上方信息配置
      • 详情页的下方 Tab 页面配置
      • 详情页对应的store
    • 按需复写的函数与属性，主要包含：
      • 详情页操作对应的数据
      • 获取详情数据的参数
      • 获取详情数据的函数
    • 无需复写的函数与属性，主要包含：
      • 当前页是否是管理平台页面
    • 基类中的基础函数，主要包含：
      • 渲染页面
      • 下方列表页数据变动时详情数据的自动刷新
      • 折叠/展开头部信息
    • 更详细与全面的介绍见下

通常需要复写的属性与函数

  • policy:

    • 必须复写该函数 (此处填写符合openstack规范的policy)

    • 页面对应的权限，如果权限验证不通过，则无法请求数据。

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      get policy() {
  return 'volume:get';
}

  • aliasPolicy:

    • 可以复写该函数 (此处填写带模块前缀的自定义policy)

    • 页面对应的权限，如果权限验证不通过，则无法请求数据。

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      get aliasPolicy() {
  return 'cinder:volume:get';
}

  • name

    • 必须复写该函数

    • 页面资源对应的名称。

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      get name() {
  return t('volume');
}

  • listUrl

    • 该详情页对应的资源列表页

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      get listUrl() {
  return this.getRoutePath('volume');
}

  • actionConfigs

    • 配置资源的各种操作

      • 对数据的操作

      • 配置定义在资源的 actions 目录下

      • 一般直接使用与资源列表页相一致的配置即可

      • 以密钥src/pages/compute/containers/Keypair/Detail/index.jsx为例

        import actionConfigs from '../actions';
get actionConfigs() {
  return actionConfigs;
}

  • detailInfos

    • 详情页上方的信息

    • 是一个配置列表

    • 每个配置

      • title，必须项，标题
      • dataIndex，必须项，对应于数据的 Key
      • render，可选项，默认是基于dataIndex来展示内容，使用该属性，可基于render的结果渲染表格内容
      • valueRender，可选项，基于dataIndex及valueRender生成展示数据
        • sinceTime，处理时间，显示成"XX 小时前"
        • keepTime，显示剩余时间
        • yesNo，处理Boolean值，显示成“是”、“否”
        • GBValue，处理大小，显示成"XXXGB"
        • noValue，没有值时，显示成“-”
        • bytes，处理大小
        • uppercase，大写
        • formatSize，处理大小，显示如“2.32 GB”，“56.68 MB”
        • toLocalTime，处理时间，显示如“2021-06-17 04:13:07”
        • toLocalTimeMoment，处理时间，显示如“2021-06-17 04:13:07”

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      get detailInfos() {
  return [
    {
        title: t('Name'),
        dataIndex: 'name',
    },
    {
        title: t('Description'),
        dataIndex: 'description',
    },
    {
        title: t('Shared'),
        dataIndex: 'multiattach',
        valueRender: 'yesNo',
    },
    {
        title: t('Status'),
        dataIndex: 'status',
        render: (value) => volumeStatus[value] || value,
    },
    {
        title: t('Size'),
        dataIndex: 'size',
    },
    {
        title: t('Created At'),
        dataIndex: 'created_at',
        valueRender: 'toLocalTime',
    },
    {
        title: t('Type'),
        dataIndex: 'volume_type',
    },
    {
        title: t('Encrypted'),
        dataIndex: 'encrypted',
        valueRender: 'yesNo',
    },
  ];
}

  • tabs

    • 详情页下方的 Tab 配置

    • 每个 Tab 的配置项：

      • title，Tab 标签上的标题
      • key，每个 Tab 的唯一标识
      • component，每个 Tab 对应的组件，基本都是继承于BaseList的资源列表组件

    • 返回 Tab 配置的列表

    • 页面默认显示 Tab 列表中的第一个component

    • 通常，基础信息继承于BaseDetail类

    • 通常，详情页中的资源列表页直接复用资源列表即可，只需同步处理下列表页内的参数请求即可

      • 以云硬盘详情页中的备份列表src/pages/storage/containers/Backup/index.jsx为例

        updateFetchParamsByPage = (params) => {
  if (this.inDetailPage) {
    const { id, ...rest } = params;
    return {
      volume_id: id,
      ...rest,
    };
  }
  return params;
};

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      get tabs() {
  const tabs = [
  {
    title: t('Detail'),
    key: 'base',
    component: BaseDetail,
  },
  {
    title: t('Backup'),
    key: 'backup',
    component: Backup,
  },
  {
    title: t('Snapshot'),
    key: 'snapshot',
    component: Snapshot,
  },
  ];
  return tabs;
}

  • init

    • 配置 Store 的函数，在这个函数中配置用于处理数据请求的 Store

    • 一般使用的是new XXXStore()形式

    • 以云硬盘src/pages/storage/containers/Volume/Detail/index.jsx为例

      init() {
  this.store = new VolumeStore();
}

按需复写的属性与函数

  • fetchData
    • 详情页中的获取数据的函数
    • 不建议重写该方法
    • 默认使用this.store.fetchDetail获取数据
  • updateFetchParams

    • 更新数据请求的参数

    • 一般配合 store 中的detailDidFetch使用

    • 以云主机src/pages/compute/containers/Instance/Detail/index.jsx为例

      updateFetchParams = (params) => ({
  ...params,
  isRecycleBinDetail: this.isRecycleBinDetail,
});

不需要复写的属性与函数

  • params
    • 路由带有的参数信息
    • 一般用于生成页面请求 API 时的参数
  • id
    • 路由信息中的id
  • isAdminPage
    • 当前页面是否是“管理平台”的页面
  • getRoutePath
    • 生成页面 Url 的函数
    • 如：需要给关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
  • routing
    • 页面对应的路由信息
  • isLoading
    • 当前页面是否在数据更新，更新时会显示 loading 样式
  • tab
    • 当前展示的下方 Tab 页面信息
  • detailData
    • 页面内展示的数据信息
    • 来源于this.store.detail

基类中的基础函数

  • 建议查看代码理解，src/containers/TabDetail/index.jsx