667 lines
20 KiB
TypeScript
667 lines
20 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useIntl } from 'umi';
|
||
import { Button, Table, Modal, message, Input, Select, Form, Tooltip, Switch, Tag, Tabs } from 'antd';
|
||
import {
|
||
PlusOutlined,
|
||
DeleteOutlined,
|
||
ExclamationCircleOutlined,
|
||
SearchOutlined,
|
||
VerticalAlignTopOutlined,
|
||
} from '@ant-design/icons';
|
||
import { getNoticeList, addNotice, updateNotice, deleteNotice, batchDeleteNotice, updateNoticeStatus, updateNoticeTopStatus } from '@/servers/api/notice';
|
||
import './noticeManage.less';
|
||
// 引入封装的WangEditor组件
|
||
import WangEditor from '@/components/WangEidtor/WangEidtor';
|
||
|
||
const { Option } = Select;
|
||
const { TextArea } = Input;
|
||
const { TabPane } = Tabs;
|
||
|
||
type NoticeType = API.NoticeRecord & {
|
||
key: string;
|
||
};
|
||
|
||
const NoticeManage: React.FC = () => {
|
||
const intl = useIntl();
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
const [loading, setLoading] = useState<boolean>(false);
|
||
const [form] = Form.useForm();
|
||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||
const [isEdit, setIsEdit] = useState<boolean>(false);
|
||
const [currentId, setCurrentId] = useState<string>('');
|
||
const [modalForm] = Form.useForm();
|
||
|
||
// 富文本内容状态
|
||
const [htmlZh, setHtmlZh] = useState<string>('');
|
||
const [htmlEn, setHtmlEn] = useState<string>('');
|
||
|
||
const [noticeData, setNoticeData] = useState<NoticeType[]>([
|
||
{
|
||
key: '1',
|
||
id: '1',
|
||
title: '系统维护通知',
|
||
titleEn: 'System Maintenance Notice',
|
||
content: '系统将于2023年7月1日进行例行维护，请提前做好准备。',
|
||
contentEn: 'The system will undergo routine maintenance on July 1, 2023. Please prepare in advance.',
|
||
createTime: '2023-06-25 10:30:00',
|
||
createBy: 'admin',
|
||
status: '1', // 已发布
|
||
isTop: '1', // 已置顶
|
||
settingEn: 1, // 设置英文
|
||
},
|
||
{
|
||
key: '2',
|
||
id: '2',
|
||
title: '新功能上线通知',
|
||
titleEn: 'New Feature Launch',
|
||
content: '系统新增了XXXX功能，欢迎使用。',
|
||
contentEn: 'The system has added XXXX function, welcome to use.',
|
||
createTime: '2023-06-20 14:45:00',
|
||
createBy: 'admin',
|
||
status: '0', // 草稿
|
||
isTop: '0', // 未置顶
|
||
settingEn: 1,
|
||
},
|
||
{
|
||
key: '3',
|
||
id: '3',
|
||
title: '用户反馈调查',
|
||
titleEn: '',
|
||
content: '为了提升用户体验，我们正在收集用户反馈...',
|
||
contentEn: '',
|
||
createTime: '2023-06-18 09:15:00',
|
||
createBy: 'admin',
|
||
status: '1', // 已发布
|
||
isTop: '0', // 未置顶
|
||
settingEn: 0,
|
||
},
|
||
]);
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 3,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total: number) => `共 ${total} 条记录`,
|
||
});
|
||
const [searchParams, setSearchParams] = useState<API.NoticeSearchParams>({});
|
||
const [activeTabKey, setActiveTabKey] = useState<string>('zh');
|
||
|
||
// 获取通知列表（模拟数据）
|
||
const fetchNoticeList = (current: number = 1, pageSize: number = 10) => {
|
||
setLoading(true);
|
||
// 实际项目中应调用API
|
||
getNoticeList({
|
||
...searchParams,
|
||
})
|
||
.then(res => {
|
||
// 此处为模拟数据，实际项目中应使用API返回的数据
|
||
setNoticeData([
|
||
{
|
||
key: '1',
|
||
id: '1',
|
||
title: '系统维护通知',
|
||
titleEn: 'System Maintenance Notice',
|
||
content: '系统将于2023年7月1日进行例行维护，请提前做好准备。',
|
||
contentEn: 'The system will undergo routine maintenance on July 1, 2023. Please prepare in advance.',
|
||
createTime: '2023-06-25 10:30:00',
|
||
createBy: 'admin',
|
||
status: '1', // 已发布
|
||
isTop: '1', // 已置顶
|
||
settingEn: 1,
|
||
},
|
||
{
|
||
key: '2',
|
||
id: '2',
|
||
title: '新功能上线通知',
|
||
titleEn: 'New Feature Launch',
|
||
content: '系统新增了XXXX功能，欢迎使用。',
|
||
contentEn: 'The system has added XXXX function, welcome to use.',
|
||
createTime: '2023-06-20 14:45:00',
|
||
createBy: 'admin',
|
||
status: '0', // 草稿
|
||
isTop: '0', // 未置顶
|
||
settingEn: 1,
|
||
},
|
||
{
|
||
key: '3',
|
||
id: '3',
|
||
title: '用户反馈调查',
|
||
titleEn: '',
|
||
content: '为了提升用户体验，我们正在收集用户反馈...',
|
||
contentEn: '',
|
||
createTime: '2023-06-18 09:15:00',
|
||
createBy: 'admin',
|
||
status: '1', // 已发布
|
||
isTop: '0', // 未置顶
|
||
settingEn: 0,
|
||
},
|
||
]);
|
||
setPagination({
|
||
...pagination,
|
||
current,
|
||
pageSize,
|
||
total: 3, // 应该是res.total
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.error('获取通知列表失败:', error);
|
||
message.error('获取通知列表失败');
|
||
})
|
||
.finally(() => {
|
||
setLoading(false);
|
||
});
|
||
};
|
||
|
||
// 首次加载时获取数据
|
||
useEffect(() => {
|
||
fetchNoticeList();
|
||
}, []);
|
||
|
||
// 处理编辑
|
||
const handleEdit = (record: NoticeType) => {
|
||
// 检查是否为已发布状态
|
||
if (record.status === '1') {
|
||
message.warning('已发布的通知不能编辑');
|
||
return;
|
||
}
|
||
|
||
setIsEdit(true);
|
||
setCurrentId(record.id);
|
||
setModalVisible(true);
|
||
setActiveTabKey('zh');
|
||
|
||
// 填充表单数据
|
||
modalForm.setFieldsValue({
|
||
isTop: record.isTop === '1',
|
||
titleZh: record.title,
|
||
titleEn: record.titleEn,
|
||
contentZh: record.content,
|
||
contentEn: record.contentEn || '',
|
||
});
|
||
};
|
||
|
||
// 处理删除
|
||
const showDeleteConfirm = (record: NoticeType) => {
|
||
// 检查是否为已发布状态
|
||
if (record.status === '1') {
|
||
message.warning('已发布的通知不能删除');
|
||
return;
|
||
}
|
||
|
||
Modal.confirm({
|
||
title: '确定要删除该通知吗?',
|
||
icon: <ExclamationCircleOutlined />,
|
||
content: `标题: ${record.title}`,
|
||
okText: '确定',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
maskClosable: false,
|
||
onOk: async () => {
|
||
try {
|
||
// 调用删除API
|
||
await deleteNotice(record.id);
|
||
// 更新本地数据
|
||
const newData = noticeData.filter(item => item.id !== record.id);
|
||
setNoticeData(newData);
|
||
message.success('删除成功');
|
||
} catch (error) {
|
||
console.error('删除通知失败:', error);
|
||
message.error('删除失败');
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
// 处理发布/下架
|
||
const handlePublishStatus = async (record: NoticeType) => {
|
||
// 状态: 0-草稿，1-已发布
|
||
const isPublished = record.status === '1';
|
||
const actionText = isPublished ? '下架' : '发布';
|
||
const newStatus = isPublished ? '0' : '1';
|
||
|
||
try {
|
||
// 调用API更新状态
|
||
await updateNoticeStatus(record.id, newStatus);
|
||
// 更新本地数据
|
||
const newData = noticeData.map(item =>
|
||
item.id === record.id ? { ...item, status: newStatus } : item
|
||
);
|
||
setNoticeData(newData);
|
||
message.success(`${actionText}成功`);
|
||
} catch (error) {
|
||
console.error(`${actionText}失败:`, error);
|
||
message.error(`${actionText}失败`);
|
||
}
|
||
};
|
||
|
||
// 处理置顶/取消置顶
|
||
const handleToggleTop = async (record: NoticeType) => {
|
||
const isTop = record.isTop === '1';
|
||
const actionText = isTop ? '取消置顶' : '置顶';
|
||
const newIsTop = isTop ? '0' : '1';
|
||
|
||
try {
|
||
// 调用API更新置顶状态
|
||
await updateNoticeTopStatus(record.id, newIsTop);
|
||
// 更新本地数据
|
||
const newData = noticeData.map(item =>
|
||
item.id === record.id ? { ...item, isTop: newIsTop } : item
|
||
);
|
||
setNoticeData(newData);
|
||
message.success(`${actionText}成功`);
|
||
} catch (error) {
|
||
console.error(`${actionText}失败:`, error);
|
||
message.error(`${actionText}失败`);
|
||
}
|
||
};
|
||
|
||
// 获取状态标签
|
||
const getStatusTag = (status: string) => {
|
||
switch (status) {
|
||
case '0':
|
||
return <Tag color="default">草稿</Tag>;
|
||
case '1':
|
||
return <Tag color="green">已发布</Tag>;
|
||
case '2':
|
||
return <Tag color="orange">已下架</Tag>;
|
||
default:
|
||
return <Tag color="default">未知</Tag>;
|
||
}
|
||
};
|
||
|
||
// 处理表格分页变化
|
||
const handleTableChange = (newPagination: any) => {
|
||
fetchNoticeList(newPagination.current, newPagination.pageSize);
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
align: 'center' as const,
|
||
width: 80,
|
||
},
|
||
{
|
||
title: '标题',
|
||
dataIndex: 'title',
|
||
key: 'title',
|
||
ellipsis: {
|
||
showTitle: false,
|
||
},
|
||
render: (title: string, record: NoticeType) => (
|
||
<Tooltip placement="topLeft" title={title}>
|
||
<span>
|
||
{record.isTop === '1' && <Tag color="red" style={{ marginRight: 8 }}>置顶</Tag>}
|
||
{title}
|
||
</span>
|
||
</Tooltip>
|
||
),
|
||
},
|
||
{
|
||
title: '日期',
|
||
dataIndex: 'createTime',
|
||
key: 'createTime',
|
||
align: 'center' as const,
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
align: 'center' as const,
|
||
render: (status: string) => getStatusTag(status),
|
||
},
|
||
{
|
||
title: '发布人',
|
||
dataIndex: 'createBy',
|
||
key: 'createBy',
|
||
align: 'center' as const,
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 300,
|
||
align: 'center' as const,
|
||
render: (_: unknown, record: NoticeType) => (
|
||
<>
|
||
{record.status === '1' ? (
|
||
<>
|
||
<Button type="link" onClick={() => handlePublishStatus(record)}>
|
||
下架
|
||
</Button>
|
||
<Button
|
||
type="link"
|
||
onClick={() => handleToggleTop(record)}
|
||
>
|
||
{record.isTop === '1' ? '取消置顶' : '置顶'}
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Button type="link" onClick={() => handleEdit(record)}>
|
||
编辑
|
||
</Button>
|
||
<Button
|
||
type="link"
|
||
onClick={() => handlePublishStatus(record)}
|
||
>
|
||
发布
|
||
</Button>
|
||
<Button
|
||
type="link"
|
||
onClick={() => showDeleteConfirm(record)}
|
||
>
|
||
删除
|
||
</Button>
|
||
<Button
|
||
type="link"
|
||
onClick={() => handleToggleTop(record)}
|
||
>
|
||
{record.isTop === '1' ? '取消置顶' : '置顶'}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
// 行选择限制
|
||
const checkSelectable = (record: NoticeType) => {
|
||
return record.status !== '1'; // 已发布的不能选择
|
||
};
|
||
|
||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
||
setSelectedRowKeys(newSelectedRowKeys);
|
||
};
|
||
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: onSelectChange,
|
||
getCheckboxProps: (record: NoticeType) => ({
|
||
disabled: record.status === '1', // 已发布的不能选择
|
||
}),
|
||
};
|
||
|
||
const hasSelected = selectedRowKeys.length > 0;
|
||
|
||
// 处理添加
|
||
const handleAdd = () => {
|
||
setIsEdit(false);
|
||
setCurrentId('');
|
||
modalForm.resetFields();
|
||
setModalVisible(true);
|
||
setActiveTabKey('zh');
|
||
};
|
||
|
||
// 处理批量删除
|
||
const handleBatchDelete = () => {
|
||
Modal.confirm({
|
||
title: '确定要删除选中的通知吗?',
|
||
icon: <ExclamationCircleOutlined />,
|
||
content: '删除后无法恢复',
|
||
okText: '确定',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
maskClosable: false,
|
||
onOk: async () => {
|
||
setLoading(true);
|
||
try {
|
||
// 获取可删除的ID（非已发布状态）
|
||
const deleteIds = selectedRowKeys.filter(key => {
|
||
const record = noticeData.find(item => item.key === key);
|
||
return record && record.status !== '1';
|
||
}) as string[];
|
||
|
||
if (deleteIds.length > 0) {
|
||
// 调用批量删除API
|
||
await batchDeleteNotice(deleteIds);
|
||
// 更新本地数据
|
||
const newData = noticeData.filter(item => !deleteIds.includes(item.key));
|
||
setNoticeData(newData);
|
||
setSelectedRowKeys([]);
|
||
message.success('删除成功');
|
||
} else {
|
||
message.warning('没有可删除的通知');
|
||
}
|
||
} catch (error) {
|
||
console.error('批量删除失败:', error);
|
||
message.error('批量删除失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
// 处理搜索
|
||
const handleSearch = (values: API.NoticeSearchParams) => {
|
||
setSearchParams(values);
|
||
fetchNoticeList(1, pagination.pageSize);
|
||
};
|
||
|
||
// 处理模态框提交
|
||
const handleModalSubmit = () => {
|
||
// 先触发所有字段的验证
|
||
modalForm.validateFields()
|
||
.then(async values => {
|
||
try {
|
||
const noticeParams: API.NoticeRequest = {
|
||
title: values.titleZh,
|
||
titleEn: values.titleEn || '',
|
||
content: values.contentZh,
|
||
contentEn: values.contentEn || '',
|
||
isTop: values.isTop ? '1' : '0',
|
||
settingEn: values.titleEn && values.contentEn ? 1 : 0,
|
||
};
|
||
|
||
if (isEdit) {
|
||
// 编辑模式，调用更新API
|
||
await updateNotice(currentId, noticeParams);
|
||
message.success('更新成功');
|
||
} else {
|
||
// 新增模式，调用添加API
|
||
await addNotice(noticeParams);
|
||
message.success('添加成功');
|
||
}
|
||
|
||
setModalVisible(false);
|
||
modalForm.resetFields();
|
||
// 刷新列表
|
||
fetchNoticeList(pagination.current, pagination.pageSize);
|
||
} catch (error) {
|
||
console.error(isEdit ? '更新通知失败:' : '添加通知失败:', error);
|
||
message.error(isEdit ? '更新失败' : '添加失败');
|
||
}
|
||
})
|
||
.catch(errorInfo => {
|
||
// 获取所有字段的错误信息
|
||
const errorFields = errorInfo.errorFields || [];
|
||
|
||
// 检查是否有中文标题或内容的错误
|
||
const hasZhError = errorFields.some((field: any) => {
|
||
if (!field.name) return false;
|
||
const fieldName = Array.isArray(field.name) ? field.name.join('.') : String(field.name);
|
||
return fieldName.includes('titleZh') || fieldName.includes('contentZh');
|
||
});
|
||
|
||
// 检查是否有英文标题或内容的错误
|
||
const hasEnError = errorFields.some((field: any) => {
|
||
if (!field.name) return false;
|
||
const fieldName = Array.isArray(field.name) ? field.name.join('.') : String(field.name);
|
||
return fieldName.includes('titleEn') || fieldName.includes('contentEn');
|
||
});
|
||
|
||
// 如果有中文字段错误，切换到中文Tab
|
||
if (hasZhError) {
|
||
setActiveTabKey('zh');
|
||
}
|
||
// 如果只有英文字段错误，切换到英文Tab
|
||
else if (hasEnError && !hasZhError) {
|
||
setActiveTabKey('en');
|
||
}
|
||
|
||
console.log('表单验证失败:', errorInfo);
|
||
});
|
||
};
|
||
|
||
// 处理Tab切换
|
||
const handleTabChange = (key: string) => {
|
||
setActiveTabKey(key);
|
||
};
|
||
|
||
// 处理模态框取消
|
||
const handleModalCancel = () => {
|
||
setModalVisible(false);
|
||
modalForm.resetFields();
|
||
};
|
||
|
||
return (
|
||
<div className="common-container">
|
||
<div className="filter-action-row">
|
||
<Form
|
||
form={form}
|
||
name="search"
|
||
onFinish={handleSearch}
|
||
layout="inline"
|
||
className="filter-form"
|
||
>
|
||
<Form.Item name="title" label="标题">
|
||
<Input placeholder="请输入标题关键词" allowClear />
|
||
</Form.Item>
|
||
<Form.Item name="status" label="状态">
|
||
<Select placeholder="请选择状态" allowClear>
|
||
<Option value="0">草稿</Option>
|
||
<Option value="1">已发布</Option>
|
||
<Option value="2">已下架</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item className="filter-btns">
|
||
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
|
||
搜索
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
onClick={() => {
|
||
form.resetFields();
|
||
setSearchParams({});
|
||
handleSearch({});
|
||
}}
|
||
>
|
||
重置
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<div className="right-buttons">
|
||
<Button
|
||
type="primary"
|
||
ghost
|
||
icon={<PlusOutlined />}
|
||
onClick={handleAdd}
|
||
>
|
||
新增
|
||
</Button>
|
||
<Button
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
onClick={handleBatchDelete}
|
||
disabled={!hasSelected}
|
||
loading={loading}
|
||
>
|
||
删除
|
||
</Button>
|
||
{hasSelected && (
|
||
<span className="selected-count">
|
||
已选择 {selectedRowKeys.length} 项
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="content-area">
|
||
<Table
|
||
rowSelection={rowSelection}
|
||
columns={columns}
|
||
dataSource={noticeData}
|
||
pagination={pagination}
|
||
loading={loading}
|
||
onChange={handleTableChange}
|
||
/>
|
||
</div>
|
||
|
||
{/* 新增/编辑模态框 */}
|
||
<Modal
|
||
title={isEdit ? "编辑通知" : "新增通知"}
|
||
visible={modalVisible}
|
||
onOk={handleModalSubmit}
|
||
onCancel={handleModalCancel}
|
||
width={900}
|
||
maskClosable={false}
|
||
destroyOnClose
|
||
>
|
||
<Form
|
||
form={modalForm}
|
||
layout="vertical"
|
||
name="noticeForm"
|
||
preserve={false}
|
||
>
|
||
<Form.Item name="isTop" label="是否置顶" valuePropName="checked">
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
<Tabs activeKey={activeTabKey} onChange={handleTabChange}>
|
||
<TabPane tab="中文版" key="zh">
|
||
<Form.Item
|
||
name="titleZh"
|
||
label="标题（中文）"
|
||
rules={[{ required: true, message: '请输入中文标题' }]}
|
||
>
|
||
<Input placeholder="请输入中文标题" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="contentZh"
|
||
label="内容（中文）"
|
||
rules={[{ required: true, message: '请输入中文内容' }]}
|
||
>
|
||
<WangEditor
|
||
language="zh-CN"
|
||
height="300px"
|
||
placeholder="请输入通知内容..."
|
||
/>
|
||
</Form.Item>
|
||
</TabPane>
|
||
<TabPane tab="英文版" key="en">
|
||
<Form.Item
|
||
name="titleEn"
|
||
label="标题（英文）"
|
||
rules={[{ required: true, message: 'Please enter title in English' }]}
|
||
>
|
||
<Input placeholder="Please enter title in English" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="contentEn"
|
||
label="内容（英文）"
|
||
rules={[{ required: true, message: 'Please enter content in English' }]}
|
||
>
|
||
<WangEditor
|
||
language="en"
|
||
height="300px"
|
||
placeholder="Please enter notice content..."
|
||
/>
|
||
</Form.Item>
|
||
</TabPane>
|
||
</Tabs>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NoticeManage;
|