报价单魔魁

src/pages/company/quotation/index.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Table, Button, Modal, Form, Input, message, Popconfirm } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { Card, Table, Button, message, Popconfirm, Tag, Space, Tooltip } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
 import { useResources } from '@/hooks/resource/useResource';
+import { useNavigate } from 'react-router-dom';
+import { formatCurrency } from '@/utils/format'; // 假设你有这个工具函数，如果没有我会提供
 
 const QuotationPage = () => {
-  const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
-  const [editingId, setEditingId] = useState(null);
+  const navigate = useNavigate();
   const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
   const [sorter, setSorter] = useState({ field: 'created_at', order: 'descend' });
 
@@ -15,8 +15,6 @@ const QuotationPage = () => {
     loading,
     total,
     fetchResources: fetchQuotations,
-    createResource: createQuotation,
-    updateResource: updateQuotation,
     deleteResource: deleteQuotation
   } = useResources(pagination, sorter);
 
@@ -35,109 +33,119 @@ const QuotationPage = () => {
     });
   };
 
-  const handleSubmit = async (values) => {
-    try {
-      const quotationData = {
-        external_id: values.id,
-        attributes: {
-          customerName: values.customerName,
-          status: values.status || '新建',
-        },
-        type: 'quota'
-      };
-
-      if (editingId) {
-        await updateQuotation(editingId, quotationData);
-      } else {
-        await createQuotation(quotationData);
-      }
-      setVisible(false);
-      form.resetFields();
-      fetchQuotations();
-    } catch (error) {
-      console.error('提交失败:', error);
-    }
-  };
-
   const handleDelete = async (id) => {
     try {
       await deleteQuotation(id);
+      message.success('删除成功');
       fetchQuotations();
     } catch (error) {
-      console.error('删除失败:', error);
+      message.error('删除失败：' + error.message);
     }
   };
 
   const columns = [
     {
-      title: '报价单号',
-      dataIndex: ['external_id'],
-      key: 'external_id',
-      sorter: true,
+      title: '报价单名称',
+      dataIndex: ['attributes', 'quataName'],
+      key: 'quataName',
+      ellipsis: true,
     },
     {
-      title: '客户名称',
-      dataIndex: ['attributes', 'customerName'],
-      key: 'customerName',
+      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>
+      ),
+    },
+    {
+      title: '报价总额',
+      dataIndex: ['attributes', 'totalAmount'],
+      key: 'totalAmount',
+      align: 'right',
+      render: (amount) => (
+        <span style={{ color: '#f50', fontWeight: 'bold' }}>
+          ¥{amount?.toLocaleString()}
+        </span>
+      ),
     },
     {
       title: '创建日期',
       dataIndex: 'created_at',
       key: 'created_at',
       sorter: true,
-      render: (text) => new Date(text).toLocaleString(),
-    },
-    {
-      title: '状态',
-      dataIndex: ['attributes', 'status'],
-      key: 'status',
+      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:180,
       render: (_, record) => (
-        <span>
+        <Space size="mini">
           <Button
+          size='mini'
             type="link"
-            onClick={() => {
-              setEditingId(record.id);
-              form.setFieldsValue({
-                id: record.external_id,
-                customerName: record.attributes?.customerName,
-                status: record.attributes?.status,
-              });
-              setVisible(true);
-            }}
+            icon={<EyeOutlined />}
+            onClick={() => navigate(`/company/quotaInfo/preview/${record.id}`)}
+          >
+            查看
+          </Button>
+          <Button
+            size='mini'
+            type="link"
+            icon={<EditOutlined />}
+            onClick={() => navigate(`/company/quotaInfo/${record.id}?edit=true`)}
           >
             编辑
           </Button>
           <Popconfirm
             title="确定要删除这个报价单吗？"
+            description="删除后将无法恢复！"
             onConfirm={() => handleDelete(record.id)}
             okText="确定"
             cancelText="取消"
+            okButtonProps={{ danger: true }}
           >
-            <Button type="link" danger>
+            <Button    size='mini' type="link" danger icon={<DeleteOutlined />}>
               删除
             </Button>
           </Popconfirm>
-        </span>
+        </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 />}
-          onClick={() => {
-            setEditingId(null);
-            form.resetFields();
-            setVisible(true);
-          }}
+          onClick={() => navigate('/company/quotaInfo')}
         >
           新增报价单
         </Button>
@@ -152,55 +160,11 @@ const QuotationPage = () => {
         pagination={{
           ...pagination,
           total,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: (total) => `共 ${total} 条记录`,
         }}
       />
-
-      <Modal
-        title={editingId ? '编辑报价单' : '新增报价单'}
-        open={visible}
-        onCancel={() => {
-          setVisible(false);
-          setEditingId(null);
-          form.resetFields();
-        }}
-        footer={null}
-      >
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleSubmit}
-        >
-          <Form.Item
-            name="id"
-            label="报价单号"
-            rules={[{ required: true, message: '请输入报价单号' }]}
-          >
-            <Input placeholder="请输入报价单号" />
-          </Form.Item>
-
-          <Form.Item
-            name="customerName"
-            label="客户名称"
-            rules={[{ required: true, message: '请输入客户名称' }]}
-          >
-            <Input placeholder="请输入客户名称" />
-          </Form.Item>
-
-          <Form.Item
-            name="status"
-            label="状态"
-            initialValue="新建"
-          >
-            <Input placeholder="请输入状态" />
-          </Form.Item>
-
-          <Form.Item>
-            <Button type="primary" htmlType="submit" block>
-              提交
-            </Button>
-          </Form.Item>
-        </Form>
-      </Modal>
     </Card>
   );
 };