makemd/dashboard/src/pages/Suppliers/index.tsx

import React, { useState, useEffect } from 'react';
import { Table, Button, Input, Select, message, Card } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, PhoneOutlined, MailOutlined, HomeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;
const { Search } = Input;

interface Supplier {
  id: string;
  name: string;
  contactName: string;
  email: string;
  phone: string;
  address: string;
  category: string;
  status: 'active' | 'inactive' | 'pending';
  rating: number;
  leadTime: number;
  minOrder: number;
}

const Suppliers: React.FC = () => {
  const navigate = useNavigate();
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
  const [loading, setLoading] = useState(false);
  const [filters, setFilters] = useState({
    category: '',
    status: '',
    search: '',
  });

  useEffect(() => {
    fetchSuppliers();
  }, [filters]);

  const fetchSuppliers = async () => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      const mockSuppliers: Supplier[] = [
        {
          id: '1',
          name: 'Supplier A',
          contactName: 'John Doe',
          email: 'john@supplier-a.com',
          phone: '+1 (123) 456-7890',
          address: '123 Main St, New York, NY',
          category: 'Electronics',
          status: 'active',
          rating: 4.5,
          leadTime: 7,
          minOrder: 100,
        },
        {
          id: '2',
          name: 'Supplier B',
          contactName: 'Jane Smith',
          email: 'jane@supplier-b.com',
          phone: '+1 (987) 654-3210',
          address: '456 Oak Ave, Los Angeles, CA',
          category: 'Clothing',
          status: 'active',
          rating: 4.2,
          leadTime: 5,
          minOrder: 50,
        },
        {
          id: '3',
          name: 'Supplier C',
          contactName: 'Bob Johnson',
          email: 'bob@supplier-c.com',
          phone: '+1 (555) 123-4567',
          address: '789 Pine Rd, Chicago, IL',
          category: 'Home Goods',
          status: 'inactive',
          rating: 3.8,
          leadTime: 10,
          minOrder: 200,
        },
        {
          id: '4',
          name: 'Supplier D',
          contactName: 'Alice Brown',
          email: 'alice@supplier-d.com',
          phone: '+1 (222) 333-4444',
          address: '321 Cedar St, Miami, FL',
          category: 'Electronics',
          status: 'pending',
          rating: 4.0,
          leadTime: 3,
          minOrder: 75,
        },
      ];
      setSuppliers(mockSuppliers);
      setLoading(false);
    }, 500);
  };

  const handleAddSupplier = () => {
    message.info('添加供应商功能开发中');
  };

  const handleEditSupplier = (id: string) => {
    navigate(`/suppliers/${id}`);
  };

  const handleDeleteSupplier = (id: string) => {
    message.success('供应商已删除');
    fetchSuppliers();
  };

  const columns = [
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      key: 'contactName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          active: '活跃',
          inactive: '非活跃',
          pending: '待审核',
        };
        return statusMap[status] || status;
      },
    },
    {
      title: '评分',
      dataIndex: 'rating',
      key: 'rating',
    },
    {
      title: '交货期(天)',
      dataIndex: 'leadTime',
      key: 'leadTime',
    },
    {
      title: '最小订单量',
      dataIndex: 'minOrder',
      key: 'minOrder',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: Supplier) => (
        <div>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEditSupplier(record.id)}
          >
            编辑
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDeleteSupplier(record.id)}
          >
            删除
          </Button>
        </div>
      ),
    },
  ];

  return (
    <div className="suppliers">
      <div className="page-header">
        <h1>供应商管理</h1>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={handleAddSupplier}
        >
          添加供应商
        </Button>
      </div>

      <div className="filter-section" style={{ marginBottom: 24, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        <Search
          placeholder="搜索供应商名称或联系人"
          style={{ width: 300 }}
          onChange={(e) => setFilters({ ...filters, search: e.target.value })}
        />
        <Select
          placeholder="类别"
          style={{ width: 120 }}
          onChange={(value) => setFilters({ ...filters, category: value })}
        >
          <Option value="">全部</Option>
          <Option value="Electronics">Electronics</Option>
          <Option value="Clothing">Clothing</Option>
          <Option value="Home Goods">Home Goods</Option>
        </Select>
        <Select
          placeholder="状态"
          style={{ width: 120 }}
          onChange={(value) => setFilters({ ...filters, status: value })}
        >
          <Option value="">全部</Option>
          <Option value="active">活跃</Option>
          <Option value="inactive">非活跃</Option>
          <Option value="pending">待审核</Option>
        </Select>
        <Button
          icon={<SearchOutlined />}
          onClick={fetchSuppliers}
        >
          筛选
        </Button>
      </div>

      <Card title="供应商列表">
        <Table
          columns={columns}
          dataSource={suppliers}
          loading={loading}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
          }}
        />
      </Card>
    </div>
  );
};

export default Suppliers;