报价单魔魁

src/components/Layout/MainLayout.jsx

@@ -12,19 +12,22 @@ const MainLayout = () => {
   const { isDarkMode } = useTheme();
 
   return (
-    <Layout style={{ minHeight: '100vh' }}>
+    <Layout className="min-h-screen">
       <Sidebar collapsed={collapsed} />
-      <Layout>
+      <Layout className="flex flex-col h-screen">
         <Header collapsed={collapsed} setCollapsed={setCollapsed} />
         <Content
-          style={{
-            margin: '24px 16px',
-            padding: 24,
-            background: isDarkMode ? '#141414' : '#fff',
-            borderRadius: '4px',
-          }}
+          className={`
+            m-2 p-4 rounded-lg overflow-auto
+            ${isDarkMode ? 'bg-[#141414]' : 'bg-white'}
+            flex-1
+          `}
         >
-          <Suspense fallback={<Spin size="large" />}>
+          <Suspense fallback={
+            <div className="flex items-center justify-center h-full">
+              <Spin size="large" />
+            </div>
+          }>
             <Outlet />
           </Suspense>
         </Content>

src/components/PrintView/index.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Table } from 'antd';
+
+const PrintView = ({ data }) => {
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      width: 60,
+      render: (_, __, index) => index + 1,
+    },
+    {
+      title: '名称',
+      dataIndex: 'productName',
+      width: '40%',
+    },
+    {
+      title: '数量',
+      dataIndex: 'quantity',
+      width: '20%',
+      align: 'right',
+      render: (value) => value?.toLocaleString('zh-CN', { minimumFractionDigits: 2 }),
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      width: '20%',
+      align: 'right',
+      render: (value) => value?.toLocaleString('zh-CN', { minimumFractionDigits: 2 }),
+    },
+    {
+      title: '小计',
+      width: '20%',
+      align: 'right',
+      render: (_, record) => (
+        (record.quantity * record.price)?.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
+      ),
+    },
+  ];
+
+  return (
+    <div className="print-wrapper">
+      <div className="print-header">
+        <h1>{data.attributes.quataName}</h1>
+        <div className="quotation-id">报价单号：{data.id}</div>
+      </div>
+
+      <div className="info-grid">
+        <div className="info-item">
+          <span className="info-label">客户公司</span>
+          <span className="info-value">{data.attributes.companyName}</span>
+        </div>
+        <div className="info-item">
+          <span className="info-label">供应商</span>
+          <span className="info-value">{data.attributes.supplierName}</span>
+        </div>
+        <div className="info-item">
+          <span className="info-label">报价日期</span>
+          <span className="info-value">
+            {new Date(data.created_at).toLocaleDateString('zh-CN')}
+          </span>
+        </div>
+        <div className="info-item">
+          <span className="info-label">报价有效期</span>
+          <span className="info-value">
+            {new Date(Date.now() + 30*24*60*60*1000).toLocaleDateString('zh-CN')}
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <div className="section-title">报价明细</div>
+        <Table
+          columns={columns}
+          dataSource={data.attributes.items}
+          pagination={false}
+          rowKey={(record, index) => index}
+          bordered
+          summary={() => (
+            <Table.Summary fixed>
+              <Table.Summary.Row>
+                <Table.Summary.Cell index={0} colSpan={4} align="right">
+                  总计（{data.attributes.currency}）：
+                </Table.Summary.Cell>
+                <Table.Summary.Cell index={1} align="right">
+                  <span style={{ color: '#1890ff', fontSize: '16px' }}>
+                    {data.attributes.totalAmount?.toLocaleString('zh-CN', { 
+                      minimumFractionDigits: 2,
+                      style: 'currency',
+                      currency: data.attributes.currency 
+                    })}
+                  </span>
+                </Table.Summary.Cell>
+              </Table.Summary.Row>
+            </Table.Summary>
+          )}
+        />
+      </div>
+
+      {data.attributes.description && (
+        <div className="description-section">
+          <div className="section-title">补充说明</div>
+          <div>{data.attributes.description}</div>
+        </div>
+      )}
+
+      <div className="notes-section">
+        <div className="notes-title">注意事项：</div>
+        <ul className="notes-list">
+          <li>本报价单有效期为30天</li>
+          <li>最终解释权归本公司所有</li>
+          <li>如有疑问请及时联系我们</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default PrintView;