备份：修复前完整项目快照 2026-04-19
This commit is contained in:
root
@@ -0,0 +1,488 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Table, Button, Modal, Form, Input, Select, message, Space, Tag, Card,
|
||||
Row, Col, DatePicker, InputNumber, Descriptions, Divider
|
||||
} from 'antd'
|
||||
import {
|
||||
PlusOutlined, EditOutlined, EyeOutlined, CheckOutlined,
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
interface PaymentPlan {
|
||||
id: number
|
||||
purchase_order_id: number
|
||||
code: string
|
||||
payment_date: string
|
||||
amount: number
|
||||
currency: string
|
||||
payment_type: string
|
||||
status: string
|
||||
description: string
|
||||
created_by: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface PurchaseOrder {
|
||||
id: number
|
||||
code: string
|
||||
supplier_name: string
|
||||
total_amount: number
|
||||
currency: string
|
||||
}
|
||||
|
||||
// ==================== 组件 ====================
|
||||
const PaymentPlansPage: React.FC = () => {
|
||||
// 状态
|
||||
const [paymentPlans, setPaymentPlans] = useState<PaymentPlan[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrder[]>([])
|
||||
|
||||
// 弹窗状态
|
||||
const [modalVisible, setModalVisible] = useState(false)
|
||||
const [detailModalVisible, setDetailModalVisible] = useState(false)
|
||||
const [editingPlan, setEditingPlan] = useState<PaymentPlan | null>(null)
|
||||
const [viewingPlan, setViewingPlan] = useState<PaymentPlan | null>(null)
|
||||
|
||||
// 表单
|
||||
const [form] = Form.useForm()
|
||||
const navigate = useNavigate()
|
||||
|
||||
// ==================== 数据加载 ====================
|
||||
|
||||
const fetchPaymentPlans = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await fetch('/api/payment-plans')
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setPaymentPlans(data.data)
|
||||
} else {
|
||||
message.error('获取付款计划列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取付款计划列表失败:', error)
|
||||
message.error('获取付款计划列表失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPurchaseOrders = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/purchase-orders')
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setPurchaseOrders(data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取采购订单列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPlanDetail = async (id: number) => {
|
||||
try {
|
||||
const response = await fetch(`/api/payment-plans/${id}`)
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setViewingPlan(data.data)
|
||||
setDetailModalVisible(true)
|
||||
} else {
|
||||
message.error('获取付款计划详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取付款计划详情失败:', error)
|
||||
message.error('获取付款计划详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchPurchaseOrders()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchPaymentPlans()
|
||||
}, [])
|
||||
|
||||
// ==================== 操作函数 ====================
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingPlan(null)
|
||||
form.resetFields()
|
||||
form.setFieldsValue({
|
||||
payment_date: dayjs(),
|
||||
currency: 'CNY',
|
||||
payment_type: 'partial',
|
||||
status: 'pending',
|
||||
created_by: '系统管理员'
|
||||
})
|
||||
setModalVisible(true)
|
||||
}
|
||||
|
||||
const handleEdit = async (record: PaymentPlan) => {
|
||||
try {
|
||||
// 获取完整的付款计划详情
|
||||
const response = await fetch(`/api/payment-plans/${record.id}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success && data.data) {
|
||||
const fullRecord = data.data
|
||||
setEditingPlan(fullRecord)
|
||||
|
||||
// 打开模态框
|
||||
setModalVisible(true);
|
||||
|
||||
// 使用 setTimeout 确保模态框已渲染后再设置表单值
|
||||
setTimeout(() => {
|
||||
form.resetFields();
|
||||
|
||||
// 设置表单值
|
||||
form.setFieldsValue({
|
||||
purchase_order_id: fullRecord.purchase_order_id,
|
||||
payment_date: fullRecord.payment_date ? dayjs(fullRecord.payment_date) : dayjs(),
|
||||
amount: fullRecord.amount,
|
||||
currency: fullRecord.currency || 'CNY',
|
||||
payment_type: fullRecord.payment_type || 'partial',
|
||||
status: fullRecord.status || 'pending',
|
||||
description: fullRecord.description,
|
||||
created_by: fullRecord.created_by || '系统管理员'
|
||||
});
|
||||
}, 100);
|
||||
} else {
|
||||
message.error('获取付款计划详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取付款计划详情失败:', error)
|
||||
message.error('获取付款计划详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields()
|
||||
|
||||
const requestData = {
|
||||
...values,
|
||||
payment_date: values.payment_date.format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
let response
|
||||
if (editingPlan) {
|
||||
// 更新现有付款计划
|
||||
response = await fetch(`/api/payment-plans/${editingPlan.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(requestData)
|
||||
})
|
||||
} else {
|
||||
// 创建新付款计划
|
||||
response = await fetch('/api/payment-plans', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(requestData)
|
||||
})
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
message.success(editingPlan ? '保存成功' : '创建成功')
|
||||
setModalVisible(false)
|
||||
fetchPaymentPlans()
|
||||
} else {
|
||||
message.error(editingPlan ? '保存失败' : '创建失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error)
|
||||
message.error('保存失败')
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 渲染 ====================
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
pending: { color: 'blue', text: '待处理' },
|
||||
approved: { color: 'green', text: '已审批' },
|
||||
executed: { color: 'purple', text: '已执行' },
|
||||
cancelled: { color: 'red', text: '已取消' }
|
||||
}
|
||||
const info = statusMap[status] || { color: 'default', text: status }
|
||||
return <Tag color={info.color}>{info.text}</Tag>
|
||||
}
|
||||
|
||||
const getPaymentTypeTag = (type: string) => {
|
||||
const typeMap: Record<string, { color: string; text: string }> = {
|
||||
partial: { color: 'blue', text: '部分付款' },
|
||||
full: { color: 'green', text: '全额付款' }
|
||||
}
|
||||
const info = typeMap[type] || { color: 'default', text: type }
|
||||
return <Tag color={info.color}>{info.text}</Tag>
|
||||
}
|
||||
|
||||
const columns: ColumnsType<PaymentPlan> = [
|
||||
{
|
||||
title: '计划编号',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '采购订单',
|
||||
dataIndex: 'purchase_order_id',
|
||||
key: 'purchase_order_id',
|
||||
width: 140,
|
||||
render: (id) => {
|
||||
const order = purchaseOrders.find(o => o.id == id)
|
||||
return order ? order.code : id
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '付款日期',
|
||||
dataIndex: 'payment_date',
|
||||
key: 'payment_date',
|
||||
width: 110,
|
||||
render: (date) => dayjs(date).format('MM-DD')
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: (amount, record) => (
|
||||
<span style={{ fontWeight: 500, color: '#1890ff' }}>
|
||||
{record.currency} {amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '付款类型',
|
||||
dataIndex: 'payment_type',
|
||||
key: 'payment_type',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
render: getPaymentTypeTag
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center',
|
||||
render: getStatusTag
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'created_by',
|
||||
key: 'created_by',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
render: (_, record) => (
|
||||
<Space size={4}>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => fetchPlanDetail(record.id)}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(record)}
|
||||
>
|
||||
编辑
|
||||
</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 extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>新建付款计划</Button>}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={paymentPlans}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 20 }}
|
||||
size="small"
|
||||
scroll={{ x: 1200 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* 编辑/新建弹窗 */}
|
||||
<Modal
|
||||
title={editingPlan ? '编辑付款计划' : '新建付款计划'}
|
||||
open={modalVisible}
|
||||
onCancel={() => {
|
||||
setModalVisible(false)
|
||||
setEditingPlan(null)
|
||||
}}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={() => {
|
||||
setModalVisible(false)
|
||||
setEditingPlan(null)
|
||||
}}>取消</Button>,
|
||||
<Button key="save" type="primary" onClick={handleSave}>保存</Button>
|
||||
]}
|
||||
width={600}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
name="purchase_order_id"
|
||||
label="关联采购订单"
|
||||
rules={[{ required: true, message: '请选择采购订单' }]}
|
||||
>
|
||||
<Select placeholder="请选择采购订单" allowClear>
|
||||
{purchaseOrders.map(order => (
|
||||
<Select.Option key={order.id} value={order.id}>
|
||||
{order.code} - {order.supplier_name} ({order.currency} {order.total_amount})
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="payment_date"
|
||||
label="付款日期"
|
||||
rules={[{ required: true, message: '请选择付款日期' }]}
|
||||
>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="付款金额"
|
||||
rules={[{ required: true, message: '请输入付款金额' }]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} style={{ width: '100%' }} placeholder="付款金额" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="currency"
|
||||
label="币种"
|
||||
rules={[{ required: true, message: '请选择币种' }]}
|
||||
>
|
||||
<Select placeholder="请选择币种">
|
||||
<Select.Option value="CNY">人民币</Select.Option>
|
||||
<Select.Option value="USD">美元</Select.Option>
|
||||
<Select.Option value="LAK">老挝基普</Select.Option>
|
||||
<Select.Option value="THB">泰铢</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="payment_type"
|
||||
label="付款类型"
|
||||
rules={[{ required: true, message: '请选择付款类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择付款类型">
|
||||
<Select.Option value="partial">部分付款</Select.Option>
|
||||
<Select.Option value="full">全额付款</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select placeholder="请选择状态">
|
||||
<Select.Option value="pending">待处理</Select.Option>
|
||||
<Select.Option value="approved">已审批</Select.Option>
|
||||
<Select.Option value="executed">已执行</Select.Option>
|
||||
<Select.Option value="cancelled">已取消</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="created_by"
|
||||
label="创建人"
|
||||
rules={[{ required: true, message: '请输入创建人' }]}
|
||||
>
|
||||
<Input placeholder="请输入创建人" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="描述"
|
||||
>
|
||||
<Input.TextArea rows={3} placeholder="请输入付款计划描述" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
{/* 详情弹窗 */}
|
||||
<Modal
|
||||
title="付款计划详情"
|
||||
open={detailModalVisible}
|
||||
onCancel={() => setDetailModalVisible(false)}
|
||||
footer={null}
|
||||
width={600}
|
||||
>
|
||||
{viewingPlan && (
|
||||
<>
|
||||
<Descriptions bordered column={2} size="small">
|
||||
<Descriptions.Item label="计划编号">{viewingPlan.code}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">{getStatusTag(viewingPlan.status)}</Descriptions.Item>
|
||||
<Descriptions.Item label="采购订单">
|
||||
{(() => {
|
||||
const order = purchaseOrders.find(o => o.id == viewingPlan.purchase_order_id)
|
||||
return order ? order.code : viewingPlan.purchase_order_id
|
||||
})()}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="付款类型">{getPaymentTypeTag(viewingPlan.payment_type)}</Descriptions.Item>
|
||||
<Descriptions.Item label="付款日期">{viewingPlan.payment_date}</Descriptions.Item>
|
||||
<Descriptions.Item label="币种">{viewingPlan.currency}</Descriptions.Item>
|
||||
<Descriptions.Item label="金额" span={2}>{viewingPlan.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</Descriptions.Item>
|
||||
<Descriptions.Item label="描述" span={2}>{viewingPlan.description || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="创建人" span={2}>{viewingPlan.created_by}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentPlansPage;
|
||||
Reference in New Issue
Block a user