zkxw/docs/unused-material-demos/02-split-panel.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02 左右分栏 · 登记未用完 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>
      .split-layout {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: 16px;
        min-height: 480px;
      }

      @media (max-width: 900px) {
        .split-layout {
          grid-template-columns: 1fr;
        }
      }

      .list-panel {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fafafa;
      }

      .list-panel__tools {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .list-panel__tools .input {
        flex: 1;
        min-width: 120px;
      }

      .line-list {
        flex: 1;
        overflow-y: auto;
        max-height: 420px;
      }

      .line-item {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border: none;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        cursor: pointer;
        transition: background 0.12s;
      }

      .line-item:hover {
        background: var(--row-hover);
      }

      .line-item.is-active {
        background: var(--primary-bg);
        border-left: 3px solid var(--primary);
        padding-left: 9px;
      }

      .line-item__top {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
      }

      .line-item__name {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .line-item__meta {
        font-size: 11px;
        color: var(--text-muted);
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .detail-panel {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 16px;
        background: var(--surface);
        overflow-y: auto;
        max-height: 480px;
      }

      .detail-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
      }

      .detail-panel__title {
        font-size: 15px;
        font-weight: 600;
      }

      .detail-panel__sub {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
      }

      .form-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 16px;
      }

      .form-col-span-3 {
        grid-column: 1 / -1;
      }

      .form-col-span-2 {
        grid-column: span 2;
      }

      .field-group-title {
        grid-column: 1 / -1;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary-dark);
        padding: 8px 0 0;
        margin-top: 4px;
        border-top: 1px dashed var(--border);
      }

      .field-group-title:first-child {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
      }

      .detail-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 320px;
        color: var(--text-muted);
        font-size: 13px;
      }

      .nav-hint {
        font-size: 11px;
        color: var(--text-muted);
        padding: 8px 12px;
        border-top: 1px solid var(--border);
        background: var(--surface);
      }

      kbd {
        padding: 1px 5px;
        border-radius: 4px;
        border: 1px solid var(--border);
        background: #f8fafc;
        font-size: 10px;
      }
    </style>
  </head>
  <body>
    <header class="demo-banner">
      <div>
        <h1><span class="demo-badge">02 左右分栏</span> 登记未用完物料</h1>
        <p>左侧列表扫选 · 右侧完整表单 · 支持 ↑↓ 切换当前行</p>
      </div>
      <div class="demo-banner__actions">
        <a href="index.html">← 选型索引</a>
        <a class="is-current" href="02-split-panel.html">02 分栏</a>
        <a href="01-inline-table.html">01 表格</a>
        <a href="03-collapsible.html">03 折叠</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">左侧选择要编辑的行；右侧展示完整字段，避免一屏塞满多张卡片。</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>
                <button type="button" class="btn btn-sm">＋ 手工登记</button>
              </div>
            </div>

            <div class="split-layout">
              <div class="list-panel">
                <div class="list-panel__tools">
                  <input type="search" class="input" placeholder="搜索物料/批号…" id="filter" />
                </div>
                <div class="line-list" id="line-list"></div>
                <div class="nav-hint"><kbd>↑</kbd> <kbd>↓</kbd> 切换 · 点击左侧行编辑</div>
              </div>
              <div class="detail-panel" id="detail-panel"></div>
            </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>左侧仅展示摘要（名称、批号、数量、持有人），一屏可浏览 8～12 条</li>
          <li>右侧 3 列标准表单（label-position top），控件高度 36px，与全站弹窗一致</li>
          <li>批次关联字段只读灰底分区；登记字段（数量/持有人/备注）单独成组突出</li>
        </ul>
      </p>
    </div>

    <script src="_demo-data.js"></script>
    <script>
      let rows = [...DEMO_UNUSED_LINES]
      let activeId = rows[0]?.id
      const lineList = document.getElementById('line-list')
      const detailPanel = document.getElementById('detail-panel')

      function renderList() {
        const kw = (document.getElementById('filter').value || '').trim().toLowerCase()
        const filtered = rows.filter((r) => {
          if (!kw) return true
          return materialSummary(r).toLowerCase().includes(kw)
        })
        if (!filtered.find((r) => r.id === activeId)) activeId = filtered[0]?.id

        lineList.innerHTML = filtered
          .map(
            (row) => `<button type="button" class="line-item ${row.id === activeId ? 'is-active' : ''}" data-id="${row.id}">
              <div class="line-item__top">
                <span class="row-index">${rows.indexOf(row) + 1}</span>
                <span class="line-item__name">${row.materialName}</span>
                <span class="tag ${row.fromBatch ? 'tag--success' : 'tag--warn'}">${row.fromBatch ? '批次' : '手工'}</span>
              </div>
              <div class="line-item__meta">
                <span>${row.unusedQty}${row.unit || ''}</span>
                <span>${row.batchNo || '—'}</span>
                <span>${row.holder || '未填持有人'}</span>
              </div>
            </button>`
          )
          .join('')

        document.getElementById('line-count').textContent = rows.length
        renderDetail()
      }

      function renderDetail() {
        const row = rows.find((r) => r.id === activeId)
        if (!row) {
          detailPanel.innerHTML = '<div class="detail-empty">请选择左侧一行，或点击「新增」</div>'
          return
        }

        const readonly = row.fromBatch
        detailPanel.innerHTML = `
          <div class="detail-panel__head">
            <div>
              <div class="detail-panel__title">第 ${rows.indexOf(row) + 1} 行 · ${row.materialName}</div>
              <div class="detail-panel__sub">${materialSummary(row)}</div>
            </div>
            <button type="button" class="btn btn-danger-link btn-sm" id="del-current">删除此行</button>
          </div>
          <div class="form-grid">
            <div class="field-group-title">批次检索（可选）</div>
            <div class="form-col-span-3">
              <label class="field-label">检索批次</label>
              <select class="select" ${readonly ? 'disabled' : ''}>
                <option>${readonly ? `${row.stockInNo} · ${row.materialName}` : '输入入库编号/物料名检索…'}</option>
              </select>
            </div>

            <div class="field-group-title">批次信息 ${readonly ? '（只读）' : '（可手工填写）'}</div>
            ${field('入库编号', row.stockInNo, readonly)}
            ${field('入库日期', row.stockInDate, readonly)}
            ${field('过期日期', row.expireDate, readonly)}
            ${field('物料编码', row.materialCode, readonly)}
            ${field('物料名称', row.materialName, readonly && row.fromBatch)}
            ${field('规格型号', row.specModel, readonly)}
            ${field('单位', row.unit, readonly)}
            ${field('货号', row.catalogNo, readonly)}
            ${field('批号', row.batchNo, readonly)}
            ${field('厂家', row.manufacturer, readonly)}
            ${field('单价（元）', formatMoney(row.unitPrice), readonly)}

            <div class="field-group-title">登记信息（必填/重点）</div>
            <div>
              <label class="field-label">未用完数量</label>
              <input class="input input-num" type="number" id="f-qty" value="${row.unusedQty}" min="0.01" step="0.01" />
            </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" type="text" id="f-holder" value="${row.holder || ''}" placeholder="可选" />
            </div>
            <div class="form-col-span-3">
              <label class="field-label">备注</label>
              <input class="input" type="text" id="f-remark" value="${row.remark || ''}" placeholder="可选" />
            </div>
          </div>`

        document.getElementById('f-qty').addEventListener('input', (e) => {
          row.unusedQty = Number(e.target.value) || 0
          renderList()
        })
        document.getElementById('f-holder').addEventListener('input', (e) => {
          row.holder = e.target.value
          renderList()
        })
        document.getElementById('f-remark').addEventListener('input', (e) => {
          row.remark = e.target.value
        })
        document.getElementById('del-current').addEventListener('click', () => {
          rows = rows.filter((r) => r.id !== activeId)
          activeId = rows[0]?.id
          renderList()
        })
      }

      function field(label, value, ro) {
        return `<div>
          <label class="field-label">${label}</label>
          <input class="input ${ro ? 'input--readonly' : ''}" ${ro ? 'readonly' : ''} value="${value || ''}" placeholder="${ro ? '—' : '可选'}" />
        </div>`
      }

      lineList.addEventListener('click', (e) => {
        const btn = e.target.closest('.line-item')
        if (!btn) return
        activeId = Number(btn.dataset.id)
        renderList()
      })

      document.getElementById('filter').addEventListener('input', renderList)

      document.addEventListener('keydown', (e) => {
        if (!['ArrowUp', 'ArrowDown'].includes(e.key)) return
        const idx = rows.findIndex((r) => r.id === activeId)
        if (idx < 0) return
        e.preventDefault()
        const next = e.key === 'ArrowUp' ? Math.max(0, idx - 1) : Math.min(rows.length - 1, idx + 1)
        activeId = rows[next].id
        renderList()
        lineList.querySelector('.is-active')?.scrollIntoView({ block: 'nearest' })
      })

      renderList()
    </script>
  </body>
</html>