139 lines
3.7 KiB
React
139 lines
3.7 KiB
React
|
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
|