zkxw/docs/unused-material-demos/01-inline-table.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01 可编辑表格 · 登记未用完 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>
      .table-scroll {
        max-height: 480px;
      }

      .data-table .col-qty {
        min-width: 88px;
      }

      .data-table .col-holder {
        min-width: 96px;
      }

      .data-table .col-remark {
        min-width: 120px;
      }

      .source-tag {
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 4px;
        margin-left: 4px;
        vertical-align: middle;
      }

      .source-tag--batch {
        background: var(--primary-bg);
        color: var(--primary-dark);
      }

      .source-tag--manual {
        background: var(--warning-bg);
        color: var(--warning);
      }

      .footer-summary {
        margin-top: 12px;
        padding: 10px 14px;
        background: #f8fafc;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 13px;
        color: var(--text-muted);
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
      }

      .footer-summary strong {
        color: var(--text);
      }
    </style>
  </head>
  <body>
    <header class="demo-banner">
      <div>
        <h1><span class="demo-badge">01 可编辑表格</span> 登记未用完物料</h1>
        <p>固定表头 · 横向滚动 · 核心字段 inline 编辑 · 10 条模拟数据</p>
      </div>
      <div class="demo-banner__actions">
        <a href="index.html">← 选型索引</a>
        <a href="02-split-panel.html">02 分栏</a>
        <a href="03-collapsible.html">03 折叠</a>
        <a class="is-current" href="01-inline-table.html">01 表格</a>
      </div>
    </header>

    <div class="page-wrap">
      <div class="dialog-backdrop">
        <div class="dialog dialog--wide" role="dialog" aria-labelledby="dlg-title">
          <div class="dialog__head">
            <h2 class="dialog__title" id="dlg-title">登记未用完物料</h2>
            <button type="button" class="dialog__close" aria-label="关闭">×</button>
          </div>
          <div class="dialog__body">
            <div class="section-head">
              <div class="section-head__left">
                <div class="section-title">未用完明细</div>
                <div class="section-hint">
                  批次关联行自动带出只读信息；仅需填写<strong>未用完数量、持有人、备注</strong>。剩余金额 = 数量 × 单价。
                </div>
              </div>
              <div class="section-tools">
                <span class="stat-pill">共 <strong id="line-count">0</strong> 项</span>
                <input type="search" class="input search-box" placeholder="过滤物料/批号/入库编号…" id="filter" />
                <button type="button" class="btn btn-sm">＋ 新增一行</button>
                <button type="button" class="btn btn-sm">＋ 手工登记</button>
              </div>
            </div>

            <div class="table-scroll">
              <table class="data-table" id="table">
                <thead>
                  <tr>
                    <th class="col-sticky-left" style="min-width: 44px">#</th>
                    <th class="col-sticky-left col-name" style="left: 44px; min-width: 160px">物料名称</th>
                    <th style="min-width: 100px">入库编号</th>
                    <th style="min-width: 96px">批号</th>
                    <th style="min-width: 96px">货号</th>
                    <th style="min-width: 88px">规格</th>
                    <th style="min-width: 72px">单位</th>
                    <th style="min-width: 100px">厂家</th>
                    <th style="min-width: 88px">单价</th>
                    <th style="min-width: 96px">剩余金额</th>
                    <th class="col-qty">未用完数量</th>
                    <th class="col-holder">持有人</th>
                    <th class="col-remark">备注</th>
                    <th class="col-actions" style="min-width: 52px">操作</th>
                  </tr>
                </thead>
                <tbody id="tbody"></tbody>
              </table>
            </div>

            <div class="footer-summary">
              <span>合计未用完数量：<strong id="sum-qty">0</strong></span>
              <span>合计剩余金额：<strong id="sum-amt">0.00</strong> 元</span>
              <span>已填持有人：<strong id="sum-holder">0</strong> / <strong id="sum-total">0</strong></span>
            </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>一次登记 10～50 条，用户主要改「数量 / 持有人」。
        <ul>
          <li>批次检索可在「新增一行」时弹出，选中后插入表格行（本 Demo 省略交互）</li>
          <li>只读列灰底或纯文本，减少视觉噪音；Tab 键可在可编辑列间跳转</li>
          <li>与查看态「领用未用完登记」表格列对齐，心智一致</li>
        </ul>
      </p>
    </div>

    <script src="_demo-data.js"></script>
    <script>
      const tbody = document.getElementById('tbody')
      let rows = [...DEMO_UNUSED_LINES]

      function render() {
        const kw = (document.getElementById('filter').value || '').trim().toLowerCase()
        const filtered = rows.filter((r) => {
          if (!kw) return true
          return [r.materialName, r.batchNo, r.stockInNo, r.holder, r.materialCode]
            .join(' ')
            .toLowerCase()
            .includes(kw)
        })

        tbody.innerHTML = filtered
          .map((row, i) => {
            const amt = calcAmount(row.unitPrice, row.unusedQty)
            const srcTag = row.fromBatch
              ? '<span class="source-tag source-tag--batch">批次</span>'
              : '<span class="source-tag source-tag--manual">手工</span>'
            return `<tr data-id="${row.id}">
              <td class="col-sticky-left"><span class="row-index">${i + 1}</span></td>
              <td class="col-sticky-left col-name" style="left:44px" title="${row.materialName}">${row.materialName}${srcTag}</td>
              <td class="money--muted">${row.stockInNo || '—'}</td>
              <td>${row.batchNo || '—'}</td>
              <td class="money--muted">${row.catalogNo || '—'}</td>
              <td class="money--muted">${row.specModel || '—'}</td>
              <td>${row.unit || '—'}</td>
              <td class="money--muted">${row.manufacturer || '—'}</td>
              <td class="money">${formatMoney(row.unitPrice)}</td>
              <td class="money">${formatMoney(amt)}</td>
              <td><input class="input input-num qty-input" type="number" min="0.01" step="0.01" value="${row.unusedQty}" data-id="${row.id}" /></td>
              <td><input class="input holder-input" type="text" value="${row.holder || ''}" data-id="${row.id}" placeholder="持有人" /></td>
              <td><input class="input input--wide remark-input" type="text" value="${row.remark || ''}" data-id="${row.id}" placeholder="可选" /></td>
              <td class="col-actions"><button type="button" class="btn btn-danger-link btn-sm del-btn" data-id="${row.id}">删</button></td>
            </tr>`
          })
          .join('')

        document.getElementById('line-count').textContent = rows.length
        document.getElementById('sum-total').textContent = rows.length
        document.getElementById('sum-qty').textContent = rows.reduce((s, r) => s + Number(r.unusedQty), 0)
        document.getElementById('sum-amt').textContent = formatMoney(
          rows.reduce((s, r) => s + calcAmount(r.unitPrice, r.unusedQty), 0)
        )
        document.getElementById('sum-holder').textContent = rows.filter((r) => r.holder?.trim()).length
      }

      tbody.addEventListener('input', (e) => {
        const id = Number(e.target.dataset.id)
        const row = rows.find((r) => r.id === id)
        if (!row) return
        if (e.target.classList.contains('qty-input')) {
          row.unusedQty = Number(e.target.value) || 0
          render()
        } else if (e.target.classList.contains('holder-input')) {
          row.holder = e.target.value
        } else if (e.target.classList.contains('remark-input')) {
          row.remark = e.target.value
        }
      })

      tbody.addEventListener('click', (e) => {
        if (e.target.classList.contains('del-btn')) {
          const id = Number(e.target.dataset.id)
          rows = rows.filter((r) => r.id !== id)
          render()
        }
      })

      document.getElementById('filter').addEventListener('input', render)
      render()
    </script>
  </body>
</html>