点击一系列按钮，我们需要弹出二级弹框。当我们确认后，在进行调用接口。

1.为了精简代码，可能我们会将弹框封装成一个工具函数。在 $antdConfirm 中，我们点击确认和取消按钮分别返回 true/false。

export const operationConfirm = function (attr, message) {
  const that = this
  return new Promise((resolve, reject) => {
    that.$antdConfirm({
      title: '提示',
      content: message || `确定要执行${attr}操作吗？`,
      onOk () {
        resolve(true)
      },
      onCancel () {
        resolve(false)
      },
    })
  })
}

2.定义按钮的点击事件

render () {
  <a-button class="m-r-10" type="primary" icon="ordered-list" on-click={this.handleAction.bind(this, 'delete')}>
    删除
  </a-button>
  .....
}

这里传入一个 delete 常量，为了映射后面调用的接口。

import { operationConfirm } from '@/utils/business/util.js'

async handleAction (methodName) {
  if (!this.selection) {
    return this.$antdMessage.warning('您还未选择列表')
  }
  const message = methods[methodName].messsage
  const confirm = await operationConfirm.call(this, message)
  if (confirm) {
    await methods[methodName].handler({ idList: this.selected.split(',')})
    this.$antdMessage.success('操作成功')
    this.$emit('refresh')
  }
}

3.接着就是按钮映射接口的问题了。注意：这里映射的接口的参数是一致的。

import StockInManage from '@/api/modules/stock-in-manage'
const methods = {
  delete: {
    message: '删除',
    handler (params) {
      return StockInManage.delete(params)
    },
  },
  ......
}