система инит
This commit is contained in:
Artyom Tsyrulnikov
194
src/components/TemplateManager/TemplateEditor.tsx
Normal file
194
src/components/TemplateManager/TemplateEditor.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { ArrowLeft, Save, Upload } from 'lucide-react';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import * as XLSX from 'xlsx';
|
||||
import { Template, TemplateElement } from '../../types/template';
|
||||
import DualSpreadsheet from '../DualSpreadsheet/DualSpreadsheet';
|
||||
import { Button } from '../ui/button';
|
||||
import { ElementConstructor } from './ElementConstructor';
|
||||
|
||||
interface TemplateEditorProps {
|
||||
template: Template;
|
||||
onSave: (template: Template) => void;
|
||||
onCancel: () => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export const TemplateEditor: React.FC<TemplateEditorProps> = ({
|
||||
template,
|
||||
onSave,
|
||||
onCancel,
|
||||
onBack,
|
||||
}) => {
|
||||
const [editedTemplate, setEditedTemplate] = useState<Template>(template);
|
||||
const [excelData, setExcelData] = useState<Record<string, any>>(template.excelData || {});
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = new Uint8Array(e.target?.result as ArrayBuffer);
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
|
||||
// Читаем первый лист
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[firstSheetName];
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
||||
|
||||
// Преобразуем в формат для нашей системы
|
||||
const formattedData: Record<string, any> = {};
|
||||
|
||||
(jsonData as any[][]).forEach((row, rowIndex) => {
|
||||
row.forEach((cell, colIndex) => {
|
||||
if (cell !== undefined && cell !== null && cell !== '') {
|
||||
const cellName = String.fromCharCode(65 + colIndex) + (rowIndex + 1);
|
||||
formattedData[cellName] = cell;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setExcelData(formattedData);
|
||||
setEditedTemplate(prev => ({
|
||||
...prev,
|
||||
excelFile: file,
|
||||
excelData: formattedData,
|
||||
updatedAt: new Date(),
|
||||
}));
|
||||
|
||||
// Принудительно обновляем данные в таблице
|
||||
setTimeout(() => {
|
||||
setExcelData({...formattedData});
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('Ошибка при чтении Excel файла:', error);
|
||||
alert('Ошибка при чтении Excel файла');
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
};
|
||||
|
||||
const handleElementAdd = (element: TemplateElement) => {
|
||||
setEditedTemplate(prev => ({
|
||||
...prev,
|
||||
elements: [...prev.elements, element],
|
||||
updatedAt: new Date(),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleElementUpdate = (elementId: string, updates: Partial<TemplateElement>) => {
|
||||
setEditedTemplate(prev => ({
|
||||
...prev,
|
||||
elements: prev.elements.map(el =>
|
||||
el.id === elementId ? { ...el, ...updates } : el
|
||||
),
|
||||
updatedAt: new Date(),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleElementDelete = (elementId: string) => {
|
||||
setEditedTemplate(prev => ({
|
||||
...prev,
|
||||
elements: prev.elements.filter(el => el.id !== elementId),
|
||||
updatedAt: new Date(),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(editedTemplate);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-gray-50">
|
||||
{/* Заголовок */}
|
||||
<div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onClick={onBack}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-gray-800">
|
||||
Редактирование шаблона: {editedTemplate.name}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Настройте Excel шаблон и создайте элементы интерфейса
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleSave} className="flex items-center gap-2">
|
||||
<Save className="h-4 w-4" />
|
||||
Сохранить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Основной контент */}
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
{/* Загрузка Excel и таблицы */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Панель загрузки Excel */}
|
||||
<div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-sm font-medium text-gray-700">
|
||||
Excel шаблон:
|
||||
</div>
|
||||
{editedTemplate.excelFile ? (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<Upload className="h-4 w-4" />
|
||||
<span>{editedTemplate.excelFile.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500">Файл не загружен</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".xlsx,.xls"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
{editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Таблицы */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<DualSpreadsheet
|
||||
templateData={{ Report: excelData }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Конструктор элементов */}
|
||||
<div className="h-80 border-t border-gray-200 bg-white flex-shrink-0">
|
||||
<ElementConstructor
|
||||
elements={editedTemplate.elements}
|
||||
onElementAdd={handleElementAdd}
|
||||
onElementUpdate={handleElementUpdate}
|
||||
onElementDelete={handleElementDelete}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user