571 lines
17 KiB
JavaScript
571 lines
17 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Table,
|
|
Button,
|
|
Form,
|
|
Input,
|
|
Space,
|
|
message,
|
|
Popconfirm,
|
|
Select,
|
|
Divider,
|
|
Card,
|
|
Typography,
|
|
Upload,
|
|
Modal
|
|
} from 'antd';
|
|
import {
|
|
PlusOutlined,
|
|
DeleteOutlined,
|
|
InboxOutlined,
|
|
UploadOutlined
|
|
} from '@ant-design/icons';
|
|
import { supabaseService } from '@/hooks/supabaseService';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { supabase } from "@/config/supabase";
|
|
|
|
const TYPE = 'project';
|
|
|
|
const ProjectSections = () => {
|
|
const [data, setData] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [editingKey, setEditingKey] = useState('');
|
|
const [form] = Form.useForm();
|
|
const [loadingUnits, setLoadingUnits] = useState(false);
|
|
const [units, setUnits] = useState([]);
|
|
const [formValues, setFormValues] = useState({});
|
|
const [uploadModalVisible, setUploadModalVisible] = useState(false);
|
|
const [currentAddItem, setCurrentAddItem] = useState(null);
|
|
const [pagination, setPagination] = useState({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
});
|
|
const fetchSections = async (page = pagination.current, pageSize = pagination.pageSize) => {
|
|
setLoading(true);
|
|
try {
|
|
const { data: sections, total } = await supabaseService.select('resources', {
|
|
filter: {
|
|
'type': { eq: 'sections' },
|
|
'attributes->>template_type': { eq: TYPE }
|
|
},
|
|
order: {
|
|
column: 'created_at',
|
|
ascending: false
|
|
},
|
|
page,
|
|
pageSize
|
|
});
|
|
|
|
setData(sections || []);
|
|
setPagination(prev => ({
|
|
...prev,
|
|
current: page,
|
|
pageSize,
|
|
total
|
|
}));
|
|
} catch (error) {
|
|
message.error('获取模块数据失败');
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchUnits = async () => {
|
|
setLoadingUnits(true);
|
|
try {
|
|
const { data: units } = await supabaseService.select("resources", {
|
|
filter: {
|
|
type: { eq: "units" },
|
|
"attributes->>template_type": { in: `(${TYPE})` },
|
|
},
|
|
order: {
|
|
column: "created_at",
|
|
ascending: false,
|
|
},
|
|
});
|
|
setUnits(units || []);
|
|
} catch (error) {
|
|
message.error("获取资源类型列表失败");
|
|
console.error(error);
|
|
} finally {
|
|
setLoadingUnits(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchSections(1, pagination.pageSize);
|
|
fetchUnits();
|
|
}, [TYPE]);
|
|
|
|
const handleAdd = () => {
|
|
const newData = {
|
|
id: Date.now().toString(),
|
|
attributes: {
|
|
name: '',
|
|
template_type: TYPE,
|
|
items: [{
|
|
key: uuidv4(),
|
|
url: '',
|
|
title: '',
|
|
unit: '',
|
|
description: ''
|
|
}]
|
|
},
|
|
isNew: true
|
|
};
|
|
setData([newData, ...data]);
|
|
setEditingKey(newData.id);
|
|
form.setFieldsValue(newData.attributes);
|
|
};
|
|
|
|
const handleSave = async (record) => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
const items = form.getFieldValue(['items']) || [];
|
|
|
|
if (!items.length || !items.some(item => item.title)) {
|
|
message.error('请至少添加一个有效的资源项目');
|
|
return;
|
|
}
|
|
|
|
const formattedItems = items.filter(item => item.title).map(item => ({
|
|
url: item.url,
|
|
title: item.title,
|
|
unit: item.unit,
|
|
description: item.description
|
|
}));
|
|
|
|
if (record.isNew) {
|
|
await supabaseService.insert('resources', {
|
|
type: 'sections',
|
|
attributes: {
|
|
name: values.name,
|
|
template_type: TYPE,
|
|
items: formattedItems,
|
|
},
|
|
schema_version: 1
|
|
});
|
|
} else {
|
|
await supabaseService.update('resources',
|
|
{ id: record.id },
|
|
{
|
|
attributes: {
|
|
name: values.name,
|
|
template_type: TYPE,
|
|
items: formattedItems,
|
|
},
|
|
updated_at: new Date().toISOString()
|
|
}
|
|
);
|
|
}
|
|
|
|
message.success('保存成功');
|
|
setEditingKey('');
|
|
fetchSections(pagination.current, pagination.pageSize);
|
|
} catch (error) {
|
|
message.error('保存失败');
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (record) => {
|
|
try {
|
|
await supabaseService.delete('resources', { id: record.id });
|
|
message.success('删除成功');
|
|
if (data.length === 1 && pagination.current > 1) {
|
|
fetchSections(pagination.current - 1, pagination.pageSize);
|
|
} else {
|
|
fetchSections(pagination.current, pagination.pageSize);
|
|
}
|
|
} catch (error) {
|
|
message.error('删除失败');
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
const handleAddUnit = async (unitName) => {
|
|
try {
|
|
await supabaseService.insert("resources", {
|
|
type: "units",
|
|
attributes: {
|
|
name: unitName,
|
|
template_type: TYPE,
|
|
},
|
|
schema_version: 1,
|
|
});
|
|
|
|
message.success("新增资源类型成功");
|
|
fetchUnits();
|
|
return true;
|
|
} catch (error) {
|
|
message.error("新增资源类型失败");
|
|
console.error(error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const handleValuesChange = (changedValues, allValues) => {
|
|
setFormValues(allValues);
|
|
};
|
|
|
|
const handleFileUpload = async (file, addItem) => {
|
|
try {
|
|
const fileExt = file.name.split('.').pop();
|
|
const fileName = `${Date.now()}.${fileExt}`;
|
|
|
|
const { data, error } = await supabase.storage
|
|
.from('file')
|
|
.upload(filePath, file);
|
|
|
|
if (error) throw error;
|
|
|
|
const { data: { publicUrl } } = supabase.storage
|
|
.from('file')
|
|
.getPublicUrl(fileName);
|
|
|
|
let fileType = '';
|
|
if (file.type.startsWith('image/')) {
|
|
fileType = '图片';
|
|
} else if (file.type.startsWith('video/')) {
|
|
fileType = '视频';
|
|
} else if (file.type.includes('pdf')) {
|
|
fileType = 'PDF文档';
|
|
} else {
|
|
fileType = '其他文件';
|
|
}
|
|
|
|
addItem({
|
|
key: uuidv4(),
|
|
url: publicUrl,
|
|
title: `${fileType}-${file.name}`,
|
|
unit: fileType,
|
|
description: '',
|
|
});
|
|
|
|
return true;
|
|
} catch (error) {
|
|
message.error('文件上传失败');
|
|
console.error(error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const renderUploadModal = () => (
|
|
<Modal
|
|
title="上传资源文件"
|
|
open={uploadModalVisible}
|
|
onCancel={() => setUploadModalVisible(false)}
|
|
footer={null}
|
|
>
|
|
<Upload.Dragger
|
|
multiple
|
|
customRequest={async ({ file, onSuccess, onError }) => {
|
|
try {
|
|
const result = await handleFileUpload(file, currentAddItem);
|
|
if (result) {
|
|
onSuccess();
|
|
} else {
|
|
onError();
|
|
}
|
|
} catch (err) {
|
|
onError();
|
|
}
|
|
}}
|
|
onChange={(info) => {
|
|
if (info.file.status === 'done') {
|
|
message.success(`${info.file.name} 上传成功`);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} 上传失败`);
|
|
}
|
|
}}
|
|
>
|
|
<p className="ant-upload-drag-icon">
|
|
<InboxOutlined />
|
|
</p>
|
|
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
|
<p className="ant-upload-hint">支持单个或批量上传</p>
|
|
</Upload.Dragger>
|
|
</Modal>
|
|
);
|
|
|
|
const columns = [
|
|
{
|
|
title: '模块名称',
|
|
dataIndex: ['attributes', 'name'],
|
|
width: 200,
|
|
render: (text, record) => {
|
|
const isEditing = record.id === editingKey;
|
|
return isEditing ? (
|
|
<Form.Item
|
|
name="name"
|
|
style={{ margin: 0 }}
|
|
rules={[{ required: true, message: '请输入模块名称!' }]}
|
|
>
|
|
<Input placeholder="请输入模块名称" />
|
|
</Form.Item>
|
|
) : (
|
|
<span className="font-medium">{text}</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: '资源项目',
|
|
dataIndex: ['attributes', 'items'],
|
|
render: (items, record) => {
|
|
const isEditing = record.id === editingKey;
|
|
if (isEditing) {
|
|
return (
|
|
<Form.List name="items">
|
|
{(fields, { add, remove }) => (
|
|
<div className="space-y-4">
|
|
{fields.map((field, index) => (
|
|
<Card key={field.key} size="small" className="bg-gray-50">
|
|
<div className="grid grid-cols-5 gap-4">
|
|
<Form.Item
|
|
{...field}
|
|
name={[field.name, 'url']}
|
|
rules={[{ required: true, message: '请输入资源链接' }]}
|
|
className="mb-0"
|
|
>
|
|
<Input placeholder="资源链接" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
{...field}
|
|
name={[field.name, 'title']}
|
|
rules={[{ required: true, message: '请输入资源标题' }]}
|
|
className="mb-0"
|
|
>
|
|
<Input placeholder="资源标题" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
{...field}
|
|
name={[field.name, 'unit']}
|
|
className="mb-0"
|
|
>
|
|
<Select
|
|
placeholder="资源类型"
|
|
loading={loadingUnits}
|
|
showSearch
|
|
allowClear
|
|
options={units.map((unit) => ({
|
|
label: unit.attributes.name,
|
|
value: unit.attributes.name,
|
|
}))}
|
|
dropdownRender={(menu) => (
|
|
<>
|
|
{menu}
|
|
<Divider style={{ margin: '8px 0' }} />
|
|
<div style={{ padding: '4px 8px' }}>
|
|
<Input.Search
|
|
placeholder="输入新类型"
|
|
enterButton={<PlusOutlined />}
|
|
onSearch={async (value) => {
|
|
if (!value.trim()) return;
|
|
if (await handleAddUnit(value.trim())) {
|
|
const currentItems = form.getFieldValue('items');
|
|
currentItems[index].unit = value.trim();
|
|
form.setFieldValue('items', currentItems);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
{...field}
|
|
name={[field.name, 'description']}
|
|
className="mb-0"
|
|
>
|
|
<Input placeholder="资源描述" />
|
|
</Form.Item>
|
|
|
|
<Button
|
|
type="text"
|
|
danger
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => remove(field.name)}
|
|
disabled={fields.length === 1}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="dashed"
|
|
onClick={() => add({
|
|
key: uuidv4(),
|
|
url: '',
|
|
title: '',
|
|
unit: '',
|
|
description: ''
|
|
})}
|
|
icon={<PlusOutlined />}
|
|
className="w-full hover:border-blue-400 hover:text-blue-500"
|
|
>
|
|
手动添加资源
|
|
</Button>
|
|
<Button
|
|
type="dashed"
|
|
onClick={() => {
|
|
setCurrentAddItem(() => add);
|
|
setUploadModalVisible(true);
|
|
}}
|
|
icon={<UploadOutlined />}
|
|
className="w-full hover:border-blue-400 hover:text-blue-500"
|
|
>
|
|
上传文件
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Form.List>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{(items || []).map((item, index) => (
|
|
<div key={index} className="flex items-center gap-4 text-sm">
|
|
<a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-600">
|
|
{item.title}
|
|
</a>
|
|
<span className="text-gray-500">{item.unit || '未设置类型'}</span>
|
|
{item.description && (
|
|
<span className="text-gray-500">({item.description})</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: 160,
|
|
fixed: 'right',
|
|
render: (_, record) => {
|
|
const isEditing = record.id === editingKey;
|
|
return isEditing ? (
|
|
<Space>
|
|
<Button
|
|
type="link"
|
|
className="text-green-600 hover:text-green-500 font-medium"
|
|
onClick={() => handleSave(record)}
|
|
>
|
|
保存
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
className="text-gray-600 hover:text-gray-500 font-medium"
|
|
onClick={() => {
|
|
setEditingKey('');
|
|
if (record.isNew) {
|
|
setData(data.filter(item => item.id !== record.id));
|
|
}
|
|
}}
|
|
>
|
|
取消
|
|
</Button>
|
|
</Space>
|
|
) : (
|
|
<Space>
|
|
<Button
|
|
type="link"
|
|
className="text-blue-600 hover:text-blue-500 font-medium"
|
|
disabled={editingKey !== ''}
|
|
onClick={() => {
|
|
setEditingKey(record.id);
|
|
form.setFieldsValue({
|
|
name: record.attributes.name,
|
|
items: record.attributes.items
|
|
});
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
<Popconfirm
|
|
title="确认删除"
|
|
description="确定要删除这个模块吗？"
|
|
onConfirm={() => handleDelete(record)}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
okButtonProps={{
|
|
className: "bg-red-500 hover:bg-red-600 border-red-500"
|
|
}}
|
|
>
|
|
<Button
|
|
type="link"
|
|
className="text-red-600 hover:text-red-500 font-medium"
|
|
disabled={editingKey !== ''}
|
|
>
|
|
删除
|
|
</Button>
|
|
</Popconfirm>
|
|
</Space>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="rounded-lg shadow-sm mb-6 p-4">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="primary"
|
|
onClick={handleAdd}
|
|
icon={<PlusOutlined />}
|
|
className="bg-blue-600 hover:bg-blue-700 border-0 shadow-sm h-10"
|
|
>
|
|
新增模块
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg shadow-sm">
|
|
<Form
|
|
form={form}
|
|
onValuesChange={handleValuesChange}
|
|
>
|
|
<Table
|
|
scroll={{ x: 1200 }}
|
|
columns={columns}
|
|
dataSource={data}
|
|
rowKey="id"
|
|
loading={loading}
|
|
pagination={{
|
|
...pagination,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total) => `共 ${total} 条记录`,
|
|
pageSizeOptions: ['10', '20', '50', '100'],
|
|
onChange: (page, pageSize) => {
|
|
if (pageSize !== pagination.pageSize) {
|
|
setPagination(prev => ({ ...prev, pageSize }));
|
|
fetchSections(1, pageSize);
|
|
} else {
|
|
fetchSections(page, pageSize);
|
|
}
|
|
}
|
|
}}
|
|
className="rounded-lg"
|
|
/>
|
|
</Form>
|
|
</div>
|
|
{renderUploadModal()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectSections;
|