feat(设备导入): 实现CSV导入预览功能并优化导入流程
This commit is contained in:
zhang1106
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"checkJs": false,
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Modal, Upload, Button, Progress, message } from 'antd';
|
||||
import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import { Modal, Upload, Button, Progress, message, Table, Alert, Space, Spin } from 'antd';
|
||||
import { UploadOutlined, DownloadOutlined, CheckCircleOutlined, WarningOutlined, FileTextOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import { designTokens } from '../../config/theme';
|
||||
|
||||
const modalHeaderStyle = {
|
||||
@@ -17,19 +18,91 @@ const ImportModal = ({
|
||||
onImport,
|
||||
onCancel,
|
||||
}) => {
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [step, setStep] = useState('upload');
|
||||
const [isPreviewing, setIsPreviewing] = useState(false);
|
||||
const [isConfirming, setIsConfirming] = useState(false);
|
||||
const [previewLoading, setPreviewLoading] = useState(false);
|
||||
const [previewData, setPreviewData] = useState(null);
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [importProgress, setImportProgress] = useState(0);
|
||||
const [importPhase, setImportPhase] = useState('');
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
|
||||
const handleImport = async (file) => {
|
||||
try {
|
||||
setIsImporting(true);
|
||||
setImportProgress(0);
|
||||
setImportPhase('正在上传文件...');
|
||||
setImportResult(null);
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
});
|
||||
|
||||
await onImport(file, {
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
const resetState = () => {
|
||||
setStep('upload');
|
||||
setIsPreviewing(false);
|
||||
setIsConfirming(false);
|
||||
setPreviewLoading(false);
|
||||
setPreviewData(null);
|
||||
setSelectedFile(null);
|
||||
setImportProgress(0);
|
||||
setImportPhase('');
|
||||
setImportResult(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetState();
|
||||
onCancel();
|
||||
};
|
||||
|
||||
const handlePreview = async (file) => {
|
||||
const actualFile = file.originFileObj || file;
|
||||
setSelectedFile(actualFile);
|
||||
setPreviewLoading(true);
|
||||
setIsPreviewing(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('csvFile', actualFile);
|
||||
|
||||
const response = await api.post('/devices/import-preview', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
setPreviewData(response.data.data);
|
||||
setStep('preview');
|
||||
} else {
|
||||
message.error(response.data.error || '预览失败');
|
||||
resetState();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('预览失败:', error);
|
||||
message.error(error.response?.data?.error || '预览失败，请检查文件格式');
|
||||
resetState();
|
||||
} finally {
|
||||
setPreviewLoading(false);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleConfirmImport = async () => {
|
||||
if (!selectedFile) {
|
||||
message.error('请先选择文件');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConfirming(true);
|
||||
setImportProgress(0);
|
||||
setImportPhase('正在上传文件...');
|
||||
|
||||
try {
|
||||
await onImport(selectedFile, {
|
||||
onProgress: (progress, phase) => {
|
||||
setImportProgress(progress);
|
||||
setImportPhase(phase);
|
||||
@@ -38,7 +111,8 @@ const ImportModal = ({
|
||||
setImportResult(result);
|
||||
setImportProgress(100);
|
||||
setImportPhase('导入完成');
|
||||
setIsImporting(false);
|
||||
setIsConfirming(false);
|
||||
setStep('result');
|
||||
},
|
||||
onError: (error) => {
|
||||
setImportResult({
|
||||
@@ -50,41 +124,560 @@ const ImportModal = ({
|
||||
errors: [{ row: 0, error: error.message || '导入失败' }],
|
||||
},
|
||||
});
|
||||
setIsImporting(false);
|
||||
setIsConfirming(false);
|
||||
setStep('result');
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
setIsImporting(false);
|
||||
setImportProgress(0);
|
||||
setIsConfirming(false);
|
||||
message.error('导入失败');
|
||||
resetState();
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setImportProgress(0);
|
||||
setImportPhase('');
|
||||
setImportResult(null);
|
||||
setIsImporting(false);
|
||||
onCancel();
|
||||
};
|
||||
|
||||
const requiredFields = deviceFields.filter((f) => f.visible && f.required);
|
||||
const optionalFields = deviceFields.filter((f) => f.visible && !f.required);
|
||||
|
||||
const previewColumns = previewData?.fieldList
|
||||
? previewData.fieldList.map((field) => ({
|
||||
title: field.displayName + (field.required ? ' *' : ''),
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
}))
|
||||
: [
|
||||
{ title: '行号', dataIndex: '_rowNum', key: '_rowNum', width: 60 },
|
||||
{ title: '设备名称', dataIndex: 'name', key: 'name', width: 120 },
|
||||
{ title: '设备类型', dataIndex: 'type', key: 'type', width: 80 },
|
||||
{ title: '品牌', dataIndex: 'model', key: 'model', width: 100 },
|
||||
{ title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber', width: 140 },
|
||||
{ title: '所在机房', dataIndex: 'roomName', key: 'roomName', width: 100 },
|
||||
{ title: '所在机柜', dataIndex: 'rackName', key: 'rackName', width: 100 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 80 },
|
||||
];
|
||||
|
||||
const getRowClassName = (record) => {
|
||||
if (record._hasError) {
|
||||
return 'ant-table-row-error';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const renderUploadStep = () => (
|
||||
<div>
|
||||
<p style={{ color: '#666', marginBottom: '8px' }}>请上传CSV格式的设备数据文件</p>
|
||||
<p style={{ color: '#999', fontSize: '12px', marginBottom: '20px' }}>
|
||||
支持的编码格式：GBK
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '20px',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #f0f0f0',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontWeight: '600', marginBottom: '8px', color: '#333' }}>
|
||||
CSV文件格式要求：
|
||||
</p>
|
||||
<div style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
||||
{requiredFields.length > 0 && (
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<span style={{ color: '#d93025', fontWeight: '500' }}>必填字段：</span>
|
||||
<span style={{ color: '#666', fontSize: '13px' }}>
|
||||
{requiredFields.map((f) => f.displayName).join('、')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{optionalFields.length > 0 && (
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<span style={{ color: '#666', fontWeight: '500' }}>可选字段：</span>
|
||||
<span style={{ color: '#666', fontSize: '13px' }}>
|
||||
{optionalFields.map((f) => f.displayName).join('、')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<ul
|
||||
style={{
|
||||
paddingLeft: '20px',
|
||||
marginBottom: '10px',
|
||||
color: '#666',
|
||||
fontSize: '13px',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
设备类型：server(服务器)、switch(交换机)、router(路由器)、storage(存储设备)、other(其他)
|
||||
</li>
|
||||
<li>状态值：running(运行中)、maintenance(维护中)、offline(离线)、fault(故障)</li>
|
||||
<li>日期格式：YYYY-MM-DD (例如：2023-01-01)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<a href="/api/devices/import-template" download="设备导入模板.csv">
|
||||
<Button
|
||||
icon={<DownloadOutlined />}
|
||||
style={{
|
||||
height: '36px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
border: `1px solid ${designTokens.colors.border.light}`,
|
||||
}}
|
||||
>
|
||||
下载导入模板
|
||||
</Button>
|
||||
</a>
|
||||
<span style={{ color: '#999', fontSize: '12px', marginLeft: '10px' }}>
|
||||
包含示例数据的CSV模板文件（根据当前字段配置生成）
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Upload
|
||||
name="csvFile"
|
||||
accept=".csv"
|
||||
showUploadList={false}
|
||||
beforeUpload={handlePreview}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UploadOutlined />}
|
||||
block
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
color: '#ffffff',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
fontWeight: '500',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
选择CSV文件
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderPreviewStep = () => (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(135deg, #667eea20 0%, #764ba220 100%)',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #667eea40',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
|
||||
<FileTextOutlined style={{ fontSize: '24px', color: '#667eea' }} />
|
||||
<div>
|
||||
<div style={{ fontWeight: '600', color: '#333', fontSize: '15px' }}>
|
||||
{selectedFile?.name || '已选择文件'}
|
||||
</div>
|
||||
<div style={{ color: '#666', fontSize: '13px', marginTop: '2px' }}>
|
||||
共 {previewData?.total || 0} 条记录，已解析 {previewData?.previewCount || 0} 条作为预览
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{previewData?.statistics?.invalid > 0 ? (
|
||||
<Alert
|
||||
type="warning"
|
||||
showIcon
|
||||
icon={<WarningOutlined />}
|
||||
message={`发现 ${previewData.statistics.invalid} 条数据存在错误`}
|
||||
description="错误行已用红色标记，请核对后确认导入"
|
||||
style={{ marginTop: '8px' }}
|
||||
/>
|
||||
) : (
|
||||
<Alert
|
||||
type="success"
|
||||
showIcon
|
||||
icon={<CheckCircleOutlined />}
|
||||
message="数据验证通过"
|
||||
description="所有数据格式正确，可以进行导入"
|
||||
style={{ marginTop: '8px' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 20px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
minWidth: '100px',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{previewData?.statistics?.total || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>总记录数</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 20px',
|
||||
background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
minWidth: '100px',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{previewData?.statistics?.valid || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>有效</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 20px',
|
||||
background: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
minWidth: '100px',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{previewData?.statistics?.invalid || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>无效</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
border: '1px solid #f0f0f0',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
columns={previewColumns}
|
||||
dataSource={previewData?.preview || []}
|
||||
rowKey="_rowNum"
|
||||
rowClassName={getRowClassName}
|
||||
size="small"
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: false,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
}}
|
||||
scroll={{ x: 'max-content' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{previewData?.errors?.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
maxHeight: '150px',
|
||||
overflowY: 'auto',
|
||||
border: '1px solid #ffcccc',
|
||||
borderRadius: '8px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#fff7f7',
|
||||
}}
|
||||
>
|
||||
<h4 style={{ color: '#d93025', marginBottom: '12px', fontWeight: '600', fontSize: '13px' }}>
|
||||
错误详情：
|
||||
</h4>
|
||||
{previewData.errors.slice(0, 10).map((err, index) => (
|
||||
<div key={index} style={{ marginBottom: '8px', fontSize: '13px' }}>
|
||||
<span style={{ fontWeight: 'bold', color: '#d93025' }}>第{err.row}行：</span>
|
||||
<span style={{ color: '#666' }}>{err.errors.join('，')}</span>
|
||||
</div>
|
||||
))}
|
||||
{previewData.errors.length > 10 && (
|
||||
<div style={{ color: '#999', fontSize: '12px', textAlign: 'center' }}>
|
||||
还有 {previewData.errors.length - 10} 条错误未显示...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleConfirmImport}
|
||||
disabled={previewData?.statistics?.invalid > 0}
|
||||
icon={<CheckCircleOutlined />}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: previewData?.statistics?.invalid > 0 ? '#ccc' : designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
color: '#ffffff',
|
||||
fontWeight: '500',
|
||||
}}
|
||||
>
|
||||
确认导入
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderConfirmingStep = () => (
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: '16px',
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
}}
|
||||
>
|
||||
<UploadOutlined spin />
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
margin: '0 0 4px 0',
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
正在导入设备数据
|
||||
</p>
|
||||
<p style={{ margin: 0, color: '#667eea', fontSize: '14px' }}>{importPhase}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Progress
|
||||
percent={importProgress}
|
||||
status="active"
|
||||
strokeColor={{ '0%': '#667eea', '100%': '#764ba2' }}
|
||||
format={() => `${importProgress}%`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderResultStep = () => (
|
||||
<div>
|
||||
<p style={{ marginBottom: '10px', fontWeight: '600' }}>导入完成：</p>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{importResult?.statistics?.total || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>总记录数</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{importResult?.statistics?.success || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>成功</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{importResult?.statistics?.failed || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>失败</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{importResult?.statistics?.errors?.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
maxHeight: 400,
|
||||
overflowY: 'auto',
|
||||
border: '1px solid #ffcccc',
|
||||
borderRadius: '8px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#fff7f7',
|
||||
}}
|
||||
>
|
||||
<h4 style={{ color: '#d93025', marginBottom: '12px', fontWeight: '600' }}>
|
||||
失败记录详情：
|
||||
</h4>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#ffeeee' }}>
|
||||
<th
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
textAlign: 'left',
|
||||
width: '80px',
|
||||
}}
|
||||
>
|
||||
行号
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
失败原因
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{importResult.statistics.errors.map((item, index) => (
|
||||
<tr key={index} style={{ borderBottom: '1px solid #ffcccc' }}>
|
||||
<td
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{item.row || index + 1}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
color: '#d93025',
|
||||
}}
|
||||
>
|
||||
{item.error || '未知错误'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleClose}
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
color: '#ffffff',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
fontWeight: '500',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderLoadingStep = () => (
|
||||
<div style={{ textAlign: 'center', padding: '40px 0' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: '16px', color: '#666' }}>正在解析文件...</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const getStepTitle = () => {
|
||||
switch (step) {
|
||||
case 'upload':
|
||||
return (
|
||||
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
||||
<UploadOutlined style={{ color: '#667eea' }} />
|
||||
导入设备
|
||||
</div>
|
||||
);
|
||||
case 'preview':
|
||||
return (
|
||||
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
||||
<FileTextOutlined style={{ color: '#667eea' }} />
|
||||
导入设备 - 数据预览
|
||||
</div>
|
||||
);
|
||||
case 'confirming':
|
||||
return (
|
||||
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
||||
<UploadOutlined style={{ color: '#667eea' }} />
|
||||
导入设备 - 导入中
|
||||
</div>
|
||||
);
|
||||
case 'result':
|
||||
return (
|
||||
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
||||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||||
导入设备 - 结果
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return '导入设备';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
||||
<UploadOutlined style={{ color: '#667eea' }} />
|
||||
导入设备
|
||||
</div>
|
||||
}
|
||||
title={getStepTitle()}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
footer={null}
|
||||
width={650}
|
||||
width={step === 'preview' ? 900 : 650}
|
||||
destroyOnHidden
|
||||
styles={{
|
||||
header: {
|
||||
@@ -92,294 +685,16 @@ const ImportModal = ({
|
||||
padding: '16px 24px',
|
||||
position: 'relative',
|
||||
},
|
||||
body: { padding: '24px' },
|
||||
body: { padding: step === 'loading' ? '40px 24px' : '24px' },
|
||||
}}
|
||||
>
|
||||
{!isImporting && !importResult ? (
|
||||
<div>
|
||||
<p style={{ color: '#666', marginBottom: '8px' }}>请上传CSV格式的设备数据文件</p>
|
||||
<p style={{ color: '#999', fontSize: '12px', marginBottom: '20px' }}>
|
||||
支持的编码格式：GBK
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '20px',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #f0f0f0',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontWeight: '600', marginBottom: '8px', color: '#333' }}>
|
||||
CSV文件格式要求：
|
||||
</p>
|
||||
<div style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
||||
{requiredFields.length > 0 && (
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<span style={{ color: '#d93025', fontWeight: '500' }}>必填字段：</span>
|
||||
<span style={{ color: '#666', fontSize: '13px' }}>
|
||||
{requiredFields.map((f) => f.displayName).join('、')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{optionalFields.length > 0 && (
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<span style={{ color: '#666', fontWeight: '500' }}>可选字段：</span>
|
||||
<span style={{ color: '#666', fontSize: '13px' }}>
|
||||
{optionalFields.map((f) => f.displayName).join('、')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<ul
|
||||
style={{
|
||||
paddingLeft: '20px',
|
||||
marginBottom: '10px',
|
||||
color: '#666',
|
||||
fontSize: '13px',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
设备类型：server(服务器)、switch(交换机)、router(路由器)、storage(存储设备)、other(其他)
|
||||
</li>
|
||||
<li>状态值：running(运行中)、maintenance(维护中)、offline(离线)、fault(故障)</li>
|
||||
<li>日期格式：YYYY-MM-DD (例如：2023-01-01)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<a href="/api/devices/import-template" download="设备导入模板.csv">
|
||||
<Button
|
||||
icon={<DownloadOutlined />}
|
||||
style={{
|
||||
height: '36px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
border: `1px solid ${designTokens.colors.border.light}`,
|
||||
}}
|
||||
>
|
||||
下载导入模板
|
||||
</Button>
|
||||
</a>
|
||||
<span style={{ color: '#999', fontSize: '12px', marginLeft: '10px' }}>
|
||||
包含示例数据的CSV模板文件（根据当前字段配置生成）
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Upload
|
||||
name="csvFile"
|
||||
accept=".csv"
|
||||
showUploadList={false}
|
||||
beforeUpload={handleImport}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UploadOutlined />}
|
||||
block
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
color: '#ffffff',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
fontWeight: '500',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
选择CSV文件
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
) : isImporting ? (
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: '16px',
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
}}
|
||||
>
|
||||
<UploadOutlined spin />
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
margin: '0 0 4px 0',
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
正在导入设备数据
|
||||
</p>
|
||||
<p style={{ margin: 0, color: '#667eea', fontSize: '14px' }}>{importPhase}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Progress
|
||||
percent={importProgress}
|
||||
status="active"
|
||||
strokeColor={{ '0%': '#667eea', '100%': '#764ba2' }}
|
||||
format={() => `${importProgress}%`}
|
||||
/>
|
||||
</div>
|
||||
) : importResult?.statistics ? (
|
||||
<div>
|
||||
<p style={{ marginBottom: '10px', fontWeight: '600' }}>导入完成：</p>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{importResult.statistics.total || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>总记录数</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{importResult.statistics.success || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>成功</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||||
{importResult.statistics.failed || 0}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>失败</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{importResult.statistics?.errors?.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
maxHeight: 400,
|
||||
overflowY: 'auto',
|
||||
border: '1px solid #ffcccc',
|
||||
borderRadius: '8px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#fff7f7',
|
||||
}}
|
||||
>
|
||||
<h4 style={{ color: '#d93025', marginBottom: '12px', fontWeight: '600' }}>
|
||||
失败记录详情：
|
||||
</h4>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#ffeeee' }}>
|
||||
<th
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
textAlign: 'left',
|
||||
width: '80px',
|
||||
}}
|
||||
>
|
||||
行号
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
失败原因
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{importResult.statistics.errors.map((item, index) => (
|
||||
<tr key={index} style={{ borderBottom: '1px solid #ffcccc' }}>
|
||||
<td
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{item.row || index + 1}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
border: '1px solid #ffcccc',
|
||||
padding: '8px',
|
||||
color: '#d93025',
|
||||
}}
|
||||
>
|
||||
{item.error || '未知错误'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleClose}
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
color: '#ffffff',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
fontWeight: '500',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
{step === 'upload' && renderUploadStep()}
|
||||
{step === 'loading' && renderLoadingStep()}
|
||||
{step === 'preview' && renderPreviewStep()}
|
||||
{step === 'confirming' && renderConfirmingStep()}
|
||||
{step === 'result' && renderResultStep()}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ImportModal);
|
||||
export default React.memo(ImportModal);
|
||||
@@ -73,6 +73,13 @@ export default defineConfig({
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
@@ -85,13 +92,6 @@ export default defineConfig({
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]',
|
||||
compact: true
|
||||
}
|
||||
},
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
|
||||
Reference in New Issue
Block a user