first commit
This commit is contained in:
@@ -0,0 +1,418 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user