446 lines
19 KiB
HTML
446 lines
19 KiB
HTML
<!-- 出入库管理 — inv-inout.html -->
|
|
<style>
|
|
/* ---- page-private: ivi- prefix ---- */
|
|
.ivi-toolbar {
|
|
background:#fff; border-radius:var(--g-radius); padding:14px 18px;
|
|
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
|
|
box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); margin-bottom:16px;
|
|
}
|
|
.ivi-toolbar select,
|
|
.ivi-toolbar input[type="date"] {
|
|
height:32px; padding:0 10px; border:1px solid #e5e7eb; border-radius:var(--g-radius-sm,6px);
|
|
font-size:13px; outline:none; transition:var(--g-transition); background:#fff; color:var(--g-text);
|
|
}
|
|
.ivi-toolbar select:focus,
|
|
.ivi-toolbar input[type="date"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.ivi-toolbar select { min-width:120px; }
|
|
.ivi-date-sep { color:var(--g-text-muted); font-size:13px; line-height:32px; }
|
|
.ivi-toolbar-right { margin-left:auto; display:flex; gap:8px; align-items:center; }
|
|
|
|
.ivi-panel {
|
|
background:#fff; border-radius:var(--g-radius); box-shadow:var(--g-shadow-sm);
|
|
padding:18px 20px;
|
|
}
|
|
.ivi-seg-wrap { margin-bottom:16px; }
|
|
|
|
.ivi-table-card {
|
|
background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border);
|
|
overflow:hidden;
|
|
}
|
|
.ivi-table-card .g-table th { white-space:nowrap; }
|
|
.ivi-table-card .g-table td { vertical-align:middle; font-size:13px; }
|
|
|
|
.ivi-mono { font-family:'SF Mono','Cascadia Code','Consolas',monospace; font-size:12px; color:var(--g-text-secondary); }
|
|
.ivi-amount { font-weight:600; white-space:nowrap; }
|
|
.ivi-amount.positive { color:var(--g-success); }
|
|
.ivi-amount.negative { color:var(--g-danger); }
|
|
|
|
.ivi-detail-cell { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--g-text-secondary); }
|
|
|
|
/* 新增入库抽屉 */
|
|
.ivi-drawer { width:520px; }
|
|
.ivi-material-row {
|
|
display:flex; gap:8px; align-items:center; margin-bottom:10px;
|
|
}
|
|
.ivi-material-row select,
|
|
.ivi-material-row input {
|
|
height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:var(--g-radius-sm,6px);
|
|
font-size:13px; outline:none; transition:var(--g-transition); background:#fff; color:var(--g-text);
|
|
}
|
|
.ivi-material-row select:focus,
|
|
.ivi-material-row input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.ivi-material-row select { flex:2; min-width:0; }
|
|
.ivi-material-row input { flex:1; min-width:0; }
|
|
.ivi-subtotal {
|
|
flex:0 0 70px; text-align:right; font-size:13px; font-weight:600; color:var(--g-text);
|
|
}
|
|
.ivi-del-btn {
|
|
flex-shrink:0; width:30px; height:30px; border:none; background:none;
|
|
color:var(--g-text-muted); cursor:pointer; border-radius:6px; display:flex; align-items:center; justify-content:center;
|
|
transition:var(--g-transition);
|
|
}
|
|
.ivi-del-btn:hover { background:color-mix(in srgb, var(--g-danger) 8%, #fff); color:var(--g-danger); }
|
|
.ivi-add-row {
|
|
width:100%; height:36px; border:1px dashed #d9d9d9; border-radius:var(--g-radius-sm,6px);
|
|
background:#fafafa; color:var(--primary); font-size:13px; cursor:pointer;
|
|
display:flex; align-items:center; justify-content:center; gap:4px;
|
|
transition:var(--g-transition);
|
|
}
|
|
.ivi-add-row:hover { border-color:var(--primary); background:var(--primary-light,hsl(212,100%,95%)); }
|
|
.ivi-material-header {
|
|
display:flex; gap:8px; align-items:center; margin-bottom:8px; font-size:12px; color:var(--g-text-muted); font-weight:500;
|
|
}
|
|
.ivi-material-header span:nth-child(1) { flex:2; }
|
|
.ivi-material-header span:nth-child(2) { flex:1; }
|
|
.ivi-material-header span:nth-child(3) { flex:1; }
|
|
.ivi-material-header span:nth-child(4) { flex:0 0 70px; text-align:right; }
|
|
.ivi-material-header span:nth-child(5) { flex:0 0 30px; }
|
|
</style>
|
|
|
|
<!-- 面板 -->
|
|
<div class="ivi-panel">
|
|
<!-- 分段控制器 -->
|
|
<div class="ivi-seg-wrap">
|
|
<div class="g-seg">
|
|
<div class="g-seg-item active" onclick="switchIviTab(this)" data-tab="in">入库记录</div>
|
|
<div class="g-seg-item" onclick="switchIviTab(this)" data-tab="out">出库记录</div>
|
|
<div class="g-seg-item" onclick="switchIviTab(this)" data-tab="check">盘点记录</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Tab1: 入库记录 ========== -->
|
|
<div id="iviTabIn">
|
|
<div class="ivi-toolbar" style="box-shadow:none;border:none;padding:0 0 14px;">
|
|
<input type="date" value="2026-01-01">
|
|
<span class="ivi-date-sep">至</span>
|
|
<input type="date" value="2026-02-12">
|
|
<select>
|
|
<option>全部供应商</option>
|
|
<option>鑫源食材配送</option>
|
|
<option>绿野农产品</option>
|
|
<option>海鲜直供站</option>
|
|
</select>
|
|
<div class="ivi-toolbar-right">
|
|
<button class="g-btn g-btn-primary" onclick="openIviDrawer()"><i data-lucide="plus" style="width:14px;height:14px;"></i> 新增入库</button>
|
|
</div>
|
|
</div>
|
|
<div class="ivi-table-card">
|
|
<table class="g-table">
|
|
<thead>
|
|
<tr>
|
|
<th>入库单号</th>
|
|
<th>日期</th>
|
|
<th>供应商</th>
|
|
<th>原料明细</th>
|
|
<th>总金额</th>
|
|
<th>经办人</th>
|
|
<th style="width:60px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ivi-mono">RK20260212001</td>
|
|
<td>2026-02-12</td>
|
|
<td>鑫源食材配送</td>
|
|
<td class="ivi-detail-cell">五花肉 10kg、牛腩 8kg <span style="color:var(--primary);cursor:pointer;">等3项</span></td>
|
|
<td class="ivi-amount">¥2,360.00</td>
|
|
<td>张经理</td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">RK20260211002</td>
|
|
<td>2026-02-11</td>
|
|
<td>绿野农产品</td>
|
|
<td class="ivi-detail-cell">生菜 5kg、西红柿 8kg <span style="color:var(--primary);cursor:pointer;">等5项</span></td>
|
|
<td class="ivi-amount">¥680.00</td>
|
|
<td>李主管</td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">RK20260210003</td>
|
|
<td>2026-02-10</td>
|
|
<td>海鲜直供站</td>
|
|
<td class="ivi-detail-cell">鲈鱼 15条、基围虾 5kg</td>
|
|
<td class="ivi-amount">¥1,850.00</td>
|
|
<td>张经理</td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">RK20260209004</td>
|
|
<td>2026-02-09</td>
|
|
<td>鑫源食材配送</td>
|
|
<td class="ivi-detail-cell">鸡胸肉 12kg、排骨 10kg <span style="color:var(--primary);cursor:pointer;">等4项</span></td>
|
|
<td class="ivi-amount">¥3,120.00</td>
|
|
<td>王厨师</td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">RK20260208005</td>
|
|
<td>2026-02-08</td>
|
|
<td>绿野农产品</td>
|
|
<td class="ivi-detail-cell">土豆 20kg、洋葱 10kg</td>
|
|
<td class="ivi-amount">¥420.00</td>
|
|
<td>李主管</td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">RK20260207006</td>
|
|
<td>2026-02-07</td>
|
|
<td>海鲜直供站</td>
|
|
<td class="ivi-detail-cell">三文鱼 8kg、扇贝 3kg <span style="color:var(--primary);cursor:pointer;">等3项</span></td>
|
|
<td class="ivi-amount">¥2,980.00</td>
|
|
<td>张经理</td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="g-pagination">
|
|
<span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 6 条</span>
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
|
|
<button class="g-page-btn active">1</button>
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Tab2: 出库记录 ========== -->
|
|
<div id="iviTabOut" style="display:none;">
|
|
<div class="ivi-toolbar" style="box-shadow:none;border:none;padding:0 0 14px;">
|
|
<input type="date" value="2026-01-01">
|
|
<span class="ivi-date-sep">至</span>
|
|
<input type="date" value="2026-02-12">
|
|
<select>
|
|
<option>全部类型</option>
|
|
<option>订单消耗</option>
|
|
<option>报损</option>
|
|
<option>调拨</option>
|
|
<option>其他</option>
|
|
</select>
|
|
</div>
|
|
<div class="ivi-table-card">
|
|
<table class="g-table">
|
|
<thead>
|
|
<tr>
|
|
<th>出库单号</th>
|
|
<th>日期</th>
|
|
<th>类型</th>
|
|
<th>原料明细</th>
|
|
<th>数量</th>
|
|
<th>经办人</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ivi-mono">CK20260212001</td>
|
|
<td>2026-02-12</td>
|
|
<td><span class="g-tag g-tag-blue">订单消耗</span></td>
|
|
<td class="ivi-detail-cell">五花肉、生菜、西红柿</td>
|
|
<td>3.5kg / 2kg / 1.5kg</td>
|
|
<td>系统自动</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">CK20260212002</td>
|
|
<td>2026-02-12</td>
|
|
<td><span class="g-tag g-tag-blue">订单消耗</span></td>
|
|
<td class="ivi-detail-cell">鸡胸肉、土豆</td>
|
|
<td>2kg / 3kg</td>
|
|
<td>系统自动</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">CK20260211003</td>
|
|
<td>2026-02-11</td>
|
|
<td><span class="g-tag g-tag-red">报损</span></td>
|
|
<td class="ivi-detail-cell">基围虾（变质）</td>
|
|
<td>1.2kg</td>
|
|
<td>王厨师</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">CK20260211004</td>
|
|
<td>2026-02-11</td>
|
|
<td><span class="g-tag g-tag-blue">订单消耗</span></td>
|
|
<td class="ivi-detail-cell">牛腩、洋葱、排骨</td>
|
|
<td>4kg / 2kg / 3kg</td>
|
|
<td>系统自动</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">CK20260210005</td>
|
|
<td>2026-02-10</td>
|
|
<td><span class="g-tag g-tag-gray">调拨</span></td>
|
|
<td class="ivi-detail-cell">三文鱼（调至分店）</td>
|
|
<td>2kg</td>
|
|
<td>张经理</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">CK20260210006</td>
|
|
<td>2026-02-10</td>
|
|
<td><span class="g-tag g-tag-blue">订单消耗</span></td>
|
|
<td class="ivi-detail-cell">鲈鱼、生菜、土豆</td>
|
|
<td>3条 / 1.5kg / 2kg</td>
|
|
<td>系统自动</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="g-pagination">
|
|
<span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 6 条</span>
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
|
|
<button class="g-page-btn active">1</button>
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Tab3: 盘点记录 ========== -->
|
|
<div id="iviTabCheck" style="display:none;">
|
|
<div class="ivi-toolbar" style="box-shadow:none;border:none;padding:0 0 14px;">
|
|
<input type="date" value="2026-01-01">
|
|
<span class="ivi-date-sep">至</span>
|
|
<input type="date" value="2026-02-12">
|
|
<div class="ivi-toolbar-right">
|
|
<button class="g-btn g-btn-primary"><i data-lucide="clipboard-list" style="width:14px;height:14px;"></i> 新建盘点</button>
|
|
</div>
|
|
</div>
|
|
<div class="ivi-table-card">
|
|
<table class="g-table">
|
|
<thead>
|
|
<tr>
|
|
<th>盘点单号</th>
|
|
<th>盘点日期</th>
|
|
<th>盘点范围</th>
|
|
<th>差异项数</th>
|
|
<th>盈亏金额</th>
|
|
<th>状态</th>
|
|
<th style="width:60px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ivi-mono">PD20260212001</td>
|
|
<td>2026-02-12</td>
|
|
<td>全部</td>
|
|
<td>3</td>
|
|
<td class="ivi-amount negative">-¥186.00</td>
|
|
<td><span class="g-tag g-tag-orange">进行中</span></td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">PD20260205002</td>
|
|
<td>2026-02-05</td>
|
|
<td>肉类</td>
|
|
<td>1</td>
|
|
<td class="ivi-amount negative">-¥95.00</td>
|
|
<td><span class="g-tag g-tag-green">已完成</span></td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">PD20260130003</td>
|
|
<td>2026-01-30</td>
|
|
<td>蔬菜</td>
|
|
<td>2</td>
|
|
<td class="ivi-amount positive">+¥32.00</td>
|
|
<td><span class="g-tag g-tag-green">已完成</span></td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ivi-mono">PD20260120004</td>
|
|
<td>2026-01-20</td>
|
|
<td>全部</td>
|
|
<td>5</td>
|
|
<td class="ivi-amount negative">-¥420.00</td>
|
|
<td><span class="g-tag g-tag-green">已完成</span></td>
|
|
<td><a class="g-action">查看</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="g-pagination">
|
|
<span style="font-size:13px;color:var(--g-text-secondary);margin-right:12px;">共 4 条</span>
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
|
|
<button class="g-page-btn active">1</button>
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== 新增入库抽屉 ========== -->
|
|
<div class="g-drawer-mask" id="iviDrawerMask" onclick="closeIviDrawer()"></div>
|
|
<div class="g-drawer ivi-drawer" id="iviDrawer">
|
|
<div class="g-drawer-hd">
|
|
<div class="g-drawer-title">新增入库单</div>
|
|
<button class="g-drawer-close" onclick="closeIviDrawer()"><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" style="width:100%;">
|
|
<option value="">请选择供应商</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-12">
|
|
</div>
|
|
<!-- 原料明细 -->
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">原料明细</label>
|
|
<div class="ivi-material-header">
|
|
<span>原料名称</span>
|
|
<span>数量</span>
|
|
<span>单价(元)</span>
|
|
<span>小计</span>
|
|
<span></span>
|
|
</div>
|
|
<div id="iviMaterialList">
|
|
<div class="ivi-material-row">
|
|
<select><option>五花肉</option><option>牛腩</option><option>鸡胸肉</option><option>排骨</option><option>生菜</option><option>西红柿</option><option>土豆</option><option>鲈鱼</option><option>基围虾</option></select>
|
|
<input type="number" placeholder="数量" value="10">
|
|
<input type="number" placeholder="单价" value="32">
|
|
<div class="ivi-subtotal">¥320</div>
|
|
<button class="ivi-del-btn" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
<div class="ivi-material-row">
|
|
<select><option>牛腩</option><option>五花肉</option><option>鸡胸肉</option><option>排骨</option><option>生菜</option><option>西红柿</option><option>土豆</option><option>鲈鱼</option><option>基围虾</option></select>
|
|
<input type="number" placeholder="数量" value="8">
|
|
<input type="number" placeholder="单价" value="58">
|
|
<div class="ivi-subtotal">¥464</div>
|
|
<button class="ivi-del-btn" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
<button class="ivi-add-row" onclick="addIviMaterialRow()">
|
|
<i data-lucide="plus" style="width:14px;height:14px;"></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="closeIviDrawer()">取消</button>
|
|
<button class="g-btn g-btn-primary">确认入库</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/* Tab 切换 */
|
|
function switchIviTab(el) {
|
|
document.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
var tab = el.getAttribute('data-tab');
|
|
document.getElementById('iviTabIn').style.display = tab === 'in' ? '' : 'none';
|
|
document.getElementById('iviTabOut').style.display = tab === 'out' ? '' : 'none';
|
|
document.getElementById('iviTabCheck').style.display = tab === 'check' ? '' : 'none';
|
|
}
|
|
|
|
/* 抽屉开关 */
|
|
function openIviDrawer() {
|
|
document.getElementById('iviDrawerMask').classList.add('open');
|
|
document.getElementById('iviDrawer').classList.add('open');
|
|
}
|
|
function closeIviDrawer() {
|
|
document.getElementById('iviDrawerMask').classList.remove('open');
|
|
document.getElementById('iviDrawer').classList.remove('open');
|
|
}
|
|
|
|
/* 添加原料行 */
|
|
function addIviMaterialRow() {
|
|
var html = '<div class="ivi-material-row">'
|
|
+ '<select><option value="">请选择原料</option><option>五花肉</option><option>牛腩</option><option>鸡胸肉</option><option>排骨</option><option>生菜</option><option>西红柿</option><option>土豆</option><option>鲈鱼</option><option>基围虾</option></select>'
|
|
+ '<input type="number" placeholder="数量">'
|
|
+ '<input type="number" placeholder="单价">'
|
|
+ '<div class="ivi-subtotal">¥0</div>'
|
|
+ '<button class="ivi-del-btn" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>'
|
|
+ '</div>';
|
|
document.getElementById('iviMaterialList').insertAdjacentHTML('beforeend', html);
|
|
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
|
}
|
|
|
|
/* 初始化图标 */
|
|
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
|
</script>
|