Skip to content

Latest commit

 

History

History
277 lines (228 loc) · 9.32 KB

3-8-ConfirmAction-introduction.md

File metadata and controls

277 lines (228 loc) · 9.32 KB
Raw

简体中文 | English

用途

确认型

  • 操作按钮点击后，显示确认类型的表单
  • 点击确认按钮后，会根据请求的发送情况，展示loading状态
  • 点击取消按钮后，弹窗消失
  • 如果请求发送成功，会在右上角展示操作成功的提示信息，该提示信息几秒后可自动消失
  • 如果请求发送失败，会在表单页的右上角展示错误信息，该提示信息只有点击关闭按钮后才可消失
  • 支持批量操作，在表格中选中多个条目后，可点击表格上方的操作按钮，进行批量操作
  • 使用批量操作时，会对批量选中的资源中不符合操作条件的资源做出提示

ConfirmAction 代码文件

  • src/containers/Action/ConfirmAction/index.jsx

ConfirmAction 属性与函数定义介绍

  • 确认型表单都继承于 ModalAction 组件
  • 代码位置：pages/xxxx/containers/XXXX/actions/xxx.jsx
  • 某些操作，只需要再次确认，无需用户输入更多内容即可，此时可使用该类型的组件，如：关闭云主机
  • 只需要复写部分函数即可完成页面的开发
  • 属性与函数分为以下四种，
    • 必须复写的属性与函数，主要包含：
      • 操作的 ID
      • 操作的标题
      • 操作对应的权限
      • 对是否禁用操作的判定
      • 发送请求的函数
    • 按需复写的函数与属性，主要包含：
      • 资源的名称
      • 请求结果提示语中是否要展示资源名称
      • 是否是异步操作
      • 操作按钮上的文字
    • 无需复写的函数与属性，主要包含：
      • 当前页是否是管理平台页面
    • 基类中的基础函数，主要包含：
      • 渲染页面
      • 对请求状态的展示
      • 对请求结果的展示
    • 更详细与全面的介绍见下

必须复写的属性与函数

  • id

    • 资源操作的 ID

    • 需要具有唯一性，只针对资源的actions中的所有操作具有唯一性即可

    • 必须复写该属性

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      get id() {
  return 'stop';
}

  • title

    • 资源操作的标题

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      get title() {
  return t('Stop Instance');
}

  • actionName

    • 该操作对应的名称

    • 在请求后提示语中使用该名称

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      get actionName() {
  return t('stop instance');
}

  • policy

    • 页面对应的权限，如果权限验证不通过，则不会在资源列表页面显示该操作按钮 (此处填写符合openstack规范的policy)

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      policy = 'os_compute_api:servers:stop';

  • aliasPolicy

    • 页面对应的权限，如果权限验证不通过，则不会在资源列表页面显示该操作按钮 (此处填写带模块前缀的自定义policy)

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      aliasPolicy = 'nova:os_compute_api:servers:stop';

  • allowedCheckFunc

    • 判定操作是否需要被禁用

    • 返回Boolean

    • 不需用禁用的按钮，直接写作

      allowedCheckFunc = () => true;

    • 参数item，操作对应的数据

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      • 当云主机满足以下条件才会显示该操作按钮：处于运行中状态，控制台非锁定或是在管理平台
      allowedCheckFunc = (item) => {
  if (!item) {
    return true;
  }
  return isNotLockedOrAdmin(item, this.isAdminPage) && this.isRunning(item);
};

  • onSubmit

    • 该操作的请求函数

    • 操作请求成功后，弹窗会消失，并显示成功提示，几秒后提示会消失

    • 操作失败后，弹窗会消失，并显示错误提示，需要手动关闭提示，提示才会消失

    • 返回Promise

    • 返回表单对应的store中的函数

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      onSubmit = (item) => {
  const { id } = item || this.item;
  return globalServerStore.stop({ id });
};

按需复写的属性与函数

  • buttonText

    • 当操作按钮上的文字与弹窗的标题不一致时，需要复用该属性

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      • 弹窗上的标题是“停止云主机”，按钮上的文字是“停止”
      get buttonText() {
  return t('Stop');
}

  • buttonType

    • 按钮的类型，支持primary、danger、default

    • 默认值为default

    • 以重置系统配置初始值 src/pages/configuration/containers/Setting/actions/Reset.jsx 为例

      get buttonType() {
  return 'primary';
}

  • isDanger

    • 是否属于危险级别的按钮

    • 支持的值为：布尔值 false、true，默认值为false

    • 当按钮要强调操作危险性时，按钮或按钮上的文字一般为红色，使用danger

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      get isDanger() {
  return true;
}

  • passiveAction

    • 批量操作时，如果某个资源不符合条件，会在发送请求前展示提示语，如果提示语需要以被动语态，则需要设置该属性

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      get passiveAction() {
  return t('be stopped');
}

  • isAsyncAction

    • 当前操作是否是异步操作

    • 默认是false

    • 如果是异步操作，提示语为：xxx指令已下发，实例名称：xxx 您可等待几秒关注列表数据的变更或是手动刷新数据，以获取最终展示结果。

    • 如果是同步操作，提示语为：xxx成功，实例名称：xxx。

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      get isAsyncAction() {
  return true;
}

  • messageHasItemName

    • 请求结果的提示语中，是否要包含实例名称
    • 默认值为true
    • 有些资源，不存在名称，则可设置该值为false

  • performErrorMsg

    • 批量操作时，如果某个资源不符合条件，会在发送请求前展示提示语

    • 默认值为无法xxx， 实例名称：xxxx。

    • 以停止云主机src/pages/compute/containers/Instance/actions/Stop.jsx为例

      • 如果选中的云主机不处于运行中状态，提示云主机\"{ name }\"状态不是运行中，无法关闭。
      • 如果选中的云主机有处于锁定状态的，提示云主机\"{ name }\"被锁定，无法关闭。
      • 其他情况，皆提示无法关闭云主机\"{ name }\"
      performErrorMsg = (failedItems) => {
  const instance = isArray(failedItems) ? failedItems[0] : failedItems;
  let errorMsg = t('You are not allowed to stop instance "{ name }".', {
    name: instance.name,
  });
  if (!this.isRunning(instance)) {
    errorMsg = t(
      'Instance "{ name }" status is not in active or suspended, can not stop it.',
      { name: instance.name }
    );
  } else if (!isNotLockedOrAdmin(instance, this.isAdminPage)) {
    errorMsg = t('Instance "{ name }" is locked, can not stop it.', {
      name: instance.name,
    });
  }
  return errorMsg;
};

  • getNameOne

    • 提示语中实例名称的来源

    • 默认是

      getNameOne = (data) => data.name;`

    • 参数data为操作对应的资源数据

    • 以释放浮动 IPsrc/pages/network/containers/FloatingIp/actions/Release.jsx为例

      getNameOne = (data) => data.floating_ip_address;

  • getName

    • 不建议复写该函数
    • 建议复写getNameOne

  • confirmContext

    • 确认弹窗中的提示语

    • 默认为确认{ action }（实例名称：{name}）？

    • 以删除云主机类型src/pages/compute/containers/Flavor/actions/Delete.jsx为例

      • 提示若有云主机正在使用此 flavor，删除会导致云主机的 flavor 数据缺失，确定删除 {name} ？
      confirmContext = (data) => {
  const name = this.getName(data);
  return t(
    "If an instance is using this flavor, deleting it will cause the instance's flavor data to be missing. Are you sure to delete {name}?",
    { name }
  );
};

  • submitErrorMsg

    • 操作失败后的错误提示语
    • 一般不需要复写
    • 默认为无法{action}，实例名称：{name}。

不需要复写的属性与函数

  • isAdminPage
    • 当前页面是否是“管理平台”的页面
  • submitSuccessMsg
    • 请求后生成的成功提示语
  • submitErrorMsgBatch
    • 批量操作请求后生成的报错提示语
  • perform
    • 批量操作时，判定选中的数据是否可操作，如果不可操作，给出相应提示语

基类中的基础函数

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