备份:PWA配置前的完整版本
包含所有最新开发的功能和修复,作为PWA正确配置前的备份点。
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
||||
} from '@ant-design/icons'
|
||||
import apiClient from '../utils/request'
|
||||
import BusinessLedgerTab from '../components/BusinessLedgerTab'
|
||||
import { useLanguageStore } from '../store/languageStore'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
@@ -77,6 +78,7 @@ interface BudgetProject {
|
||||
const CustomerDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const { t, currentLanguage } = useLanguageStore()
|
||||
const [customer, setCustomer] = useState<Customer | null>(null)
|
||||
const [budgetProjects, setBudgetProjects] = useState<BudgetProject[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -109,30 +111,30 @@ const CustomerDetail: React.FC = () => {
|
||||
}
|
||||
|
||||
if (loading) return <Spin style={{ display: 'flex', justifyContent: 'center', padding: 50 }} />
|
||||
if (!customer) return <Empty description="客户不存在" style={{ marginTop: 100 }} />
|
||||
if (!customer) return <Empty description={t('customer.notFound')} style={{ marginTop: 100 }} />
|
||||
|
||||
const budgetProjectColumns = [
|
||||
{ title: '项目名称', dataIndex: 'name', key: 'name', render: (v: string, record: BudgetProject) => (
|
||||
{ title: t('customer.projectName'), dataIndex: 'name', key: 'name', render: (v: string, record: BudgetProject) => (
|
||||
<Text strong onClick={() => navigate(`/budget-projects/${record.id}`)} style={{ cursor: 'pointer', color: '#1890ff' }}>{v}</Text>
|
||||
) },
|
||||
{ title: '业务经理', dataIndex: 'manager_name', key: 'manager_name' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', align: 'center' as const, render: (v: string) => {
|
||||
{ title: t('customer.businessManager'), dataIndex: 'manager_name', key: 'manager_name' },
|
||||
{ title: t('common.status'), dataIndex: 'status', key: 'status', align: 'center' as const, render: (v: string) => {
|
||||
const map: Record<string, { status: 'success' | 'processing' | 'error' | 'default'; text: string }> = {
|
||||
negotiating: { status: 'processing', text: '商谈中' },
|
||||
signed: { status: 'success', text: '已签约' },
|
||||
unsigned: { status: 'error', text: '未签约' }
|
||||
negotiating: { status: 'processing', text: t('customer.inNegotiation') },
|
||||
signed: { status: 'success', text: t('customer.signed') },
|
||||
unsigned: { status: 'error', text: t('customer.unsigned') }
|
||||
}
|
||||
const c = map[v] || { status: 'default', text: v }
|
||||
return <Badge status={c.status} text={c.text} />
|
||||
} },
|
||||
{ title: '报价版本数', dataIndex: 'quotations', key: 'quotations', align: 'center' as const, render: (q: Quotation[]) => (q || []).length },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.split('T')[0] || '-' }
|
||||
{ title: t('customer.quotationCount'), dataIndex: 'quotations', key: 'quotations', align: 'center' as const, render: (q: Quotation[]) => (q || []).length },
|
||||
{ title: t('customer.createdAt'), dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.split('T')[0] || '-' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{ padding: '16px', maxWidth: 1200, margin: '0 auto' }}>
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/customers')} style={{ marginBottom: 16 }} type="text">
|
||||
返回列表
|
||||
{t('customer.returnToList')}
|
||||
</Button>
|
||||
|
||||
<Title level={4} style={{ marginBottom: 24 }}>
|
||||
@@ -143,42 +145,42 @@ const CustomerDetail: React.FC = () => {
|
||||
<Card style={{ borderRadius: 8 }}>
|
||||
<Tabs activeKey={activeTab} onChange={setActiveTab}>
|
||||
{/* TAB1: 基本信息 */}
|
||||
<Tabs.TabPane tab={<span><UserOutlined /> 基本信息</span>} key="basic">
|
||||
<Tabs.TabPane tab={<span><UserOutlined /> {t('customer.basicInfo')}</span>} key="basic">
|
||||
<Descriptions bordered column={{ xs: 1, sm: 2 }} size="small">
|
||||
<Descriptions.Item label="编号">{customer.code}</Descriptions.Item>
|
||||
<Descriptions.Item label="地址">{customer.address || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label={t('customer.code')}>{customer.code}</Descriptions.Item>
|
||||
<Descriptions.Item label={t('customer.address')}>{customer.address || '-'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
{customer.remark && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text type="secondary">备注:</Text>
|
||||
<Text type="secondary">{t('customer.remarkLabel')}</Text>
|
||||
<div style={{ padding: 12, background: '#f6ffed', borderRadius: 4, border: '1px solid #b7eb8f', marginTop: 8 }}>{customer.remark}</div>
|
||||
</div>
|
||||
)}
|
||||
</Tabs.TabPane>
|
||||
|
||||
{/* TAB2: 联系人 */}
|
||||
<Tabs.TabPane tab={<span><PhoneOutlined /> 联系人</span>} key="contacts">
|
||||
<Tabs.TabPane tab={<span><PhoneOutlined /> {t('customer.contact')}</span>} key="contacts">
|
||||
<Row gutter={[16, 16]}>
|
||||
{(customer.contacts || []).map((contact, i) => (
|
||||
<Col key={i} xs={24} sm={12} lg={8}>
|
||||
<Card size="small" style={{ borderLeft: contact.is_primary ? '3px solid #52c41a' : '3px solid #d9d9d9', background: contact.is_primary ? '#f6ffed' : '#fff' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||||
<Text strong>{contact.name || '未命名'}</Text>
|
||||
{contact.is_primary && <Tag color="green">主联系人</Tag>}
|
||||
<Text strong>{contact.name || t('common.unnamed')}</Text>
|
||||
{contact.is_primary && <Tag color="green">{t('customer.mainContactTag')}</Tag>}
|
||||
</div>
|
||||
<div style={{ color: '#666', fontSize: 13 }}>
|
||||
{contact.position && <div>职位:{contact.position}</div>}
|
||||
{contact.phone && <div>电话:{contact.phone}</div>}
|
||||
{contact.position && <div>{t('customer.positionLabel')}{contact.position}</div>}
|
||||
{contact.phone && <div>{t('customer.phoneLabel')}{contact.phone}</div>}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
{(customer.contacts || []).length === 0 && <Empty description="暂无联系人" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
||||
{(customer.contacts || []).length === 0 && <Empty description={t('customer.noContact')} image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
||||
</Tabs.TabPane>
|
||||
|
||||
{/* TAB3: 业务台账 */}
|
||||
<Tabs.TabPane tab={<span><DollarOutlined /> 业务台账</span>} key="ledger">
|
||||
<Tabs.TabPane tab={<span><DollarOutlined /> {t('customer.ledger')}</span>} key="ledger">
|
||||
<BusinessLedgerTab
|
||||
partnerType="customer"
|
||||
summary={customer.ledger?.summary || { item_count: 0, total_contract_amount: 0, total_received_amount: 0, total_receivable_amount: 0 }}
|
||||
@@ -187,11 +189,11 @@ const CustomerDetail: React.FC = () => {
|
||||
</Tabs.TabPane>
|
||||
|
||||
{/* TAB4: 关联预算 */}
|
||||
<Tabs.TabPane tab={<span><FileTextOutlined /> 关联预算</span>} key="budget">
|
||||
<Tabs.TabPane tab={<span><FileTextOutlined /> {t('customer.relatedBudget')}</span>} key="budget">
|
||||
{budgetProjects.length > 0 ? (
|
||||
<Table columns={budgetProjectColumns} dataSource={budgetProjects} rowKey="id" size="small" pagination={{ pageSize: 10 }} bordered />
|
||||
) : (
|
||||
<Empty description="暂无关联预算项目" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
<Empty description={t('customer.noBudget')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
@@ -200,4 +202,4 @@ const CustomerDetail: React.FC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerDetail
|
||||
export default CustomerDetail
|
||||
Reference in New Issue
Block a user