import React, { useEffect, useState } from 'react'; import { Card, Typography, Descriptions, Table, Button, Space, Spin } from 'antd'; import { ArrowLeftOutlined, PrinterOutlined, EditOutlined } from '@ant-design/icons'; import { useNavigate, useParams } from 'react-router-dom'; import { supabase } from '@/config/supabase'; import ReactDOMServer from 'react-dom/server'; import PrintView from '@/components/PrintView'; const { Title, Text } = Typography; const printStyles = ` @media print { /* 隐藏所有按钮和不需要的元素 */ button, .no-print { display: none !important; } /* 只打印卡片内容 */ .ant-card { box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* 移除背景色 */ body, .bg-gray-50 { background: white !important; min-height: auto !important; padding: 0 !important; } /* 确保内容完整打印 */ .ant-card-body { padding: 24px !important; page-break-inside: avoid; } /* 优化表格打印样式 */ .ant-table { page-break-inside: auto !important; } .ant-table-row { page-break-inside: avoid !important; } } `; const QuotationView = () => { const navigate = useNavigate(); const { id } = useParams(); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const fetchQuotationDetail = async () => { try { const { data: quotation, error } = await supabase .from('resources') .select('*') .eq('id', id) .single(); if (error) throw error; setData(quotation); } catch (error) { console.error('获取报价单��情失败:', error); } finally { setLoading(false); } }; useEffect(() => { if (id) { fetchQuotationDetail(); } }, [id]); const columns = [ { title: '序号', dataIndex: 'index', width: 100, 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 }) ), }, ]; const handlePrint = () => { const printWindow = window.open('', '_blank'); const printContent = ReactDOMServer.renderToString(); printWindow.document.write(` 打印报价单 ${printContent} `); printWindow.document.close(); }; if (loading) { return (
); } if (!data) { return null; } return ( <>
{data.attributes.quataName} 报价单号：{data.id}
{data.attributes.companyName} {data.attributes.supplierName} {new Date(data.created_at).toLocaleDateString('zh-CN')} {new Date(Date.now() + 30*24*60*60*1000).toLocaleDateString('zh-CN')}
报价明细 index} className="border rounded-lg" summary={() => ( 总计（{data.attributes.currency}）： {data.attributes.totalAmount?.toLocaleString('zh-CN', { minimumFractionDigits: 2, style: 'currency', currency: data.attributes.currency })} )} /> {data.attributes.description && (
补充说明 {data.attributes.description}
)}
注意事项：
  • 1. 本报价单有效期为30天
  • 2. 最终解释权归本公司所有
  • 3. 如有疑问请及时联系我们
); }; export default QuotationView;