277 lines
15 KiB
HTML
277 lines
15 KiB
HTML
<!-- 库存总览 -->
|
||
<style>
|
||
.ivo-page { display:flex; flex-direction:column; gap:16px; }
|
||
|
||
/* 工具栏 */
|
||
.ivo-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
|
||
.ivo-toolbar-right { margin-left:auto; display:flex; gap:8px; }
|
||
.ivo-search { width:220px; }
|
||
|
||
/* 统计卡片 */
|
||
.ivo-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
|
||
.ivo-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); cursor:default; }
|
||
.ivo-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.ivo-stat-icon { width:42px; height:42px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
||
.ivo-stat-icon.blue { background:hsl(212,100%,95%); color:hsl(212,100%,45%); }
|
||
.ivo-stat-icon.orange { background:#fff7e6; color:var(--g-warning); }
|
||
.ivo-stat-icon.red { background:#fff1f0; color:var(--g-danger); }
|
||
.ivo-stat-icon.green { background:#f0fdf4; color:var(--g-success); }
|
||
.ivo-stat-info { display:flex; flex-direction:column; gap:4px; }
|
||
.ivo-stat-label { font-size:13px; color:var(--g-text-secondary); }
|
||
.ivo-stat-value { font-size:24px; font-weight:700; color:var(--g-text); letter-spacing:-0.5px; }
|
||
.ivo-stat-value.orange { color:var(--g-warning); }
|
||
.ivo-stat-value.red { color:var(--g-danger); }
|
||
|
||
/* 表格容器 */
|
||
.ivo-table-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); overflow:hidden; }
|
||
.ivo-table-inner { overflow-x:auto; }
|
||
|
||
/* 行状态背景 */
|
||
.ivo-row-warn td { background:#fffbe6 !important; }
|
||
.ivo-row-danger td { background:#fff1f0 !important; }
|
||
|
||
/* 分页栏 */
|
||
.ivo-pager-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--g-border); font-size:13px; color:var(--g-text-secondary); }
|
||
.ivo-pager-bar .g-select { width:auto; height:28px; font-size:12px; }
|
||
</style>
|
||
|
||
<div class="ivo-page">
|
||
|
||
<!-- 工具栏 -->
|
||
<div class="ivo-toolbar">
|
||
<input class="g-input ivo-search" placeholder="搜索原料名称…" />
|
||
<select class="g-select" style="width:140px;">
|
||
<option>全部分类</option>
|
||
<option>肉类</option>
|
||
<option>蔬菜</option>
|
||
<option>调料</option>
|
||
<option>饮品原料</option>
|
||
<option>包装耗材</option>
|
||
</select>
|
||
<select class="g-select" style="width:120px;">
|
||
<option>全部状态</option>
|
||
<option>正常</option>
|
||
<option>低库存</option>
|
||
<option>缺货</option>
|
||
</select>
|
||
<div class="ivo-toolbar-right">
|
||
<button class="g-btn" id="ivoBtnPurchase" onclick="ivoGenPurchase()">
|
||
<i data-lucide="clipboard-list" style="width:14px;height:14px;"></i> 一键生成采购单
|
||
</button>
|
||
<button class="g-btn g-btn-primary" onclick="openIvoDrawer()">
|
||
<i data-lucide="plus" style="width:14px;height:14px;"></i> 新增原料
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="ivo-stats">
|
||
<div class="ivo-stat">
|
||
<div class="ivo-stat-icon blue"><i data-lucide="package" style="width:20px;height:20px;"></i></div>
|
||
<div class="ivo-stat-info">
|
||
<span class="ivo-stat-label">原料 SKU 数</span>
|
||
<span class="ivo-stat-value">42</span>
|
||
</div>
|
||
</div>
|
||
<div class="ivo-stat">
|
||
<div class="ivo-stat-icon orange"><i data-lucide="alert-triangle" style="width:20px;height:20px;"></i></div>
|
||
<div class="ivo-stat-info">
|
||
<span class="ivo-stat-label">低库存预警</span>
|
||
<span class="ivo-stat-value orange">8</span>
|
||
</div>
|
||
</div>
|
||
<div class="ivo-stat">
|
||
<div class="ivo-stat-icon red"><i data-lucide="x-circle" style="width:20px;height:20px;"></i></div>
|
||
<div class="ivo-stat-info">
|
||
<span class="ivo-stat-label">缺货原料</span>
|
||
<span class="ivo-stat-value red">2</span>
|
||
</div>
|
||
</div>
|
||
<div class="ivo-stat">
|
||
<div class="ivo-stat-icon green"><i data-lucide="wallet" style="width:20px;height:20px;"></i></div>
|
||
<div class="ivo-stat-info">
|
||
<span class="ivo-stat-label">库存总值</span>
|
||
<span class="ivo-stat-value">¥28,600</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原料列表 -->
|
||
<div class="ivo-table-wrap">
|
||
<div class="ivo-table-inner">
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr>
|
||
<th>原料名称</th><th>分类</th><th>单位</th><th style="text-align:right;">当前库存</th><th style="text-align:right;">安全库存</th><th style="text-align:right;">单价(元)</th><th style="text-align:right;">库存价值</th><th>状态</th><th style="width:140px;">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="font-weight:500;">猪肉</td><td>肉类</td><td>kg</td><td style="text-align:right;">45</td><td style="text-align:right;">20</td><td style="text-align:right;">32.00</td><td style="text-align:right;">¥1,440</td><td><span class="g-tag g-tag-green">正常</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-warn">
|
||
<td style="font-weight:500;">鸡胸肉</td><td>肉类</td><td>kg</td><td style="text-align:right;">8</td><td style="text-align:right;">15</td><td style="text-align:right;">28.00</td><td style="text-align:right;">¥224</td><td><span class="g-tag g-tag-orange">低库存</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-danger">
|
||
<td style="font-weight:500;">牛腩</td><td>肉类</td><td>kg</td><td style="text-align:right;">0</td><td style="text-align:right;">10</td><td style="text-align:right;">65.00</td><td style="text-align:right;">¥0</td><td><span class="g-tag g-tag-red">缺货</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:500;">大白菜</td><td>蔬菜</td><td>kg</td><td style="text-align:right;">30</td><td style="text-align:right;">10</td><td style="text-align:right;">4.00</td><td style="text-align:right;">¥120</td><td><span class="g-tag g-tag-green">正常</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:500;">西红柿</td><td>蔬菜</td><td>kg</td><td style="text-align:right;">12</td><td style="text-align:right;">8</td><td style="text-align:right;">6.00</td><td style="text-align:right;">¥72</td><td><span class="g-tag g-tag-green">正常</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-warn">
|
||
<td style="font-weight:500;">生菜</td><td>蔬菜</td><td>kg</td><td style="text-align:right;">3</td><td style="text-align:right;">5</td><td style="text-align:right;">8.00</td><td style="text-align:right;">¥24</td><td><span class="g-tag g-tag-orange">低库存</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:500;">酱油</td><td>调料</td><td>瓶</td><td style="text-align:right;">25</td><td style="text-align:right;">10</td><td style="text-align:right;">12.00</td><td style="text-align:right;">¥300</td><td><span class="g-tag g-tag-green">正常</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-warn">
|
||
<td style="font-weight:500;">食用油</td><td>调料</td><td>桶</td><td style="text-align:right;">4</td><td style="text-align:right;">5</td><td style="text-align:right;">58.00</td><td style="text-align:right;">¥232</td><td><span class="g-tag g-tag-orange">低库存</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-warn">
|
||
<td style="font-weight:500;">咖啡豆</td><td>饮品原料</td><td>kg</td><td style="text-align:right;">2</td><td style="text-align:right;">5</td><td style="text-align:right;">120.00</td><td style="text-align:right;">¥240</td><td><span class="g-tag g-tag-orange">低库存</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-warn">
|
||
<td style="font-weight:500;">牛奶</td><td>饮品原料</td><td>L</td><td style="text-align:right;">15</td><td style="text-align:right;">20</td><td style="text-align:right;">8.00</td><td style="text-align:right;">¥120</td><td><span class="g-tag g-tag-orange">低库存</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:500;">外卖盒</td><td>包装耗材</td><td>个</td><td style="text-align:right;">500</td><td style="text-align:right;">200</td><td style="text-align:right;">0.80</td><td style="text-align:right;">¥400</td><td><span class="g-tag g-tag-green">正常</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
<tr class="ivo-row-warn">
|
||
<td style="font-weight:500;">一次性筷子</td><td>包装耗材</td><td>双</td><td style="text-align:right;">80</td><td style="text-align:right;">100</td><td style="text-align:right;">0.30</td><td style="text-align:right;">¥24</td><td><span class="g-tag g-tag-orange">低库存</span></td>
|
||
<td><a class="g-action">编辑</a> <a class="g-action" style="margin-left:8px;">入库</a> <a class="g-action g-action-danger" style="margin-left:8px;">删除</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- 分页 -->
|
||
<div class="ivo-pager-bar">
|
||
<span>共 42 条</span>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<select class="g-select" style="width:90px;height:28px;font-size:12px;">
|
||
<option>20 条/页</option>
|
||
<option>50 条/页</option>
|
||
<option>100 条/页</option>
|
||
</select>
|
||
<div class="g-pagination" style="margin-top:0;">
|
||
<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">></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增原料抽屉 -->
|
||
<div class="g-drawer-mask" id="ivoDrawerMask" onclick="closeIvoDrawer()"></div>
|
||
<div class="g-drawer" id="ivoDrawer" style="width:480px;">
|
||
<div class="g-drawer-hd">
|
||
<span class="g-drawer-title">新增原料</span>
|
||
<button class="g-drawer-close" onclick="closeIvoDrawer()"><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>
|
||
<input class="g-input" placeholder="请输入原料名称" />
|
||
</div>
|
||
<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>
|
||
<option>包装耗材</option>
|
||
</select>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">单位</label>
|
||
<select class="g-select">
|
||
<option value="">请选择单位</option>
|
||
<option>kg</option>
|
||
<option>g</option>
|
||
<option>L</option>
|
||
<option>ml</option>
|
||
<option>个</option>
|
||
<option>瓶</option>
|
||
<option>桶</option>
|
||
<option>箱</option>
|
||
<option>双</option>
|
||
</select>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">安全库存</label>
|
||
<input class="g-input" type="number" placeholder="低于此数量将触发预警" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">单价</label>
|
||
<input class="g-input" type="number" placeholder="如：29.90" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">供应商</label>
|
||
<select class="g-select">
|
||
<option value="">请选择供应商</option>
|
||
<option>鲜达供应链</option>
|
||
<option>万家食材</option>
|
||
<option>优品冷链</option>
|
||
</select>
|
||
</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="closeIvoDrawer()">取消</button>
|
||
<button class="g-btn g-btn-primary" onclick="closeIvoDrawer()">确认添加</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* 抽屉开关 */
|
||
function openIvoDrawer() {
|
||
document.getElementById('ivoDrawerMask').classList.add('open');
|
||
document.getElementById('ivoDrawer').classList.add('open');
|
||
}
|
||
function closeIvoDrawer() {
|
||
document.getElementById('ivoDrawerMask').classList.remove('open');
|
||
document.getElementById('ivoDrawer').classList.remove('open');
|
||
}
|
||
|
||
/* 一键生成采购单 */
|
||
function ivoGenPurchase() {
|
||
var btn = document.getElementById('ivoBtnPurchase');
|
||
var orig = btn.innerHTML;
|
||
btn.innerHTML = '<i data-lucide="check" style="width:14px;height:14px;"></i> 已生成 3 条采购建议';
|
||
btn.style.borderColor = 'var(--g-success)';
|
||
btn.style.color = 'var(--g-success)';
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
setTimeout(function() {
|
||
btn.innerHTML = orig;
|
||
btn.style.borderColor = '';
|
||
btn.style.color = '';
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
}, 2000);
|
||
}
|
||
|
||
/* 初始化图标 */
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|