客户，供应商

2024-12-18 17:46:56 +08:00
parent 9b4a7f5fd8
commit 7ba9f537fb
12 changed files with 787 additions and 65 deletions
--- a/src/config/routes.js
+++ b/src/config/routes.js
@@ -51,6 +51,26 @@ const companyRoutes = [
    name: '客户管理',
    icon: 'user',
  },
+  {
+    path: 'customerInfo/:id?',
+    hidden: true,
+    component: lazy(() => import('@/pages/company/customer/detail')),
+    name: '客户详情',
+    icon: 'user',
+  },
+  {
+    path: 'supplier',
+    component: lazy(() => import('@/pages/company/supplier')),
+    name: '供应商管理',
+    icon: 'branches',
+  },
+  {
+    path: 'supplierInfo/:id?',
+    hidden: true,
+    component: lazy(() => import('@/pages/company/supplier/detail')),
+    name: '供应商详情',
+    icon: 'branches',
+  },
 ];

 const marketingRoutes = [
--- a/src/hooks/resource/useResource.js
+++ b/src/hooks/resource/useResource.js
@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react';
 import { message } from 'antd';
 import { resourceService } from '@/services/supabase/resource';

-export const useResources = (initialPagination, initialSorter) => {
+export const useResources = (initialPagination, initialSorter,type) => {
  const [resources, setResources] = useState([]);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
@@ -29,6 +29,7 @@ export const useResources = (initialPagination, initialSorter) => {
        pageSize: newPagination.pageSize,
        orderBy: newSorter.field,
        ascending: newSorter.order === 'ascend',
+        type: type,
        ...(params?.search !== '' ? { searchQuery: params.search } : {})
      });

--- a/src/pages/company/customer/detail/index.jsx
+++ b/src/pages/company/customer/detail/index.jsx
@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Select, Button, Space, Card, Typography } from 'antd';
+import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
+import { supabase } from '@/config/supabase';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+
+const { TextArea } = Input;
+const { Title } = Typography;
+    
+const CustomerForm = () => {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const isView = id&&!searchParams.get('edit');
+  const [form] = Form.useForm();
+  const navigate = useNavigate();
+
+  const fetchCustomerDetail = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('id', id)
+        .single();
+
+      if (error) throw error;
+      
+      if (id) {
+        form.setFieldsValue({
+          name: data.attributes.name,
+          contact: data.attributes.contact,
+          phone: data.attributes.phone,
+          address: data.attributes.address,
+          level: data.attributes.level || 'regular',
+          status: data.attributes.status || 'active',
+          remark: data.attributes.remark
+        });
+      }
+    } catch (error) {
+      console.error('获取客户详情失败:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (id) {
+      fetchCustomerDetail();
+    }
+  }, [id]);
+
+  const onFinish = async (values) => {
+    try {
+      const customerData = {
+        type: 'customer',
+        attributes: {
+          name: values.name,
+          contact: values.contact,
+          phone: values.phone,
+          address: values.address,
+          level: values.level,
+          status: values.status,
+          remark: values.remark
+        }
+      };
+
+      let result;
+      if (id) {
+        result = await supabase
+          .from('resources')
+          .update(customerData)
+          .eq('id', id)
+          .select();
+      } else {
+        result = await supabase
+          .from('resources')
+          .insert([customerData])
+          .select();
+      }
+
+      if (result.error) throw result.error;
+      navigate('/company/customer');
+    } catch (error) {
+      console.error('保存失败:', error);
+    }
+  };
+
+  return (
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+      <Card 
+        className="shadow-lg rounded-lg border-0"
+        title={
+          <div className="flex justify-between items-center py-2">
+            <div className="flex items-center space-x-3">
+              <Title level={4} className="mb-0 text-gray-800">
+                {id ? '编辑客户' : '新建客户'}
+              </Title>
+              <span className="text-gray-400 text-sm">
+                {id ? '请修改客户信息' : '请填写客户信息'}
+              </span>
+            </div>
+            <Space size="middle">
+              <Button 
+                icon={<ArrowLeftOutlined />}
+                onClick={() => navigate('/company/customer')}
+              >
+                返回
+              </Button>
+              {!isView && (
+                <Button 
+                  type="primary" 
+                  icon={<SaveOutlined />}
+                  onClick={() => form.submit()}
+                >
+                  保存
+                </Button>
+              )}
+            </Space>
+          </div>
+        }
+        bodyStyle={{ backgroundColor: '#fff' }}
+      >
+        <Form
+          form={form}
+          onFinish={onFinish}
+          layout="vertical"
+          initialValues={{
+            status: 'active',
+            level: 'regular'
+          }}
+          className="space-y-6"
+          disabled={isView}
+        >
+          <Card 
+            className="shadow-sm rounded-lg"
+            type="inner" 
+            title={
+              <span className="flex items-center space-x-2 text-gray-700">
+                <span className="w-1 h-4 bg-blue-500 rounded-full"/>
+                <span>基本信息</span>
+              </span>
+            }
+          >
+            <Form.Item
+              label="客户名称"
+              name="name"
+              rules={[{ required: true, message: '请输入客户名称' }]}
+            >
+              <Input placeholder="请输入客户名称" />
+            </Form.Item>
+
+            <Form.Item
+              label="联系人"
+              name="contact"
+              rules={[{ required: true, message: '请输入联系人姓名' }]}
+            >
+              <Input placeholder="请输入联系人姓名" />
+            </Form.Item>
+
+            <Form.Item
+              label="联系电话"
+              name="phone"
+              rules={[
+                { required: true, message: '请输入联系电话' },
+              ]}
+            >
+              <Input placeholder="请输入联系电话" />
+            </Form.Item>
+
+            <Form.Item
+              label="客户等级"
+              name="level"
+              rules={[{ required: true, message: '请选择客户等级' }]}
+            >
+              <Select>
+                <Select.Option value="vip">VIP客户</Select.Option>
+                <Select.Option value="regular">普通客户</Select.Option>
+                <Select.Option value="potential">潜在客户</Select.Option>
+              </Select>
+            </Form.Item>
+
+            <Form.Item
+              label="地址"
+              name="address"
+            >
+              <Input.TextArea rows={3} placeholder="请输入详细地址" />
+            </Form.Item>
+
+            <Form.Item
+              label="状态"
+              name="status"
+              rules={[{ required: true, message: '请选择状态' }]}
+            >
+              <Select>
+                <Select.Option value="active">启用</Select.Option>
+                <Select.Option value="inactive">禁用</Select.Option>
+              </Select>
+            </Form.Item>
+
+            <Form.Item
+              label="备注"
+              name="remark"
+            >
+              <Input.TextArea rows={3} placeholder="请输入备注信息" />
+            </Form.Item>
+          </Card>
+        </Form>
+      </Card>
+    </div>
+  );
+};
+
+export default CustomerForm;
--- a/src/pages/company/customer/index.jsx
+++ b/src/pages/company/customer/index.jsx
@@ -1,41 +1,172 @@
-import React from 'react';
-import { Card, Table, Button } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import { Card, Table, Button, message, Popconfirm, Tag, Space } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { useResources } from '@/hooks/resource/useResource';
+import { useNavigate } from 'react-router-dom';

 const CustomerPage = () => {
+  const navigate = useNavigate();
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
+  const [sorter, setSorter] = useState({ field: 'created_at', order: 'descend' });
+
+  const {
+    resources: customers,
+    loading,
+    total,
+    fetchResources: fetchCustomers,
+    deleteResource: deleteCustomer
+  } = useResources(pagination, sorter, 'customer');
+
+  useEffect(() => {
+    fetchCustomers();
+  }, []);
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setPagination(pagination);
+    setSorter(sorter);
+    fetchCustomers({
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      field: sorter.field,
+      order: sorter.order,
+    });
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await deleteCustomer(id);
+      message.success('删除成功');
+      fetchCustomers();
+    } catch (error) {
+      message.error('删除失败：' + error.message);
+    }
+  };
+
  const columns = [
    {
      title: '客户名称',
-      dataIndex: 'name',
+      dataIndex: ['attributes', 'name'],
      key: 'name',
+      ellipsis: true,
    },
    {
      title: '联系人',
-      dataIndex: 'contact',
+      dataIndex: ['attributes', 'contact'],
      key: 'contact',
    },
    {
      title: '电话',
-      dataIndex: 'phone',
+      dataIndex: ['attributes', 'phone'],
      key: 'phone',
    },
+    {
+      title: '客户等级',
+      dataIndex: ['attributes', 'level'],
+      key: 'level',
+      render: (level) => {
+        const colors = {
+          vip: 'gold',
+          regular: 'blue',
+          potential: 'green'
+        };
+        const labels = {
+          vip: 'VIP客户',
+          regular: '普通客户',
+          potential: '潜在客户'
+        };
+        return <Tag color={colors[level]}>{labels[level]}</Tag>;
+      },
+    },
    {
      title: '状态',
-      dataIndex: 'status',
+      dataIndex: ['attributes', 'status'],
      key: 'status',
+      render: (status) => (
+        <Tag color={status === 'active' ? 'green' : 'red'}>
+          {status === 'active' ? '启用' : '禁用'}
+        </Tag>
+      ),
+    },
+    {
+      title: '创建日期',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      sorter: true,
+      width: 180,
+      render: (text) => (
+        <span>{new Date(text).toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit'
+        })}</span>
+      ),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 150,
+      render: (_, record) => (
+        <Space size={0}>
+          <Button
+            size='small'
+            type="link"
+            icon={<EditOutlined />}
+            onClick={() => navigate(`/company/customerInfo/${record.id}?edit=true`)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要删除这个客户吗？"
+            description="删除后将无法恢复！"
+            onConfirm={() => handleDelete(record.id)}
+            okText="确定"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+          >
+            <Button size='small' type="link" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
    },
  ];

  return (
    <Card
-      title="客户管理"
+      title={
+        <Space>
+          <span>客户管理</span>
+          <Tag color="blue">{total} 个客户</Tag>
+        </Space>
+      }
+      className='h-full w-full overflow-auto'
      extra={
-        <Button type="primary" icon={<PlusOutlined />}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => navigate('/company/customerInfo')}
+        >
          新增客户
        </Button>
      }
    >
-      <Table columns={columns} dataSource={[]} rowKey="id" />
+      <Table
+        columns={columns}
+        dataSource={customers}
+        rowKey="id"
+        loading={loading}
+        onChange={handleTableChange}
+        pagination={{
+          ...pagination,
+          total,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: (total) => `共 ${total} 条记录`,
+        }}
+      />
    </Card>
  );
 };
--- a/src/pages/company/quotation/detail/index.jsx
+++ b/src/pages/company/quotation/detail/index.jsx
@@ -25,6 +25,7 @@ const QuotationForm = () => {
  const [dataSource, setDataSource] = useState([{ id: Date.now() }]);
  const [totalAmount, setTotalAmount] = useState(0);
  const [currentCurrency, setCurrentCurrency] = useState('CNY');
+  const [customers, setCustomers] = useState([]);

  const calculateTotal = (items = []) => {
    const total = items.reduce((sum, item) => {
@@ -127,7 +128,7 @@ const QuotationForm = () => {
    },
    {
      title: '操作',
-      width: '10%',
+      width: 100,
      render: (_, record, index) => (
        <Button
          type="link"
@@ -157,13 +158,13 @@ const QuotationForm = () => {

      if (error) throw error;
      
-      
      if (isEdit) {
-        // 设置表单初始值
        form.setFieldsValue({
          quataName: data.attributes.quataName,
-          companyName: data.attributes.companyName,
-          supplierName: data.attributes.supplierName,
+          customer: {
+            id: data.attributes.customerId,
+            name: data.attributes.customerName
+          },
          description: data.attributes.description,
          currency: data.attributes.currency,
          items: data.attributes.items,
@@ -194,8 +195,8 @@ const QuotationForm = () => {
        type: 'quota',
        attributes: {
          quataName: values.quataName,
-          companyName: values.companyName,
-          supplierName: values.supplierName,
+          customerId: values.customer.id,
+          customerName: values.customer.name,
          description: values.description,
          currency: values.currency,
          items: values.items,
@@ -224,7 +225,25 @@ const QuotationForm = () => {
    }
  };

- 
+  const fetchCustomers = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('type', 'customer')
+        .eq('attributes->>status', 'active');  // 只获取启用状态的客户
+
+      if (error) throw error;
+      
+      setCustomers(data || []);
+    } catch (error) {
+      console.error('获取客户列表失败:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchCustomers();
+  }, []);

  return (
    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
@@ -259,7 +278,7 @@ const QuotationForm = () => {
            </Space>
          </div>
        }
-        bodyStyle={{ backgroundColor: '#fff' }}
+        style={{ backgroundColor: '#fff' }}
      >
        <Form
          form={form}
@@ -297,7 +316,7 @@ const QuotationForm = () => {
                />
              </Form.Item>

-              <Form.Item
+              {/* <Form.Item
                name="companyName"
                label={<span className="text-gray-700 font-medium">公司名称</span>}
                rules={[{ required: true, message: '请输入公司名称' }]}
@@ -306,17 +325,46 @@ const QuotationForm = () => {
                  placeholder="请输入公司名称" 
                  className="rounded-md hover:border-blue-400 focus:border-blue-500"
                />
+              </Form.Item> */}
+
+              <Form.Item
+                name={['customer', 'name']}
+                label={<span className="text-gray-700 font-medium">客户名称</span>}
+                rules={[{ required: true, message: '请选择客户' }]}
+              >
+                <Select
+                  placeholder="请选择客户"
+                  className="rounded-md hover:border-blue-400 focus:border-blue-500"
+                  showSearch
+                  optionFilterProp="children"
+                  filterOption={(input, option) =>
+                    (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
+                  }
+                  onChange={(value, option) => {
+                    form.setFieldsValue({
+                      customer: {
+                        id: option.key,
+                        name: value
+                      }
+                    });
+                  }}
+                >
+                  {customers.map(customer => (
+                    <Select.Option 
+                      key={customer.id} 
+                      value={customer.attributes.name}
+                    >
+                      {customer.attributes.name}
+                    </Select.Option>
+                  ))}
+                </Select>
              </Form.Item>

              <Form.Item
-                name="supplierName"
-                label={<span className="text-gray-700 font-medium">供应商名称</span>}
-                rules={[{ required: true, message: '请输入供应商名称' }]}
+                name={['customer', 'id']}
+                hidden
              >
-                <Input 
-                  placeholder="请输入供应商名称" 
-                  className="rounded-md hover:border-blue-400 focus:border-blue-500"
-                />
+                <Input />
              </Form.Item>
            </div>
          </Card>
--- a/src/pages/company/quotation/index.jsx
+++ b/src/pages/company/quotation/index.jsx
@@ -16,7 +16,7 @@ const QuotationPage = () => {
    total,
    fetchResources: fetchQuotations,
    deleteResource: deleteQuotation
-  } = useResources(pagination, sorter);
+  } = useResources(pagination, sorter, 'quota');

  useEffect(() => {
    fetchQuotations();
@@ -52,18 +52,12 @@ const QuotationPage = () => {
    },
    {
      title: '客户信息',
-      dataIndex: ['attributes', 'companyName'],
-      key: 'companyName',
-      render: (companyName) => (
-        <Tag color="blue">{companyName}</Tag>
-      ),
-    },
-    {
-      title: '供应商',
-      dataIndex: ['attributes', 'supplierName'],
-      key: 'supplierName',
-      render: (supplierName) => (
-        <Tag color="green">{supplierName}</Tag>
+      dataIndex: ['attributes', 'customerName'],
+      key: 'customerName',
+      render: (customerName,record) => (
+        <Tag color="blue" className='cursor-pointer' onClick={() => {
+          navigate(`/company/customerInfo/${record.attributes.customerId}`)
+        }}>{customerName}</Tag>
      ),
    },
    {
@@ -82,7 +76,7 @@ const QuotationPage = () => {
      dataIndex: 'created_at',
      key: 'created_at',
      sorter: true,
-      width: 180,
+      width: 120,
      render: (text) => (
        <span>{new Date(text).toLocaleString('zh-CN', {
          year: 'numeric',
@@ -96,11 +90,11 @@ const QuotationPage = () => {
    {
      title: '操作',
      key: 'action',
-      width:180,
+      width:200,
      render: (_, record) => (
-        <Space size="mini">
+        <Space size={0}>
          <Button
-          size='mini'
+          size='small'
            type="link"
            icon={<EyeOutlined />}
            onClick={() => navigate(`/company/quotaInfo/preview/${record.id}`)}
@@ -108,7 +102,7 @@ const QuotationPage = () => {
            查看
          </Button>
          <Button
-            size='mini'
+            size='small'
            type="link"
            icon={<EditOutlined />}
            onClick={() => navigate(`/company/quotaInfo/${record.id}?edit=true`)}
@@ -123,7 +117,7 @@ const QuotationPage = () => {
            cancelText="取消"
            okButtonProps={{ danger: true }}
          >
-            <Button    size='mini' type="link" danger icon={<DeleteOutlined />}>
+            <Button   size='small' type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
--- a/src/pages/company/quotation/view/index.jsx
+++ b/src/pages/company/quotation/view/index.jsx
@@ -63,7 +63,7 @@ const QuotationView = () => {
      if (error) throw error;
      setData(quotation);
    } catch (error) {
-      console.error('获取报价单<EFBFBD><EFBFBD>情失败:', error);
+      console.error('获取报价单失败:', error);
    } finally {
      setLoading(false);
    }
@@ -197,10 +197,7 @@ const QuotationView = () => {
          <div className="bg-gray-50 p-6 rounded-lg mb-8">
            <Descriptions column={2} bordered>
              <Descriptions.Item label="客户公司" span={1}>
-                {data.attributes.companyName}
-              </Descriptions.Item>
-              <Descriptions.Item label="供应商" span={1}>
-                {data.attributes.supplierName}
+                {data.attributes.customerName}
              </Descriptions.Item>
              <Descriptions.Item label="报价日期" span={1}>
                {new Date(data.created_at).toLocaleDateString('zh-CN')}
--- a/src/pages/company/supplier/detail/index.jsx
+++ b/src/pages/company/supplier/detail/index.jsx
@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Select, Button, Space, Card, Typography } from 'antd';
+import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
+import { supabase } from '@/config/supabase';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+
+const { TextArea } = Input;
+const { Title } = Typography;
+
+const SupplierForm = () => {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const isEdit = searchParams.get('edit') === 'true';
+  const isView = id && !isEdit;
+  const [form] = Form.useForm();
+  const navigate = useNavigate();
+
+  const fetchSupplierDetail = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('id', id)
+        .single();
+
+      if (error) throw error;
+      
+      if (id) {
+        // 设置表单初始值
+        form.setFieldsValue({
+          name: data.attributes.name,
+          contact: data.attributes.contact,
+          phone: data.attributes.phone,
+          address: data.attributes.address,
+          status: data.attributes.status || 'active',
+          remark: data.attributes.remark
+        });
+      }
+    } catch (error) {
+      console.error('获取供应商详情失败:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (id) {
+      fetchSupplierDetail();
+    }
+  }, [id]);
+
+  const onFinish = async (values) => {
+    try {
+      const supplierData = {
+        type: 'supplier',
+        attributes: {
+          name: values.name,
+          contact: values.contact,
+          phone: values.phone,
+          address: values.address,
+          status: values.status,
+          remark: values.remark
+        }
+      };
+
+      let result;
+      if (id) {
+        result = await supabase
+          .from('resources')
+          .update(supplierData)
+          .eq('id', id)
+          .select();
+      } else {
+        result = await supabase
+          .from('resources')
+          .insert([supplierData])
+          .select();
+      }
+
+      if (result.error) throw result.error;
+      navigate('/company/supplier');
+    } catch (error) {
+      console.error('保存失败:', error);
+    }
+  };
+
+  return (
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+      <Card 
+        className="shadow-lg rounded-lg border-0"
+        title={
+          <div className="flex justify-between items-center py-2">
+            <div className="flex items-center space-x-3">
+              <Title level={4} className="mb-0 text-gray-800">
+                {id ? (isEdit ? '编辑供应商' : '查看供应商') : '新建供应商'}
+              </Title>
+              <span className="text-gray-400 text-sm">
+                {id ? (isEdit ? '请修改供应商信息' : '供应商详情') : '请填写供应商信息'}
+              </span>
+            </div>
+            <Space size="middle">
+              <Button 
+                icon={<ArrowLeftOutlined />}
+                onClick={() => navigate('/company/supplier')}
+              >
+                返回
+              </Button>
+              {!isView && (
+                <Button 
+                  type="primary" 
+                  icon={<SaveOutlined />}
+                  onClick={() => form.submit()}
+                >
+                  保存
+                </Button>
+              )}
+            </Space>
+          </div>
+        }
+        bodyStyle={{ backgroundColor: '#fff' }}
+      >
+        <Form
+          form={form}
+          onFinish={onFinish}
+          layout="vertical"
+          initialValues={{
+            status: 'active'
+          }}
+          className="space-y-6"
+          disabled={isView}
+        >
+          {/* 基本信息卡片 */}
+          <Card 
+            className="shadow-sm rounded-lg"
+            type="inner" 
+            title={
+              <span className="flex items-center space-x-2 text-gray-700">
+                <span className="w-1 h-4 bg-blue-500 rounded-full"/>
+                <span>基本信息</span>
+              </span>
+            }
+          >
+            <Form.Item
+              label="供应商名称"
+              name="name"
+              rules={[{ required: true, message: '请输入供应商名称' }]}
+            >
+              <Input placeholder="请输入供应商名称" />
+            </Form.Item>
+
+            <Form.Item
+              label="联系人"
+              name="contact"
+              rules={[{ required: true, message: '请输入联系人姓名' }]}
+            >
+              <Input placeholder="请输入联系人姓名" />
+            </Form.Item>
+
+            <Form.Item
+              label="联系电话"
+              name="phone"
+              rules={[
+                { required: true, message: '请输入联系电话' },
+              ]}
+            >
+              <Input placeholder="请输入联系电话" />
+            </Form.Item>
+
+            <Form.Item
+              label="地址"
+              name="address"
+            >
+              <Input.TextArea rows={3} placeholder="请输入详细地址" />
+            </Form.Item>
+
+            <Form.Item
+              label="状态"
+              name="status"
+              rules={[{ required: true, message: '请选择状态' }]}
+            >
+              <Select>
+                <Select.Option value="active">启用</Select.Option>
+                <Select.Option value="inactive">禁用</Select.Option>
+              </Select>
+            </Form.Item>
+
+            <Form.Item
+              label="备注"
+              name="remark"
+            >
+              <Input.TextArea rows={3} placeholder="请输入备注信息" />
+            </Form.Item>
+          </Card>
+        </Form>
+      </Card>
+    </div>
+  );
+};
+
+export default SupplierForm;
--- a/src/pages/company/supplier/index.jsx
+++ b/src/pages/company/supplier/index.jsx
@@ -1,41 +1,154 @@
-import React from 'react';
-import { Card, Table, Button } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import { Card, Table, Button, message, Popconfirm, Tag, Space } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { useResources } from '@/hooks/resource/useResource';
+import { useNavigate } from 'react-router-dom';

 const SupplierPage = () => {
+  const navigate = useNavigate();
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
+  const [sorter, setSorter] = useState({ field: 'created_at', order: 'descend' });
+
+  const {
+    resources: suppliers,
+    loading,
+    total,
+    fetchResources: fetchSuppliers,
+    deleteResource: deleteSupplier
+  } = useResources(pagination, sorter, 'supplier'); 
+
+  useEffect(() => {
+    fetchSuppliers();
+  }, []);
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setPagination(pagination);
+    setSorter(sorter);
+    fetchSuppliers({
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      field: sorter.field,
+      order: sorter.order,
+    });
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await deleteSupplier(id);
+      message.success('删除成功');
+      fetchSuppliers();
+    } catch (error) {
+      message.error('删除失败：' + error.message);
+    }
+  };
+
  const columns = [
    {
      title: '供应商名称',
-      dataIndex: 'name',
+      dataIndex: ['attributes', 'name'],
      key: 'name',
+      ellipsis: true,
    },
    {
      title: '联系人',
-      dataIndex: 'contact',
+      dataIndex: ['attributes', 'contact'],
      key: 'contact',
    },
    {
      title: '电话',
-      dataIndex: 'phone',
+      dataIndex: ['attributes', 'phone'],
      key: 'phone',
    },
    {
      title: '状态',
-      dataIndex: 'status',
+      dataIndex: ['attributes', 'status'],
      key: 'status',
+      render: (status) => (
+        <Tag color={status === 'active' ? 'green' : 'red'}>
+          {status === 'active' ? '启用' : '禁用'}
+        </Tag>
+      ),
+    },
+    {
+      title: '创建日期',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      sorter: true,
+      width: 180,
+      render: (text) => (
+        <span>{new Date(text).toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit'
+        })}</span>
+      ),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 150,
+      render: (_, record) => (
+        <Space size={0}>
+          <Button
+             size='small'
+            type="link"
+            icon={<EditOutlined />}
+            onClick={() => navigate(`/company/supplierInfo/${record.id}?edit=true`)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要删除这个供应商吗？"
+            description="删除后将无法恢复！"
+            onConfirm={() => handleDelete(record.id)}
+            okText="确定"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+          >
+            <Button  size='small' type="link" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
    },
  ];

  return (
    <Card
-      title="供应商管理"
+      title={
+        <Space>
+          <span>供应商管理</span>
+          <Tag color="blue">{total} 个供应商</Tag>
+        </Space>
+      }
+      className='h-full w-full overflow-auto'
      extra={
-        <Button type="primary" icon={<PlusOutlined />}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => navigate('/company/supplierInfo')}
+        >
          新增供应商
        </Button>
      }
    >
-      <Table columns={columns} dataSource={[]} rowKey="id" />
+      <Table
+        columns={columns}
+        dataSource={suppliers}
+        rowKey="id"
+        loading={loading}
+        onChange={handleTableChange}
+        pagination={{
+          ...pagination,
+          total,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: (total) => `共 ${total} 条记录`,
+        }}
+      />
    </Card>
  );
 };
--- a/src/pages/resource/team/components/MembershipTable.jsx
+++ b/src/pages/resource/team/components/MembershipTable.jsx
@@ -68,6 +68,7 @@ export const MembershipTable = ({ memberships, onUpdate, onDelete, onAdd }) => {
    {
      title: '操作',
      key: 'action',
+      width: 180,
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
@@ -76,6 +77,7 @@ export const MembershipTable = ({ memberships, onUpdate, onDelete, onAdd }) => {
              icon={<SaveOutlined />}
              onClick={() => save(record.id)}
              type="link"
+               size='small'
            >
              保存
            </Button>
@@ -83,6 +85,7 @@ export const MembershipTable = ({ memberships, onUpdate, onDelete, onAdd }) => {
              icon={<CloseOutlined />}
              onClick={cancel}
              type="link"
+               size='small'
            >
              取消
            </Button>
@@ -94,6 +97,7 @@ export const MembershipTable = ({ memberships, onUpdate, onDelete, onAdd }) => {
              icon={<EditOutlined />}
              onClick={() => edit(record)}
              type="link"
+               size='small'
            >
              编辑
            </Button>
@@ -105,6 +109,7 @@ export const MembershipTable = ({ memberships, onUpdate, onDelete, onAdd }) => {
                <Button
                  icon={<DeleteOutlined />}
                  type="link"
+                   size='small'
                  danger
                >
                  删除
--- a/src/pages/resource/team/components/TeamTable.jsx
+++ b/src/pages/resource/team/components/TeamTable.jsx
@@ -100,19 +100,22 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
    {
      title: '操作',
      key: 'action',
+      width: 180,
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
-          <Space>
+          <Space  size={0}>
            <Button
              icon={<SaveOutlined />}
              onClick={() => save(record.id)}
              type="link"
+              size='small'
              loading={loading}
            >
              保存
            </Button>
            <Button
+             size='small'
              icon={<CloseOutlined />}
              onClick={cancel}
              type="link"
@@ -123,6 +126,7 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
        ) : (
          <Space>
            <Button
+             size='small'
              disabled={editingKey !== ''}
              icon={<EditOutlined />}
              onClick={() => edit(record)}
@@ -138,6 +142,7 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
                icon={<DeleteOutlined />}
                type="link"
                danger
+                 size='small'
                loading={loading}
              >
                删除
--- a/src/services/supabase/resource.js
+++ b/src/services/supabase/resource.js
@@ -1,12 +1,12 @@
 import { supabase } from '@/config/supabase';

 export const resourceService = {
-  async getResources({ page = 1, pageSize = 10, orderBy = 'created_at', ascending = false, searchQuery = '' }) {
+  async getResources({ page = 1, pageSize = 10, orderBy = 'created_at', ascending = false, searchQuery = '', type = '' }) {
    try {
      let query = supabase
        .from('resources')
        .select('*', { count: 'exact' })
-        .eq('type','quota')
+        .eq('type', type)

      if (searchQuery) {
        query = query.or(`external_id.ilike.%${searchQuery}%`);