397 lines
12 KiB
TypeScript
397 lines
12 KiB
TypeScript
// src/pages/list/basic-list/components/AddTimeLineItemModal.tsx
|
|
import chinaRegion, { code2Location } from '@/commonConstant/chinaRegion';
|
|
import { addStoryItem } from '@/pages/story/service';
|
|
import { getImagesList } from '@/services/file/api'; // 引入获取图库图片的API
|
|
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
|
|
import { useRequest } from '@umijs/max';
|
|
import {
|
|
Button,
|
|
Card,
|
|
Cascader,
|
|
Checkbox,
|
|
DatePicker,
|
|
Form,
|
|
Image,
|
|
Input,
|
|
InputRef,
|
|
message,
|
|
Modal,
|
|
Pagination,
|
|
Spin,
|
|
Tabs,
|
|
Upload,
|
|
} from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import moment from 'moment';
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
interface ModalProps {
|
|
visible: boolean;
|
|
onCancel: () => void;
|
|
onOk: () => void;
|
|
storyId: string | number | undefined;
|
|
initialValues?: any;
|
|
storyItemId?: string; // 是否根节点
|
|
option: 'add' | 'edit' | 'addSubItem' | 'editSubItem';
|
|
}
|
|
|
|
const AddTimeLineItemModal: React.FC<ModalProps> = ({
|
|
visible,
|
|
onCancel,
|
|
onOk,
|
|
storyId,
|
|
initialValues,
|
|
option,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const [fileList, setFileList] = useState<any[]>([]);
|
|
const [imageList, setImageList] = useState<any[]>(initialValues?.images || []);
|
|
const [galleryImages, setGalleryImages] = useState<any[]>([]); // 图库图片列表
|
|
const [selectedGalleryImages, setSelectedGalleryImages] = useState<string[]>(
|
|
initialValues?.galleryImageIds || [],
|
|
); // 选中的图库图片
|
|
const [galleryLoading, setGalleryLoading] = useState(false);
|
|
const [activeTab, setActiveTab] = useState('upload'); // 图片选择标签页
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [pageSize] = useState(20);
|
|
const [total, setTotal] = useState(0);
|
|
const [searchKeyword, setSearchKeyword] = useState('');
|
|
const searchInputRef = useRef<InputRef>(null);
|
|
|
|
useEffect(() => {
|
|
console.log(initialValues)
|
|
if (initialValues && option.startsWith('edit')) {
|
|
form.setFieldsValue({
|
|
title: initialValues.title,
|
|
date: initialValues.storyItemTime ? moment(initialValues.storyItemTime) : undefined,
|
|
location: initialValues.location,
|
|
description: initialValues.description,
|
|
});
|
|
}
|
|
}, [initialValues, option, visible]);
|
|
|
|
// 获取图库图片
|
|
const fetchGalleryImages = async (page: number = 1, keyword: string = '') => {
|
|
if (visible) {
|
|
setGalleryLoading(true);
|
|
try {
|
|
const response = await getImagesList({
|
|
current: page,
|
|
pageSize: pageSize,
|
|
keyword: keyword,
|
|
});
|
|
const images = response?.data?.list.map((img: any) => ({
|
|
instanceId: img.instanceId,
|
|
imageName: img.imageName,
|
|
url: `/file/image-low-res/${img.instanceId}`,
|
|
})) ?? [];
|
|
setGalleryImages(images);
|
|
setTotal(response?.data?.total ?? 0);
|
|
setCurrentPage(page);
|
|
} catch (error) {
|
|
message.error('获取图库图片失败');
|
|
} finally {
|
|
setGalleryLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (visible && activeTab === 'gallery') {
|
|
fetchGalleryImages(1, searchKeyword);
|
|
}
|
|
}, [visible, activeTab, searchKeyword]);
|
|
|
|
const { run: submitItem, loading } = useRequest((newItem) => addStoryItem(newItem), {
|
|
manual: true,
|
|
onSuccess: (data) => {
|
|
console.log(data);
|
|
if (data.code === 200) {
|
|
onOk();
|
|
message.success(initialValues ? '时间点已更新' : '时间点已保存');
|
|
}
|
|
},
|
|
onError: (error) => {
|
|
message.error('保存失败');
|
|
console.error('保存失败:', error);
|
|
},
|
|
});
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
const location = code2Location(values.location);
|
|
const newItem = {
|
|
storyItemTime: dayjs(values.date).format('YYYY-MM-DDTHH:mm:ss'),
|
|
title: values.title,
|
|
description: values.description,
|
|
masterItemId: initialValues?.masterItemId,
|
|
subItems: initialValues?.subItems || [],
|
|
storyInstanceId: storyId,
|
|
location,
|
|
instanceId: initialValues?.instanceId,
|
|
// 添加选中的图库图片ID
|
|
relatedImageInstanceIds: selectedGalleryImages,
|
|
};
|
|
// 构建 FormData
|
|
const formData = new FormData();
|
|
|
|
// 添加 storyItem 作为 JSON 字符串
|
|
formData.append('storyItem', JSON.stringify(newItem));
|
|
|
|
// 添加封面文件
|
|
if (fileList.length > 0 && fileList[0].originFileObj instanceof File) {
|
|
formData.append('cover', fileList[0].originFileObj);
|
|
}
|
|
|
|
// 添加上传的图片文件
|
|
if (imageList.length > 0) {
|
|
imageList.forEach((file) => {
|
|
if (file.originFileObj && file.originFileObj instanceof File) {
|
|
formData.append('images', file.originFileObj);
|
|
}
|
|
});
|
|
}
|
|
|
|
console.log(formData);
|
|
// 提交
|
|
submitItem(formData);
|
|
} catch (error) {
|
|
console.error('表单验证失败:', error);
|
|
message.error('请检查表单内容');
|
|
}
|
|
};
|
|
|
|
const uploadImagesProps = {
|
|
beforeUpload: () => false,
|
|
onChange: ({ fileList }) => {
|
|
const updatedFileList = fileList.map((file) => {
|
|
if (file.originFileObj && !(file.originFileObj instanceof File)) {
|
|
file.originFileObj = new File([file.originFileObj], file.name, { type: file.type });
|
|
}
|
|
return file;
|
|
});
|
|
setImageList(updatedFileList);
|
|
},
|
|
listType: 'picture-card',
|
|
multiple: true,
|
|
defaultFileList: initialValues?.images?.map((url) => ({ url })),
|
|
};
|
|
|
|
// 切换图库图片选择状态
|
|
const toggleGalleryImageSelection = (instanceId: string) => {
|
|
setSelectedGalleryImages((prev) => {
|
|
if (prev.includes(instanceId)) {
|
|
return prev.filter((id) => id !== instanceId);
|
|
} else {
|
|
return [...prev, instanceId];
|
|
}
|
|
});
|
|
};
|
|
|
|
// 处理分页变化
|
|
const handlePageChange = (page: number) => {
|
|
fetchGalleryImages(page, searchKeyword);
|
|
};
|
|
|
|
// 处理搜索
|
|
const handleSearch = (value: string) => {
|
|
setSearchKeyword(value);
|
|
fetchGalleryImages(1, value);
|
|
};
|
|
|
|
// 渲染图库图片选择器
|
|
const renderGallerySelector = () => (
|
|
<div>
|
|
{/* 搜索框 */}
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Input
|
|
ref={searchInputRef}
|
|
placeholder="搜索图片名称"
|
|
prefix={<SearchOutlined />}
|
|
onPressEnter={(e) => handleSearch(e.currentTarget.value)}
|
|
style={{ width: 200 }}
|
|
allowClear
|
|
/>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => handleSearch(searchInputRef.current?.input?.value || '')}
|
|
style={{ marginLeft: 8 }}
|
|
>
|
|
搜索
|
|
</Button>
|
|
</div>
|
|
|
|
{galleryLoading ? (
|
|
<div style={{ textAlign: 'center', padding: '50px 0' }}>
|
|
<Spin size="large" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
|
|
gap: '10px',
|
|
maxHeight: '300px',
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
{galleryImages.map((image) => (
|
|
<Card
|
|
key={image.instanceId}
|
|
size="small"
|
|
hoverable
|
|
onClick={() => toggleGalleryImageSelection(image.instanceId)}
|
|
style={{
|
|
border: selectedGalleryImages.includes(image.instanceId)
|
|
? '2px solid #1890ff'
|
|
: '1px solid #f0f0f0',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<div style={{ position: 'relative' }}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.imageName}
|
|
style={{ width: '100%', height: '100px', objectFit: 'cover' }}
|
|
preview={false}
|
|
/>
|
|
<Checkbox
|
|
checked={selectedGalleryImages.includes(image.instanceId)}
|
|
style={{
|
|
position: 'absolute',
|
|
top: '4px',
|
|
right: '4px',
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '12px',
|
|
marginTop: '4px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
title={image.imageName}
|
|
>
|
|
{image.imageName}
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{galleryImages.length === 0 && !galleryLoading && (
|
|
<div style={{ textAlign: 'center', padding: '20px' }}>
|
|
{searchKeyword ? '未找到相关图片' : '图库中暂无图片'}
|
|
</div>
|
|
)}
|
|
|
|
{/* 分页器 */}
|
|
{total > 0 && (
|
|
<div style={{ marginTop: 16, textAlign: 'right' }}>
|
|
<Pagination
|
|
current={currentPage}
|
|
pageSize={pageSize}
|
|
total={total}
|
|
onChange={handlePageChange}
|
|
showSizeChanger={false}
|
|
showQuickJumper
|
|
size="small"
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Modal
|
|
open={visible}
|
|
title={initialValues ? '编辑时间点' : '添加时间点'}
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
setSelectedGalleryImages([]);
|
|
setSearchKeyword('');
|
|
setCurrentPage(1);
|
|
setGalleryImages([]);
|
|
onCancel();
|
|
}}
|
|
width={800}
|
|
zIndex={1001}
|
|
footer={[
|
|
<Button key="back" onClick={onCancel}>
|
|
取消
|
|
</Button>,
|
|
<Button key="submit" type="primary" onClick={handleOk} loading={loading}>
|
|
确定
|
|
</Button>,
|
|
]}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
{['editSubItem', 'addSubItem'].includes(option) && (
|
|
<Form.Item label={'主时间点'}>{initialValues.title}</Form.Item>
|
|
)}
|
|
<Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
|
|
<Input placeholder="请输入标题" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="时间" name="date" rules={[{ required: true, message: '请选择时间' }]}>
|
|
<DatePicker
|
|
showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="位置" name="location" rules={[{ required: false }]}>
|
|
<Cascader
|
|
options={chinaRegion}
|
|
fieldNames={{ label: 'title', value: 'value', children: 'children' }}
|
|
placeholder="请选择省/市/区"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="描述" name="description">
|
|
<Input.TextArea rows={4} placeholder="请输入时间点描述" />
|
|
</Form.Item>
|
|
|
|
{/* 时刻图库 */}
|
|
<Form.Item label="附图" name="images">
|
|
<Tabs
|
|
activeKey={activeTab}
|
|
onChange={(key) => {
|
|
setActiveTab(key);
|
|
if (key === 'gallery' && galleryImages.length === 0) {
|
|
fetchGalleryImages(1, searchKeyword);
|
|
}
|
|
}}
|
|
items={[
|
|
{
|
|
key: 'upload',
|
|
label: '上传图片',
|
|
children: (
|
|
<Upload {...uploadImagesProps} maxCount={5}>
|
|
<div>
|
|
<PlusOutlined />
|
|
<div style={{ marginTop: 8 }}>上传图片</div>
|
|
</div>
|
|
</Upload>
|
|
),
|
|
},
|
|
{
|
|
key: 'gallery',
|
|
label: `从图库选择${selectedGalleryImages.length > 0 ? ` (${selectedGalleryImages.length})` : ''}`,
|
|
children: renderGallerySelector(),
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default AddTimeLineItemModal;
|