zkxw/docs/my-material-usage-tab-demos/_demo-shell.js

/** 我的物料领用记录 · 双 Tab Demo 通用交互 */
function initPanelTabs(rootId) {
  const root = document.getElementById(rootId)
  if (!root) return

  const tabBtns = root.querySelectorAll('[data-tab]')
  const panels = root.querySelectorAll('[data-panel]')
  const track = root.querySelector('.tabs-02')
  const singleContent = root.querySelector('#content')

  function activate(name, index) {
    tabBtns.forEach((btn) => {
      btn.classList.toggle('is-active', btn.dataset.tab === name)
    })
    panels.forEach((panel) => {
      panel.classList.toggle('is-active', panel.dataset.panel === name)
    })
    if (track) {
      track.dataset.active = String(index)
    }
    if (singleContent && typeof mockContent === 'function') {
      singleContent.innerHTML = mockContent(name)
    }
  }

  tabBtns.forEach((btn, index) => {
    btn.addEventListener('click', () => activate(btn.dataset.tab, index))
  })
}

function mockContent(tabName) {
  if (tabName === 'consumption') {
    return `
      <div class="mock-content">
        <div class="filter-block">
          <div class="filter-grid">
            <div class="filter-item">
              <label>关键词</label>
              <div class="fake-input">物料编码/名称/批次号</div>
            </div>
            <div class="filter-item">
              <label>物料类型</label>
              <div class="fake-input">全部</div>
            </div>
            <div class="filter-item">
              <label>时间范围</label>
              <div class="fake-input">开始日期 至 结束日期</div>
            </div>
          </div>
          <div class="filter-actions-row">
            <span class="filter-hint">查看配制消耗的子物料明细，关联配制单可跳转查看。</span>
            <div class="filter-actions-end">
              <button class="btn">重置</button>
              <button class="btn btn-primary">搜索</button>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="fake-table">
            <div class="fake-table-head" style="grid-template-columns: 48px 1fr 1fr 1fr 1fr 1.2fr">
              <span>序号</span><span>物料编码</span><span>物料名称</span><span>消耗数量</span><span>配制单号</span><span>消耗时间</span>
            </div>
            <div class="fake-table-row" style="grid-template-columns: 48px 1fr 1fr 1fr 1fr 1.2fr">
              <span>1</span><span>WL-001</span><span>DMEM培养基</span><span>2 瓶</span><span>PZ-20260610-003</span><span>2026-06-10 14:30</span>
            </div>
            <div class="fake-table-row" style="grid-template-columns: 48px 1fr 1fr 1fr 1fr 1.2fr">
              <span>2</span><span>WL-012</span><span>胎牛血清</span><span>0.5 瓶</span><span>PZ-20260609-001</span><span>2026-06-09 09:15</span>
            </div>
          </div>
        </div>
      </div>
    `
  }

  return `
    <div class="mock-content">
      <div class="filter-block">
        <div class="filter-grid">
          <div class="filter-item">
            <label>关键词</label>
            <div class="fake-input">物料编码/名称/入库编号/批号/货号</div>
          </div>
          <div class="filter-item">
            <label>物料筛选</label>
            <div class="fake-input">输入物料名称检索</div>
          </div>
          <div class="filter-item">
            <label>物料类型</label>
            <div class="fake-input">全部</div>
          </div>
          <div class="filter-item">
            <label>变动类型</label>
            <div class="fake-input">全部</div>
          </div>
          <div class="filter-item">
            <label>时间范围</label>
            <div class="fake-input">开始日期 至 结束日期</div>
          </div>
        </div>
        <div class="filter-actions-row">
          <span class="filter-hint">查看本人物料领用记录，可按物料、批号、类型与时间范围筛选。</span>
          <div class="filter-actions-end">
            <button class="btn">重置</button>
            <button class="btn btn-primary">搜索</button>
          </div>
        </div>
      </div>
      <div class="list-body">
        <div class="fake-table">
          <div class="fake-table-head" style="grid-template-columns: 48px 1fr 1.2fr 1fr 1fr 1fr">
            <span>序号</span><span>物料编码</span><span>物料名称</span><span>变动类型</span><span>数量</span><span>领用时间</span>
          </div>
          <div class="fake-table-row" style="grid-template-columns: 48px 1fr 1.2fr 1fr 1fr 1fr">
            <span>1</span><span>WL-001</span><span>DMEM培养基</span><span>出库</span><span>5 瓶</span><span>2026-06-08 10:20</span>
          </div>
          <div class="fake-table-row" style="grid-template-columns: 48px 1fr 1.2fr 1fr 1fr 1fr">
            <span>2</span><span>WL-012</span><span>胎牛血清</span><span>任务使用</span><span>1 瓶</span><span>2026-06-07 16:45</span>
          </div>
        </div>
      </div>
    </div>
  `
}