赵忠林
f9e1286ab1
- 删除应用配置页面及相关组件，重构路由为 /developer/config/[id].vue - 移除开发者文档页面及其导航与样式实现 - 清理开发者侧功能完善工作日志文件 - 删除全局.gitignore配置文件，清理无用忽略规则 - 优化应用配置页面的参数读取和路由结构，解决刷新404问题 - 解决数据库配置唯一键冲突，调整保存逻辑避免重复插入 - 移除对后端配置加密字段的 secret 标记，修正加密异常问题
749 lines
44 KiB
HTML
749 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>采购管理 - 天天系统</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
* {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
}
|
|
|
|
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
|
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
|
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
|
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
|
|
|
.sidebar {
|
|
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.sidebar-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.sidebar-item:hover, .sidebar-item.active {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.notification-badge {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tab-btn {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.tab-btn:hover:not(.active) {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 10px;
|
|
border-radius: 9999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-pending { background: #fef3c7; color: #92400e; }
|
|
.status-approved { background: #d1fae5; color: #065f46; }
|
|
.status-rejected { background: #fee2e2; color: #991b1b; }
|
|
.status-processing { background: #dbeafe; color: #1e40af; }
|
|
.status-completed { background: #e0e7ff; color: #3730a3; }
|
|
|
|
.table-row {
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.table-row:hover {
|
|
background: rgba(102, 126, 234, 0.05);
|
|
}
|
|
|
|
.action-btn {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: #e5e7eb;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.supplier-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.supplier-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="scrollbar-hide">
|
|
<div class="flex min-h-screen">
|
|
<!-- 左侧导航 -->
|
|
<aside class="sidebar w-64 fixed h-full text-white flex flex-col">
|
|
<!-- Logo -->
|
|
<div class="p-6 border-b border-white/10">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-cube text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-bold text-lg">天天系统</h1>
|
|
<p class="text-xs text-white/70">ERP 管理平台</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<nav class="flex-1 py-6 px-3">
|
|
<div class="space-y-1">
|
|
<a href="应用主页工作台.html" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-home w-5"></i>
|
|
<span>工作台</span>
|
|
</a>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-cogs w-5"></i>
|
|
<span>设备管理</span>
|
|
</a>
|
|
<a href="采购管理.html" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-shopping-cart w-5"></i>
|
|
<span>采购管理</span>
|
|
</a>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-warehouse w-5"></i>
|
|
<span>仓储物流</span>
|
|
</a>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-wallet w-5"></i>
|
|
<span>财务管理</span>
|
|
</a>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-users w-5"></i>
|
|
<span>人力资源</span>
|
|
</a>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-tasks w-5"></i>
|
|
<span>协同办公</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-8 pt-6 border-t border-white/10">
|
|
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-user w-5"></i>
|
|
<span>个人信息</span>
|
|
</a>
|
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
|
<i class="fas fa-cog w-5"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 用户信息 -->
|
|
<div class="p-4 border-t border-white/10">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-medium">管理员</p>
|
|
<p class="text-xs text-white/70">超级管理员</p>
|
|
</div>
|
|
<button class="text-white/70 hover:text-white">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="flex-1 ml-64">
|
|
<!-- 顶部栏 -->
|
|
<header class="glass sticky top-0 z-50 px-8 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<!-- 搜索 -->
|
|
<div class="relative w-96">
|
|
<input type="text" placeholder="🔍 搜索采购单、供应商、物料..."
|
|
class="w-full px-5 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 focus:bg-white transition-all">
|
|
</div>
|
|
|
|
<!-- 右侧 -->
|
|
<div class="flex items-center gap-6">
|
|
<!-- 全屏 -->
|
|
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
|
<i class="fas fa-expand text-lg"></i>
|
|
</button>
|
|
|
|
<!-- 消息 -->
|
|
<button class="relative text-gray-500 hover:text-purple-600 transition-colors">
|
|
<i class="fas fa-bell text-lg"></i>
|
|
<span class="notification-badge absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
|
|
</button>
|
|
|
|
<!-- 语言 -->
|
|
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
|
<i class="fas fa-globe text-lg"></i>
|
|
</button>
|
|
|
|
<!-- 用户 -->
|
|
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold">
|
|
A
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-800">Admin</p>
|
|
<p class="text-xs text-gray-500">超级管理员</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 内容区域 -->
|
|
<div class="p-8">
|
|
<!-- 页面标题 -->
|
|
<div class="mb-8">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<a href="应用主页工作台.html" class="text-gray-500 hover:text-purple-600 transition-colors">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h2 class="text-3xl font-bold text-gray-800">采购管理</h2>
|
|
</div>
|
|
<p class="text-gray-500">管理采购申请、订单跟踪、供应商信息及采购统计</p>
|
|
</div>
|
|
|
|
<!-- 数据概览 -->
|
|
<div class="grid grid-cols-4 gap-6 mb-8">
|
|
<div class="stat-card blue glass rounded-2xl p-6 card-hover">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-file-alt text-blue-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8%</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">23</h3>
|
|
<p class="text-gray-500 text-sm">本月采购单</p>
|
|
</div>
|
|
|
|
<div class="stat-card green glass rounded-2xl p-6 card-hover">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12%</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">18</h3>
|
|
<p class="text-gray-500 text-sm">已完成</p>
|
|
</div>
|
|
|
|
<div class="stat-card orange glass rounded-2xl p-6 card-hover">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-clock text-orange-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 3</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">5</h3>
|
|
<p class="text-gray-500 text-sm">待审批</p>
|
|
</div>
|
|
|
|
<div class="stat-card purple glass rounded-2xl p-6 card-hover">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-yen-sign text-purple-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 15%</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥45.8<span class="text-lg">万</span></h3>
|
|
<p class="text-gray-500 text-sm">本月采购额</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快捷操作栏 -->
|
|
<div class="glass rounded-2xl p-4 mb-8">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-3">
|
|
<button class="px-5 py-2.5 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all flex items-center gap-2">
|
|
<i class="fas fa-plus"></i>
|
|
新建采购单
|
|
</button>
|
|
<button class="px-5 py-2.5 bg-white border border-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-all flex items-center gap-2">
|
|
<i class="fas fa-file-import text-blue-500"></i>
|
|
批量导入
|
|
</button>
|
|
<button class="px-5 py-2.5 bg-white border border-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-all flex items-center gap-2">
|
|
<i class="fas fa-file-export text-green-500"></i>
|
|
导出报表
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-4 py-2.5 bg-white border border-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-all flex items-center gap-2">
|
|
<i class="fas fa-filter text-gray-500"></i>
|
|
筛选
|
|
</button>
|
|
<button class="px-4 py-2.5 bg-white border border-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-all flex items-center gap-2">
|
|
<i class="fas fa-calendar text-gray-500"></i>
|
|
2026年4月
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 标签页 -->
|
|
<div class="glass rounded-2xl p-2 mb-8 inline-flex">
|
|
<button class="tab-btn active px-6 py-2.5 rounded-xl font-medium text-sm">采购申请</button>
|
|
<button class="tab-btn px-6 py-2.5 rounded-xl font-medium text-sm text-gray-600">采购订单</button>
|
|
<button class="tab-btn px-6 py-2.5 rounded-xl font-medium text-sm text-gray-600">供应商管理</button>
|
|
<button class="tab-btn px-6 py-2.5 rounded-xl font-medium text-sm text-gray-600">采购统计</button>
|
|
</div>
|
|
|
|
<!-- 采购申请列表 -->
|
|
<div class="glass rounded-2xl overflow-hidden mb-8">
|
|
<div class="p-6 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
|
<i class="fas fa-list text-purple-500"></i>
|
|
采购申请列表
|
|
<span class="bg-purple-100 text-purple-600 px-2 py-0.5 rounded-full text-xs font-medium">23</span>
|
|
</h3>
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索采购单号、申请人..."
|
|
class="w-64 px-4 py-2 bg-gray-50 rounded-lg border-0 focus:ring-2 focus:ring-purple-500 text-sm">
|
|
<i class="fas fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50/50">
|
|
<tr>
|
|
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">采购单号</th>
|
|
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">申请信息</th>
|
|
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">采购物品</th>
|
|
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">金额</th>
|
|
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">状态</th>
|
|
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">申请时间</th>
|
|
<th class="px-6 py-4 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4">
|
|
<span class="font-medium text-gray-800">CG-2026-0409-001</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">
|
|
张
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-800">张三</p>
|
|
<p class="text-xs text-gray-500">技术部</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-medium text-gray-800">办公电脑 x5</p>
|
|
<p class="text-xs text-gray-500">联想 ThinkPad T14</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-semibold text-gray-800">¥45,000</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-badge status-pending">
|
|
<i class="fas fa-clock"></i> 待审批
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-04-09 09:30</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
|
<i class="fas fa-eye text-xs"></i>
|
|
</button>
|
|
<button class="action-btn w-8 h-8 bg-green-50 text-green-600 rounded-lg flex items-center justify-center hover:bg-green-100">
|
|
<i class="fas fa-check text-xs"></i>
|
|
</button>
|
|
<button class="action-btn w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4">
|
|
<span class="font-medium text-gray-800">CG-2026-0408-003</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">
|
|
李
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-800">李四</p>
|
|
<p class="text-xs text-gray-500">生产部</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-medium text-gray-800">原材料-钢材 x2000kg</p>
|
|
<p class="text-xs text-gray-500">304不锈钢板</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-semibold text-gray-800">¥128,000</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-badge status-approved">
|
|
<i class="fas fa-check-circle"></i> 已批准
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-04-08 14:20</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
|
<i class="fas fa-eye text-xs"></i>
|
|
</button>
|
|
<button class="action-btn w-8 h-8 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-100">
|
|
<i class="fas fa-file-invoice text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4">
|
|
<span class="font-medium text-gray-800">CG-2026-0408-002</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">
|
|
王
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-800">王五</p>
|
|
<p class="text-xs text-gray-500">行政部</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-medium text-gray-800">办公用品一批</p>
|
|
<p class="text-xs text-gray-500">打印纸、墨盒、文具</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-semibold text-gray-800">¥3,580</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-badge status-processing">
|
|
<i class="fas fa-spinner fa-spin"></i> 采购中
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-04-08 10:15</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
|
<i class="fas fa-eye text-xs"></i>
|
|
</button>
|
|
<button class="action-btn w-8 h-8 bg-orange-50 text-orange-600 rounded-lg flex items-center justify-center hover:bg-orange-100">
|
|
<i class="fas fa-truck text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4">
|
|
<span class="font-medium text-gray-800">CG-2026-0407-005</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-pink-500 to-rose-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">
|
|
赵
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-800">赵六</p>
|
|
<p class="text-xs text-gray-500">研发部</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-medium text-gray-800">实验设备 x2</p>
|
|
<p class="text-xs text-gray-500">示波器、万用表</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-semibold text-gray-800">¥25,600</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-badge status-completed">
|
|
<i class="fas fa-check-double"></i> 已完成
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-04-07 16:45</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
|
<i class="fas fa-eye text-xs"></i>
|
|
</button>
|
|
<button class="action-btn w-8 h-8 bg-gray-50 text-gray-600 rounded-lg flex items-center justify-center hover:bg-gray-100">
|
|
<i class="fas fa-print text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4">
|
|
<span class="font-medium text-gray-800">CG-2026-0407-004</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">
|
|
孙
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-800">孙七</p>
|
|
<p class="text-xs text-gray-500">质量部</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="font-medium text-gray-800">检测设备校准服务</p>
|
|
<p class="text-xs text-gray-500">年度校准合同</p>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-semibold text-gray-800">¥18,000</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-badge status-rejected">
|
|
<i class="fas fa-times-circle"></i> 已驳回
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-04-07 09:00</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
|
<i class="fas fa-eye text-xs"></i>
|
|
</button>
|
|
<button class="action-btn w-8 h-8 bg-yellow-50 text-yellow-600 rounded-lg flex items-center justify-center hover:bg-yellow-100">
|
|
<i class="fas fa-redo text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="p-6 border-t border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm text-gray-500">显示 1-5 条，共 23 条</p>
|
|
<div class="flex items-center gap-2">
|
|
<button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 transition-colors">
|
|
<i class="fas fa-chevron-left text-xs"></i>
|
|
</button>
|
|
<button class="w-9 h-9 flex items-center justify-center rounded-lg bg-purple-600 text-white font-medium">1</button>
|
|
<button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">2</button>
|
|
<button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">3</button>
|
|
<span class="text-gray-400">...</span>
|
|
<button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">5</button>
|
|
<button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 transition-colors">
|
|
<i class="fas fa-chevron-right text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部区域 -->
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<!-- 供应商概览 -->
|
|
<div class="glass rounded-2xl p-6 card-hover">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
|
<i class="fas fa-building text-blue-500"></i>
|
|
主要供应商
|
|
</h3>
|
|
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="supplier-card flex items-center gap-4 p-4 bg-gray-50 rounded-xl cursor-pointer">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-industry text-blue-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-medium text-gray-800">深圳市华强电子有限公司</h4>
|
|
<p class="text-xs text-gray-500">电子元器件 | 合作 3 年</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-semibold text-gray-800">¥156万</p>
|
|
<p class="text-xs text-green-500">本年采购额</p>
|
|
</div>
|
|
</div>
|
|
<div class="supplier-card flex items-center gap-4 p-4 bg-gray-50 rounded-xl cursor-pointer">
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-boxes text-green-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-medium text-gray-800">上海宝钢贸易有限公司</h4>
|
|
<p class="text-xs text-gray-500">钢材原料 | 合作 5 年</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-semibold text-gray-800">¥328万</p>
|
|
<p class="text-xs text-green-500">本年采购额</p>
|
|
</div>
|
|
</div>
|
|
<div class="supplier-card flex items-center gap-4 p-4 bg-gray-50 rounded-xl cursor-pointer">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-laptop text-orange-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-medium text-gray-800">联想集团（深圳）有限公司</h4>
|
|
<p class="text-xs text-gray-500">办公设备 | 合作 2 年</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-semibold text-gray-800">¥89万</p>
|
|
<p class="text-xs text-green-500">本年采购额</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 采购趋势 -->
|
|
<div class="glass rounded-2xl p-6 card-hover">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
|
<i class="fas fa-chart-line text-purple-500"></i>
|
|
采购趋势
|
|
</h3>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-lg font-medium">本月</button>
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg font-medium">本季</button>
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg font-medium">本年</button>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm text-gray-600">原材料采购</span>
|
|
<span class="text-sm font-medium text-gray-800">¥328万 (65%)</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-gradient-to-r from-blue-500 to-blue-400" style="width: 65%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm text-gray-600">设备采购</span>
|
|
<span class="text-sm font-medium text-gray-800">¥89万 (18%)</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-gradient-to-r from-green-500 to-green-400" style="width: 18%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm text-gray-600">办公用品</span>
|
|
<span class="text-sm font-medium text-gray-800">¥45万 (9%)</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-gradient-to-r from-orange-500 to-orange-400" style="width: 9%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm text-gray-600">服务采购</span>
|
|
<span class="text-sm font-medium text-gray-800">¥40万 (8%)</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-gradient-to-r from-purple-500 to-purple-400" style="width: 8%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 pt-4 border-t border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-500">本月采购总额</span>
|
|
<span class="text-xl font-bold gradient-text">¥502万</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|