diff --git a/src/components/NoticeModal/NoticeModal.tsx b/src/components/NoticeModal/NoticeModal.tsx new file mode 100644 index 0000000..5003d33 --- /dev/null +++ b/src/components/NoticeModal/NoticeModal.tsx @@ -0,0 +1,361 @@ +import { useEffect, useState } from 'react' +import './noticeModal.css' +import { get, put,del } from '../../util/AjaxUtils' +import { + Table, + // Pagination, + Select, + Button, + Input, + message, + Spin +} from 'antd'; +import type { TableColumnsType } from 'antd'; +import { + MailOutlined, + MailFilled +} from '@ant-design/icons'; +const { Search } = Input; +interface DataType { + // key: React.Key; + // title: string; + // time: string; + // type: string; + // orderId: number; + // status: boolean + content: string; + gmtCreate: string; + title: string; + userMsgId: string; + isRead: number +} +export default function NoticeModal() { + const [messageApi, contextHolder] = message.useMessage(); + const [isLoading, setIsLoading] = useState(false) + const columns: TableColumnsType = [ + { + title: '序号', + dataIndex: 'index', + align: 'center', + width: 80, + render: (text, record, index) =>(page - 1)*10 + index + 1, // 显示序号,从1开始 + }, + { + title:
站内信
, + dataIndex: 'content', + // align: 'center', + render: (text: string, record: DataType) =>
{ + // alert('一度') + + // console.log(record.isRead); + // console.log(record.userMsgId); + if (!record.isRead) { + put({ + messageApi, + url: `/api/user-msg/update-read/self`, + body: { + ids: [record.userMsgId] + }, + onBefore() { + + }, + onSuccess(data) { + console.log(data); + getNoticeData() + }, + onFinally() { + + } + }) + } + + }}> + {record.isRead ? : } + {text} +
, + }, + + { + title: '消息类型', + dataIndex: 'title', + align: 'center', + width: 100 + }, + { + title: '接收时间', + dataIndex: 'gmtCreate', + align: 'center', + width: 180 + }, + + ]; + // 搜索条件 + //类型 已读1 未读 0 + const [isRead, setIsRead] = useState('') + //关键字 + const [keywords, setKeywords] = useState('') + + // 分页 + const [page, setPage] = useState(1) + // 数据总数 + const [total, setTotal] = useState(0) + // 被选中的消息数组 + const [selectArray, setSelectArray] = useState([]) + // 被选中的消息id数组 + const [ids, setIds] = useState([]) + const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行键 + const [data, setData] = useState([ + // { + // orderId: 111, + // title: '消息1', + // time: '2024-08-12 12:56:35', + // type: '类型1', + // status: true + // }, + // { + // orderId: 222, + // title: '消息2', + // time: '2024-08-12 12:56:35', + // type: '类型2', + // status: false + + // }, + // { + // orderId: 333, + // title: '消息3嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻', + // time: '2024-08-12 12:56:35', + // type: '类型3', + // status: false + // }, + ]) + // 获取消息列表 + const getNoticeData = () => { + get({ + messageApi, + url: '/api/user-msg/listpage-simple/self', + config: { + params: { + page: page, + rows: 10, + isRead: isRead ? isRead : '', + keywords: keywords ? keywords : '' + } + }, + onBefore() { + setIsLoading(true); + }, + onSuccess({ data }) { + console.log(data); + + setData(data.rows) + setTotal(data.total) + }, + onFinally() { + setIsLoading(false); + } + }) + } + // const data: DataType[] = [ + // { + // orderId: 111, + // title: '消息1', + // time: '2024-08-12 12:56:35', + // type: '类型1', + // status: true + // }, + // { + // orderId: 222, + // title: '消息2', + // time: '2024-08-12 12:56:35', + // type: '类型2', + // status: false + + // }, + // { + // orderId: 333, + // title: '消息3', + // time: '2024-08-12 12:56:35', + // type: '类型3', + // status: false + // }, + // ]; + // const isButtonDisabled = !data.some(item => item.status == false); + // 输入关键字搜索 + const handleSearch = (value: string) => { + // console.log(value); + setKeywords(value) + } + // 当删除所有关键字时 + const handleChange = (e: any) => { + // console.log(e.target.value); + if (e.target.value == '') { + // 如果删除所有发起请求重新取列表 + // alert('重新获取') + setKeywords('') + } + } + // 点击删除按钮 + const Delete = () => { + // const deleteIds:any = ids.join('/') + del({ + messageApi, + url: `api/user-msg/remove/self/${ ids.join('_')}`, + onSuccess() { + messageApi.open({ + type: 'success', + content: '已删除' + }) + getNoticeData() + init() + } + }) + } + //恢复无内容被选中状态 + const init = () => { + setSelectedRowKeys([]); + setSelectArray([]) + setIds([]) + } + // 标记为已读 + const Read = () => { + put({ + messageApi, + url: `/api/user-msg/update-read/self`, + body: { + ids: ids + }, + onBefore() { + + }, + onSuccess(data) { + console.log(data); + getNoticeData() + init() + }, + onFinally() { + + } + }) + } + // 全部已读 + const ReadAll = () => { + // setData(data.map(item => ({ ...item, status: true }))); //将所有false改为true + // console.log(data.map(item => item.orderId)); //所有的id数组 + // console.log(data.filter(item => !item.status).map(item => item.orderId)); //未读的id数组 + put({ + messageApi, + url: `/api/user-msg/update-read-all/self`, + body: { + + }, + onBefore() { + + }, + onSuccess(data) { + console.log(data); + getNoticeData() + init() + }, + onFinally() { + + } + }) + } + // 选择(多选)项目 + const rowSelection = { + selectedRowKeys, + onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { + console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + const selectedOrderIds = selectedRows.map(row => row.userMsgId); + // Array.isArray() + // console.log(Array.isArray(selectedOrderIds)); + setSelectedRowKeys(selectedRowKeys); + setSelectArray(selectedRowKeys); + console.log(`selectedOrderIds: ${selectedOrderIds}`); + setIds(selectedOrderIds) + setSelectArray(selectedRows) + }, + }; + useEffect(() => { + getNoticeData() + }, [page, isRead, keywords]) + return ( +
+ {contextHolder} + +
+