419 lines
17 KiB
TypeScript
419 lines
17 KiB
TypeScript
import {
|
|
Card,
|
|
Row,
|
|
Col,
|
|
Button,
|
|
Space,
|
|
Typography,
|
|
Descriptions,
|
|
Steps,
|
|
Timeline,
|
|
Tag,
|
|
Avatar,
|
|
Form,
|
|
Input,
|
|
Badge,
|
|
Divider,
|
|
Flex,
|
|
} from "antd";
|
|
import React from "react";
|
|
import {
|
|
AuditOutlined,
|
|
CheckCircleOutlined,
|
|
CloseCircleOutlined,
|
|
ClockCircleOutlined,
|
|
FileDoneOutlined,
|
|
EditOutlined,
|
|
PrinterOutlined,
|
|
ExportOutlined,
|
|
} from "@ant-design/icons";
|
|
|
|
const { Title, Text, Paragraph } = Typography;
|
|
const { TextArea } = Input;
|
|
|
|
const FixHeader = () => {
|
|
const [activeTab, setActiveTab] = React.useState('1');
|
|
|
|
// 审批历史数据
|
|
const approvalHistory = [
|
|
{
|
|
time: '2026-01-01 14:30:00',
|
|
approver: '王总',
|
|
role: '总经理',
|
|
status: 'approved',
|
|
statusText: '已通过',
|
|
comment: '同意该采购申请，请采购部门尽快落实。',
|
|
avatar: 'W',
|
|
},
|
|
{
|
|
time: '2026-01-01 11:20:00',
|
|
approver: '李经理',
|
|
role: '财务经理',
|
|
status: 'approved',
|
|
statusText: '已通过',
|
|
comment: '预算充足，财务审批通过。',
|
|
avatar: 'L',
|
|
},
|
|
{
|
|
time: '2026-01-01 10:15:00',
|
|
approver: '赵主管',
|
|
role: '部门主管',
|
|
status: 'approved',
|
|
statusText: '已通过',
|
|
comment: '该采购申请合理，同意提交上级审批。',
|
|
avatar: 'Z',
|
|
},
|
|
{
|
|
time: '2025-12-31 16:45:00',
|
|
approver: '张三',
|
|
role: '申请人',
|
|
status: 'submitted',
|
|
statusText: '已提交',
|
|
comment: '因公司业务需要，申请采购以下办公设备。',
|
|
avatar: 'Z',
|
|
},
|
|
];
|
|
|
|
// 审批明细数据
|
|
const approvalItems = [
|
|
{ name: 'MacBook Pro 16"', quantity: 5, price: 25999, total: 129995 },
|
|
{ name: 'Dell 显示器 27"', quantity: 10, price: 2999, total: 29990 },
|
|
{ name: '人体工学椅', quantity: 10, price: 1899, total: 18990 },
|
|
{ name: '会议摄像头', quantity: 2, price: 3999, total: 7998 },
|
|
];
|
|
|
|
const totalAmount = approvalItems.reduce((sum, item) => sum + item.total, 0);
|
|
|
|
return (
|
|
<div>
|
|
<Card style={{ marginBottom: 16, backgroundColor: '#fff' }}>
|
|
<Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
|
|
<div>
|
|
<Title level={3} style={{ margin: 0 }}>
|
|
<AuditOutlined style={{ marginRight: 8 }} />
|
|
采购审批申请
|
|
</Title>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>
|
|
申请单号: PR2025123100001 · 创建时间: 2025-12-31 16:45:32
|
|
</Text>
|
|
</div>
|
|
<Space>
|
|
<Button icon={<PrinterOutlined />}>打印</Button>
|
|
<Button icon={<ExportOutlined />}>导出</Button>
|
|
<Button type="primary" icon={<CheckCircleOutlined />}>
|
|
审批通过
|
|
</Button>
|
|
<Button danger icon={<CloseCircleOutlined />}>
|
|
驳回
|
|
</Button>
|
|
</Space>
|
|
</Flex>
|
|
</Card>
|
|
|
|
<Card
|
|
style={{ marginBottom: 16, backgroundColor: '#fff' }}
|
|
tabList={[
|
|
{ label: <span><FileDoneOutlined /> 审批详情</span>, key: '1' },
|
|
{ label: <span><ClockCircleOutlined /> 审批进度</span>, key: '2' },
|
|
{ label: <span><EditOutlined /> 审批意见</span>, key: '3' },
|
|
]}
|
|
activeTabKey={activeTab}
|
|
onTabChange={setActiveTab}
|
|
>
|
|
{/* 审批详情标签页 */}
|
|
{activeTab === '1' && (
|
|
<Row gutter={[20, 20]}>
|
|
{/* 申请信息 */}
|
|
<Col xs={24} lg={16}>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Flex justify="space-between" align="center" style={{ marginBottom: 16 }}>
|
|
<Title level={5} style={{ margin: 0 }}>申请信息</Title>
|
|
<Tag color="success" icon={<CheckCircleOutlined />}>
|
|
审批通过
|
|
</Tag>
|
|
</Flex>
|
|
<Descriptions column={{ xs: 1, sm: 2 }} bordered>
|
|
<Descriptions.Item label="申请单号">PR2025123100001</Descriptions.Item>
|
|
<Descriptions.Item label="申请状态">
|
|
<Badge status="success" text="已通过" />
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="申请人">张三</Descriptions.Item>
|
|
<Descriptions.Item label="申请部门">技术研发部</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话">138****8888</Descriptions.Item>
|
|
<Descriptions.Item label="邮箱">zhangsan@example.com</Descriptions.Item>
|
|
<Descriptions.Item label="申请时间">2025-12-31 16:45:32</Descriptions.Item>
|
|
<Descriptions.Item label="完成时间">2026-01-01 14:30:00</Descriptions.Item>
|
|
<Descriptions.Item label="申请类型">
|
|
<Tag color="blue">办公设备采购</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="紧急程度">
|
|
<Tag color="orange">普通</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="预算编号">BUD-2026-Q1-001</Descriptions.Item>
|
|
<Descriptions.Item label="成本中心">CC-RD-001</Descriptions.Item>
|
|
<Descriptions.Item label="申请事由" span={2}>
|
|
因公司业务扩展，技术研发部新增10名员工，需采购相应办公设备以满足日常工作需求。
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
|
|
{/* 采购明细 */}
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Title level={5} style={{ marginBottom: 16 }}>采购明细</Title>
|
|
<div style={{ overflowX: 'auto' }}>
|
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
|
<thead>
|
|
<tr style={{ backgroundColor: '#fafafa' }}>
|
|
<th style={{ padding: '12px', textAlign: 'left', border: '1px solid #f0f0f0' }}>物品名称</th>
|
|
<th style={{ padding: '12px', textAlign: 'center', border: '1px solid #f0f0f0' }}>数量</th>
|
|
<th style={{ padding: '12px', textAlign: 'right', border: '1px solid #f0f0f0' }}>单价(¥)</th>
|
|
<th style={{ padding: '12px', textAlign: 'right', border: '1px solid #f0f0f0' }}>小计(¥)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{approvalItems.map((item, index) => (
|
|
<tr key={index}>
|
|
<td style={{ padding: '12px', border: '1px solid #f0f0f0' }}>{item.name}</td>
|
|
<td style={{ padding: '12px', textAlign: 'center', border: '1px solid #f0f0f0' }}>{item.quantity}</td>
|
|
<td style={{ padding: '12px', textAlign: 'right', border: '1px solid #f0f0f0' }}>{item.price.toLocaleString()}</td>
|
|
<td style={{ padding: '12px', textAlign: 'right', border: '1px solid #f0f0f0' }}>{item.total.toLocaleString()}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr style={{ backgroundColor: '#fafafa', fontWeight: 600 }}>
|
|
<td colSpan={3} style={{ padding: '12px', textAlign: 'right', border: '1px solid #f0f0f0' }}>合计金额:</td>
|
|
<td style={{ padding: '12px', textAlign: 'right', border: '1px solid #f0f0f0', color: '#f5222d', fontSize: 16 }}>
|
|
¥{totalAmount.toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 附件信息 */}
|
|
<div>
|
|
<Title level={5} style={{ marginBottom: 16 }}>附件材料</Title>
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
<Flex justify="space-between" align="center">
|
|
<Space>
|
|
<FileDoneOutlined style={{ fontSize: 16, color: '#1677ff' }} />
|
|
<Text>采购申请表.pdf</Text>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>(2.3 MB)</Text>
|
|
</Space>
|
|
<Button type="link" size="small">下载</Button>
|
|
</Flex>
|
|
<Divider style={{ margin: '8px 0' }} />
|
|
<Flex justify="space-between" align="center">
|
|
<Space>
|
|
<FileDoneOutlined style={{ fontSize: 16, color: '#1677ff' }} />
|
|
<Text>设备报价单.xlsx</Text>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>(1.8 MB)</Text>
|
|
</Space>
|
|
<Button type="link" size="small">下载</Button>
|
|
</Flex>
|
|
<Divider style={{ margin: '8px 0' }} />
|
|
<Flex justify="space-between" align="center">
|
|
<Space>
|
|
<FileDoneOutlined style={{ fontSize: 16, color: '#1677ff' }} />
|
|
<Text>预算说明文档.docx</Text>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>(856 KB)</Text>
|
|
</Space>
|
|
<Button type="link" size="small">下载</Button>
|
|
</Flex>
|
|
</Space>
|
|
</div>
|
|
</Col>
|
|
|
|
{/* 侧边栏 */}
|
|
<Col xs={24} lg={8}>
|
|
{/* 申请人信息 */}
|
|
<Card title="申请人信息" style={{ marginBottom: 16 }}>
|
|
<Flex align="center" style={{ marginBottom: 16 }}>
|
|
<Avatar size={48} style={{ backgroundColor: '#1677ff' }}>
|
|
张三
|
|
</Avatar>
|
|
<div style={{ marginLeft: 12 }}>
|
|
<Text strong>张三</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>技术研发部 · 高级工程师</Text>
|
|
</div>
|
|
</Flex>
|
|
<Divider style={{ margin: '12px 0' }} />
|
|
<Descriptions column={1} size="small">
|
|
<Descriptions.Item label="员工编号">EMP202301001</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话">138****8888</Descriptions.Item>
|
|
<Descriptions.Item label="电子邮箱">zhangsan@example.com</Descriptions.Item>
|
|
<Descriptions.Item label="所属部门">技术研发部</Descriptions.Item>
|
|
<Descriptions.Item label="直属领导">赵主管</Descriptions.Item>
|
|
</Descriptions>
|
|
</Card>
|
|
|
|
{/* 审批流程 */}
|
|
<Card title="审批流程">
|
|
<Steps
|
|
direction="vertical"
|
|
current={3}
|
|
items={[
|
|
{
|
|
title: '申请人提交',
|
|
description: (
|
|
<div>
|
|
<Text>张三 · 技术研发部</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>2025-12-31 16:45</Text>
|
|
</div>
|
|
),
|
|
status: 'finish',
|
|
icon: <CheckCircleOutlined />,
|
|
},
|
|
{
|
|
title: '部门审批',
|
|
description: (
|
|
<div>
|
|
<Text>赵主管 · 部门主管</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>2026-01-01 10:15</Text>
|
|
<br />
|
|
<Tag color="success" style={{ marginTop: 4 }}>已通过</Tag>
|
|
</div>
|
|
),
|
|
status: 'finish',
|
|
icon: <CheckCircleOutlined />,
|
|
},
|
|
{
|
|
title: '财务审批',
|
|
description: (
|
|
<div>
|
|
<Text>李经理 · 财务经理</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>2026-01-01 11:20</Text>
|
|
<br />
|
|
<Tag color="success" style={{ marginTop: 4 }}>已通过</Tag>
|
|
</div>
|
|
),
|
|
status: 'finish',
|
|
icon: <CheckCircleOutlined />,
|
|
},
|
|
{
|
|
title: '总经理审批',
|
|
description: (
|
|
<div>
|
|
<Text>王总 · 总经理</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>2026-01-01 14:30</Text>
|
|
<br />
|
|
<Tag color="success" style={{ marginTop: 4 }}>已通过</Tag>
|
|
</div>
|
|
),
|
|
status: 'finish',
|
|
icon: <CheckCircleOutlined />,
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
|
|
{/* 审批进度标签页 */}
|
|
{activeTab === '2' && (
|
|
<Timeline
|
|
style={{ maxWidth: 600, paddingTop: 20 }}
|
|
mode="left"
|
|
items={approvalHistory.map((item) => ({
|
|
color: item.status === 'approved' ? 'green' : 'blue',
|
|
label: <Text type="secondary">{item.time}</Text>,
|
|
children: (
|
|
<Card size="small" style={{ marginBottom: 8 }}>
|
|
<Flex align="center" style={{ marginBottom: 8 }}>
|
|
<Avatar style={{ backgroundColor: item.status === 'approved' ? '#52c41a' : '#1677ff' }}>
|
|
{item.avatar}
|
|
</Avatar>
|
|
<div style={{ marginLeft: 12 }}>
|
|
<Text strong>{item.approver}</Text>
|
|
<Text type="secondary" style={{ marginLeft: 8, fontSize: 12 }}>({item.role})</Text>
|
|
<br />
|
|
<Tag
|
|
color={item.status === 'approved' ? 'success' : 'processing'}
|
|
style={{ marginTop: 4 }}
|
|
>
|
|
{item.statusText}
|
|
</Tag>
|
|
</div>
|
|
</Flex>
|
|
<Paragraph
|
|
type="secondary"
|
|
style={{ marginBottom: 0, paddingLeft: 60, fontSize: 13 }}
|
|
>
|
|
{item.comment}
|
|
</Paragraph>
|
|
</Card>
|
|
),
|
|
}))}
|
|
/>
|
|
)}
|
|
|
|
{/* 审批意见标签页 */}
|
|
{activeTab === '3' && (
|
|
<Row gutter={[16, 16]}>
|
|
<Col xs={24} lg={16}>
|
|
<Card title="填写审批意见">
|
|
<Form layout="vertical">
|
|
<Form.Item label="审批结果" required>
|
|
<Space>
|
|
<Button type="primary" icon={<CheckCircleOutlined />} size="large">
|
|
通过
|
|
</Button>
|
|
<Button danger icon={<CloseCircleOutlined />} size="large">
|
|
驳回
|
|
</Button>
|
|
<Button icon={<EditOutlined />} size="large">
|
|
转审
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
<Form.Item label="审批意见" required>
|
|
<TextArea
|
|
rows={6}
|
|
placeholder="请输入您的审批意见..."
|
|
maxLength={500}
|
|
showCount
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Space>
|
|
<Button type="primary" size="large">
|
|
提交审批意见
|
|
</Button>
|
|
<Button size="large">保存草稿</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={24} lg={8}>
|
|
<Card title="审批提示">
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
<Text type="secondary">• 请仔细核对申请信息和采购明细</Text>
|
|
<Text type="secondary">• 审批意见将发送给申请人和相关人员</Text>
|
|
<Text type="secondary">• 审批通过后将自动流转至下一审批节点</Text>
|
|
<Text type="secondary">• 驳回后申请人可修改后重新提交</Text>
|
|
<Text type="secondary">• 转审可将审批任务转交给其他人员</Text>
|
|
</Space>
|
|
<Divider />
|
|
<Text strong>审批时限</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>请在 2026-01-03 前完成审批</Text>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FixHeader;
|