209 lines
8.6 KiB
HTML
209 lines
8.6 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>05 现状基线（优化版）· 登记未用完 Demo</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="_shared.css" />
|
||
<style>
|
||
/* 接近 QcMaterialStockCheckTab 现状，但做了分区与尺寸优化 */
|
||
.baseline-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
max-height: 520px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.baseline-card {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
}
|
||
|
||
.baseline-card:nth-child(even) {
|
||
background: #fafafa;
|
||
}
|
||
|
||
.baseline-card__head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: #f8fafc;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.baseline-card__head-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.baseline-card__title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.baseline-card__body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.zone-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 4px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
|
||
.zone-label--edit {
|
||
color: var(--primary-dark);
|
||
border-bottom-color: #a7f3d0;
|
||
}
|
||
|
||
.baseline-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 8px 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.baseline-grid:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.baseline-col-span-2 {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.baseline-col-span-5 {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.baseline-card .input,
|
||
.baseline-card .select {
|
||
height: 32px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.compare-tag {
|
||
display: inline-block;
|
||
margin-left: 8px;
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
background: var(--danger-bg);
|
||
color: var(--danger);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="demo-banner">
|
||
<div>
|
||
<h1><span class="demo-badge">05 现状基线</span> 登记未用完物料 <span class="compare-tag">对照组</span></h1>
|
||
<p>保留卡片 + 多列栅格结构，优化分区与控件尺寸（对比当前 28px / 无分区）</p>
|
||
</div>
|
||
<div class="demo-banner__actions">
|
||
<a href="index.html">← 选型索引</a>
|
||
<a href="01-inline-table.html">01 表格</a>
|
||
<a class="is-current" href="05-current-baseline.html">05 现状</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="page-wrap">
|
||
<div class="dialog-backdrop">
|
||
<div class="dialog dialog--wide" role="dialog">
|
||
<div class="dialog__head">
|
||
<h2 class="dialog__title">登记未用完物料</h2>
|
||
<button type="button" class="dialog__close">×</button>
|
||
</div>
|
||
<div class="dialog__body">
|
||
<div class="section-head">
|
||
<div class="section-head__left">
|
||
<div class="section-title">未用完明细</div>
|
||
<div class="section-hint">
|
||
当前实现：每行一张卡片、5 列栅格、17 字段、28px 控件 — 多条时纵向很长且 label 仅 11px。
|
||
</div>
|
||
</div>
|
||
<div class="section-tools">
|
||
<span class="stat-pill">共 <strong id="line-count">0</strong> 项</span>
|
||
<button type="button" class="btn btn-sm">＋ 新增一行</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="baseline-list" id="list"></div>
|
||
</div>
|
||
<div class="dialog__foot">
|
||
<button type="button" class="btn btn-ghost">取消</button>
|
||
<button type="button" class="btn btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="style-note">
|
||
<strong>现状问题（供选型参考）：</strong>
|
||
<ul>
|
||
<li>10 条 × 每张卡片 ~120px 高 ≈ 1200px，需大量滚动</li>
|
||
<li>批次只读字段与可编辑字段混在同一栅格，视觉权重相同</li>
|
||
<li>28px 控件 + 11px label，密集且易点错</li>
|
||
<li>本 Demo 的「优化版」仅加卡片头、分区标题、32px 控件 — 仍不如 01/02/03 高效</li>
|
||
</ul>
|
||
</p>
|
||
</div>
|
||
|
||
<script src="_demo-data.js"></script>
|
||
<script>
|
||
const list = document.getElementById('list')
|
||
const rows = DEMO_UNUSED_LINES.slice(0, 4) // 只展示 4 条说明问题，避免页面过长
|
||
|
||
list.innerHTML = rows
|
||
.map(
|
||
(row, i) => `<article class="baseline-card">
|
||
<div class="baseline-card__head">
|
||
<div class="baseline-card__head-left">
|
||
<span class="row-index">${i + 1}</span>
|
||
<span class="baseline-card__title">${row.materialName}</span>
|
||
<span class="tag ${row.fromBatch ? 'tag--success' : 'tag--warn'}">${row.fromBatch ? '批次' : '手工'}</span>
|
||
</div>
|
||
<button type="button" class="btn btn-danger-link btn-sm">删除</button>
|
||
</div>
|
||
<div class="baseline-card__body">
|
||
<div class="zone-label">批次检索 & 关联信息</div>
|
||
<div class="baseline-grid">
|
||
<div class="baseline-col-span-2"><label class="field-label">批次检索</label><select class="select" ${row.fromBatch ? 'disabled' : ''}><option>${row.fromBatch ? row.stockInNo + ' · ' + row.materialName : '检索批次'}</option></select></div>
|
||
<div><label class="field-label">入库编号</label><input class="input input--readonly" readonly value="${row.stockInNo || ''}" /></div>
|
||
<div><label class="field-label">入库日期</label><input class="input input--readonly" readonly value="${row.stockInDate || ''}" /></div>
|
||
<div><label class="field-label">过期日期</label><input class="input input--readonly" readonly value="${row.expireDate || ''}" /></div>
|
||
<div><label class="field-label">物料编码</label><input class="input input--readonly" readonly value="${row.materialCode || ''}" /></div>
|
||
<div><label class="field-label">物料名称</label><input class="input input--readonly" readonly value="${row.materialName || ''}" /></div>
|
||
<div><label class="field-label">规格型号</label><input class="input input--readonly" readonly value="${row.specModel || ''}" /></div>
|
||
<div><label class="field-label">单位</label><input class="input input--readonly" readonly value="${row.unit || ''}" /></div>
|
||
<div><label class="field-label">货号</label><input class="input input--readonly" readonly value="${row.catalogNo || ''}" /></div>
|
||
<div><label class="field-label">批号</label><input class="input input--readonly" readonly value="${row.batchNo || ''}" /></div>
|
||
<div><label class="field-label">厂家</label><input class="input input--readonly" readonly value="${row.manufacturer || ''}" /></div>
|
||
<div><label class="field-label">单价（元）</label><input class="input input--readonly" readonly value="${formatMoney(row.unitPrice)}" /></div>
|
||
</div>
|
||
<div class="zone-label zone-label--edit">登记信息（重点填写）</div>
|
||
<div class="baseline-grid">
|
||
<div><label class="field-label">未用完数量</label><input class="input input-num" type="number" value="${row.unusedQty}" /></div>
|
||
<div><label class="field-label">剩余金额（元）</label><input class="input input--readonly" readonly value="${formatMoney(calcAmount(row.unitPrice, row.unusedQty))}" /></div>
|
||
<div><label class="field-label">持有人</label><input class="input" value="${row.holder || ''}" /></div>
|
||
<div class="baseline-col-span-2"><label class="field-label">备注</label><input class="input" value="${row.remark || ''}" /></div>
|
||
</div>
|
||
</div>
|
||
</article>`
|
||
)
|
||
.join('')
|
||
|
||
document.getElementById('line-count').textContent = rows.length + '（Demo 仅展示 4 条说明密度）'
|
||
</script>
|
||
</body>
|
||
</html>
|