unis_sip/oms_web/docs/components/ConfirmDialog.md

ConfirmDialog 组件

组件说明

确认对话框组件，基于 Ant Design Modal 封装，提供统一的确认对话框样式和交互。支持单个删除、批量删除、警告确认和通用确认等多种场景。

组件位置

src/components/ConfirmDialog/ConfirmDialog.jsx

API 方法

组件以静态方法的形式提供，无需实例化，直接调用即可。

ConfirmDialog.delete()

显示单个项目删除确认对话框。

参数

参数名	类型	必填	默认值	说明
title	string	否	'确认删除'	对话框标题
itemName	string	是	-	要删除的项目名称
itemInfo	string	否	-	项目附加信息
onOk	function	否	-	确认回调，支持返回 Promise
onCancel	function	否	-	取消回调

使用示例

import ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'

const handleDeleteUser = (record) => {
  ConfirmDialog.delete({
    itemName: `用户名：${record.userName}`,
    itemInfo: `姓名：${record.name}`,
    onOk() {
      return new Promise((resolve) => {
        setTimeout(() => {
          // 执行删除操作
          deleteUser(record.id)
          resolve()
          Toast.success('删除成功', `用户 "${record.userName}" 已成功删除`)
        }, 1000)
      })
    },
  })
}

ConfirmDialog.batchDelete()

显示批量删除确认对话框。

参数

参数名	类型	必填	默认值	说明
count	number	是	-	要删除的项目数量
items	Array	是	-	项目列表
onOk	function	否	-	确认回调，支持返回 Promise
onCancel	function	否	-	取消回调

ItemInfo 对象

属性名	类型	必填	说明
name	string	是	项目名称
info	string	否	项目附加信息

使用示例

const handleBatchDelete = () => {
  const selectedUsers = filteredUsers.filter((u) => selectedRowKeys.includes(u.id))
  const items = selectedUsers.map((user) => ({
    name: user.userName,
    info: user.name,
  }))

  ConfirmDialog.batchDelete({
    count: selectedRowKeys.length,
    items,
    onOk() {
      return new Promise((resolve) => {
        setTimeout(() => {
          const count = selectedRowKeys.length
          const newUsers = filteredUsers.filter((u) => !selectedRowKeys.includes(u.id))
          setFilteredUsers(newUsers)
          setSelectedRowKeys([])
          resolve()
          Toast.success('批量删除成功', `已成功删除 ${count} 个用户`)
        }, 1000)
      })
    },
  })
}

ConfirmDialog.warning()

显示警告确认对话框。

参数

参数名	类型	必填	默认值	说明
title	string	是	-	对话框标题
content	string|ReactNode	是	-	对话框内容
okText	string	否	'确定'	确认按钮文字
cancelText	string	否	'取消'	取消按钮文字
onOk	function	否	-	确认回调
onCancel	function	否	-	取消回调

使用示例

const handleRiskyOperation = () => {
  ConfirmDialog.warning({
    title: '操作警告',
    content: '此操作可能影响系统稳定性，确定要继续吗？',
    okText: '继续操作',
    onOk() {
      // 执行危险操作
      performRiskyOperation()
    },
  })
}

ConfirmDialog.confirm()

显示通用确认对话框。

参数

参数名	类型	必填	默认值	说明
title	string	是	-	对话框标题
content	string|ReactNode	是	-	对话框内容
okText	string	否	'确定'	确认按钮文字
cancelText	string	否	'取消'	取消按钮文字
okType	string	否	'primary'	确认按钮类型（primary/danger）
onOk	function	否	-	确认回调
onCancel	function	否	-	取消回调

使用示例

const handleSubmit = () => {
  ConfirmDialog.confirm({
    title: '提交确认',
    content: '确定要提交当前表单吗？',
    okText: '提交',
    onOk() {
      // 执行提交操作
      submitForm()
    },
  })
}

完整使用示例

单个删除

import ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'
import Toast from '../components/Toast/Toast'

function UserListPage() {
  const handleDeleteUser = (record) => {
    ConfirmDialog.delete({
      itemName: `用户名：${record.userName}`,
      itemInfo: `姓名：${record.name}`,
      onOk() {
        return new Promise((resolve) => {
          setTimeout(() => {
            const newUsers = filteredUsers.filter((u) => u.id !== record.id)
            setFilteredUsers(newUsers)
            resolve()
            Toast.success('删除成功', `用户 "${record.userName}" 已成功删除`)
          }, 1000)
        })
      },
    })
  }

  return (
    <Button onClick={() => handleDeleteUser(user)} danger>
      删除
    </Button>
  )
}

批量删除

function UserListPage() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  const handleBatchDelete = () => {
    const selectedUsers = filteredUsers.filter((u) => selectedRowKeys.includes(u.id))
    const items = selectedUsers.map((user) => ({
      name: user.userName,
      info: user.name,
    }))

    ConfirmDialog.batchDelete({
      count: selectedRowKeys.length,
      items,
      onOk() {
        return new Promise((resolve) => {
          setTimeout(() => {
            const count = selectedRowKeys.length
            const newUsers = filteredUsers.filter((u) => !selectedRowKeys.includes(u.id))
            setFilteredUsers(newUsers)
            setSelectedRowKeys([])
            resolve()
            Toast.success('批量删除成功', `已成功删除 ${count} 个用户`)
          }, 1000)
        })
      },
    })
  }

  return (
    <Button
      onClick={handleBatchDelete}
      disabled={selectedRowKeys.length === 0}
      danger
    >
      批量删除
    </Button>
  )
}

自定义内容

ConfirmDialog.confirm({
  title: '重置密码',
  content: (
    <div>
      <p>确定要重置用户 <strong>{user.userName}</strong> 的密码吗？</p>
      <p style={{ color: '#faad14' }}>新密码将发送到用户邮箱</p>
    </div>
  ),
  okText: '确认重置',
  okType: 'primary',
  onOk() {
    resetPassword(user.id)
  },
})

异步操作处理

const handleDeleteUser = (record) => {
  ConfirmDialog.delete({
    itemName: `用户名：${record.userName}`,
    itemInfo: `姓名：${record.name}`,
    async onOk() {
      try {
        // 调用 API 删除用户
        await api.deleteUser(record.id)

        // 更新本地数据
        const newUsers = filteredUsers.filter((u) => u.id !== record.id)
        setFilteredUsers(newUsers)

        Toast.success('删除成功', `用户 "${record.userName}" 已成功删除`)
      } catch (error) {
        Toast.error('删除失败', error.message)
        throw error  // 阻止对话框关闭
      }
    },
  })
}

特性说明

删除确认样式

• 红色危险图标
• 高亮显示要删除的项目信息
• 红色警告提示"此操作不可恢复，请谨慎操作！"
• 危险样式的确认按钮

批量删除列表

• 最多显示 200px 高度的滚动列表
• 每个项目显示名称和附加信息
• 项目间用分隔线隔开

Promise 支持

• onOk 回调支持返回 Promise
• 异步操作进行时，确认按钮显示 loading 状态
• Promise reject 时，对话框不会关闭
• 适合调用 API 等异步操作

居中显示

• 所有对话框默认垂直居中显示（centered: true）

使用场景

1. 删除确认 - 删除用户、设备、订单等数据前的确认
2. 批量删除 - 批量删除多条数据前的确认
3. 危险操作警告 - 执行可能影响系统的操作前的警告
4. 通用确认 - 提交表单、保存设置等操作的确认
5. 重要操作二次确认 - 任何需要用户明确确认的操作

注意事项

1. 删除操作统一使用红色危险样式，提醒用户谨慎操作
2. onOk 回调支持同步和异步（返回 Promise）两种方式
3. 批量删除时，items 数组会在对话框中完整展示，注意数量控制
4. 对话框内容支持字符串和 React 节点，可以自定义复杂内容
5. 确认按钮文字建议明确操作类型，如"确认删除"、"确认提交"等
6. 配合 Toast 组件使用，提供操作结果反馈
7. 异步操作失败时，throw error 可以阻止对话框关闭