250 lines
10 KiB
HTML
250 lines
10 KiB
HTML
<!-- 效期管理页 -->
|
|
<style>
|
|
.ive-fifo{display:flex;align-items:center;gap:10px;padding:12px 18px;background:color-mix(in srgb, var(--primary) 8%, #fff);border:1px solid color-mix(in srgb, var(--primary) 20%, #fff);border-radius:var(--g-radius);margin-bottom:16px;font-size:13px;color:var(--primary);font-weight:500;}
|
|
.ive-fifo svg{width:18px;height:18px;flex-shrink:0;}
|
|
|
|
.ive-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
|
|
.ive-stat{display:flex;align-items:center;gap:14px;padding:16px 20px;background:#fff;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);transition:var(--g-transition);border-left:3px solid transparent;}
|
|
.ive-stat:hover{box-shadow:var(--g-shadow-md);}
|
|
.ive-stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
|
.ive-stat-icon svg{width:20px;height:20px;}
|
|
.ive-stat-num{font-size:22px;font-weight:700;line-height:1.2;}
|
|
.ive-stat-label{font-size:12px;color:var(--g-text-muted);margin-top:2px;}
|
|
.ive-stat-red{border-left-color:var(--g-danger);}
|
|
.ive-stat-red .ive-stat-icon{background:#fff1f0;color:var(--g-danger);}
|
|
.ive-stat-red .ive-stat-num{color:var(--g-danger);}
|
|
.ive-stat-orange{border-left-color:#fa8c16;}
|
|
.ive-stat-orange .ive-stat-icon{background:#fff7e6;color:#fa8c16;}
|
|
.ive-stat-orange .ive-stat-num{color:#fa8c16;}
|
|
.ive-stat-yellow{border-left-color:#faad14;}
|
|
.ive-stat-yellow .ive-stat-icon{background:#fffbe6;color:#faad14;}
|
|
.ive-stat-yellow .ive-stat-num{color:#faad14;}
|
|
.ive-stat-green{border-left-color:var(--g-success);}
|
|
.ive-stat-green .ive-stat-icon{background:#f6ffed;color:var(--g-success);}
|
|
.ive-stat-green .ive-stat-num{color:var(--g-success);}
|
|
|
|
.ive-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;padding:12px 16px;background:#fff;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);}
|
|
.ive-toolbar select{height:34px;padding:0 10px;border:1px solid var(--g-border);border-radius:var(--g-radius-sm);font-size:13px;outline:none;background:#fff;min-width:140px;cursor:pointer;transition:var(--g-transition);}
|
|
.ive-toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
|
|
.ive-toolbar .ive-search{height:34px;padding:0 12px;border:1px solid var(--g-border);border-radius:var(--g-radius-sm);font-size:13px;outline:none;width:200px;transition:var(--g-transition);}
|
|
.ive-toolbar .ive-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
|
|
.ive-toolbar .ive-spacer{flex:1;}
|
|
|
|
.ive-row-expired{background:#fff1f0 !important;}
|
|
.ive-row-3day{background:#fff7e6 !important;}
|
|
.ive-row-7day{background:#fffbe6 !important;}
|
|
.ive-days-expired{color:var(--g-danger);font-weight:600;font-size:12px;}
|
|
.ive-days-urgent{color:#fa8c16;font-weight:600;}
|
|
|
|
@media(max-width:800px){.ive-stats{grid-template-columns:repeat(2,1fr);}}
|
|
@media(max-width:500px){.ive-stats{grid-template-columns:1fr;}}
|
|
</style>
|
|
|
|
<!-- FIFO 提醒条 -->
|
|
<div class="ive-fifo">
|
|
<i data-lucide="info"></i>
|
|
<span>遵循先进先出原则，请优先使用临期批次的原料</span>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="ive-stats">
|
|
<div class="ive-stat ive-stat-red">
|
|
<div class="ive-stat-icon"><i data-lucide="alert-circle"></i></div>
|
|
<div>
|
|
<div class="ive-stat-num">1 <span style="font-size:13px;font-weight:500;">批</span></div>
|
|
<div class="ive-stat-label">已过期</div>
|
|
</div>
|
|
</div>
|
|
<div class="ive-stat ive-stat-orange">
|
|
<div class="ive-stat-icon"><i data-lucide="clock"></i></div>
|
|
<div>
|
|
<div class="ive-stat-num">3 <span style="font-size:13px;font-weight:500;">批</span></div>
|
|
<div class="ive-stat-label">3天内到期</div>
|
|
</div>
|
|
</div>
|
|
<div class="ive-stat ive-stat-yellow">
|
|
<div class="ive-stat-icon"><i data-lucide="timer"></i></div>
|
|
<div>
|
|
<div class="ive-stat-num">5 <span style="font-size:13px;font-weight:500;">批</span></div>
|
|
<div class="ive-stat-label">7天内到期</div>
|
|
</div>
|
|
</div>
|
|
<div class="ive-stat ive-stat-green">
|
|
<div class="ive-stat-icon"><i data-lucide="check-circle"></i></div>
|
|
<div>
|
|
<div class="ive-stat-num">38 <span style="font-size:13px;font-weight:500;">批</span></div>
|
|
<div class="ive-stat-label">正常</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选工具栏 -->
|
|
<div class="ive-toolbar">
|
|
<select>
|
|
<option>全部分类</option>
|
|
<option>肉类</option>
|
|
<option>蔬菜</option>
|
|
<option>调料</option>
|
|
<option>饮品原料</option>
|
|
<option>包装</option>
|
|
</select>
|
|
<select>
|
|
<option>全部状态</option>
|
|
<option>已过期</option>
|
|
<option>3天内到期</option>
|
|
<option>7天内到期</option>
|
|
<option>正常</option>
|
|
</select>
|
|
<div class="ive-spacer"></div>
|
|
<input class="ive-search" type="text" placeholder="搜索原料名称">
|
|
</div>
|
|
|
|
<!-- 批次列表 -->
|
|
<div class="g-card" style="padding:0;overflow:hidden;">
|
|
<table class="g-table" style="margin:0;">
|
|
<thead>
|
|
<tr>
|
|
<th>原料名称</th>
|
|
<th>批次号</th>
|
|
<th>分类</th>
|
|
<th>入库日期</th>
|
|
<th>保质期至</th>
|
|
<th>剩余天数</th>
|
|
<th>库存数量</th>
|
|
<th>状态</th>
|
|
<th style="width:130px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="ive-row-expired">
|
|
<td style="font-weight:600;">鲜牛奶</td>
|
|
<td>B20260210</td>
|
|
<td>饮品原料</td>
|
|
<td>2026-02-10</td>
|
|
<td>2026-02-13</td>
|
|
<td><span class="ive-days-expired">已过期1天</span></td>
|
|
<td>12 瓶</td>
|
|
<td><span class="g-tag g-tag-red">已过期</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr class="ive-row-3day">
|
|
<td style="font-weight:600;">生菜</td>
|
|
<td>B20260211</td>
|
|
<td>蔬菜</td>
|
|
<td>2026-02-11</td>
|
|
<td>2026-02-14</td>
|
|
<td><span class="ive-days-urgent">2 天</span></td>
|
|
<td>8 kg</td>
|
|
<td><span class="g-tag g-tag-orange">3天内</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr class="ive-row-3day">
|
|
<td style="font-weight:600;">鸡胸肉</td>
|
|
<td>B20260209</td>
|
|
<td>肉类</td>
|
|
<td>2026-02-09</td>
|
|
<td>2026-02-15</td>
|
|
<td><span class="ive-days-urgent">3 天</span></td>
|
|
<td>15 kg</td>
|
|
<td><span class="g-tag g-tag-orange">3天内</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr class="ive-row-7day">
|
|
<td style="font-weight:600;">西红柿</td>
|
|
<td>B20260210</td>
|
|
<td>蔬菜</td>
|
|
<td>2026-02-10</td>
|
|
<td>2026-02-16</td>
|
|
<td><span class="ive-days-urgent">4 天</span></td>
|
|
<td>10 kg</td>
|
|
<td><span class="g-tag g-tag-orange">7天内</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr class="ive-row-7day">
|
|
<td style="font-weight:600;">豆腐</td>
|
|
<td>B20260211</td>
|
|
<td>蔬菜</td>
|
|
<td>2026-02-11</td>
|
|
<td>2026-02-17</td>
|
|
<td><span class="ive-days-urgent">5 天</span></td>
|
|
<td>20 盒</td>
|
|
<td><span class="g-tag g-tag-orange">7天内</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr class="ive-row-7day">
|
|
<td style="font-weight:600;">猪肉</td>
|
|
<td>B20260208</td>
|
|
<td>肉类</td>
|
|
<td>2026-02-08</td>
|
|
<td>2026-02-18</td>
|
|
<td><span class="ive-days-urgent">6 天</span></td>
|
|
<td>25 kg</td>
|
|
<td><span class="g-tag g-tag-orange">7天内</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:600;">酱油</td>
|
|
<td>B20260101</td>
|
|
<td>调料</td>
|
|
<td>2026-01-01</td>
|
|
<td>2026-06-30</td>
|
|
<td>138 天</td>
|
|
<td>6 瓶</td>
|
|
<td><span class="g-tag g-tag-green">正常</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:600;">食用油</td>
|
|
<td>B20260115</td>
|
|
<td>调料</td>
|
|
<td>2026-01-15</td>
|
|
<td>2026-07-15</td>
|
|
<td>153 天</td>
|
|
<td>4 桶</td>
|
|
<td><span class="g-tag g-tag-green">正常</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:600;">咖啡豆</td>
|
|
<td>B20260201</td>
|
|
<td>饮品原料</td>
|
|
<td>2026-02-01</td>
|
|
<td>2026-08-01</td>
|
|
<td>170 天</td>
|
|
<td>10 kg</td>
|
|
<td><span class="g-tag g-tag-green">正常</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight:600;">外卖盒</td>
|
|
<td>B20260201</td>
|
|
<td>包装</td>
|
|
<td>2026-02-01</td>
|
|
<td>—</td>
|
|
<td>—</td>
|
|
<td>500 个</td>
|
|
<td><span class="g-tag g-tag-gray">无期限</span></td>
|
|
<td><a class="g-action g-action-danger" href="javascript:;">报损</a> <a class="g-action" href="javascript:;">优先使用</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="g-pagination" style="margin-top:16px;">
|
|
<span style="font-size:13px;color:var(--g-text-muted);">共 47 条</span>
|
|
<div style="display:flex;gap:6px;margin-left:auto;">
|
|
<button class="g-page-btn" disabled><</button>
|
|
<button class="g-page-btn active">1</button>
|
|
<button class="g-page-btn">2</button>
|
|
<button class="g-page-btn">3</button>
|
|
<button class="g-page-btn">4</button>
|
|
<button class="g-page-btn">5</button>
|
|
<button class="g-page-btn">></button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
|
</script>
|