通用详情确认对话框 (confirmWithDetails) 使用指南

1. 概述

confirmWithDetails 是一个全局的模态对话框函数，用于显示包含详细信息和强警告的确认提示。它旨在替代简单 confirm，为用户提供更清晰、更美观、更安全的交互体验，尤其适用于删除、关闭等危险操作。

此函数通过 proxy.$modal.confirmWithDetails 在组件中调用。

2. 使用场景

• 执行危险操作（如删除、强制关闭）前，需要用户进行二次确认。
• 需要清晰地列出操作将影响的一个或多个具体项目（如工单标题、文件名等）。
• 需要向用户展示一个明确的、不可忽视的警告信息。

3. 如何使用

通过调用 proxy.$modal.confirmWithDetails(options) 来使用。函数返回一个 Promise，如果用户点击确认，Promise 会 resolve；如果用户点击取消或关闭对话框，Promise 会 reject。

async function handleSomeAction(items) {
  try {
    await proxy.$modal.confirmWithDetails({
      title: '确认操作',
      message: '您确定要执行这个操作吗？',
      details: items.map(item => ({ title: `名称：${item.name}`, code: `ID：${item.id}` })),
      warning: '请注意，此操作一旦执行将无法撤销。',
      type: 'warning', // or 'error' for more severe warnings
      confirmButtonText: '我确定',
    });

    // 用户点击了确认，执行后续逻辑
    console.log('用户已确认');
    // ... call your API
  } catch (error) {
    // 用户点击了取消
    console.log('用户已取消操作');
  }
}

4. 参数详解

函数接收一个 options 对象作为参数，包含以下字段：

5. 示例

示例1：简单的警告确认

proxy.$modal.confirmWithDetails({
  title: '发布通知',
  message: '确定要向所有用户发布此通知吗？',
  warning: '此操作会立即触达所有在线用户。',
  type: 'info',
  confirmButtonText: '立即发布',
});

示例2：带列表的删除确认（同工单删除）

const itemsToDelete = [
  { title: '工单：修复打印机', code: 'WO-2023-001' },
  { title: '工单：更换服务器硬盘', code: 'WO-2023-002' },
];

proxy.$modal.confirmWithDetails({
  title: '危险操作警告',
  message: '是否确认删除以下工单？',
  details: itemsToDelete,
  warning: '此操作将永久删除工单及其所有关联数据，此过程不可逆。',
  type: 'error',
  confirmButtonText: '确定删除',
});

示例3：只显示详情和警告

proxy.$modal.confirmWithDetails({
  title: '权限变更',
  details: ['用户A -> 管理员', '用户B -> 观察员'],
  warning: '请仔细核对权限变更，保存后立即生效。',
  type: 'warning',
});