页码标记
This commit is contained in:
xixi
parent
576fe3d0cf
commit
c3ec65e327
@ -1,28 +1,21 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import './noticeModal.css'
|
||||
import { get, put,del } from '../../util/AjaxUtils'
|
||||
import { get, put, del } from '../../util/AjaxUtils'
|
||||
import {
|
||||
Table,
|
||||
// Pagination,
|
||||
Select,
|
||||
Button,
|
||||
Input,
|
||||
message,
|
||||
Spin
|
||||
} from 'antd';
|
||||
import type { TableColumnsType } 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;
|
||||
@ -38,17 +31,13 @@ export default function NoticeModal() {
|
||||
dataIndex: 'index',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
render: (_text, _record, index) =>(page - 1)*10 + index + 1, // 显示序号，从1开始
|
||||
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
||||
},
|
||||
{
|
||||
title: <div title='站内信' style={{cursor:'pointer'}}>站内信</div>,
|
||||
title: <div title='站内信' style={{ cursor: 'pointer' }}>站内信</div>,
|
||||
dataIndex: 'content',
|
||||
// align: 'center',
|
||||
render: (text: string, record: DataType) => <div style={{
|
||||
cursor: 'pointer', color: record.isRead ? '#b9b9b9' : '', textAlign: 'left',
|
||||
// overflow: 'hidden', // 隐藏超出容器的内容
|
||||
// textOverflow: 'ellipsis', // 使用省略号表示被截断的内容
|
||||
// whiteSpace: 'nowrap', // 防止文本换行
|
||||
}} onClick={() => {
|
||||
// alert('一度')
|
||||
|
||||
@ -105,34 +94,12 @@ export default function NoticeModal() {
|
||||
// 数据总数
|
||||
const [total, setTotal] = useState(0)
|
||||
// 被选中的消息数组
|
||||
const [selectArray, setSelectArray] = useState<any[]>([])
|
||||
// const [selectArray, setSelectArray] = useState<any[]>([])
|
||||
// 被选中的消息id数组
|
||||
const [ids, setIds] = useState<string[]>([])
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]); // 选中的行键
|
||||
const [data, setData] = useState<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 [totalSelectedKeys, setTotalSelectedKeys] = useState<any[]>([]); // 存储跨页选中项
|
||||
const [data, setData] = useState<DataType[]>([])
|
||||
// 获取消息列表
|
||||
const getNoticeData = () => {
|
||||
get<any>({
|
||||
@ -140,8 +107,8 @@ export default function NoticeModal() {
|
||||
url: '/api/user-msg/listpage-simple/self',
|
||||
config: {
|
||||
params: {
|
||||
page: page,
|
||||
rows: 10,
|
||||
// page: page,
|
||||
// rows: 10,
|
||||
isRead: isRead ? isRead : '',
|
||||
keywords: keywords ? keywords : ''
|
||||
}
|
||||
@ -160,35 +127,12 @@ export default function NoticeModal() {
|
||||
}
|
||||
})
|
||||
}
|
||||
// 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)
|
||||
// init()
|
||||
setPage(1)
|
||||
}
|
||||
// 当删除所有关键字时
|
||||
const handleChange = (e: any) => {
|
||||
@ -197,6 +141,8 @@ export default function NoticeModal() {
|
||||
// 如果删除所有发起请求重新取列表
|
||||
// alert('重新获取')
|
||||
setKeywords('')
|
||||
// init()
|
||||
setPage(1)
|
||||
}
|
||||
}
|
||||
// 点击删除按钮
|
||||
@ -204,7 +150,7 @@ export default function NoticeModal() {
|
||||
// const deleteIds:any = ids.join('/')
|
||||
del<any>({
|
||||
messageApi,
|
||||
url: `api/user-msg/remove/self/${ ids.join('_')}`,
|
||||
url: `api/user-msg/remove/self/${ids.join('_')}`,
|
||||
onSuccess() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
@ -218,7 +164,6 @@ export default function NoticeModal() {
|
||||
//恢复无内容被选中状态
|
||||
const init = () => {
|
||||
setSelectedRowKeys([]);
|
||||
setSelectArray([])
|
||||
setIds([])
|
||||
}
|
||||
// 标记为已读
|
||||
@ -244,9 +189,6 @@ export default function NoticeModal() {
|
||||
}
|
||||
// 全部已读
|
||||
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<any>({
|
||||
messageApi,
|
||||
url: `/api/user-msg/update-read-all/self`,
|
||||
@ -269,18 +211,14 @@ export default function NoticeModal() {
|
||||
// 选择(多选)项目
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
onChange: (newselectedRowKeys: React.Key[], selectedRows: DataType[]) => {
|
||||
setSelectedRowKeys(newselectedRowKeys);
|
||||
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])
|
||||
@ -294,6 +232,8 @@ export default function NoticeModal() {
|
||||
style={{ height: '31px', width: '70px' }}
|
||||
onChange={(value: string) => {
|
||||
// console.log(value);
|
||||
// init()
|
||||
setPage(1)
|
||||
setIsRead(value)
|
||||
}}
|
||||
options={[
|
||||
@ -305,10 +245,10 @@ export default function NoticeModal() {
|
||||
// placeholder='选择类型'
|
||||
/>
|
||||
<div>
|
||||
<Button type="primary" disabled={selectArray.length > 0 ? false : true} onClick={() => {
|
||||
<Button type="primary" disabled={selectedRowKeys.length > 0 ? false : true} onClick={() => {
|
||||
Delete()
|
||||
}}>删除</Button>
|
||||
<Button type="primary" disabled={selectArray.length > 0 ? false : true} onClick={() => {
|
||||
<Button type="primary" disabled={selectedRowKeys.length > 0 ? false : true} onClick={() => {
|
||||
Read()
|
||||
}} style={{ marginLeft: 10 }}>标记为已读</Button>
|
||||
<Button type="primary"
|
||||
@ -330,9 +270,9 @@ export default function NoticeModal() {
|
||||
</div>
|
||||
</div>
|
||||
<Table
|
||||
rowSelection={{
|
||||
...rowSelection,
|
||||
}}
|
||||
rowSelection={
|
||||
rowSelection
|
||||
}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={
|
||||
@ -341,20 +281,15 @@ export default function NoticeModal() {
|
||||
total: total,
|
||||
onChange: (currentPage) => {
|
||||
setPage(currentPage);
|
||||
// init()
|
||||
},
|
||||
showSizeChanger: false
|
||||
showSizeChanger: false,
|
||||
current: page
|
||||
}
|
||||
}
|
||||
scroll={{ y: 500 }} bordered key="dataTable" rowKey="userMsgId"
|
||||
scroll={{ y: 500 }} bordered rowKey="userMsgId"
|
||||
/>
|
||||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||||
{/* <div className='product-release-pagination' >
|
||||
<Pagination
|
||||
showSizeChanger={false}
|
||||
defaultCurrent={1} total={10} defaultPageSize={10} onChange={(page) => {
|
||||
console.log(page)
|
||||
}} />
|
||||
</div> */}
|
||||
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user