zkxw/docs/unused-material-demos/05-current-baseline.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>