404 lines
15 KiB
TypeScript
404 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Table, Card, Tag, Button, Space, Input, DatePicker, Select, message, Descriptions, Divider, Tabs, Modal, Result } from 'antd';
|
|
import { EyeOutlined, CalendarOutlined, UserOutlined, FilterOutlined } from '@ant-design/icons';
|
|
import dayjs from 'dayjs';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
|
|
const { Option } = Select;
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const AdvanceVerificationStatusPage: React.FC = () => {
|
|
const { user } = useAuthStore();
|
|
const [loading, setLoading] = useState(false);
|
|
const [detailModalVisible, setDetailModalVisible] = useState(false);
|
|
const [selectedAdvance, setSelectedAdvance] = useState<any>(null);
|
|
const [unsettledAdvances, setUnsettledAdvances] = useState<any[]>([]);
|
|
const [settledAdvances, setSettledAdvances] = useState<any[]>([]);
|
|
const [searchName, setSearchName] = useState('');
|
|
const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs] | null>(null);
|
|
const [sortField, setSortField] = useState('');
|
|
const [sortOrder, setSortOrder] = useState('');
|
|
|
|
// 检查权限
|
|
const hasPermission = user?.role === 'admin' || user?.department === '财务部';
|
|
|
|
if (!hasPermission) {
|
|
return (
|
|
<div style={{ padding: 24, textAlign: 'center' }}>
|
|
<Result
|
|
status="403"
|
|
title="无权限访问"
|
|
subTitle="您没有权限访问此页面，只有管理员和财务人员可以查看预支核销状态。"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 获取未核销和已核销的预支单
|
|
const fetchAdvances = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// 获取所有预支单
|
|
const res = await fetch('/api/advances');
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
// 处理数据，确保每个预支单都有total_reimbursed字段
|
|
const processedAdvances = data.data.map((advance: any) => ({
|
|
...advance,
|
|
total_reimbursed: advance.total_reimbursed || 0,
|
|
isSettled: advance.status === 'settled' || (advance.total_reimbursed || 0) >= advance.amount
|
|
}));
|
|
|
|
// 分离未核销和已核销的预支单
|
|
const unsettled = processedAdvances.filter((advance: any) => !advance.isSettled && (advance.status === 'approved' || advance.status === 'executed' || advance.status === 'partial_verification'));
|
|
const settled = processedAdvances.filter((advance: any) => advance.isSettled || advance.status === 'settled' || advance.status === 'completed');
|
|
|
|
setUnsettledAdvances(unsettled);
|
|
setSettledAdvances(settled);
|
|
}
|
|
} catch (error) {
|
|
message.error('获取预支单失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 获取预支单详情，包括关联的核销单
|
|
const fetchAdvanceDetail = async (advanceId: number) => {
|
|
setLoading(true);
|
|
try {
|
|
// 获取预支单详情
|
|
const advanceRes = await fetch(`/api/advances/${advanceId}`);
|
|
const advanceData = await advanceRes.json();
|
|
|
|
if (advanceData.success) {
|
|
// 获取关联的核销单
|
|
const verificationRes = await fetch(`/api/verifications?advance_id=${advanceId}`);
|
|
const verificationData = await verificationRes.json();
|
|
|
|
if (verificationData.success) {
|
|
// 只保留已执行或已批准的核销单，并且关联的预支单编号与当前预支单一致
|
|
const validVerifications = (verificationData.data || []).filter((verification: any) =>
|
|
(verification.status === 'approved' || verification.status === 'executed') &&
|
|
verification.advance_code === advanceData.data.advance_code
|
|
);
|
|
|
|
setSelectedAdvance({
|
|
...advanceData.data,
|
|
verifications: validVerifications
|
|
});
|
|
setDetailModalVisible(true);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
message.error('获取预支单详情失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchAdvances();
|
|
}, []);
|
|
|
|
const formatAmount = (amount: number, currency: string = 'CNY') => {
|
|
const symbols: Record<string, string> = { CNY: '¥', USD: '$', LAK: '₭', THB: '฿' };
|
|
return (symbols[currency] || '¥') + (amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
};
|
|
|
|
const getStatusTag = (status: string) => {
|
|
const statusMap: Record<string, { color: string; text: string }> = {
|
|
pending: { color: 'processing', text: '待审批' },
|
|
approved: { color: 'success', text: '已批准' },
|
|
rejected: { color: 'error', text: '已退回' },
|
|
withdrawn: { color: 'default', text: '已撤回' },
|
|
settled: { color: 'blue', text: '已核销' },
|
|
pending_edit: { color: 'warning', text: '待编辑' },
|
|
partial_verification: { color: 'orange', text: '部分核销' },
|
|
completed: { color: 'green', text: '已完成' },
|
|
};
|
|
const config = statusMap[status] || { color: 'default', text: status };
|
|
return <Tag color={config.color}>{config.text}</Tag>;
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
// 这里可以添加搜索逻辑
|
|
fetchAdvances();
|
|
};
|
|
|
|
const handleSort = (field: string, order: string) => {
|
|
setSortField(field);
|
|
setSortOrder(order);
|
|
// 这里可以添加排序逻辑
|
|
fetchAdvances();
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: '事由',
|
|
dataIndex: 'reason',
|
|
key: 'reason',
|
|
ellipsis: true,
|
|
render: (v: string, r: any) => (
|
|
<a onClick={() => fetchAdvanceDetail(r.id)}>{v}</a>
|
|
)
|
|
},
|
|
{
|
|
title: '申请人',
|
|
dataIndex: 'applicant',
|
|
key: 'applicant',
|
|
width: 100,
|
|
sorter: (a: any, b: any) => a.applicant.localeCompare(b.applicant),
|
|
onHeaderCell: (column: any) => ({
|
|
onClick: () => handleSort('applicant', sortOrder === 'ascend' ? 'descend' : 'ascend')
|
|
})
|
|
},
|
|
{
|
|
title: '预支金额',
|
|
dataIndex: 'amount',
|
|
key: 'amount',
|
|
width: 140,
|
|
render: (v: number, r: any) => formatAmount(v, r.currency),
|
|
sorter: (a: any, b: any) => a.amount - b.amount,
|
|
onHeaderCell: (column: any) => ({
|
|
onClick: () => handleSort('amount', sortOrder === 'ascend' ? 'descend' : 'ascend')
|
|
})
|
|
},
|
|
{
|
|
title: '已核销金额',
|
|
dataIndex: 'total_reimbursed',
|
|
key: 'total_reimbursed',
|
|
width: 140,
|
|
render: (v: number, r: any) => formatAmount(v || 0, r.currency),
|
|
sorter: (a: any, b: any) => (a.total_reimbursed || 0) - (b.total_reimbursed || 0),
|
|
onHeaderCell: (column: any) => ({
|
|
onClick: () => handleSort('total_reimbursed', sortOrder === 'ascend' ? 'descend' : 'ascend')
|
|
})
|
|
},
|
|
{
|
|
title: '剩余金额',
|
|
dataIndex: 'remaining',
|
|
key: 'remaining',
|
|
width: 140,
|
|
render: (_, r: any) => formatAmount((r.amount || 0) - (r.total_reimbursed || 0), r.currency),
|
|
sorter: (a: any, b: any) => ((a.amount || 0) - (a.total_reimbursed || 0)) - ((b.amount || 0) - (b.total_reimbursed || 0)),
|
|
onHeaderCell: (column: any) => ({
|
|
onClick: () => handleSort('remaining', sortOrder === 'ascend' ? 'descend' : 'ascend')
|
|
})
|
|
},
|
|
{
|
|
title: '预支日期',
|
|
dataIndex: 'advance_date',
|
|
key: 'advance_date',
|
|
width: 120,
|
|
sorter: (a: any, b: any) => new Date(a.advance_date).getTime() - new Date(b.advance_date).getTime(),
|
|
onHeaderCell: (column: any) => ({
|
|
onClick: () => handleSort('advance_date', sortOrder === 'ascend' ? 'descend' : 'ascend')
|
|
})
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: 100,
|
|
render: (status: string) => getStatusTag(status)
|
|
},
|
|
{
|
|
title: '编号',
|
|
dataIndex: 'advance_code',
|
|
key: 'advance_code',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 80,
|
|
render: (_: any, record: any) => (
|
|
<Space wrap>
|
|
<Button size="small" icon={<EyeOutlined />} onClick={() => fetchAdvanceDetail(record.id)}>详情</Button>
|
|
</Space>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div style={{ padding: 24 }}>
|
|
<div style={{ marginBottom: 24 }}>
|
|
<h2 style={{ marginBottom: 8 }}>预支核销状态管理</h2>
|
|
<p style={{ color: '#888', marginBottom: 0 }}>管理预支单的核销状态和进度</p>
|
|
</div>
|
|
|
|
{/* 搜索和筛选区域 */}
|
|
<Card style={{ marginBottom: 24 }}>
|
|
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
<div style={{ flex: 1, minWidth: 200 }}>
|
|
<Input
|
|
placeholder="按申请人姓名搜索"
|
|
prefix={<UserOutlined />}
|
|
value={searchName}
|
|
onChange={(e) => setSearchName(e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: 300 }}>
|
|
<RangePicker
|
|
placeholder={['开始日期', '结束日期']}
|
|
onChange={(dates) => setDateRange(dates)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
<Button type="primary" icon={<FilterOutlined />} onClick={handleSearch}>
|
|
搜索
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 预支单列表 */}
|
|
<Card>
|
|
<Tabs
|
|
items={[
|
|
{
|
|
key: 'unsettled',
|
|
label: '未核销完成',
|
|
children: (
|
|
<Table
|
|
dataSource={unsettledAdvances}
|
|
columns={columns}
|
|
rowKey="id"
|
|
loading={loading}
|
|
pagination={{ pageSize: 20 }}
|
|
scroll={{ x: 1200 }}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
key: 'settled',
|
|
label: '已完结',
|
|
children: (
|
|
<Table
|
|
dataSource={settledAdvances}
|
|
columns={columns}
|
|
rowKey="id"
|
|
loading={loading}
|
|
pagination={{ pageSize: 20 }}
|
|
scroll={{ x: 1200 }}
|
|
/>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
</Card>
|
|
|
|
{/* 详情模态框 */}
|
|
<Modal
|
|
title={`预支单详情：${selectedAdvance?.advance_code}`}
|
|
open={detailModalVisible}
|
|
onCancel={() => setDetailModalVisible(false)}
|
|
footer={[
|
|
<Button key="close" onClick={() => setDetailModalVisible(false)}>关闭</Button>
|
|
]}
|
|
width={900}
|
|
>
|
|
{selectedAdvance && (
|
|
<>
|
|
{/* 预支单基本信息 */}
|
|
<Descriptions bordered column={2} size="small">
|
|
<Descriptions.Item label="预支编号">{selectedAdvance.advance_code}</Descriptions.Item>
|
|
<Descriptions.Item label="状态">{getStatusTag(selectedAdvance.status)}</Descriptions.Item>
|
|
<Descriptions.Item label="申请人">{selectedAdvance.applicant}</Descriptions.Item>
|
|
<Descriptions.Item label="预支日期">{selectedAdvance.advance_date}</Descriptions.Item>
|
|
<Descriptions.Item label="金额">
|
|
{formatAmount(selectedAdvance.amount, selectedAdvance.currency)}
|
|
{selectedAdvance.currency !== 'CNY' && selectedAdvance.amount_cny && (
|
|
<span style={{ color: '#999', marginLeft: 8 }}>≈ ¥{selectedAdvance.amount_cny.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}</span>
|
|
)}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="已核销金额">{formatAmount(selectedAdvance.total_reimbursed || 0, selectedAdvance.currency)}</Descriptions.Item>
|
|
<Descriptions.Item label="剩余金额">{formatAmount((selectedAdvance.amount || 0) - (selectedAdvance.total_reimbursed || 0), selectedAdvance.currency)}</Descriptions.Item>
|
|
<Descriptions.Item label="币种">{selectedAdvance.currency}</Descriptions.Item>
|
|
<Descriptions.Item label="事由" span={2}>{selectedAdvance.reason}</Descriptions.Item>
|
|
</Descriptions>
|
|
|
|
{/* 关联的核销单 */}
|
|
{selectedAdvance.verifications && selectedAdvance.verifications.length > 0 && (
|
|
<>
|
|
<Divider>关联核销单</Divider>
|
|
<Table
|
|
dataSource={selectedAdvance.verifications}
|
|
rowKey="id"
|
|
pagination={false}
|
|
columns={[
|
|
{
|
|
title: '核销编号',
|
|
dataIndex: 'verification_code',
|
|
key: 'verification_code'
|
|
},
|
|
{
|
|
title: '关联预支单',
|
|
dataIndex: 'advance_code',
|
|
key: 'advance_code'
|
|
},
|
|
{
|
|
title: '核销金额',
|
|
dataIndex: 'amount',
|
|
key: 'amount',
|
|
render: (v: number, r: any) => formatAmount(v, r.currency)
|
|
},
|
|
{
|
|
title: '核销日期',
|
|
dataIndex: 'verification_date',
|
|
key: 'verification_date'
|
|
},
|
|
{
|
|
title: '是否结算',
|
|
dataIndex: 'settlement',
|
|
key: 'settlement',
|
|
render: (v: boolean) => (
|
|
<Tag color={v ? 'green' : 'orange'}>{v ? '是' : '否'}</Tag>
|
|
)
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
render: (status: string) => getStatusTag(status)
|
|
}
|
|
]}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{/* 附件 */}
|
|
{selectedAdvance.attachments && selectedAdvance.attachments.length > 0 && (
|
|
<>
|
|
<Divider>凭证附件</Divider>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
|
{selectedAdvance.attachments.map((url: string, index: number) => (
|
|
<div key={index} style={{ position: 'relative' }}>
|
|
{url && url.match(/\.(jpg|jpeg|png|gif|webp)$/i) ? (
|
|
<img
|
|
src={url}
|
|
alt={`附件${index + 1}`}
|
|
style={{ width: 120, height: 120, objectFit: 'cover', borderRadius: 4, border: '1px solid #f0f0f0', cursor: 'pointer' }}
|
|
onClick={() => window.open(url, '_blank')}
|
|
/>
|
|
) : (
|
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
|
<div style={{ width: 120, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #f0f0f0', borderRadius: 4, background: '#f5f5f5' }}>
|
|
<span style={{ color: '#666' }}>附件 {index + 1}</span>
|
|
</div>
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdvanceVerificationStatusPage; |