合并代码

src/pages/supplier/supplierMessage/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Table, Form, Input, Button, Select, Space, message } from 'antd';
+import { Table, Form, Input, Button, Select, Modal, Descriptions } from 'antd';
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import { getPage, update } from './services';
 
-// 模拟数据（mock）
 const messageTypeOptions = [
   { label: '请选择', value: '' },
   { label: '供应商变更', value: '供应商变更' },
@@ -14,106 +14,50 @@ const messageTypeOptions = [
   { label: '供应商黑灰名单', value: '供应商黑灰名单' },
 ];
 
-const mockData = [
-  {
-    id: 1,
-    content: '中山市合创展包装材料有限公司准入通过，进入我单位合格供应商名录',
-    type: '供应商变更',
-    receiveTime: '2025-04-10 12:00',
-    isRead: '未读',
-  },
-  {
-    id: 2,
-    content: '中山市合创展包装材料有限公司资质信息发生变更',
-    type: '供应商变更',
-    receiveTime: '2025-04-10 11:00',
-    isRead: '已读',
-  },
-  {
-    id: 3,
-    content: '2024年度供应商评价结果通过',
-    type: '供应商评价',
-    receiveTime: '2025-04-10 11:00',
-    isRead: '未读',
-  },
-  {
-    id: 4,
-    content: '中山市合创展包装材料有限公司年度评审通过',
-    type: '供应商评审',
-    receiveTime: '2025-04-10 11:00',
-    isRead: '已读',
-  },
-  {
-    id: 5,
-    content: '中山市合创展包装材料有限公司被退出集团五合格供应商',
-    type: '供应商退出',
-    receiveTime: '2025-04-10 12:00',
-    isRead: '未读',
-  },
-  {
-    id: 6,
-    content: '中山市合创展包装材料有限公司进入集团黑名单',
-    type: '供应商黑灰名单',
-    receiveTime: '2025-04-10 12:00',
-    isRead: '已读',
-  },
-  {
-    id: 7,
-    content: '广东振兴塑胶机械有限公司进入集团黑名单',
-    type: '供应商黑灰名单',
-    receiveTime: '2025-04-10 12:00',
-    isRead: '未读',
-  },
-  {
-    id: 8,
-    content: '中山市合创展包装材料有限公司重大整改单',
-    type: '供应商评价',
-    receiveTime: '2025-04-10 11:00',
-    isRead: '已读',
-  },
-  {
-    id: 9,
-    content: '中山市合创展包装材料有限公司2025年度燃油品评价D级',
-    type: '供应商评价',
-    receiveTime: '2025-04-10 11:00',
-    isRead: '未读',
-  },
-];
-
-// 组件
-const supplierMessage: React.FC = () => {
+const SupplierMessage: React.FC = () => {
   const [form] = Form.useForm();
-  const [data, setData] = useState(mockData);
+  const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: mockData.length });
+  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
+  const [viewRecord, setViewRecord] = useState<any>(null); // 当前查看的消息
+  const [viewVisible, setViewVisible] = useState(false);   // 弹窗显隐
+
+  // 获取数据
+  const getList = async (pageNo = 1, pageSize = 10) => {
+    setLoading(true);
+    const params = { ...form.getFieldsValue(), pageNo, pageSize };
+    const { code, data } = await getPage(params);
+    if (code === 200) {
+      setData(data.records || []);
+      setPagination(prev => ({ ...prev, current: pageNo, pageSize, total: data.total }));
+    }
+    setLoading(false);
+  };
 
   // 查询
   const handleSearch = () => {
-    const { content, type } = form.getFieldsValue();
-    let filterData = mockData;
-    if (content) {
-      filterData = filterData.filter(i => i.content.includes(content));
-    }
-    if (type) {
-      filterData = filterData.filter(i => i.type === type);
-    }
-    setPagination({ ...pagination, current: 1, total: filterData.length });
-    setData(filterData);
+    setPagination(prev => ({ ...prev, current: 1 }));
+    getList(1, pagination.pageSize!);
   };
 
   // 重置
   const handleReset = () => {
     form.resetFields();
-    setPagination({ ...pagination, current: 1, total: mockData.length });
-    setData(mockData);
+    setPagination(prev => ({ ...prev, current: 1 }));
+    getList(1, pagination.pageSize!);
   };
 
-  // 列表分页
-  const onTableChange = (page: TablePaginationConfig) => {
-    setPagination(page);
+  // 分页变更
+  const handleTableChange = (pageConf: TablePaginationConfig) => {
+    getList(pageConf.current!, pageConf.pageSize!);
   };
 
-  // 列配置
+  useEffect(() => {
+    getList();
+    // eslint-disable-next-line
+  }, []);
+
+  // 表头
   const columns: ColumnsType<any> = [
     {
       title: '序号',
@@ -128,6 +72,7 @@ const supplierMessage: React.FC = () => {
       dataIndex: 'content',
       key: 'content',
       align: 'left',
+      ellipsis: true,
     },
     {
       title: '业务类型',
@@ -137,16 +82,33 @@ const supplierMessage: React.FC = () => {
     },
     {
       title: '接收时间',
-      dataIndex: 'receiveTime',
-      key: 'receiveTime',
+      dataIndex: 'createTime',
+      key: 'createTime',
       align: 'center',
+      ellipsis: true,
     },
     {
       title: '是否已读',
-      dataIndex: 'isRead',
-      key: 'isRead',
+      dataIndex: 'read',
+      key: 'read',
       align: 'center',
+      width: 120,
+      render: (_, record) => ( <span>{ record.read === '0'? '否':'是'  }</span> )
     },
+    {
+      title: '操作',
+      key: 'option',
+      align: 'center',
+      width: 80,
+      render: (_, record) => (
+        <a onClick={() => {
+          setViewRecord(record);
+          setViewVisible(true);
+          update({ id:record.id  })
+          getList()
+        }}>查看</a>
+      ),
+    }
   ];
 
   return (
@@ -170,18 +132,34 @@ const supplierMessage: React.FC = () => {
       <Table
         rowKey="id"
         columns={columns}
-        dataSource={data.slice((pagination.current! - 1) * pagination.pageSize!, pagination.current! * pagination.pageSize!)}
+        dataSource={data}
         loading={loading}
         pagination={{
           ...pagination,
           showQuickJumper: true,
           showSizeChanger: true,
         }}
-        onChange={onTableChange}
+        onChange={handleTableChange}
         bordered
       />
+
+      <Modal
+        title="消息详情"
+        visible={viewVisible}
+        onCancel={() => setViewVisible(false)}
+        footer={null}
+        destroyOnClose
+      >
+        {viewRecord && (
+          <Descriptions bordered column={1} size="small">
+            <Descriptions.Item labelStyle={{ width: '120px' }} label="消息内容">{viewRecord.content}</Descriptions.Item>
+            <Descriptions.Item label="业务类型">{viewRecord.type}</Descriptions.Item>
+            <Descriptions.Item label="接收时间">{viewRecord.createTime}</Descriptions.Item>
+          </Descriptions>
+        )}
+      </Modal>
     </>
   );
 };
 
-export default supplierMessage;
+export default SupplierMessage;

src/pages/supplier/supplierMessage/services.ts

@@ -0,0 +1,20 @@
+import request from '@/utils/request';
+
+/**
+ * 修改已读接口
+ */
+interface getPageData {
+    pageNo: number;
+    pageSize: number;
+   
+}
+export const getPage = (data: getPageData) => request.post('/supplierMessage/page', { data });
+
+
+ /**
+ *  
+ */
+interface update {
+    id: string;
+}
+export const update = (data: update) => request.post('/supplierMessage/update', { data });