384 lines
19 KiB
HTML
384 lines
19 KiB
HTML
<!-- 采购管理页 -->
|
|
<style>
|
|
.ivp-page { display:flex; flex-direction:column; gap:16px; font-size:13px; color:var(--g-text); }
|
|
|
|
/* 统计卡片 */
|
|
.ivp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
|
|
.ivp-stat { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:18px 20px; display:flex; align-items:center; gap:14px; transition:var(--g-transition); }
|
|
.ivp-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
|
.ivp-stat-icon { width:40px; height:40px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
|
.ivp-stat-icon.blue { background:hsl(212,100%,95%); color:var(--primary); }
|
|
.ivp-stat-icon.orange { background:#fff7e6; color:var(--g-warning); }
|
|
.ivp-stat-icon.green { background:#f0fdf4; color:var(--g-success); }
|
|
.ivp-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:4px; }
|
|
.ivp-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
|
|
|
|
/* 工具栏 */
|
|
.ivp-toolbar { display:flex; align-items:center; gap:12px; background:#fff; border-radius:10px; padding:12px 16px; box-shadow:var(--g-shadow-sm); flex-wrap:wrap; }
|
|
.ivp-toolbar .ivp-right { margin-left:auto; display:flex; gap:8px; }
|
|
|
|
/* 表格容器 */
|
|
.ivp-table-wrap { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden; }
|
|
|
|
/* 供应商卡片网格 */
|
|
.ivp-vendor-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
|
|
.ivp-vendor-card { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:20px; transition:var(--g-transition); }
|
|
.ivp-vendor-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
|
.ivp-vendor-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
|
|
.ivp-vendor-name { font-size:15px; font-weight:600; color:var(--g-text); }
|
|
.ivp-vendor-info { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; font-size:13px; color:var(--g-text-secondary); margin-bottom:12px; }
|
|
.ivp-vendor-info span { display:flex; align-items:center; gap:6px; }
|
|
.ivp-vendor-info i { width:14px; height:14px; color:var(--g-text-muted); }
|
|
.ivp-vendor-ft { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--g-border); }
|
|
|
|
/* 星星评分 */
|
|
.ivp-stars { display:flex; gap:2px; }
|
|
.ivp-star { width:16px; height:16px; position:relative; }
|
|
.ivp-star-bg { color:#e5e7eb; }
|
|
.ivp-star-fg { color:#facc15; position:absolute; top:0; left:0; overflow:hidden; }
|
|
|
|
/* 采购明细行 */
|
|
.ivp-detail-row { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
|
|
.ivp-detail-row .g-select, .ivp-detail-row .g-input { flex:1; }
|
|
.ivp-detail-row .ivp-qty { width:90px; flex:none; }
|
|
.ivp-detail-row .ivp-price { width:100px; flex:none; }
|
|
.ivp-del-btn { width:32px; height:32px; border:none; background:none; color:var(--g-text-muted); cursor:pointer; border-radius:var(--g-radius-sm); transition:var(--g-transition); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
|
.ivp-del-btn:hover { color:var(--g-danger); background:#fef2f2; }
|
|
.ivp-add-row { display:flex; align-items:center; gap:6px; color:var(--primary); font-size:13px; cursor:pointer; padding:6px 0; border:none; background:none; transition:var(--g-transition); }
|
|
.ivp-add-row:hover { opacity:.8; }
|
|
</style>
|
|
|
|
<div class="ivp-page">
|
|
<!-- 分段切换 -->
|
|
<div class="g-seg" style="width:240px;">
|
|
<div class="g-seg-item active" onclick="switchIvpTab(this,'orders')">采购单</div>
|
|
<div class="g-seg-item" onclick="switchIvpTab(this,'vendors')">供应商</div>
|
|
</div>
|
|
|
|
<!-- ========== Tab1: 采购单 ========== -->
|
|
<div id="ivpTabOrders">
|
|
<!-- 统计卡片 -->
|
|
<div class="ivp-stats" style="margin-bottom:16px;">
|
|
<div class="ivp-stat">
|
|
<div class="ivp-stat-icon blue"><i data-lucide="wallet" style="width:20px;height:20px;"></i></div>
|
|
<div><div class="ivp-stat-label">本月采购额</div><div class="ivp-stat-value" style="color:var(--primary);">¥18,500</div></div>
|
|
</div>
|
|
<div class="ivp-stat">
|
|
<div class="ivp-stat-icon orange"><i data-lucide="clock" style="width:20px;height:20px;"></i></div>
|
|
<div><div class="ivp-stat-label">待审核</div><div class="ivp-stat-value" style="color:var(--g-warning);">3<span style="font-size:13px;font-weight:400;color:var(--g-text-muted);margin-left:4px;">单</span></div></div>
|
|
</div>
|
|
<div class="ivp-stat">
|
|
<div class="ivp-stat-icon green"><i data-lucide="truck" style="width:20px;height:20px;"></i></div>
|
|
<div><div class="ivp-stat-label">待到货</div><div class="ivp-stat-value" style="color:var(--g-success);">2<span style="font-size:13px;font-weight:400;color:var(--g-text-muted);margin-left:4px;">单</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工具栏 -->
|
|
<div class="ivp-toolbar" style="margin-bottom:16px;">
|
|
<input class="g-input" type="date" value="2026-02-01" style="width:140px;">
|
|
<span style="color:var(--g-text-muted);">至</span>
|
|
<input class="g-input" type="date" value="2026-02-12" style="width:140px;">
|
|
<select class="g-select" style="width:130px;">
|
|
<option>全部状态</option>
|
|
<option>待审核</option>
|
|
<option>已下单</option>
|
|
<option>已到货</option>
|
|
<option>已取消</option>
|
|
</select>
|
|
<div class="ivp-right">
|
|
<button class="g-btn g-btn-primary" onclick="openIvpDrawer()"><i data-lucide="plus" style="width:15px;height:15px;"></i> 新建采购单</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表格 -->
|
|
<div class="ivp-table-wrap">
|
|
<table class="g-table">
|
|
<thead>
|
|
<tr>
|
|
<th>采购单号</th>
|
|
<th>创建日期</th>
|
|
<th>供应商</th>
|
|
<th>采购项数</th>
|
|
<th>总金额</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="font-weight:500;">PO20260201001</td>
|
|
<td>2026-02-01</td>
|
|
<td>鑫源肉业</td>
|
|
<td>5</td>
|
|
<td style="font-weight:600;">¥4,200.00</td>
|
|
<td><span class="g-tag g-tag-orange">待审核</span></td>
|
|
<td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:500;">PO20260203002</td>
|
|
<td>2026-02-03</td>
|
|
<td>绿田蔬菜批发</td>
|
|
<td>8</td>
|
|
<td style="font-weight:600;">¥1,860.00</td>
|
|
<td><span class="g-tag g-tag-blue">已下单</span></td>
|
|
<td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:500;">PO20260205003</td>
|
|
<td>2026-02-05</td>
|
|
<td>味达调料商行</td>
|
|
<td>3</td>
|
|
<td style="font-weight:600;">¥920.00</td>
|
|
<td><span class="g-tag g-tag-green">已到货</span></td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:500;">PO20260206004</td>
|
|
<td>2026-02-06</td>
|
|
<td>鑫源肉业</td>
|
|
<td>4</td>
|
|
<td style="font-weight:600;">¥5,300.00</td>
|
|
<td><span class="g-tag g-tag-orange">待审核</span></td>
|
|
<td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:500;">PO20260208005</td>
|
|
<td>2026-02-08</td>
|
|
<td>优品包装</td>
|
|
<td>6</td>
|
|
<td style="font-weight:600;">¥3,480.00</td>
|
|
<td><span class="g-tag g-tag-blue">已下单</span></td>
|
|
<td><a class="g-action">查看</a><a class="g-action">确认到货</a><a class="g-action-danger">取消</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:500;">PO20260210006</td>
|
|
<td>2026-02-10</td>
|
|
<td>绿田蔬菜批发</td>
|
|
<td>2</td>
|
|
<td style="font-weight:600;">¥640.00</td>
|
|
<td><span class="g-tag g-tag-gray">已取消</span></td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Tab2: 供应商 ========== -->
|
|
<div id="ivpTabVendors" style="display:none;">
|
|
<!-- 工具栏 -->
|
|
<div class="ivp-toolbar" style="margin-bottom:16px;">
|
|
<div style="position:relative;">
|
|
<i data-lucide="search" style="width:15px;height:15px;position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--g-text-muted);"></i>
|
|
<input class="g-input" placeholder="搜索供应商名称" style="width:200px;padding-left:32px;">
|
|
</div>
|
|
<select class="g-select" style="width:130px;">
|
|
<option>全部分类</option>
|
|
<option>肉类</option>
|
|
<option>蔬菜</option>
|
|
<option>调料</option>
|
|
<option>饮品</option>
|
|
<option>包装</option>
|
|
</select>
|
|
<div class="ivp-right">
|
|
<button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:15px;height:15px;"></i> 新增供应商</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 供应商卡片 -->
|
|
<div class="ivp-vendor-grid">
|
|
<!-- 鑫源肉业 -->
|
|
<div class="ivp-vendor-card">
|
|
<div class="ivp-vendor-hd">
|
|
<div class="ivp-vendor-name">鑫源肉业</div>
|
|
<span class="g-tag g-tag-red">肉类</span>
|
|
</div>
|
|
<div class="ivp-vendor-info">
|
|
<span><i data-lucide="user"></i> 张经理</span>
|
|
<span><i data-lucide="phone"></i> 138-0001-2345</span>
|
|
<span><i data-lucide="calendar"></i> 合作 2 年</span>
|
|
<span><i data-lucide="wallet"></i> 累计 ¥86,000</span>
|
|
</div>
|
|
<div class="ivp-vendor-ft">
|
|
<div class="ivp-stars" data-score="4.5"></div>
|
|
<div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
|
|
</div>
|
|
</div>
|
|
<!-- 绿田蔬菜批发 -->
|
|
<div class="ivp-vendor-card">
|
|
<div class="ivp-vendor-hd">
|
|
<div class="ivp-vendor-name">绿田蔬菜批发</div>
|
|
<span class="g-tag g-tag-green">蔬菜</span>
|
|
</div>
|
|
<div class="ivp-vendor-info">
|
|
<span><i data-lucide="user"></i> 李老板</span>
|
|
<span><i data-lucide="phone"></i> 139-8877-6543</span>
|
|
<span><i data-lucide="calendar"></i> 合作 3 年</span>
|
|
<span><i data-lucide="wallet"></i> 累计 ¥124,500</span>
|
|
</div>
|
|
<div class="ivp-vendor-ft">
|
|
<div class="ivp-stars" data-score="4.8"></div>
|
|
<div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
|
|
</div>
|
|
</div>
|
|
<!-- 味达调料商行 -->
|
|
<div class="ivp-vendor-card">
|
|
<div class="ivp-vendor-hd">
|
|
<div class="ivp-vendor-name">味达调料商行</div>
|
|
<span class="g-tag g-tag-orange">调料</span>
|
|
</div>
|
|
<div class="ivp-vendor-info">
|
|
<span><i data-lucide="user"></i> 王师傅</span>
|
|
<span><i data-lucide="phone"></i> 136-5544-3210</span>
|
|
<span><i data-lucide="calendar"></i> 合作 1 年</span>
|
|
<span><i data-lucide="wallet"></i> 累计 ¥32,800</span>
|
|
</div>
|
|
<div class="ivp-vendor-ft">
|
|
<div class="ivp-stars" data-score="4.2"></div>
|
|
<div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
|
|
</div>
|
|
</div>
|
|
<!-- 优品包装 -->
|
|
<div class="ivp-vendor-card">
|
|
<div class="ivp-vendor-hd">
|
|
<div class="ivp-vendor-name">优品包装</div>
|
|
<span class="g-tag g-tag-gray">包装耗材</span>
|
|
</div>
|
|
<div class="ivp-vendor-info">
|
|
<span><i data-lucide="user"></i> 陈总</span>
|
|
<span><i data-lucide="phone"></i> 137-2233-4455</span>
|
|
<span><i data-lucide="calendar"></i> 合作 1.5 年</span>
|
|
<span><i data-lucide="wallet"></i> 累计 ¥18,200</span>
|
|
</div>
|
|
<div class="ivp-vendor-ft">
|
|
<div class="ivp-stars" data-score="4.0"></div>
|
|
<div><a class="g-action">编辑</a><a class="g-action">查看采购记录</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== 新建采购单抽屉 ========== -->
|
|
<div class="g-drawer-mask" id="ivpDrawerMask" onclick="closeIvpDrawer()"></div>
|
|
<div class="g-drawer" id="ivpDrawer" style="width:520px;">
|
|
<div class="g-drawer-hd">
|
|
<div class="g-drawer-title">新建采购单</div>
|
|
<button class="g-drawer-close" onclick="closeIvpDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
|
</div>
|
|
<div class="g-drawer-bd">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">供应商</label>
|
|
<select class="g-select">
|
|
<option value="">请选择供应商</option>
|
|
<option>鑫源肉业</option>
|
|
<option>绿田蔬菜批发</option>
|
|
<option>味达调料商行</option>
|
|
<option>优品包装</option>
|
|
</select>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">预计到货日期</label>
|
|
<input class="g-input" type="date" value="2026-02-15">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">采购明细</label>
|
|
<div id="ivpDetailList">
|
|
<div class="ivp-detail-row">
|
|
<select class="g-select"><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>牛奶</option><option>咖啡豆</option><option>生菜</option><option>番茄</option></select>
|
|
<input class="g-input ivp-qty" type="number" value="20" placeholder="数量">
|
|
<span style="color:var(--g-text-muted);flex-shrink:0;">kg</span>
|
|
<input class="g-input ivp-price" type="number" value="35.00" placeholder="单价">
|
|
<button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
|
|
</div>
|
|
<div class="ivp-detail-row">
|
|
<select class="g-select"><option>牛奶</option><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>咖啡豆</option><option>生菜</option><option>番茄</option></select>
|
|
<input class="g-input ivp-qty" type="number" value="30" placeholder="数量">
|
|
<span style="color:var(--g-text-muted);flex-shrink:0;">L</span>
|
|
<input class="g-input ivp-price" type="number" value="8.50" placeholder="单价">
|
|
<button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
|
|
</div>
|
|
<div class="ivp-detail-row">
|
|
<select class="g-select"><option>咖啡豆</option><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>牛奶</option><option>生菜</option><option>番茄</option></select>
|
|
<input class="g-input ivp-qty" type="number" value="5" placeholder="数量">
|
|
<span style="color:var(--g-text-muted);flex-shrink:0;">kg</span>
|
|
<input class="g-input ivp-price" type="number" value="120.00" placeholder="单价">
|
|
<button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>
|
|
</div>
|
|
</div>
|
|
<button class="ivp-add-row" onclick="addIvpRow()"><i data-lucide="plus-circle" style="width:15px;height:15px;"></i> 添加原料</button>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">备注</label>
|
|
<textarea class="g-textarea" rows="3" placeholder="请输入备注信息，如特殊包装要求、配送时间等"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="g-drawer-ft">
|
|
<button class="g-btn" onclick="closeIvpDrawer()">取消</button>
|
|
<button class="g-btn g-btn-primary" onclick="closeIvpDrawer()">提交采购单</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/* Tab 切换 */
|
|
function switchIvpTab(el, tab) {
|
|
el.parentElement.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
document.getElementById('ivpTabOrders').style.display = tab === 'orders' ? '' : 'none';
|
|
document.getElementById('ivpTabVendors').style.display = tab === 'vendors' ? '' : 'none';
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
|
|
/* 抽屉 */
|
|
function openIvpDrawer() {
|
|
document.getElementById('ivpDrawerMask').classList.add('open');
|
|
document.getElementById('ivpDrawer').classList.add('open');
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
function closeIvpDrawer() {
|
|
document.getElementById('ivpDrawerMask').classList.remove('open');
|
|
document.getElementById('ivpDrawer').classList.remove('open');
|
|
}
|
|
|
|
/* 采购明细行 */
|
|
function addIvpRow() {
|
|
var list = document.getElementById('ivpDetailList');
|
|
var row = document.createElement('div');
|
|
row.className = 'ivp-detail-row';
|
|
row.innerHTML = '<select class="g-select"><option value="">请选择原料</option><option>鸡胸肉</option><option>牛腩</option><option>五花肉</option><option>牛奶</option><option>咖啡豆</option><option>生菜</option><option>番茄</option></select>'
|
|
+ '<input class="g-input ivp-qty" type="number" placeholder="数量">'
|
|
+ '<span style="color:var(--g-text-muted);flex-shrink:0;">kg</span>'
|
|
+ '<input class="g-input ivp-price" type="number" placeholder="单价">'
|
|
+ '<button class="ivp-del-btn" onclick="removeIvpRow(this)"><i data-lucide="trash-2" style="width:15px;height:15px;"></i></button>';
|
|
list.appendChild(row);
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
function removeIvpRow(btn) {
|
|
var row = btn.closest('.ivp-detail-row');
|
|
if (document.querySelectorAll('.ivp-detail-row').length > 1) {
|
|
row.remove();
|
|
}
|
|
}
|
|
|
|
/* 星星评分渲染 */
|
|
function renderIvpStars() {
|
|
document.querySelectorAll('.ivp-stars[data-score]').forEach(function(wrap) {
|
|
var score = parseFloat(wrap.getAttribute('data-score'));
|
|
var html = '';
|
|
for (var i = 1; i <= 5; i++) {
|
|
var pct = Math.min(100, Math.max(0, (score - i + 1) * 100));
|
|
html += '<div class="ivp-star">'
|
|
+ '<i data-lucide="star" class="ivp-star-bg" style="width:16px;height:16px;fill:#e5e7eb;stroke:none;"></i>'
|
|
+ '<div class="ivp-star-fg" style="width:' + pct + '%;">'
|
|
+ '<i data-lucide="star" style="width:16px;height:16px;fill:#facc15;stroke:none;"></i>'
|
|
+ '</div></div>';
|
|
}
|
|
html += '<span style="font-size:12px;color:var(--g-text-secondary);margin-left:6px;">' + score.toFixed(1) + '</span>';
|
|
wrap.innerHTML = html;
|
|
});
|
|
}
|
|
|
|
renderIvpStars();
|
|
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
|
</script>
|