fix: 修复安装费页签无法左右切换 #638

Merged
qiuxiang merged 1 commits from fix/qiuxiang-installation-fee-tab-switch into main 2026-10-26 19:39:03 +08:00
2 changed files with 18 additions and 6 deletions

View File

@ -520,7 +520,7 @@
<button type="button" class="installation-fee-tab" id="installationFeeDetailTab" role="tab" aria-selected="false" aria-controls="installationFeeDetailPanel" data-installation-fee-tab="detail" tabindex="-1">店铺明细</button>
</div>
<div class="installation-fee-dialog__scroll">
<section class="installation-fee-platform-summary" id="installationFeePlatformPanel" role="tabpanel" aria-labelledby="installationFeePlatformTab" data-installation-fee-panel="platform">
<section class="installation-fee-platform-summary installation-fee-panel is-active" id="installationFeePlatformPanel" role="tabpanel" aria-labelledby="installationFeePlatformTab" data-installation-fee-panel="platform">
<table>
<thead>
<tr>
@ -532,7 +532,7 @@
</table>
<div class="installation-fee-empty" data-installation-fee-platform-empty hidden>当前客服审核时间内没有平台汇总。</div>
</section>
<section id="installationFeeDetailPanel" role="tabpanel" aria-labelledby="installationFeeDetailTab" data-installation-fee-panel="detail" hidden>
<section class="installation-fee-panel" id="installationFeeDetailPanel" role="tabpanel" aria-labelledby="installationFeeDetailTab" data-installation-fee-panel="detail" hidden>
<table class="installation-fee-table">
<thead>
<tr>
@ -581,6 +581,7 @@
var platformEmptyEl = dialog.querySelector('[data-installation-fee-platform-empty]');
var countEl = dialog.querySelector('[data-installation-fee-count]');
var scrollEl = dialog.querySelector('.installation-fee-dialog__scroll');
var tabsEl = dialog.querySelector('.installation-fee-tabs');
var tabButtons = Array.from(dialog.querySelectorAll('[data-installation-fee-tab]'));
var tabPanels = Array.from(dialog.querySelectorAll('[data-installation-fee-panel]'));
var allRows = [];
@ -608,7 +609,11 @@
}
});
tabPanels.forEach(function (panel) {
panel.hidden = panel.dataset.installationFeePanel !== name;
var selected = panel.dataset.installationFeePanel === name;
panel.hidden = !selected;
panel.classList.toggle('is-active', selected);
panel.style.display = selected ? 'block' : 'none';
panel.setAttribute('aria-hidden', selected ? 'false' : 'true');
});
if (scrollEl) {
scrollEl.scrollTop = 0;
@ -915,10 +920,14 @@
openDialog();
refresh(false);
});
tabsEl.addEventListener('click', function (event) {
var tab = event.target.closest('[data-installation-fee-tab]');
if (!tab || !tabsEl.contains(tab)) {
return;
}
activateTab(tab.dataset.installationFeeTab, false);
});
tabButtons.forEach(function (tab, index) {
tab.addEventListener('click', function () {
activateTab(tab.dataset.installationFeeTab, false);
});
tab.addEventListener('keydown', function (event) {
var nextIndex = null;
if (event.key === 'ArrowRight') {

View File

@ -292,6 +292,7 @@ class ManagementCrudTest extends FeatureTestCase
->assertSee('data-installation-fee-tab="detail"', false)
->assertSee('data-installation-fee-panel="platform"', false)
->assertSee('data-installation-fee-panel="detail"', false)
->assertSee('installation-fee-panel is-active', false)
->assertSeeText('店铺明细')
->assertSee('overflow-x: auto', false)
->assertSeeText('共 0 条平台汇总')
@ -311,6 +312,8 @@ class ManagementCrudTest extends FeatureTestCase
->assertSee('function setCardValue(total, rows, value, data)', false)
->assertSee('function wanAmount(value)', false)
->assertSee('function activateTab(name, focusTab)', false)
->assertSee("panel.style.display = selected ? 'block' : 'none'", false)
->assertSee("tabsEl.addEventListener('click'", false)
->assertSee("event.key === 'ArrowRight'", false)
->assertSeeText('平台')
->assertSeeText('店铺名称')