first commit
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
import {Button, Card, Row, Col, Dropdown, Space, Typography, Flex, Statistic, Progress, Descriptions, Tag, Avatar} from "antd";
|
||||
import {EllipsisOutlined, UserOutlined, TeamOutlined, ShoppingOutlined, RiseOutlined} from "@ant-design/icons";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const BaseLayout = () => {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh'}}>
|
||||
{/* 页面头部 */}
|
||||
<Card variant={"borderless"} style={{ marginBottom: 20}}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 4 }}>页面标题</Title>
|
||||
<Typography.Text type="secondary">这是页面的描述信息,可以简要说明页面用途</Typography.Text>
|
||||
</div>
|
||||
<Space style={{ height: "100%" }}>
|
||||
<Button icon={<UserOutlined />}>操作一</Button>
|
||||
<Button icon={<TeamOutlined />}>操作二</Button>
|
||||
<Button type="primary" icon={<ShoppingOutlined />}>主要操作</Button>
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
menu={{
|
||||
items: [
|
||||
{ label: '导出数据', key: '1', icon: <RiseOutlined /> },
|
||||
{ label: '批量操作', key: '2' },
|
||||
{ label: '更多设置', key: '3' },
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Button style={{ padding: '0 8px' }}>
|
||||
<EllipsisOutlined style={{ fontSize: 18 }} />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
{/* 数据统计卡片 */}
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="总用户数"
|
||||
value={11893}
|
||||
prefix={<UserOutlined style={{ color: '#1677ff' }} />}
|
||||
valueStyle={{ color: '#1677ff' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="success">+12.5%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="活跃用户"
|
||||
value={8234}
|
||||
prefix={<TeamOutlined style={{ color: '#52c41a' }} />}
|
||||
valueStyle={{ color: '#52c41a' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="success">+8.2%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="总订单"
|
||||
value={32567}
|
||||
prefix={<ShoppingOutlined style={{ color: '#faad14' }} />}
|
||||
valueStyle={{ color: '#faad14' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="warning">+5.3%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="总收入"
|
||||
value={98234}
|
||||
prefix="¥"
|
||||
valueStyle={{ color: '#f5222d' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="error">-2.1%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<Card
|
||||
variant={"borderless"}
|
||||
tabList={[
|
||||
{
|
||||
label: '基本信息',
|
||||
key: 'base',
|
||||
},
|
||||
{
|
||||
label: '详细信息',
|
||||
key: 'info'
|
||||
},
|
||||
{
|
||||
label: '数据分析',
|
||||
key: 'analysis'
|
||||
}
|
||||
]}
|
||||
activeTabKey="base"
|
||||
>
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
{/* 用户信息卡片 */}
|
||||
<Col xs={24} lg={24}>
|
||||
<Card
|
||||
title={<span><UserOutlined style={{ marginRight: 8 }} />用户信息概览</span>}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: '#fff',
|
||||
borderRadius: 8
|
||||
}}
|
||||
styles={{
|
||||
header: {
|
||||
color: '#fff',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.2)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6}>
|
||||
<Avatar size={64} icon={<UserOutlined />} />
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<Typography.Title level={5} style={{ color: '#fff', marginTop: 0 }}>
|
||||
张三 / Zhang San
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: 'rgba(255,255,255,0.85)' }}>
|
||||
高级管理员 · 北京市朝阳区 · 在职
|
||||
</Typography.Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 详细信息卡片 */}
|
||||
<Col xs={24} lg={16}>
|
||||
<Card
|
||||
title="详细信息"
|
||||
style={{ height: '100%', borderRadius: 8 }}
|
||||
>
|
||||
<Descriptions column={{ xs: 1, sm: 2 }}>
|
||||
<Descriptions.Item label="用户名">zhangsan</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.Item label="入职时间">2023-01-15</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">
|
||||
<Tag color="success">正常</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="权限等级">
|
||||
<Tag color="blue">管理员</Tag>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 进度统计卡片 */}
|
||||
<Col xs={24} lg={8}>
|
||||
<Card
|
||||
title="任务完成度"
|
||||
style={{ height: '100%', borderRadius: 8 }}
|
||||
>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span>本周任务</span>
|
||||
<span style={{ float: 'right', fontWeight: 600 }}>75%</span>
|
||||
</div>
|
||||
<Progress percent={75} strokeColor="#52c41a" />
|
||||
</div>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span>本月目标</span>
|
||||
<span style={{ float: 'right', fontWeight: 600 }}>60%</span>
|
||||
</div>
|
||||
<Progress percent={60} strokeColor="#1677ff" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span>年度KPI</span>
|
||||
<span style={{ float: 'right', fontWeight: 600 }}>45%</span>
|
||||
</div>
|
||||
<Progress percent={45} strokeColor="#faad14" />
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 底部操作按钮 */}
|
||||
<Flex justify="space-between" align="center">
|
||||
<Space>
|
||||
<Button size="large">重置</Button>
|
||||
<Button type="primary" size="large">保存</Button>
|
||||
<Button type="primary" size="large" ghost>提交审核</Button>
|
||||
</Space>
|
||||
<Typography.Text type="secondary">
|
||||
最后更新时间: 2026-01-01 10:30:00
|
||||
</Typography.Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaseLayout;
|
||||
@@ -0,0 +1,339 @@
|
||||
import {
|
||||
Descriptions,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
Space,
|
||||
Typography,
|
||||
Flex,
|
||||
Tag,
|
||||
Divider,
|
||||
Steps,
|
||||
Timeline,
|
||||
Table,
|
||||
Avatar,
|
||||
} from 'antd';
|
||||
import {
|
||||
ShoppingOutlined,
|
||||
PrinterOutlined,
|
||||
DownloadOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const Layout = () => {
|
||||
// 订单商品数据
|
||||
const productColumns = [
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '商品编号',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'quantity',
|
||||
key: 'quantity',
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
render: (price: number) => `¥${price.toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '小计',
|
||||
dataIndex: 'total',
|
||||
key: 'total',
|
||||
render: (total: number) => `¥${total.toFixed(2)}`,
|
||||
},
|
||||
];
|
||||
|
||||
const productData = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'iPhone 15 Pro Max',
|
||||
code: 'IP15PM-256-BLK',
|
||||
quantity: 2,
|
||||
price: 9999,
|
||||
total: 19998,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AirPods Pro 2',
|
||||
code: 'APP2-WHT',
|
||||
quantity: 1,
|
||||
price: 1899,
|
||||
total: 1899,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'MacBook Pro 16"',
|
||||
code: 'MBP16-M3-SLV',
|
||||
quantity: 1,
|
||||
price: 25999,
|
||||
total: 25999,
|
||||
},
|
||||
];
|
||||
|
||||
// 物流信息
|
||||
const logisticsData = [
|
||||
{
|
||||
time: '2026-01-01 15:30:00',
|
||||
status: '已签收',
|
||||
description: '您的订单已由本人签收,感谢您的购买',
|
||||
},
|
||||
{
|
||||
time: '2026-01-01 09:20:00',
|
||||
status: '派送中',
|
||||
description: '快递员正在为您派送 [北京市朝阳区] 快递员:李师傅 13800138000',
|
||||
},
|
||||
{
|
||||
time: '2025-12-31 18:45:00',
|
||||
status: '运输中',
|
||||
description: '您的包裹已到达 [北京分拨中心]',
|
||||
},
|
||||
{
|
||||
time: '2025-12-30 14:20:00',
|
||||
status: '已发货',
|
||||
description: '您的订单已从 [上海仓库] 发出,物流单号: SF1234567890',
|
||||
},
|
||||
{
|
||||
time: '2025-12-30 10:00:00',
|
||||
status: '已支付',
|
||||
description: '订单支付成功,等待商家发货',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh' }}>
|
||||
{/* 页面头部 */}
|
||||
<Card variant={'borderless'} style={{ marginBottom: 20 }}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 4 }}>
|
||||
<ShoppingOutlined style={{ marginRight: 8 }} />
|
||||
订单详情
|
||||
</Title>
|
||||
<Text type="secondary">订单号: OD2026010100001 · 创建时间: 2025-12-30 09:45:32</Text>
|
||||
</div>
|
||||
<Space style={{ height: '100%' }}>
|
||||
<Button icon={<PrinterOutlined />}>打印订单</Button>
|
||||
<Button icon={<DownloadOutlined />}>导出订单</Button>
|
||||
<Button type="primary">联系客服</Button>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
{/* 订单状态 */}
|
||||
<Card variant={'borderless'} style={{ marginBottom: 20 }}>
|
||||
<Steps
|
||||
current={4}
|
||||
items={[
|
||||
{
|
||||
title: '提交订单',
|
||||
description: '2025-12-30 09:45',
|
||||
icon: <CheckCircleOutlined />,
|
||||
},
|
||||
{
|
||||
title: '支付完成',
|
||||
description: '2025-12-30 10:00',
|
||||
icon: <CheckCircleOutlined />,
|
||||
},
|
||||
{
|
||||
title: '商家发货',
|
||||
description: '2025-12-30 14:20',
|
||||
icon: <CheckCircleOutlined />,
|
||||
},
|
||||
{
|
||||
title: '运输中',
|
||||
description: '2025-12-31 18:45',
|
||||
icon: <CheckCircleOutlined />,
|
||||
},
|
||||
{
|
||||
title: '已签收',
|
||||
description: '2026-01-01 15:30',
|
||||
icon: <CheckCircleOutlined />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<Row gutter={[16, 16]}>
|
||||
{/* 订单基本信息 */}
|
||||
<Col xs={24} lg={16}>
|
||||
<Card
|
||||
variant={'borderless'}
|
||||
title="订单基本信息"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Descriptions column={{ xs: 1, sm: 2 }} bordered>
|
||||
<Descriptions.Item label="订单号">OD2026010100001</Descriptions.Item>
|
||||
<Descriptions.Item label="订单状态">
|
||||
<Tag color="success" icon={<CheckCircleOutlined />}>
|
||||
已完成
|
||||
</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="下单时间">2025-12-30 09:45:32</Descriptions.Item>
|
||||
<Descriptions.Item label="支付时间">2025-12-30 10:00:15</Descriptions.Item>
|
||||
<Descriptions.Item label="发货时间">2025-12-30 14:20:00</Descriptions.Item>
|
||||
<Descriptions.Item label="完成时间">2026-01-01 15:30:00</Descriptions.Item>
|
||||
<Descriptions.Item label="支付方式">
|
||||
<Tag color="blue">微信支付</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="配送方式">顺丰速运</Descriptions.Item>
|
||||
<Descriptions.Item label="发票类型">电子发票</Descriptions.Item>
|
||||
<Descriptions.Item label="发票抬头">北京科技有限公司</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* 收货信息 */}
|
||||
<Card
|
||||
variant={'borderless'}
|
||||
title="收货信息"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Descriptions column={{ xs: 1, sm: 2 }} bordered>
|
||||
<Descriptions.Item label="收货人">张三</Descriptions.Item>
|
||||
<Descriptions.Item label="联系电话">138****8888</Descriptions.Item>
|
||||
<Descriptions.Item label="收货地址" span={2}>
|
||||
北京市朝阳区建国路88号SOHO现代城A座2106室
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* 商品信息 */}
|
||||
<Card variant={'borderless'} title="商品信息">
|
||||
<Table
|
||||
columns={productColumns}
|
||||
dataSource={productData}
|
||||
pagination={false}
|
||||
summary={() => (
|
||||
<Table.Summary>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0} colSpan={4}>
|
||||
<Text strong>合计</Text>
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>
|
||||
<Text strong style={{ color: '#f5222d', fontSize: 16 }}>
|
||||
¥47,896.00
|
||||
</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0} colSpan={4}>
|
||||
<Text>运费</Text>
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>
|
||||
<Text>¥0.00</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0} colSpan={4}>
|
||||
<Text>优惠</Text>
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>
|
||||
<Text style={{ color: '#52c41a' }}>-¥500.00</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0} colSpan={4}>
|
||||
<Text strong style={{ fontSize: 16 }}>实付金额</Text>
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>
|
||||
<Text strong style={{ color: '#f5222d', fontSize: 18 }}>
|
||||
¥47,396.00
|
||||
</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
</Table.Summary>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 侧边栏信息 */}
|
||||
<Col xs={24} lg={8}>
|
||||
{/* 买家信息 */}
|
||||
<Card
|
||||
variant={'borderless'}
|
||||
title="买家信息"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Flex align="center" style={{ marginBottom: 16 }}>
|
||||
<Avatar size={48} icon={<UserOutlined />} />
|
||||
<div style={{ marginLeft: 12 }}>
|
||||
<Text strong>张三</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
会员等级: VIP金卡
|
||||
</Text>
|
||||
</div>
|
||||
</Flex>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
<Descriptions column={1} size="small">
|
||||
<Descriptions.Item label="用户ID">U202512300001</Descriptions.Item>
|
||||
<Descriptions.Item label="手机号">138****8888</Descriptions.Item>
|
||||
<Descriptions.Item label="邮箱">zhangsan@example.com</Descriptions.Item>
|
||||
<Descriptions.Item label="历史订单">156 笔</Descriptions.Item>
|
||||
<Descriptions.Item label="累计消费">¥358,960</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* 物流信息 */}
|
||||
<Card variant={'borderless'} title="物流追踪">
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
物流公司: 顺丰速运
|
||||
</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
快递单号: SF1234567890
|
||||
</Text>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
<Timeline
|
||||
items={logisticsData.map((item) => ({
|
||||
color: item.status === '已签收' ? 'green' : 'blue',
|
||||
children: (
|
||||
<div>
|
||||
<Text strong>{item.status}</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
{item.description}
|
||||
</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
<ClockCircleOutlined style={{ marginRight: 4 }} />
|
||||
{item.time}
|
||||
</Text>
|
||||
</div>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 备注信息 */}
|
||||
<Card variant={'borderless'} title="订单备注" style={{ marginTop: 16 }}>
|
||||
<Text type="secondary">
|
||||
买家留言: 请在工作日配送,周末家里没人。如有问题请提前电话联系。
|
||||
</Text>
|
||||
<Divider />
|
||||
<Text type="secondary">
|
||||
商家备注: 已按照买家要求在工作日配送,客户体验良好。
|
||||
</Text>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -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