备份：PWA配置前的完整版本
包含所有最新开发的功能和修复，作为PWA正确配置前的备份点。
This commit is contained in:
a273825743
@@ -1,39 +1,103 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Typography, Table, Statistic, Row, Col, Tag, Select, DatePicker, Space, Spin, Button, Modal, Form, Input, InputNumber, message, Divider } from 'antd';
|
||||
import { DollarOutlined, RiseOutlined, FallOutlined, PlusOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Card, Typography, Table, Statistic, Row, Col, Tag, Select, DatePicker, Space, Spin, Button, Modal, Form, Input, InputNumber, message, Divider, Tabs, Popconfirm, Upload } from 'antd';
|
||||
import { DollarOutlined, RiseOutlined, FallOutlined, PlusOutlined, DownloadOutlined, DeleteOutlined, UploadOutlined, FundOutlined } from '@ant-design/icons';
|
||||
import apiClient from '../../utils/request';
|
||||
import dayjs from 'dayjs';
|
||||
import * as XLSX from 'xlsx';
|
||||
import { useLanguageStore } from '../../store/languageStore';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { Title } = Typography;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const LEVEL1_LABELS: Record<string, string> = { income: '收入', project: '项目支出', company: '公司支出' };
|
||||
const LEVEL2_LABELS: Record<string, string> = {
|
||||
contract_payment: '项目合同收款', deposit_refund: '质保金退回', shareholder_investment: '股东投资入股', other_income: '其他收入',
|
||||
material: '材料采购', equipment: '设备采购', subcontract: '施工分包', labor: '人工工资',
|
||||
travel: '差旅交通', accommodation: '食宿费用', freight: '运输物流', design: '勘测设计',
|
||||
tools: '小型工具', client_relations: '客户/EDL关系', other_project: '其他项目支出',
|
||||
salary: '工资薪酬', rent: '房租物业', office: '办公费用', commute: '交通通勤',
|
||||
vehicle_maintenance: '车辆维保', assets: '固定资产', marketing: '营销拓展',
|
||||
entertainment: '招待费用', welfare: '员工福利', logistics: '快递物流', other_company: '其他公司支出'
|
||||
};
|
||||
|
||||
const COUNTERPARTY_TYPES = [
|
||||
{ value: 'supplier', label: '供应商' }, { value: 'subcontractor', label: '分包商' },
|
||||
{ value: 'customer', label: '客户' }, { value: 'employee', label: '员工' },
|
||||
{ value: 'logistics', label: '物流公司' }, { value: 'shareholder', label: '股东' },
|
||||
{ value: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const CURRENCIES = [
|
||||
{ value: 'CNY', label: 'CNY (人民币)' },
|
||||
{ value: 'LAK', label: 'LAK (老挝基普)' },
|
||||
{ value: 'USD', label: 'USD (美元)' },
|
||||
{ value: 'THB', label: 'THB (泰铢)' },
|
||||
];
|
||||
|
||||
const FinancePage: React.FC = () => {
|
||||
const { t, currentLanguage } = useLanguageStore();
|
||||
|
||||
const LEVEL1_LABELS = useMemo<Record<string, string>>(() => ({
|
||||
income: t('finance.incomeCategory'),
|
||||
project: t('finance.projectExpense'),
|
||||
company: t('finance.companyExpense'),
|
||||
finance: t('cash.financeExpense'),
|
||||
}), [t]);
|
||||
|
||||
const LEVEL2_LABELS = useMemo<Record<string, string>>(() => ({
|
||||
contract_payment: t('finance.projectRevenue'),
|
||||
deposit_refund: t('finance.warrantyReturn'),
|
||||
shareholder_investment: t('finance.shareholderInvestment'),
|
||||
other_income: t('finance.otherIncome'),
|
||||
customer_advance: t('cash.customerAdvance'),
|
||||
bank_loan: t('cash.bankLoan'),
|
||||
other_loan: t('cash.otherLoan'),
|
||||
dividend_income: t('cash.dividendIncome'),
|
||||
interest_income: t('cash.interestIncome'),
|
||||
asset_disposal: t('cash.assetDisposal'),
|
||||
tax_refund: t('cash.taxRefund'),
|
||||
government_subsidy: t('cash.governmentSubsidy'),
|
||||
material: t('finance.materialPurchase'),
|
||||
equipment: t('finance.equipmentPurchase'),
|
||||
subcontract: t('finance.constructionSubcontract'),
|
||||
construction_subcontract: t('finance.constructionSubcontract'),
|
||||
labor: t('finance.laborWage'),
|
||||
travel: t('finance.travelTransport'),
|
||||
accommodation: t('finance.accommodationFood'),
|
||||
freight: t('finance.transportLogistics'),
|
||||
transport_logistics: t('finance.transportLogistics'),
|
||||
design: t('finance.surveyDesign'),
|
||||
survey_design: t('finance.surveyDesign'),
|
||||
tools: t('finance.smallTools'),
|
||||
client_relations: t('finance.customerEDLRelation'),
|
||||
customer_edl: t('finance.customerEDLRelation'),
|
||||
other_project: t('finance.otherProjectExpense'),
|
||||
salary: t('finance.salaryWelfare'),
|
||||
rent: t('finance.rentProperty'),
|
||||
office: t('finance.officeExpense'),
|
||||
commute: t('finance.commute'),
|
||||
vehicle_maintenance: t('finance.vehicleMaintenance'),
|
||||
assets: t('finance.fixedAsset'),
|
||||
marketing: t('finance.marketing'),
|
||||
entertainment: t('finance.entertainment'),
|
||||
welfare: t('finance.employeeBenefit'),
|
||||
logistics: t('finance.expressLogistics'),
|
||||
other_company: t('finance.otherCompanyExpense'),
|
||||
loan_repayment: t('cash.loanRepayment'),
|
||||
interest_expense: t('cash.interestExpense'),
|
||||
dividend_payment: t('cash.dividendPayment'),
|
||||
tax_payment: t('cash.taxPayment'),
|
||||
deposit_payment: t('cash.depositPayment'),
|
||||
owner_expense: t('cash.ownerExpense'),
|
||||
other_finance: t('cash.otherFinance'),
|
||||
}), [t]);
|
||||
|
||||
const COUNTERPARTY_TYPES = useMemo(() => [
|
||||
{ value: 'supplier', label: t('finance.counterpartySupplier') },
|
||||
{ value: 'subcontractor', label: t('finance.counterpartySubcontractor') },
|
||||
{ value: 'customer', label: t('finance.counterpartyCustomer') },
|
||||
{ value: 'employee', label: t('finance.counterpartyEmployee') },
|
||||
{ value: 'logistics', label: t('finance.counterpartyLogistics') },
|
||||
{ value: 'shareholder', label: t('finance.counterpartyShareholder') },
|
||||
{ value: 'bank', label: t('cash.counterpartyBank') },
|
||||
{ value: 'other', label: t('finance.counterpartyOther') },
|
||||
], [t, currentLanguage]);
|
||||
|
||||
const CURRENCIES = useMemo(() => [
|
||||
{ value: 'CNY', label: t('finance.currencyCNY') },
|
||||
{ value: 'LAK', label: t('finance.currencyLAK') },
|
||||
{ value: 'USD', label: t('finance.currencyUSD') },
|
||||
{ value: 'THB', label: t('finance.currencyTHB') },
|
||||
], [t, currentLanguage]);
|
||||
|
||||
const SOURCE_MAP = useMemo<Record<string, string>>(() => ({
|
||||
manual: t('finance.manual'),
|
||||
cash_management: t('cash.sourceLabel'),
|
||||
receipt: t('cash.receiptSource'),
|
||||
advance: t('finance.advance'),
|
||||
reimbursement: t('finance.reimbursement'),
|
||||
payment_request: t('finance.payment'),
|
||||
material: t('finance.material'),
|
||||
primary_freight: t('finance.freight'),
|
||||
secondary_freight: t('finance.freight'),
|
||||
}), [t]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState('overview');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [summary, setSummary] = useState<any>({ total_income: 0, total_expense: 0, net_profit: 0 });
|
||||
const [byCategory, setByCategory] = useState<any[]>([]);
|
||||
@@ -45,12 +109,24 @@ const FinancePage: React.FC = () => {
|
||||
|
||||
const [addModalVisible, setAddModalVisible] = useState(false);
|
||||
const [addLoading, setAddLoading] = useState(false);
|
||||
const [addModalType, setAddModalType] = useState<'income' | 'expense'>('income');
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [categories, setCategories] = useState<any>({ income: [], project: [], company: [] });
|
||||
const [categories, setCategories] = useState<any>({ income: [], project: [], company: [], finance: [] });
|
||||
const [projects, setProjects] = useState<any[]>([]);
|
||||
const [customers, setCustomers] = useState<any[]>([]);
|
||||
const [suppliers, setSuppliers] = useState<any[]>([]);
|
||||
const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({ CNY: 1, LAK: 0.0003, USD: 7.2, THB: 0.2 });
|
||||
|
||||
const [cashRecords, setCashRecords] = useState<any[]>([]);
|
||||
const [cashPagination, setCashPagination] = useState({ page: 1, pageSize: 20, total: 0 });
|
||||
const [cashFilterType, setCashFilterType] = useState<string | undefined>(undefined);
|
||||
const [cashDateRange, setCashDateRange] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null] | null>(null);
|
||||
const [cashLoading, setCashLoading] = useState(false);
|
||||
|
||||
const [amountVal, setAmountVal] = useState<number>(0);
|
||||
const [rateVal, setRateVal] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
@@ -65,6 +141,12 @@ const FinancePage: React.FC = () => {
|
||||
apiClient.get('/projects', { params: { pageSize: 200 } }).then(res => {
|
||||
if (res.data.success) setProjects(res.data.data || res.data.projects || []);
|
||||
}).catch(() => {});
|
||||
apiClient.get('/customers', { params: { pageSize: 200 } }).then(res => {
|
||||
if (res.data.success) setCustomers(res.data.data || []);
|
||||
}).catch(() => {});
|
||||
apiClient.get('/suppliers', { params: { pageSize: 200 } }).then(res => {
|
||||
if (res.data.success) setSuppliers(res.data.data || []);
|
||||
}).catch(() => {});
|
||||
apiClient.get('/exchange-rates/latest').then(res => {
|
||||
if (res.data.success && res.data.data) {
|
||||
const rates: Record<string, number> = { CNY: 1 };
|
||||
@@ -110,42 +192,53 @@ const FinancePage: React.FC = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchSummary(); fetchRecords(1); }, [dateRange, filterType]);
|
||||
const fetchCashRecords = async (page = 1) => {
|
||||
setCashLoading(true);
|
||||
try {
|
||||
const params: any = { page, pageSize: cashPagination.pageSize };
|
||||
if (cashDateRange && cashDateRange[0]) {
|
||||
params.date_from = cashDateRange[0].format('YYYY-MM-DD');
|
||||
params.date_to = cashDateRange[1]?.format('YYYY-MM-DD');
|
||||
}
|
||||
if (cashFilterType) params.txn_type = cashFilterType;
|
||||
const res = await apiClient.get('/cash-management/records', { params });
|
||||
if (res.data.success) {
|
||||
setCashRecords(res.data.data);
|
||||
setCashPagination(res.data.pagination);
|
||||
}
|
||||
} catch (e) { console.error(e); }
|
||||
setCashLoading(false);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
useEffect(() => { fetchSummary(); fetchRecords(1); }, [dateRange, filterType]);
|
||||
useEffect(() => { if (activeTab === 'income' || activeTab === 'expense') fetchCashRecords(1); }, [activeTab, cashDateRange, cashFilterType]);
|
||||
|
||||
const handleAddIncome = () => {
|
||||
setAddModalType('income');
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ record_date: dayjs(), currency: 'CNY', exchange_rate: 1 });
|
||||
setAmountVal(0);
|
||||
setRateVal(1);
|
||||
form.setFieldsValue({ record_date: dayjs(), currency: 'CNY', exchange_rate: 1, txn_type: 'income', category_level1: 'income' });
|
||||
setAddModalVisible(true);
|
||||
};
|
||||
|
||||
const handleTxnTypeChange = (v: string) => {
|
||||
form.setFieldsValue({ category_level1: undefined, category_level2: undefined });
|
||||
if (v === 'income') {
|
||||
form.setFieldsValue({ category_level1: 'income' });
|
||||
}
|
||||
const handleAddExpense = () => {
|
||||
setAddModalType('expense');
|
||||
form.resetFields();
|
||||
setAmountVal(0);
|
||||
setRateVal(1);
|
||||
form.setFieldsValue({ record_date: dayjs(), currency: 'CNY', exchange_rate: 1, txn_type: 'expense', category_level1: 'project' });
|
||||
setAddModalVisible(true);
|
||||
};
|
||||
|
||||
const handleLevel1Change = () => {
|
||||
form.setFieldsValue({ category_level2: undefined });
|
||||
form.setFieldsValue({ category_level2: undefined, project_id: undefined });
|
||||
};
|
||||
|
||||
const handleCurrencyChange = (currency: string) => {
|
||||
const rate = exchangeRates[currency] || 1;
|
||||
setRateVal(rate);
|
||||
form.setFieldsValue({ exchange_rate: rate });
|
||||
const amount = form.getFieldValue('amount_original') || 0;
|
||||
form.setFieldsValue({ amount_cny: Math.round(amount * rate * 100) / 100 });
|
||||
};
|
||||
|
||||
const handleAmountChange = (val: number | null) => {
|
||||
const rate = form.getFieldValue('exchange_rate') || 1;
|
||||
const amount = val || 0;
|
||||
form.setFieldsValue({ amount_cny: Math.round(amount * rate * 100) / 100 });
|
||||
};
|
||||
|
||||
const handleRateChange = (val: number | null) => {
|
||||
const amount = form.getFieldValue('amount_original') || 0;
|
||||
const rate = val || 1;
|
||||
form.setFieldsValue({ amount_cny: Math.round(amount * rate * 100) / 100 });
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
@@ -153,37 +246,63 @@ const FinancePage: React.FC = () => {
|
||||
const values = await form.validateFields();
|
||||
setAddLoading(true);
|
||||
const payload = {
|
||||
...values,
|
||||
txn_type: values.txn_type,
|
||||
category_level1: values.category_level1,
|
||||
category_level2: values.category_level2,
|
||||
project_id: values.project_id || undefined,
|
||||
amount: values.amount_original,
|
||||
currency: values.currency,
|
||||
exchange_rate: values.exchange_rate,
|
||||
record_date: values.record_date?.format('YYYY-MM-DD'),
|
||||
amount_cny: Math.round((values.amount_original || 0) * (values.exchange_rate || 1) * 100) / 100,
|
||||
source: 'manual',
|
||||
counterparty_name: values.counterparty_name,
|
||||
counterparty_type: values.counterparty_type,
|
||||
counterparty_id: values.counterparty_id,
|
||||
description: values.description,
|
||||
voucher_url: values.voucher_url,
|
||||
};
|
||||
if (payload.category_level1 !== 'project' && payload.category_level1 !== 'income') {
|
||||
payload.project_id = undefined;
|
||||
if (!['project', 'income'].includes(payload.category_level1)) {
|
||||
delete payload.project_id;
|
||||
}
|
||||
await apiClient.post('/financial-records', payload);
|
||||
message.success('录入成功');
|
||||
await apiClient.post('/cash-management', payload);
|
||||
message.success(t('finance.recordSuccess'));
|
||||
setAddModalVisible(false);
|
||||
fetchSummary();
|
||||
fetchRecords(1);
|
||||
if (activeTab === 'income' || activeTab === 'expense') fetchCashRecords(1);
|
||||
} catch (e: any) {
|
||||
if (e.response?.data?.message) message.error(e.response.data.message);
|
||||
}
|
||||
setAddLoading(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await apiClient.delete(`/cash-management/${id}`);
|
||||
message.success(t('common.deleteSuccess'));
|
||||
fetchSummary();
|
||||
fetchRecords(1);
|
||||
if (activeTab === 'income' || activeTab === 'expense') fetchCashRecords(1);
|
||||
} catch (e: any) {
|
||||
if (e.response?.data?.message) message.error(e.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
message.loading({ content: '正在导出...', key: 'export' });
|
||||
message.loading({ content: t('finance.exporting'), key: 'export' });
|
||||
const res = await apiClient.get('/financial-records', { params: { page: 1, pageSize: 5000 } });
|
||||
if (!res.data.success) return;
|
||||
const data = res.data.data;
|
||||
|
||||
const wb = XLSX.utils.book_new();
|
||||
const headers = ['日期', '收支类型', '一级分类', '二级分类', '项目名称', '金额', '币种', '汇率', '等效人民币', '对方名称', '对方类型', '人员姓名', '描述', '凭证编号'];
|
||||
const headers = [
|
||||
t('finance.date'), t('finance.incomeType'), t('finance.level1Category'), t('finance.level2Category'),
|
||||
t('finance.projectName'), t('finance.amount'), t('finance.currency'), t('finance.exchangeRate'),
|
||||
t('finance.equivalentCNY'), t('finance.counterpartyName'), t('finance.counterpartyType'),
|
||||
t('finance.personName'), t('finance.desc'), t('finance.source'),
|
||||
];
|
||||
const rows = data.map((r: any) => [
|
||||
r.record_date,
|
||||
r.txn_type === 'income' ? '收入' : '支出',
|
||||
r.txn_type === 'income' ? t('finance.income') : t('finance.expense'),
|
||||
LEVEL1_LABELS[r.category_level1] || r.category_level1,
|
||||
LEVEL2_LABELS[r.category_level2] || r.category_level2,
|
||||
r.project_name || '',
|
||||
@@ -195,22 +314,25 @@ const FinancePage: React.FC = () => {
|
||||
COUNTERPARTY_TYPES.find(c => c.value === r.counterparty_type)?.label || r.counterparty_type || '',
|
||||
r.user_name || '',
|
||||
r.description || '',
|
||||
r.voucher_no || '',
|
||||
SOURCE_MAP[r.source] || r.source || '',
|
||||
]);
|
||||
const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
|
||||
ws['!cols'] = headers.map(() => ({ wch: 14 }));
|
||||
XLSX.utils.book_append_sheet(wb, ws, '财务记账');
|
||||
XLSX.writeFile(wb, `财务记录_${dayjs().format('YYYYMMDD')}.xlsx`);
|
||||
message.success({ content: '导出成功', key: 'export' });
|
||||
XLSX.utils.book_append_sheet(wb, ws, t('finance.sheetName'));
|
||||
XLSX.writeFile(wb, `${t('finance.title')}_${dayjs().format('YYYYMMDD')}.xlsx`);
|
||||
message.success({ content: t('finance.exportSuccess'), key: 'export' });
|
||||
} catch (e) {
|
||||
message.error({ content: '导出失败', key: 'export' });
|
||||
message.error({ content: t('finance.exportFailed'), key: 'export' });
|
||||
}
|
||||
};
|
||||
|
||||
const getLevel1Options = () => {
|
||||
const txnType = form.getFieldValue('txn_type');
|
||||
if (txnType === 'income') return [{ value: 'income', label: '收入' }];
|
||||
return [{ value: 'project', label: '项目支出' }, { value: 'company', label: '公司支出' }];
|
||||
const getLevel1Options = (txnType: string) => {
|
||||
if (txnType === 'income') return [{ value: 'income', label: t('finance.incomeCategory') }];
|
||||
return [
|
||||
{ value: 'project', label: t('finance.projectExpense') },
|
||||
{ value: 'company', label: t('finance.companyExpense') },
|
||||
{ value: 'finance', label: t('cash.financeExpense') },
|
||||
];
|
||||
};
|
||||
|
||||
const getLevel2Options = () => {
|
||||
@@ -221,69 +343,93 @@ const FinancePage: React.FC = () => {
|
||||
|
||||
const projectOptions = projects.map((p: any) => ({ value: p.id, label: p.name }));
|
||||
|
||||
const getCounterpartyOptions = () => {
|
||||
const type = form.getFieldValue('counterparty_type');
|
||||
if (type === 'customer') return customers.map((c: any) => ({ value: c.id, label: c.name }));
|
||||
if (type === 'supplier') return suppliers.map((s: any) => ({ value: s.id, label: s.name }));
|
||||
return [];
|
||||
};
|
||||
|
||||
const equivalentCny = amountVal * rateVal;
|
||||
|
||||
const desktopColumns = [
|
||||
{ title: '日期', dataIndex: 'record_date', width: 100, sorter: (a: any, b: any) => a.record_date?.localeCompare(b.record_date) },
|
||||
{ title: '收支', dataIndex: 'txn_type', width: 60, render: (v: string) => <Tag color={v === 'income' ? 'green' : 'red'}>{v === 'income' ? '收入' : '支出'}</Tag> },
|
||||
{ title: '一级分类', dataIndex: 'category_level1', width: 90, render: (v: string) => LEVEL1_LABELS[v] || v },
|
||||
{ title: '二级分类', dataIndex: 'category_level2', width: 100, render: (v: string) => LEVEL2_LABELS[v] || v },
|
||||
{ title: '项目', dataIndex: 'project_name', width: 140, ellipsis: true },
|
||||
{ title: '原始金额', dataIndex: 'amount_original', width: 100, render: (v: number) => v?.toLocaleString(), align: 'right' as const },
|
||||
{ title: '币种', dataIndex: 'currency', width: 50 },
|
||||
{ title: '等效人民币', dataIndex: 'amount_cny', width: 110, render: (v: number) => `¥${v?.toLocaleString()}`, align: 'right' as const, sorter: (a: any, b: any) => a.amount_cny - b.amount_cny },
|
||||
{ title: '人员', dataIndex: 'user_name', width: 70 },
|
||||
{ title: '描述', dataIndex: 'description', ellipsis: true },
|
||||
{ title: '来源', dataIndex: 'source', width: 80, render: (v: string) => {
|
||||
const m: Record<string, string> = { manual: '手动', advance: '预支', reimbursement: '报销', payment_request: '付款', material: '材料', primary_freight: '运费', secondary_freight: '运费' };
|
||||
return <Tag>{m[v] || v}</Tag>;
|
||||
}},
|
||||
{ title: t('finance.date'), dataIndex: 'record_date', width: 100, sorter: (a: any, b: any) => a.record_date?.localeCompare(b.record_date), render: (v: string) => v?.slice(0, 10) },
|
||||
{ title: t('finance.incomeType'), dataIndex: 'txn_type', width: 60, render: (v: string) => <Tag color={v === 'income' ? 'green' : 'red'}>{v === 'income' ? t('finance.income') : t('finance.expense')}</Tag> },
|
||||
{ title: t('finance.level1Category'), dataIndex: 'category_level1', width: 90, render: (v: string) => LEVEL1_LABELS[v] || v },
|
||||
{ title: t('finance.level2Category'), dataIndex: 'category_level2', width: 100, render: (v: string) => LEVEL2_LABELS[v] || v },
|
||||
{ title: t('finance.projectName'), dataIndex: 'project_name', width: 140, ellipsis: true },
|
||||
{ title: t('finance.amount'), dataIndex: 'amount_original', width: 100, render: (v: number) => v?.toLocaleString(), align: 'right' as const },
|
||||
{ title: t('finance.currency'), dataIndex: 'currency', width: 50 },
|
||||
{ title: t('finance.equivalentCNY'), dataIndex: 'amount_cny', width: 110, render: (v: number) => `¥${v?.toLocaleString()}`, align: 'right' as const, sorter: (a: any, b: any) => a.amount_cny - b.amount_cny },
|
||||
{ title: t('finance.personName'), dataIndex: 'user_name', width: 70 },
|
||||
{ title: t('finance.desc'), dataIndex: 'description', ellipsis: true },
|
||||
{ title: t('finance.source'), dataIndex: 'source', width: 80, render: (v: string) => <Tag>{SOURCE_MAP[v] || v}</Tag> },
|
||||
];
|
||||
|
||||
const mobileColumns = [
|
||||
{ title: '日期', dataIndex: 'record_date', width: 80 },
|
||||
{ title: '收支', dataIndex: 'txn_type', width: 40, render: (v: string) => <span style={{ color: v === 'income' ? 'green' : 'red' }}>{v === 'income' ? '↑' : '↓'}</span> },
|
||||
{ title: '分类', dataIndex: 'category_level2', width: 80, render: (v: string) => LEVEL2_LABELS[v] || v },
|
||||
{ title: '金额', dataIndex: 'amount_cny', render: (v: number) => <b>¥{v?.toLocaleString()}</b>, align: 'right' as const },
|
||||
{ title: t('finance.date'), dataIndex: 'record_date', width: 80, render: (v: string) => v?.slice(0, 10) },
|
||||
{ title: t('finance.incomeType'), dataIndex: 'txn_type', width: 40, render: (v: string) => <span style={{ color: v === 'income' ? 'green' : 'red' }}>{v === 'income' ? '↑' : '↓'}</span> },
|
||||
{ title: t('finance.level2Category'), dataIndex: 'category_level2', width: 80, render: (v: string) => LEVEL2_LABELS[v] || v },
|
||||
{ title: t('finance.amount'), dataIndex: 'amount_cny', render: (v: number) => <b>¥{v?.toLocaleString()}</b>, align: 'right' as const },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 0 }}>财务管理</Title>
|
||||
</div>
|
||||
<Space>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
||||
{isMobile ? '新增' : '新增记录'}
|
||||
</Button>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExport}>
|
||||
{isMobile ? '导出' : '导出Excel'}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
const cashColumns = [
|
||||
{ title: t('finance.date'), dataIndex: 'record_date', width: 100, render: (v: string) => v?.slice(0, 10) },
|
||||
{ title: t('finance.level1Category'), dataIndex: 'category_level1', width: 90, render: (v: string) => LEVEL1_LABELS[v] || v },
|
||||
{ title: t('finance.level2Category'), dataIndex: 'category_level2', width: 110, render: (v: string) => LEVEL2_LABELS[v] || v },
|
||||
{ title: t('finance.projectName'), dataIndex: 'project_name', width: 140, ellipsis: true },
|
||||
{ title: t('finance.amount'), dataIndex: 'amount_original', width: 100, render: (v: number) => v?.toLocaleString(), align: 'right' as const },
|
||||
{ title: t('finance.currency'), dataIndex: 'currency', width: 50 },
|
||||
{ title: t('finance.equivalentCNY'), dataIndex: 'amount_cny', width: 110, render: (v: number) => `¥${v?.toLocaleString()}`, align: 'right' as const },
|
||||
{ title: t('finance.counterpartyName'), dataIndex: 'counterparty_name', width: 100, ellipsis: true },
|
||||
{ title: t('finance.desc'), dataIndex: 'description', ellipsis: true },
|
||||
{
|
||||
title: '', width: 50, render: (_: any, record: any) => (
|
||||
<Popconfirm title={t('common.confirmDelete')} onConfirm={() => handleDelete(record.id)}>
|
||||
<Button type="text" danger size="small" icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
||||
const cashMobileColumns = [
|
||||
{ title: t('finance.date'), dataIndex: 'record_date', width: 80, render: (v: string) => v?.slice(0, 10) },
|
||||
{ title: t('finance.level2Category'), dataIndex: 'category_level2', width: 80, render: (v: string) => LEVEL2_LABELS[v] || v },
|
||||
{ title: t('finance.amount'), dataIndex: 'amount_cny', render: (v: number, r: any) => <span style={{ color: r.txn_type === 'income' ? 'green' : 'red' }}>¥{v?.toLocaleString()}</span>, align: 'right' as const },
|
||||
{
|
||||
title: '', width: 40, render: (_: any, record: any) => (
|
||||
<Popconfirm title={t('common.confirmDelete')} onConfirm={() => handleDelete(record.id)}>
|
||||
<Button type="text" danger size="small" icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
||||
const renderOverview = () => (
|
||||
<>
|
||||
<Row gutter={[8, 8]} style={{ marginBottom: 16 }}>
|
||||
<Col xs={8} sm={8}>
|
||||
<Card size="small" style={{ textAlign: 'center' }}>
|
||||
<Statistic title={<span style={{ fontSize: 12 }}>总收入</span>} value={summary.total_income} prefix="¥"
|
||||
<Statistic title={<span style={{ fontSize: 12 }}>{t('finance.totalIncome')}</span>} value={summary.total_income} prefix="¥"
|
||||
valueStyle={{ color: '#3f8600', fontSize: isMobile ? 16 : undefined }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={8} sm={8}>
|
||||
<Card size="small" style={{ textAlign: 'center' }}>
|
||||
<Statistic title={<span style={{ fontSize: 12 }}>总支出</span>} value={summary.total_expense} prefix="¥"
|
||||
<Statistic title={<span style={{ fontSize: 12 }}>{t('finance.totalExpense')}</span>} value={summary.total_expense} prefix="¥"
|
||||
valueStyle={{ color: '#cf1322', fontSize: isMobile ? 16 : undefined }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={8} sm={8}>
|
||||
<Card size="small" style={{ textAlign: 'center' }}>
|
||||
<Statistic title={<span style={{ fontSize: 12 }}>净利润</span>} value={summary.net_profit} prefix="¥"
|
||||
<Statistic title={<span style={{ fontSize: 12 }}>{t('finance.netProfit')}</span>} value={summary.net_profit} prefix="¥"
|
||||
valueStyle={{ color: summary.net_profit >= 0 ? '#3f8600' : '#cf1322', fontSize: isMobile ? 16 : undefined }} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{byCategory.length > 0 && (
|
||||
<Card title="支出分类汇总" size="small" style={{ marginBottom: 16 }}>
|
||||
<Card title={t('finance.expenseSummary')} size="small" style={{ marginBottom: 16 }}>
|
||||
<Row gutter={[8, 8]}>
|
||||
{byCategory.filter(c => c.category_level1 !== 'income').map((c, i) => (
|
||||
<Col xs={12} sm={8} md={6} key={i}>
|
||||
@@ -295,13 +441,13 @@ const FinancePage: React.FC = () => {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card title="财务明细" size="small" styles={{ body: { padding: isMobile ? 8 : 24 } }}
|
||||
<Card title={t('finance.detail')} size="small" styles={{ body: { padding: isMobile ? 8 : 24 } }}
|
||||
extra={
|
||||
<Space size="small" wrap>
|
||||
<RangePicker size="small" onChange={(dates) => setDateRange(dates as any)} />
|
||||
<Select size="small" allowClear placeholder="筛选类型" style={{ width: 100 }}
|
||||
<Select size="small" allowClear placeholder={t('finance.filterType')} style={{ width: 100 }}
|
||||
onChange={setFilterType} value={filterType}
|
||||
options={[{ value: 'income', label: '收入' }, { value: 'expense', label: '支出' }]} />
|
||||
options={[{ value: 'income', label: t('finance.income') }, { value: 'expense', label: t('finance.expense') }]} />
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
@@ -318,92 +464,186 @@ const FinancePage: React.FC = () => {
|
||||
total: pagination.total,
|
||||
onChange: (page) => fetchRecords(page),
|
||||
size: isMobile ? 'small' : 'default',
|
||||
showTotal: (total) => `共 ${total} 条`
|
||||
showTotal: (total) => t('finance.totalRecords', { total })
|
||||
}}
|
||||
/>
|
||||
</Spin>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderCashTab = (type: 'income' | 'expense') => {
|
||||
const isIncome = type === 'income';
|
||||
return (
|
||||
<>
|
||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
|
||||
<Space size="small" wrap>
|
||||
<RangePicker size="small" onChange={(dates) => setCashDateRange(dates as any)} />
|
||||
<Select size="small" allowClear placeholder={t('finance.level1Category')} style={{ width: 120 }}
|
||||
onChange={(v) => { setCashFilterType(v); }}
|
||||
options={isIncome
|
||||
? [{ value: 'income', label: t('finance.incomeCategory') }]
|
||||
: [
|
||||
{ value: 'project', label: t('finance.projectExpense') },
|
||||
{ value: 'company', label: t('finance.companyExpense') },
|
||||
{ value: 'finance', label: t('cash.financeExpense') },
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={isIncome ? handleAddIncome : handleAddExpense}>
|
||||
{isMobile ? t('common.add') : (isIncome ? t('cash.addIncome') : t('cash.addExpense'))}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card size="small" styles={{ body: { padding: isMobile ? 8 : 16 } }}>
|
||||
<Spin spinning={cashLoading}>
|
||||
<Table
|
||||
dataSource={cashRecords.filter(r => isIncome ? r.txn_type === 'income' : r.txn_type === 'expense')}
|
||||
columns={isMobile ? cashMobileColumns : cashColumns}
|
||||
rowKey="id"
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
scroll={isMobile ? { x: 400 } : { x: 1000 }}
|
||||
pagination={{
|
||||
current: cashPagination.page,
|
||||
pageSize: cashPagination.pageSize,
|
||||
total: cashPagination.total,
|
||||
onChange: (page) => fetchCashRecords(page),
|
||||
size: isMobile ? 'small' : 'default',
|
||||
showTotal: (total) => t('finance.totalRecords', { total })
|
||||
}}
|
||||
/>
|
||||
</Spin>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: 'overview',
|
||||
label: t('cash.tabOverview'),
|
||||
icon: <FundOutlined />,
|
||||
children: renderOverview(),
|
||||
},
|
||||
{
|
||||
key: 'income',
|
||||
label: t('cash.tabIncome'),
|
||||
icon: <RiseOutlined />,
|
||||
children: renderCashTab('income'),
|
||||
},
|
||||
{
|
||||
key: 'expense',
|
||||
label: t('cash.tabExpense'),
|
||||
icon: <FallOutlined />,
|
||||
children: renderCashTab('expense'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
|
||||
<Title level={3} style={{ marginBottom: 0 }}>{t('finance.title')}</Title>
|
||||
<Space>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExport}>
|
||||
{isMobile ? t('common.export') : t('finance.exportExcel')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} type="card" />
|
||||
|
||||
<Modal
|
||||
title="新增财务记录"
|
||||
title={addModalType === 'income' ? t('cash.addIncome') : t('cash.addExpense')}
|
||||
open={addModalVisible}
|
||||
onOk={handleSave}
|
||||
onCancel={() => setAddModalVisible(false)}
|
||||
confirmLoading={addLoading}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
width={isMobile ? '95%' : 600}
|
||||
okText={t('common.save')}
|
||||
cancelText={t('common.cancel')}
|
||||
width={isMobile ? '95%' : 640}
|
||||
style={{ top: isMobile ? 10 : 40 }}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout={isMobile ? 'vertical' : 'horizontal'} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }} size="middle">
|
||||
|
||||
<Form.Item name="record_date" label="日期" rules={[{ required: true, message: '请选择日期' }]}>
|
||||
<Form.Item name="record_date" label={t('finance.date')} rules={[{ required: true, message: t('finance.selectDate') }]}>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="txn_type" label="收支类型" rules={[{ required: true, message: '请选择' }]}>
|
||||
<Select onChange={handleTxnTypeChange} options={[{ value: 'income', label: '收入' }, { value: 'expense', label: '支出' }]} placeholder="请选择" />
|
||||
<Form.Item name="category_level1" label={t('finance.level1Category')} rules={[{ required: true, message: t('finance.selectLevel1') }]}>
|
||||
<Select onChange={handleLevel1Change} options={getLevel1Options(addModalType)} placeholder={t('finance.selectLevel1')} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="category_level1" label="一级分类" rules={[{ required: true, message: '请选择' }]}>
|
||||
<Select onChange={handleLevel1Change} options={getLevel1Options()} placeholder="请选择" />
|
||||
<Form.Item name="category_level2" label={t('finance.level2Category')} rules={[{ required: true, message: t('finance.selectLevel2') }]}>
|
||||
<Select options={getLevel2Options()} placeholder={t('finance.selectLevel2')} notFoundContent={t('finance.selectLevel2')} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="category_level2" label="二级分类" rules={[{ required: true, message: '请选择' }]}>
|
||||
<Select options={getLevel2Options()} placeholder="请先选择一级分类" notFoundContent="请先选择一级分类" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="project_id" label="项目名称"
|
||||
rules={[{ required: form.getFieldValue('category_level1') === 'project' || (form.getFieldValue('category_level1') === 'income' && form.getFieldValue('category_level2') !== 'shareholder_investment' && form.getFieldValue('category_level2') !== 'other_income'), message: '请选择项目' }]}
|
||||
>
|
||||
<Select showSearch optionFilterProp="label" options={projectOptions} placeholder="选择项目" allowClear />
|
||||
<Form.Item name="project_id" label={t('finance.projectName')}>
|
||||
<Select showSearch optionFilterProp="label" options={projectOptions} placeholder={t('finance.selectProject')} allowClear />
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={8}>
|
||||
<Col span={10}>
|
||||
<Form.Item name="amount_original" label={isMobile ? '金额' : '金额'} labelCol={{ span: isMobile ? 24 : 8 }} wrapperCol={{ span: isMobile ? 24 : 16 }} rules={[{ required: true, message: '请输入' }]}>
|
||||
<InputNumber style={{ width: '100%' }} min={0} precision={2} onChange={handleAmountChange} placeholder="0" />
|
||||
<Form.Item name="amount_original" label={t('finance.amount')} labelCol={{ span: isMobile ? 24 : 8 }} wrapperCol={{ span: isMobile ? 24 : 16 }} rules={[{ required: true, message: t('common.inputPlaceholder') }]}>
|
||||
<InputNumber style={{ width: '100%' }} min={0} precision={2} onChange={(v) => setAmountVal(v || 0)} placeholder={t('finance.amountPlaceholder')} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={7}>
|
||||
<Form.Item name="currency" label={isMobile ? '币种' : ''} labelCol={{ span: isMobile ? 24 : 0 }} wrapperCol={{ span: isMobile ? 24 : 24 }} rules={[{ required: true }]}>
|
||||
<Form.Item name="currency" label={isMobile ? t('finance.currency') : ''} labelCol={{ span: isMobile ? 24 : 0 }} wrapperCol={{ span: isMobile ? 24 : 24 }} rules={[{ required: true }]}>
|
||||
<Select options={CURRENCIES} onChange={handleCurrencyChange} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={7}>
|
||||
<Form.Item name="exchange_rate" label={isMobile ? '汇率' : ''} labelCol={{ span: isMobile ? 24 : 0 }} wrapperCol={{ span: isMobile ? 24 : 24 }} rules={[{ required: true }]}>
|
||||
<InputNumber style={{ width: '100%' }} min={0} step={0.0001} precision={6} onChange={handleRateChange} />
|
||||
<Form.Item name="exchange_rate" label={isMobile ? t('finance.exchangeRate') : ''} labelCol={{ span: isMobile ? 24 : 0 }} wrapperCol={{ span: isMobile ? 24 : 24 }} rules={[{ required: true }]}>
|
||||
<InputNumber style={{ width: '100%' }} min={0} step={0.0001} precision={6} onChange={(v) => setRateVal(v || 1)} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item label="等效人民币">
|
||||
<Form.Item label={t('finance.equivalentCNY')}>
|
||||
<span style={{ fontSize: 18, fontWeight: 'bold', color: '#1890ff' }}>
|
||||
¥{((form.getFieldValue('amount_original') || 0) * (form.getFieldValue('exchange_rate') || 1)).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
¥{equivalentCny.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
</Form.Item>
|
||||
|
||||
<Divider style={{ margin: '8px 0' }} />
|
||||
|
||||
<Form.Item name="counterparty_name" label="对方名称" labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Input placeholder="收款方/付款方名称" />
|
||||
<Form.Item name="counterparty_type" label={t('finance.counterpartyType')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Select options={COUNTERPARTY_TYPES} placeholder={t('finance.selectType')} allowClear onChange={() => form.setFieldsValue({ counterparty_id: undefined })} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="counterparty_type" label="对方类型" labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Select options={COUNTERPARTY_TYPES} placeholder="选择类型" allowClear />
|
||||
{getCounterpartyOptions().length > 0 && (
|
||||
<Form.Item name="counterparty_id" label={t('cash.counterpartySelect')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Select showSearch optionFilterProp="label" options={getCounterpartyOptions()} placeholder={t('cash.counterpartySelectPlaceholder')} allowClear />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item name="counterparty_name" label={t('finance.counterpartyName')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Input placeholder={t('finance.counterpartyPlaceholder')} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="user_name" label="人员姓名" labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Input placeholder="关联员工姓名" />
|
||||
<Form.Item name="description" label={t('finance.desc')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Input.TextArea rows={2} placeholder={t('finance.descPlaceholder')} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="description" label="描述" labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Input.TextArea rows={2} placeholder="补充说明" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="voucher_no" label="凭证编号" labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Input placeholder="发票号/收据号" />
|
||||
<Form.Item name="voucher_url" label={t('cash.voucherUpload')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
|
||||
<Upload
|
||||
maxCount={1}
|
||||
action="/api/upload/single"
|
||||
headers={{ Authorization: `Bearer ${JSON.parse(localStorage.getItem('auth-storage') || '{}')?.state?.token || ''}` }}
|
||||
onChange={(info) => {
|
||||
if (info.file.status === 'done' && info.file.response?.url) {
|
||||
form.setFieldsValue({ voucher_url: info.file.response.url });
|
||||
message.success(t('cash.uploadSuccess'));
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(t('cash.uploadFailed'));
|
||||
}
|
||||
}}
|
||||
onRemove={() => form.setFieldsValue({ voucher_url: undefined })}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>{t('cash.uploadVoucher')}</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user