925 lines
31 KiB
TypeScript
925 lines
31 KiB
TypeScript
|
/**
|
||
|
|
* 采购申请页面
|
||
|
|
* 遵循设计方案：采购-付款-物流-退库一体化流程设计方案.md
|
||
|
|
* 章节：二、采购申请页面改造
|
||
|
|
*
|
||
|
|
* 简化后的采购申请表单：
|
||
|
|
* - 不再录入供应商（询价前未知）
|
||
|
|
* - 不再录入商品明细（询价后确定）
|
||
|
|
* - 仅填写需求描述和预计金额
|
||
|
|
* - 新增需求日期字段
|
||
|
|
*/
|
||
|
|
import React, { useState, useEffect } from 'react'
|
||
|
|
import { useNavigate, useLocation } from 'react-router-dom'
|
||
|
|
import {
|
||
|
|
Table, Button, Modal, Form, Input, Select, message, Space, Tag, Card,
|
||
|
|
Row, Col, DatePicker, InputNumber, Popconfirm, Tabs, Empty, Spin, Descriptions, Upload
|
||
|
|
} from 'antd'
|
||
|
|
import {
|
||
|
|
PlusOutlined, EditOutlined, DeleteOutlined,
|
||
|
|
CheckOutlined, CloseOutlined, EyeOutlined, UndoOutlined, UploadOutlined
|
||
|
|
} from '@ant-design/icons'
|
||
|
|
import type { ColumnsType } from 'antd/es/table'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
|
||
|
|
interface PurchaseRequest {
|
||
|
|
id: number
|
||
|
|
code: string
|
||
|
|
request_code: string
|
||
|
|
project_id: number
|
||
|
|
project_name?: string
|
||
|
|
applicant: string
|
||
|
|
request_date: string
|
||
|
|
expense_category: string
|
||
|
|
total_amount: number
|
||
|
|
currency: string
|
||
|
|
status: string
|
||
|
|
remark?: string
|
||
|
|
attachments?: string
|
||
|
|
purchase_type: string
|
||
|
|
brief_description: string
|
||
|
|
expected_date: string
|
||
|
|
created_at: string
|
||
|
|
updated_at: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Project {
|
||
|
|
id: number
|
||
|
|
name: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const PurchaseRequestsPage: React.FC = () => {
|
||
|
|
const [purchaseRequests, setPurchaseRequests] = useState<PurchaseRequest[]>([])
|
||
|
|
const [completedRequests, setCompletedRequests] = useState<PurchaseRequest[]>([])
|
||
|
|
const [activeTab, setActiveTab] = useState('active')
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const [projects, setProjects] = useState<Project[]>([])
|
||
|
|
|
||
|
|
const [selectedProjectId, setSelectedProjectId] = useState<number | null>(null)
|
||
|
|
const [selectedStatus, setSelectedStatus] = useState<string | null>(null)
|
||
|
|
|
||
|
|
const [modalVisible, setModalVisible] = useState(false)
|
||
|
|
const [detailModalVisible, setDetailModalVisible] = useState(false)
|
||
|
|
const [editingRequest, setEditingRequest] = useState<PurchaseRequest | null>(null)
|
||
|
|
const [viewingRequest, setViewingRequest] = useState<PurchaseRequest | null>(null)
|
||
|
|
const [currentEditingStatus, setCurrentEditingStatus] = useState<string>('')
|
||
|
|
|
||
|
|
const [purchaseType, setPurchaseType] = useState<'inventory' | 'project'>('inventory')
|
||
|
|
const [currency, setCurrency] = useState<string>('CNY')
|
||
|
|
const [attachments, setAttachments] = useState<any[]>([])
|
||
|
|
|
||
|
|
const [form] = Form.useForm()
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const location = useLocation()
|
||
|
|
|
||
|
|
const exchangeRates = {
|
||
|
|
CNY: 1,
|
||
|
|
USD: 7.2,
|
||
|
|
LAK: 0.0004,
|
||
|
|
THB: 0.2
|
||
|
|
}
|
||
|
|
|
||
|
|
const fetchPurchaseRequests = async () => {
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
const params = new URLSearchParams()
|
||
|
|
if (selectedProjectId) params.append('project_id', selectedProjectId.toString())
|
||
|
|
if (selectedStatus) params.append('status', selectedStatus)
|
||
|
|
|
||
|
|
const response = await fetch(`/api/purchase-requests?${params}`)
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
const active = data.data.filter((item: PurchaseRequest) =>
|
||
|
|
['pending_edit', 'pending', 'withdrawn'].includes(item.status))
|
||
|
|
const completed = data.data.filter((item: PurchaseRequest) =>
|
||
|
|
['approved', 'executed'].includes(item.status))
|
||
|
|
setPurchaseRequests(active)
|
||
|
|
setCompletedRequests(completed)
|
||
|
|
} else {
|
||
|
|
message.error('获取采购申请列表失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取采购申请列表失败:', error)
|
||
|
|
message.error('获取采购申请列表失败')
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const fetchProjects = async () => {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/projects')
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
setProjects(data.data)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取项目列表失败:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const fetchRequestDetail = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/purchase-requests/${id}`)
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
setViewingRequest(data.data)
|
||
|
|
setDetailModalVisible(true)
|
||
|
|
} else {
|
||
|
|
message.error('获取采购申请详情失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取采购申请详情失败:', error)
|
||
|
|
message.error('获取采购申请详情失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchProjects()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
}, [selectedProjectId, selectedStatus])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const state = location.state as { formValues?: any, fromPurchaseRequest?: boolean }
|
||
|
|
let formValues = state?.formValues
|
||
|
|
|
||
|
|
if (!formValues) {
|
||
|
|
const storedValues = sessionStorage.getItem('purchaseRequestFormValues')
|
||
|
|
if (storedValues) {
|
||
|
|
formValues = JSON.parse(storedValues)
|
||
|
|
sessionStorage.removeItem('purchaseRequestFormValues')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (formValues || state?.fromPurchaseRequest) {
|
||
|
|
setTimeout(() => {
|
||
|
|
if (formValues) {
|
||
|
|
const values = {
|
||
|
|
...formValues,
|
||
|
|
request_date: formValues.request_date ? dayjs(formValues.request_date) : undefined,
|
||
|
|
expected_date: formValues.expected_date ? dayjs(formValues.expected_date) : undefined
|
||
|
|
}
|
||
|
|
form.setFieldsValue(values)
|
||
|
|
}
|
||
|
|
setModalVisible(true)
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
}, [location.state, form])
|
||
|
|
|
||
|
|
const handleCreate = () => {
|
||
|
|
setEditingRequest(null)
|
||
|
|
setPurchaseType('inventory')
|
||
|
|
form.resetFields()
|
||
|
|
form.setFieldsValue({
|
||
|
|
purchase_type: 'inventory',
|
||
|
|
request_date: dayjs(),
|
||
|
|
expected_date: dayjs().add(7, 'day'),
|
||
|
|
currency: 'CNY',
|
||
|
|
expense_category: 'material',
|
||
|
|
applicant: '系统管理员',
|
||
|
|
total_amount: 0,
|
||
|
|
attachments: []
|
||
|
|
})
|
||
|
|
setAttachments([])
|
||
|
|
setCurrentEditingStatus('')
|
||
|
|
setModalVisible(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleEdit = async (record: PurchaseRequest) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/purchase-requests/${record.id}`)
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success && data.data) {
|
||
|
|
const fullRecord = data.data
|
||
|
|
setEditingRequest(fullRecord)
|
||
|
|
setPurchaseType(fullRecord.purchase_type as 'inventory' | 'project')
|
||
|
|
setCurrentEditingStatus(fullRecord.status)
|
||
|
|
|
||
|
|
let attachmentsArray: any[] = []
|
||
|
|
if (fullRecord.attachments) {
|
||
|
|
if (typeof fullRecord.attachments === 'string') {
|
||
|
|
attachmentsArray = fullRecord.attachments.split(',').map((url: string) => ({
|
||
|
|
url: url,
|
||
|
|
name: url.split('/').pop() || '',
|
||
|
|
uid: url,
|
||
|
|
status: 'done'
|
||
|
|
}))
|
||
|
|
} else if (Array.isArray(fullRecord.attachments)) {
|
||
|
|
attachmentsArray = fullRecord.attachments
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setAttachments(attachmentsArray)
|
||
|
|
|
||
|
|
setModalVisible(true)
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
form.resetFields()
|
||
|
|
form.setFieldsValue({
|
||
|
|
purchase_type: fullRecord.purchase_type || 'inventory',
|
||
|
|
project_id: fullRecord.project_id,
|
||
|
|
request_date: fullRecord.request_date ? dayjs(fullRecord.request_date) : dayjs(),
|
||
|
|
expected_date: fullRecord.expected_date ? dayjs(fullRecord.expected_date) : undefined,
|
||
|
|
applicant: fullRecord.applicant,
|
||
|
|
brief_description: fullRecord.brief_description,
|
||
|
|
remark: fullRecord.remark,
|
||
|
|
expense_category: fullRecord.expense_category || 'material',
|
||
|
|
currency: fullRecord.currency || 'CNY',
|
||
|
|
total_amount: fullRecord.total_amount || 0,
|
||
|
|
attachments: attachmentsArray
|
||
|
|
})
|
||
|
|
}, 100)
|
||
|
|
} else {
|
||
|
|
message.error('获取采购申请详情失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取采购申请详情失败:', error)
|
||
|
|
message.error('获取采购申请详情失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDelete = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/purchase-requests/${id}`, { method: 'DELETE' })
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
message.success('删除成功')
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
} else {
|
||
|
|
message.error('删除失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('删除失败:', error)
|
||
|
|
message.error('删除失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSave = async () => {
|
||
|
|
try {
|
||
|
|
const values = await form.validateFields()
|
||
|
|
const saveStatus = currentEditingStatus || 'pending_edit'
|
||
|
|
|
||
|
|
const attachmentsUrl = attachments && attachments.length > 0
|
||
|
|
? attachments.map((file: any) => file.url).join(',')
|
||
|
|
: ''
|
||
|
|
|
||
|
|
const requestData = {
|
||
|
|
...values,
|
||
|
|
request_date: values.request_date.format('YYYY-MM-DD'),
|
||
|
|
expected_date: values.expected_date ? values.expected_date.format('YYYY-MM-DD') : null,
|
||
|
|
applicant: '系统管理员',
|
||
|
|
status: saveStatus,
|
||
|
|
attachments: attachmentsUrl
|
||
|
|
}
|
||
|
|
|
||
|
|
let response
|
||
|
|
if (editingRequest) {
|
||
|
|
response = await fetch(`/api/purchase-requests/${editingRequest.id}`, {
|
||
|
|
method: 'PUT',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(requestData)
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
response = await fetch('/api/purchase-requests', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(requestData)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
message.success(editingRequest ? '保存成功' : '创建成功')
|
||
|
|
if (!editingRequest) {
|
||
|
|
setEditingRequest(data.data)
|
||
|
|
}
|
||
|
|
setSelectedStatus(null)
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
setModalVisible(false)
|
||
|
|
} else {
|
||
|
|
message.error(editingRequest ? '保存失败' : '创建失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('保存失败:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleFormSubmit = async () => {
|
||
|
|
try {
|
||
|
|
const values = await form.validateFields()
|
||
|
|
|
||
|
|
const attachmentsUrl = attachments && attachments.length > 0
|
||
|
|
? attachments.map((file: any) => file.url).join(',')
|
||
|
|
: ''
|
||
|
|
|
||
|
|
const requestData = {
|
||
|
|
...values,
|
||
|
|
request_date: values.request_date.format('YYYY-MM-DD'),
|
||
|
|
expected_date: values.expected_date ? values.expected_date.format('YYYY-MM-DD') : null,
|
||
|
|
applicant: '系统管理员',
|
||
|
|
status: 'pending_edit',
|
||
|
|
attachments: attachmentsUrl
|
||
|
|
}
|
||
|
|
|
||
|
|
let response
|
||
|
|
let purchaseRequestId: number
|
||
|
|
let data
|
||
|
|
|
||
|
|
if (editingRequest) {
|
||
|
|
response = await fetch(`/api/purchase-requests/${editingRequest.id}`, {
|
||
|
|
method: 'PUT',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(requestData)
|
||
|
|
})
|
||
|
|
data = await response.json()
|
||
|
|
purchaseRequestId = editingRequest.id
|
||
|
|
} else {
|
||
|
|
response = await fetch('/api/purchase-requests', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(requestData)
|
||
|
|
})
|
||
|
|
data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
purchaseRequestId = data.data.id
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.success && purchaseRequestId) {
|
||
|
|
const submitResponse = await fetch(`/api/purchase-requests/${purchaseRequestId}/submit`, {
|
||
|
|
method: 'POST'
|
||
|
|
})
|
||
|
|
const submitData = await submitResponse.json()
|
||
|
|
|
||
|
|
if (submitData.success) {
|
||
|
|
message.success(editingRequest ? '提交成功' : '创建并提交成功')
|
||
|
|
setModalVisible(false)
|
||
|
|
setSelectedStatus(null)
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
} else {
|
||
|
|
message.error('提交失败')
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
message.error(editingRequest ? '保存失败' : '创建失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('提交失败:', error)
|
||
|
|
message.error('提交失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleWithdraw = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/purchase-requests/${id}/withdraw`, { method: 'POST' })
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
message.success('撤回成功')
|
||
|
|
setSelectedStatus(null)
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
} else {
|
||
|
|
message.error('撤回失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('撤回失败:', error)
|
||
|
|
message.error('撤回失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleApprove = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/purchase-requests/${id}/approve`, { method: 'POST' })
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
message.success(data.message || '审批通过成功')
|
||
|
|
setSelectedStatus(null)
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
} else {
|
||
|
|
message.error('审批通过失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('审批通过失败:', error)
|
||
|
|
message.error('审批通过失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleReject = async (id: number) => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/purchase-requests/${id}/reject`, { method: 'POST' })
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
message.success('驳回成功')
|
||
|
|
setSelectedStatus(null)
|
||
|
|
fetchPurchaseRequests()
|
||
|
|
} else {
|
||
|
|
message.error('驳回失败')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('驳回失败:', error)
|
||
|
|
message.error('驳回失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const getStatusTag = (status: string) => {
|
||
|
|
const statusMap: Record<string, { color: string; text: string }> = {
|
||
|
|
pending_edit: { color: 'default', text: '待编辑' },
|
||
|
|
pending: { color: 'blue', text: '待审批' },
|
||
|
|
approved: { color: 'green', text: '已审批' },
|
||
|
|
executed: { color: 'purple', text: '已执行' },
|
||
|
|
withdrawn: { color: 'orange', text: '已撤回' }
|
||
|
|
}
|
||
|
|
const info = statusMap[status] || { color: 'default', text: status }
|
||
|
|
return <Tag color={info.color}>{info.text}</Tag>
|
||
|
|
}
|
||
|
|
|
||
|
|
const columns: ColumnsType<PurchaseRequest> = [
|
||
|
|
{
|
||
|
|
title: '事由',
|
||
|
|
dataIndex: 'brief_description',
|
||
|
|
key: 'brief_description',
|
||
|
|
width: 180,
|
||
|
|
ellipsis: true,
|
||
|
|
render: (v: string, r: PurchaseRequest) => (
|
||
|
|
<a onClick={() => fetchRequestDetail(r.id)} style={{ fontWeight: 500 }}>{v || '-'}</a>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: 'project_name',
|
||
|
|
key: 'project_name',
|
||
|
|
width: 120,
|
||
|
|
ellipsis: true,
|
||
|
|
render: (v: string) => v || '-'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '分类',
|
||
|
|
dataIndex: 'expense_category',
|
||
|
|
key: 'expense_category',
|
||
|
|
width: 80,
|
||
|
|
render: (category) => {
|
||
|
|
const categoryMap: Record<string, string> = {
|
||
|
|
material: '材料',
|
||
|
|
equipment: '设备',
|
||
|
|
pole: '电杆',
|
||
|
|
other: '其他'
|
||
|
|
}
|
||
|
|
return <Tag size="small">{categoryMap[category] || category}</Tag>
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '预计金额',
|
||
|
|
dataIndex: 'total_amount',
|
||
|
|
key: 'total_amount',
|
||
|
|
width: 130,
|
||
|
|
align: 'right',
|
||
|
|
render: (amount, record) => (
|
||
|
|
<span style={{ fontWeight: 500, color: '#999' }}>
|
||
|
|
{record.currency} {amount?.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) || '0.00'}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '需求日期',
|
||
|
|
dataIndex: 'expected_date',
|
||
|
|
key: 'expected_date',
|
||
|
|
width: 100,
|
||
|
|
render: (date) => date ? dayjs(date).format('MM-DD') : '-'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '状态',
|
||
|
|
dataIndex: 'status',
|
||
|
|
key: 'status',
|
||
|
|
width: 90,
|
||
|
|
align: 'center',
|
||
|
|
render: getStatusTag
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '申请日期',
|
||
|
|
dataIndex: 'request_date',
|
||
|
|
key: 'request_date',
|
||
|
|
width: 100,
|
||
|
|
render: (date) => date ? dayjs(date).format('MM-DD') : '-'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '申请人',
|
||
|
|
dataIndex: 'applicant',
|
||
|
|
key: 'applicant',
|
||
|
|
width: 90
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '编号',
|
||
|
|
dataIndex: 'request_code',
|
||
|
|
key: 'request_code',
|
||
|
|
width: 150,
|
||
|
|
ellipsis: true,
|
||
|
|
render: (v: string) => <span style={{ fontSize: 12, color: '#999' }}>{v || '-'}</span>
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
key: 'actions',
|
||
|
|
width: 200,
|
||
|
|
fixed: 'right',
|
||
|
|
render: (_, record) => (
|
||
|
|
<Space size={4}>
|
||
|
|
<Button
|
||
|
|
size="small"
|
||
|
|
type="text"
|
||
|
|
icon={<EyeOutlined />}
|
||
|
|
onClick={() => fetchRequestDetail(record.id)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{record.status === 'pending' && (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
size="small"
|
||
|
|
type="text"
|
||
|
|
icon={<CheckOutlined />}
|
||
|
|
onClick={() => handleApprove(record.id)}
|
||
|
|
style={{ color: '#52c41a' }}
|
||
|
|
>
|
||
|
|
通过
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="small"
|
||
|
|
type="text"
|
||
|
|
icon={<CloseOutlined />}
|
||
|
|
onClick={() => handleReject(record.id)}
|
||
|
|
danger
|
||
|
|
>
|
||
|
|
驳回
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="small"
|
||
|
|
type="text"
|
||
|
|
icon={<UndoOutlined />}
|
||
|
|
onClick={() => handleWithdraw(record.id)}
|
||
|
|
>
|
||
|
|
撤回
|
||
|
|
</Button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{(record.status === 'withdrawn' || record.status === 'pending_edit') && (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
size="small"
|
||
|
|
type="primary"
|
||
|
|
icon={<EditOutlined />}
|
||
|
|
onClick={() => handleEdit(record)}
|
||
|
|
>
|
||
|
|
编辑
|
||
|
|
</Button>
|
||
|
|
<Popconfirm
|
||
|
|
title="确定要删除吗？"
|
||
|
|
onConfirm={() => handleDelete(record.id)}
|
||
|
|
>
|
||
|
|
<Button size="small" type="text" danger icon={<DeleteOutlined />} />
|
||
|
|
</Popconfirm>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</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>}>
|
||
|
|
<Tabs activeKey={activeTab} onChange={setActiveTab}>
|
||
|
|
<Tabs.TabPane tab="活跃申请" key="active">
|
||
|
|
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||
|
|
<Col span={6}>
|
||
|
|
<Select
|
||
|
|
placeholder="选择项目筛选"
|
||
|
|
allowClear
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
onChange={(value) => setSelectedProjectId(value)}
|
||
|
|
>
|
||
|
|
{projects.map(project => (
|
||
|
|
<Select.Option key={project.id} value={project.id}>
|
||
|
|
{project.name}
|
||
|
|
</Select.Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</Col>
|
||
|
|
<Col span={6}>
|
||
|
|
<Select
|
||
|
|
placeholder="选择状态筛选"
|
||
|
|
allowClear
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
onChange={(value) => setSelectedStatus(value)}
|
||
|
|
>
|
||
|
|
<Select.Option value="pending">待审批</Select.Option>
|
||
|
|
<Select.Option value="withdrawn">已撤回</Select.Option>
|
||
|
|
<Select.Option value="pending_edit">待编辑</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Table
|
||
|
|
columns={columns}
|
||
|
|
dataSource={purchaseRequests}
|
||
|
|
rowKey="id"
|
||
|
|
loading={loading}
|
||
|
|
pagination={{ pageSize: 20 }}
|
||
|
|
size="small"
|
||
|
|
scroll={{ x: 1200 }}
|
||
|
|
/>
|
||
|
|
</Tabs.TabPane>
|
||
|
|
<Tabs.TabPane tab="已完成" key="completed">
|
||
|
|
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||
|
|
<Col span={6}>
|
||
|
|
<Select
|
||
|
|
placeholder="选择项目筛选"
|
||
|
|
allowClear
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
onChange={(value) => setSelectedProjectId(value)}
|
||
|
|
>
|
||
|
|
{projects.map(project => (
|
||
|
|
<Select.Option key={project.id} value={project.id}>
|
||
|
|
{project.name}
|
||
|
|
</Select.Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Table
|
||
|
|
columns={columns}
|
||
|
|
dataSource={completedRequests}
|
||
|
|
rowKey="id"
|
||
|
|
loading={loading}
|
||
|
|
pagination={{ pageSize: 20 }}
|
||
|
|
size="small"
|
||
|
|
scroll={{ x: 1200 }}
|
||
|
|
/>
|
||
|
|
</Tabs.TabPane>
|
||
|
|
</Tabs>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 编辑/新建弹窗 - 简化版 */}
|
||
|
|
<Modal
|
||
|
|
title={editingRequest ? '编辑采购申请' : '新建采购申请'}
|
||
|
|
open={modalVisible}
|
||
|
|
onCancel={() => setModalVisible(false)}
|
||
|
|
footer={[
|
||
|
|
<Button key="cancel" onClick={() => setModalVisible(false)}>取消</Button>,
|
||
|
|
<Button key="save" onClick={handleSave}>保存</Button>,
|
||
|
|
<Button key="submit" type="primary" onClick={handleFormSubmit}>提交审批</Button>
|
||
|
|
]}
|
||
|
|
width={700}
|
||
|
|
>
|
||
|
|
<Form form={form} layout="vertical">
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="purchase_type"
|
||
|
|
label="采购类型"
|
||
|
|
rules={[{ required: true, message: '请选择采购类型' }]}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
placeholder="请选择采购类型"
|
||
|
|
onChange={(value) => setPurchaseType(value as 'inventory' | 'project')}
|
||
|
|
>
|
||
|
|
<Select.Option value="inventory">库存采购</Select.Option>
|
||
|
|
<Select.Option value="project">项目采购</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
{purchaseType === 'project' && (
|
||
|
|
<Form.Item
|
||
|
|
name="project_id"
|
||
|
|
label="关联项目"
|
||
|
|
rules={[{ required: true, message: '项目采购必须关联项目' }]}
|
||
|
|
>
|
||
|
|
<Select placeholder="请选择项目" allowClear>
|
||
|
|
{projects.map(project => (
|
||
|
|
<Select.Option key={project.id} value={project.id}>
|
||
|
|
{project.name}
|
||
|
|
</Select.Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
)}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="applicant"
|
||
|
|
label="申请人"
|
||
|
|
initialValue="系统管理员"
|
||
|
|
rules={[{ required: true, message: '请输入申请人' }]}
|
||
|
|
>
|
||
|
|
<Input placeholder="请输入申请人" disabled />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="request_date"
|
||
|
|
label="申请日期"
|
||
|
|
rules={[{ required: true, message: '请选择申请日期' }]}
|
||
|
|
>
|
||
|
|
<DatePicker style={{ width: '100%' }} />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Form.Item
|
||
|
|
name="brief_description"
|
||
|
|
label="事由描述"
|
||
|
|
rules={[
|
||
|
|
{ required: true, message: '请输入事由描述' },
|
||
|
|
{ max: 100, message: '事由描述不能超过100个字符' }
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Input.TextArea
|
||
|
|
rows={2}
|
||
|
|
placeholder="请简要描述采购需求（如：采购XX项目所需电缆、电杆等材料）"
|
||
|
|
maxLength={100}
|
||
|
|
showCount
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={8}>
|
||
|
|
<Form.Item
|
||
|
|
name="expense_category"
|
||
|
|
label="支出分类"
|
||
|
|
rules={[{ required: true, message: '请选择支出分类' }]}
|
||
|
|
>
|
||
|
|
<Select placeholder="请选择支出分类">
|
||
|
|
<Select.Option value="material">材料</Select.Option>
|
||
|
|
<Select.Option value="equipment">设备</Select.Option>
|
||
|
|
<Select.Option value="pole">电杆</Select.Option>
|
||
|
|
<Select.Option value="other">其他</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<Form.Item
|
||
|
|
name="total_amount"
|
||
|
|
label="预计金额"
|
||
|
|
rules={[{ required: true, message: '请输入预计金额' }]}
|
||
|
|
>
|
||
|
|
<InputNumber
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
placeholder="预计金额"
|
||
|
|
min={0}
|
||
|
|
precision={2}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={8}>
|
||
|
|
<Form.Item
|
||
|
|
name="currency"
|
||
|
|
label="币种"
|
||
|
|
rules={[{ required: true, message: '请选择币种' }]}
|
||
|
|
>
|
||
|
|
<Select placeholder="请选择币种" onChange={(value) => setCurrency(value)}>
|
||
|
|
<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>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
name="expected_date"
|
||
|
|
label="需求日期"
|
||
|
|
rules={[{ required: true, message: '请选择需求日期' }]}
|
||
|
|
>
|
||
|
|
<DatePicker style={{ width: '100%' }} placeholder="期望到货日期" />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Form.Item name="remark" label="备注">
|
||
|
|
<Input.TextArea rows={2} placeholder="请输入备注（选填）" />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Form.Item name="attachments" label="附件">
|
||
|
|
<Upload
|
||
|
|
name="file"
|
||
|
|
listType="text"
|
||
|
|
maxCount={5}
|
||
|
|
accept=".pdf,.doc,.docx,.xlsx,.xls,.jpg,.jpeg,.png"
|
||
|
|
fileList={attachments}
|
||
|
|
onChange={(info) => {
|
||
|
|
if (info.file.status === 'removed') {
|
||
|
|
const updatedAttachments = attachments.filter(item => item.uid !== info.file.uid)
|
||
|
|
setAttachments(updatedAttachments)
|
||
|
|
form.setFieldsValue({ attachments: updatedAttachments })
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
customRequest={async (options) => {
|
||
|
|
const { onSuccess, onError, file } = options
|
||
|
|
const formData = new FormData()
|
||
|
|
formData.append('file', file as File)
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/upload/single', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.success && data.data) {
|
||
|
|
const fileInfo = {
|
||
|
|
...data.data,
|
||
|
|
name: (file as File).name,
|
||
|
|
uid: (file as any).uid,
|
||
|
|
status: 'done'
|
||
|
|
}
|
||
|
|
const updatedAttachments = [...attachments, fileInfo]
|
||
|
|
setAttachments(updatedAttachments)
|
||
|
|
form.setFieldsValue({ attachments: updatedAttachments })
|
||
|
|
onSuccess(fileInfo)
|
||
|
|
} else {
|
||
|
|
onError(new Error('上传失败'))
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
onError(error)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onPreview={(file) => {
|
||
|
|
window.open(file.url, '_blank')
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button icon={<UploadOutlined />}>选择文件</Button>
|
||
|
|
</Upload>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
{/* 详情弹窗 */}
|
||
|
|
<Modal
|
||
|
|
title="采购申请详情"
|
||
|
|
open={detailModalVisible}
|
||
|
|
onCancel={() => setDetailModalVisible(false)}
|
||
|
|
footer={[<Button key="close" onClick={() => setDetailModalVisible(false)}>关闭</Button>]}
|
||
|
|
width={700}
|
||
|
|
>
|
||
|
|
{viewingRequest && (
|
||
|
|
<div>
|
||
|
|
<Card style={{ marginBottom: 16 }}>
|
||
|
|
<Descriptions bordered column={2}>
|
||
|
|
<Descriptions.Item label="申请编号" span={1}>{viewingRequest.request_code || viewingRequest.code}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="状态" span={1}>{getStatusTag(viewingRequest.status)}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="采购类型" span={1}>
|
||
|
|
{viewingRequest.purchase_type === 'project' ? '项目采购' : '库存采购'}
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="项目" span={1}>{viewingRequest.project_name || '-'}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="申请人" span={1}>{viewingRequest.applicant}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="申请日期" span={1}>{viewingRequest.request_date}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="事由描述" span={2}>{viewingRequest.brief_description || '-'}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="支出分类" span={1}>
|
||
|
|
{{
|
||
|
|
material: '材料',
|
||
|
|
equipment: '设备',
|
||
|
|
pole: '电杆',
|
||
|
|
other: '其他'
|
||
|
|
}[viewingRequest.expense_category] || viewingRequest.expense_category}
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="预计金额" span={1}>
|
||
|
|
<strong style={{ fontSize: 16, color: '#999' }}>
|
||
|
|
{viewingRequest.currency} {viewingRequest.total_amount?.toFixed(2) || '0.00'}
|
||
|
|
</strong>
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="需求日期" span={1}>
|
||
|
|
{viewingRequest.expected_date || '-'}
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="创建时间" span={1}>
|
||
|
|
{viewingRequest.created_at}
|
||
|
|
</Descriptions.Item>
|
||
|
|
{viewingRequest.remark && (
|
||
|
|
<Descriptions.Item label="备注" span={2}>{viewingRequest.remark}</Descriptions.Item>
|
||
|
|
)}
|
||
|
|
</Descriptions>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default PurchaseRequestsPage
|