供应商

src/pages/supplier/supplierMessage/index.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from "react";
+import { Table, Form, Input, Button, Select, Space, message } from 'antd';
+import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+
+// 模拟数据（mock）
+const messageTypeOptions = [
+  { label: '请选择', value: '' },
+  { label: '供应商变更', value: '供应商变更' },
+  { label: '供应商准入', value: '供应商准入' },
+  { label: '供应商评价', value: '供应商评价' },
+  { label: '供应商评审', value: '供应商评审' },
+  { label: '供应商退出', value: '供应商退出' },
+  { 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 [form] = Form.useForm();
+  const [data, setData] = useState(mockData);
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: mockData.length });
+
+  // 查询
+  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);
+  };
+
+  // 重置
+  const handleReset = () => {
+    form.resetFields();
+    setPagination({ ...pagination, current: 1, total: mockData.length });
+    setData(mockData);
+  };
+
+  // 列表分页
+  const onTableChange = (page: TablePaginationConfig) => {
+    setPagination(page);
+  };
+
+  // 列配置
+  const columns: ColumnsType<any> = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index',
+      align: 'center',
+      width: 60,
+      render: (_: any, __: any, idx: number) => ((pagination.current! - 1) * pagination.pageSize!) + idx + 1,
+    },
+    {
+      title: '消息内容',
+      dataIndex: 'content',
+      key: 'content',
+      align: 'left',
+    },
+    {
+      title: '业务类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '接收时间',
+      dataIndex: 'receiveTime',
+      key: 'receiveTime',
+      align: 'center',
+    },
+    {
+      title: '是否已读',
+      dataIndex: 'isRead',
+      key: 'isRead',
+      align: 'center',
+    },
+  ];
+
+  return (
+    <>
+      <Form form={form} layout="inline" style={{ marginBottom: 12 }}>
+        <Form.Item name="content" label="消息内容">
+          <Input placeholder="请输入" style={{ width: 220 }} />
+        </Form.Item>
+        <Form.Item name="type" label="业务类型">
+          <Select style={{ width: 200 }}>
+            {messageTypeOptions.map(opt => (
+              <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>查询</Button>
+          <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
+        </Form.Item>
+      </Form>
+      <Table
+        rowKey="id"
+        columns={columns}
+        dataSource={data.slice((pagination.current! - 1) * pagination.pageSize!, pagination.current! * pagination.pageSize!)}
+        loading={loading}
+        pagination={{
+          ...pagination,
+          showQuickJumper: true,
+          showSizeChanger: true,
+        }}
+        onChange={onTableChange}
+        bordered
+      />
+    </>
+  );
+};
+
+export default supplierMessage;