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 | 否 | - | 取消回调 |

#### 使用示例

```jsx
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<ItemInfo> | 是 | - | 项目列表 |
| onOk | function | 否 | - | 确认回调，支持返回 Promise |
| onCancel | function | 否 | - | 取消回调 |

##### ItemInfo 对象

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

#### 使用示例

```jsx
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 | 否 | - | 取消回调 |

#### 使用示例

```jsx
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 | 否 | - | 取消回调 |

#### 使用示例

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

## 完整使用示例

### 单个删除

```jsx
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>
  )
}
```

### 批量删除

```jsx
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>
  )
}
```

### 自定义内容

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

### 异步操作处理

```jsx
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 可以阻止对话框关闭