124 lines
5.0 KiB
JavaScript
124 lines
5.0 KiB
JavaScript
/** 我的物料领用记录 · 双 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>
|
|
`
|
|
}
|