139 lines
3.7 KiB
JavaScript
139 lines
3.7 KiB
JavaScript
import { Modal } from 'antd'
|
||
import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons'
|
||
|
||
/**
|
||
* 标准确认对话框组件
|
||
* @param {Object} options - 对话框配置
|
||
* @param {string} options.title - 标题
|
||
* @param {string|ReactNode} options.content - 内容
|
||
* @param {string} options.okText - 确认按钮文字
|
||
* @param {string} options.cancelText - 取消按钮文字
|
||
* @param {string} options.type - 类型: 'warning', 'danger', 'info'
|
||
* @param {Function} options.onOk - 确认回调
|
||
* @param {Function} options.onCancel - 取消回调
|
||
*/
|
||
const ConfirmDialog = {
|
||
/**
|
||
* 显示删除确认对话框（单个项目）
|
||
*/
|
||
delete: ({ title = '确认删除', itemName, itemInfo, onOk, onCancel }) => {
|
||
Modal.confirm({
|
||
title,
|
||
content: (
|
||
<div>
|
||
<p>您确定要删除以下项目吗？</p>
|
||
<div style={{ marginTop: 12, padding: 12, background: '#f5f5f5', borderRadius: 6 }}>
|
||
<p style={{ margin: 0, fontWeight: 500 }}>{itemName}</p>
|
||
{itemInfo && (
|
||
<p style={{ margin: '4px 0 0 0', fontSize: 13, color: '#666' }}>{itemInfo}</p>
|
||
)}
|
||
</div>
|
||
<p style={{ marginTop: 12, color: '#ff4d4f', fontSize: 13 }}>
|
||
此操作不可恢复，请谨慎操作！
|
||
</p>
|
||
</div>
|
||
),
|
||
okText: '确认删除',
|
||
cancelText: '取消',
|
||
okType: 'danger',
|
||
centered: true,
|
||
icon: <DeleteOutlined style={{ color: '#ff4d4f' }} />,
|
||
onOk,
|
||
onCancel,
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 显示批量删除确认对话框
|
||
*/
|
||
batchDelete: ({ count, items, onOk, onCancel }) => {
|
||
Modal.confirm({
|
||
title: '批量删除确认',
|
||
content: (
|
||
<div>
|
||
<p>您确定要删除选中的 {count} 个项目吗？</p>
|
||
<div
|
||
style={{
|
||
marginTop: 12,
|
||
padding: 12,
|
||
background: '#f5f5f5',
|
||
borderRadius: 6,
|
||
maxHeight: 200,
|
||
overflowY: 'auto',
|
||
}}
|
||
>
|
||
{items.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
style={{
|
||
padding: '6px 0',
|
||
borderBottom: index < items.length - 1 ? '1px solid #e8e8e8' : 'none',
|
||
}}
|
||
>
|
||
<span style={{ fontWeight: 500 }}>{item.name}</span>
|
||
{item.info && (
|
||
<span style={{ marginLeft: 12, fontSize: 13, color: '#666' }}>
|
||
({item.info})
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p style={{ marginTop: 12, color: '#ff4d4f', fontSize: 13 }}>
|
||
此操作不可恢复，请谨慎操作！
|
||
</p>
|
||
</div>
|
||
),
|
||
okText: '确认删除',
|
||
cancelText: '取消',
|
||
okType: 'danger',
|
||
centered: true,
|
||
icon: <DeleteOutlined style={{ color: '#ff4d4f' }} />,
|
||
onOk,
|
||
onCancel,
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 显示警告确认对话框
|
||
*/
|
||
warning: ({ title, content, okText = '确定', cancelText = '取消', onOk, onCancel }) => {
|
||
Modal.confirm({
|
||
title,
|
||
content,
|
||
okText,
|
||
cancelText,
|
||
centered: true,
|
||
icon: <ExclamationCircleOutlined style={{ color: '#faad14' }} />,
|
||
onOk,
|
||
onCancel,
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 显示通用确认对话框
|
||
*/
|
||
confirm: ({
|
||
title,
|
||
content,
|
||
okText = '确定',
|
||
cancelText = '取消',
|
||
okType = 'primary',
|
||
onOk,
|
||
onCancel,
|
||
}) => {
|
||
Modal.confirm({
|
||
title,
|
||
content,
|
||
okText,
|
||
cancelText,
|
||
okType,
|
||
centered: true,
|
||
onOk,
|
||
onCancel,
|
||
})
|
||
},
|
||
}
|
||
|
||
export default ConfirmDialog
|