From 88ec7d01f2e254e26ca320e2176fbfdcc89708b7 Mon Sep 17 00:00:00 2001
From: qiuxiang <394405259@qq.com>
Date: Mon, 26 Oct 2026 19:27:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=89=E8=A3=85=E8=B4=B9=E6=B1=87?=
=?UTF-8?q?=E6=80=BB=E4=B8=8E=E5=BA=97=E9=93=BA=E6=98=8E=E7=BB=86=E6=94=B9?=
=?UTF-8?q?=E4=B8=BA=E6=A8=AA=E5=90=91=E9=A1=B5=E7=AD=BE=20(#634)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../installation-fee-summary.blade.php | 157 +++++++++++++++---
tests/Feature/Business/ManagementCrudTest.php | 9 +
2 files changed, 140 insertions(+), 26 deletions(-)
diff --git a/resources/views/business/pages/partials/installation-fee-summary.blade.php b/resources/views/business/pages/partials/installation-fee-summary.blade.php
index ed504cb8..848ca64c 100644
--- a/resources/views/business/pages/partials/installation-fee-summary.blade.php
+++ b/resources/views/business/pages/partials/installation-fee-summary.blade.php
@@ -291,6 +291,47 @@
border-bottom: 1px solid #eee8dd;
}
+ .installation-fee-tabs {
+ display: flex;
+ align-items: stretch;
+ gap: 1.25rem;
+ overflow-x: auto;
+ padding: 0 1.1rem;
+ border-bottom: 1px solid #e8e0d2;
+ background: #ffffff;
+ overscroll-behavior-inline: contain;
+ scrollbar-width: thin;
+ white-space: nowrap;
+ }
+
+ .installation-fee-tab {
+ flex: 0 0 auto;
+ min-height: 2.75rem;
+ padding: 0 0.2rem;
+ border: 0;
+ border-bottom: 2px solid transparent;
+ background: transparent;
+ color: #595959;
+ cursor: pointer;
+ font: inherit;
+ font-size: 0.8125rem;
+ font-weight: 600;
+ }
+
+ .installation-fee-tab:hover {
+ color: #856632;
+ }
+
+ .installation-fee-tab[aria-selected="true"] {
+ border-bottom-color: #b9954f;
+ color: #856632;
+ }
+
+ .installation-fee-tab:focus-visible {
+ outline: 3px solid rgba(133, 102, 50, 0.2);
+ outline-offset: -3px;
+ }
+
.installation-fee-filter span {
display: block;
margin-bottom: 0.25rem;
@@ -353,15 +394,8 @@
}
.installation-fee-platform-summary {
- margin: 0.75rem 0 1rem;
- padding-top: 0.75rem;
- border-top: 1px solid #d8d2c7;
- }
-
- .installation-fee-platform-summary h3 {
- margin: 0 0 0.5rem;
- color: #171717;
- font-size: 0.75rem;
+ margin: 0;
+ padding: 0;
}
.installation-fee-platform-summary table {
@@ -481,9 +515,12 @@
+
+
+
+
@@ -538,11 +578,43 @@
var rowsEl = dialog.querySelector('[data-installation-fee-rows]');
var platformRowsEl = dialog.querySelector('[data-installation-fee-platform-rows]');
var emptyEl = dialog.querySelector('[data-installation-fee-empty]');
+ 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 tabButtons = Array.from(dialog.querySelectorAll('[data-installation-fee-tab]'));
+ var tabPanels = Array.from(dialog.querySelectorAll('[data-installation-fee-panel]'));
var allRows = [];
var loadedSignature = '';
var timer = null;
var controller = null;
+ var detailRowCount = 0;
+ var platformRowCount = 0;
+ var activeTab = 'platform';
+
+ function updateCount() {
+ var count = activeTab === 'platform' ? platformRowCount : detailRowCount;
+ var suffix = activeTab === 'platform' ? '平台汇总' : '明细汇总';
+ countEl.textContent = '共 ' + count.toLocaleString('zh-CN') + ' 条' + suffix;
+ }
+
+ function activateTab(name, focusTab) {
+ activeTab = name;
+ tabButtons.forEach(function (tab) {
+ var selected = tab.dataset.installationFeeTab === name;
+ tab.setAttribute('aria-selected', selected ? 'true' : 'false');
+ tab.tabIndex = selected ? 0 : -1;
+ if (selected && focusTab) {
+ tab.focus();
+ }
+ });
+ tabPanels.forEach(function (panel) {
+ panel.hidden = panel.dataset.installationFeePanel !== name;
+ });
+ if (scrollEl) {
+ scrollEl.scrollTop = 0;
+ }
+ updateCount();
+ }
function yuan(value) {
return '¥' + Number(value || 0).toLocaleString('zh-CN', {
@@ -709,6 +781,8 @@
byPlatform[key] ??= 0;
byPlatform[key] += Number(row.amount || 0);
});
+ detailRowCount = rows.length;
+ platformRowCount = Object.keys(byPlatform).length;
platformRowsEl.replaceChildren();
Object.keys(byPlatform).sort(function (left, right) {
return Math.abs(byPlatform[right]) - Math.abs(byPlatform[left])
@@ -726,22 +800,30 @@
});
currentTotal.textContent = yuan(total);
- countEl.textContent = '共 ' + rows.length.toLocaleString('zh-CN') + ' 条明细汇总';
+ updateCount();
emptyEl.hidden = rows.length > 0;
emptyEl.textContent = allRows.length
? '当前筛选条件下没有安装费明细。'
: '当前客服审核时间内没有安装费明细。';
+ platformEmptyEl.hidden = platformRowCount > 0;
+ platformEmptyEl.textContent = allRows.length
+ ? '当前筛选条件下没有平台汇总。'
+ : '当前客服审核时间内没有平台汇总。';
}
function resetDialog(message) {
allRows = [];
loadedSignature = '';
+ detailRowCount = 0;
+ platformRowCount = 0;
rowsEl.replaceChildren();
platformRowsEl.replaceChildren();
currentTotal.textContent = '¥0.00';
- countEl.textContent = '共 0 条明细汇总';
+ updateCount();
emptyEl.hidden = false;
emptyEl.textContent = message;
+ platformEmptyEl.hidden = false;
+ platformEmptyEl.textContent = message;
fillFilter(storeFilter, '全部店铺', []);
fillFilter(platformFilter, '全部平台', []);
fillFilter(companyFilter, '全部安装公司', []);
@@ -749,6 +831,7 @@
}
function openDialog() {
+ activateTab('platform', false);
if (typeof dialog.showModal === 'function') {
dialog.showModal();
} else {
@@ -832,6 +915,28 @@
openDialog();
refresh(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') {
+ nextIndex = (index + 1) % tabButtons.length;
+ } else if (event.key === 'ArrowLeft') {
+ nextIndex = (index - 1 + tabButtons.length) % tabButtons.length;
+ } else if (event.key === 'Home') {
+ nextIndex = 0;
+ } else if (event.key === 'End') {
+ nextIndex = tabButtons.length - 1;
+ }
+ if (nextIndex === null) {
+ return;
+ }
+ event.preventDefault();
+ activateTab(tabButtons[nextIndex].dataset.installationFeeTab, true);
+ });
+ });
[fromInput, toInput].forEach(function (input) {
if (input) { input.addEventListener('change', scheduleRefresh); }
});
diff --git a/tests/Feature/Business/ManagementCrudTest.php b/tests/Feature/Business/ManagementCrudTest.php
index 774ee9bc..0f17c8c5 100644
--- a/tests/Feature/Business/ManagementCrudTest.php
+++ b/tests/Feature/Business/ManagementCrudTest.php
@@ -288,6 +288,13 @@ class ManagementCrudTest extends FeatureTestCase
->assertSee('data-installation-fee-trend', false)
->assertSee('data-installation-fee-package', false)
->assertSee('data-installation-fee-non-package', false)
+ ->assertSee('data-installation-fee-tab="platform"', false)
+ ->assertSee('data-installation-fee-tab="detail"', false)
+ ->assertSee('data-installation-fee-panel="platform"', false)
+ ->assertSee('data-installation-fee-panel="detail"', false)
+ ->assertSeeText('店铺明细')
+ ->assertSee('overflow-x: auto', false)
+ ->assertSeeText('共 0 条平台汇总')
->assertSee('--installation-fee-accent: #856632', false)
->assertSee('border-left: 3px solid var(--installation-fee-accent)', false)
->assertSee('border-right: 3px solid var(--installation-fee-accent)', false)
@@ -303,6 +310,8 @@ class ManagementCrudTest extends FeatureTestCase
->assertSee('function captionRange(value)', false)
->assertSee('function setCardValue(total, rows, value, data)', false)
->assertSee('function wanAmount(value)', false)
+ ->assertSee('function activateTab(name, focusTab)', false)
+ ->assertSee("event.key === 'ArrowRight'", false)
->assertSeeText('平台')
->assertSeeText('店铺名称')
->assertSeeText('安装公司')