新增业绩明细平台汇总子页面 #532
@ -1526,9 +1526,18 @@
|
||||
<button
|
||||
type="button"
|
||||
class="receipt-metric-tab"
|
||||
id="receipt-metric-summary-tab"
|
||||
id="receipt-metric-platform-tab"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
aria-controls="receipt-metric-platform-panel"
|
||||
data-receipt-metric-tab="platform"
|
||||
>平台汇总</button>
|
||||
<button
|
||||
type="button"
|
||||
class="receipt-metric-tab"
|
||||
id="receipt-metric-summary-tab"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="receipt-metric-summary-panel"
|
||||
data-receipt-metric-tab="summary"
|
||||
>账单名称汇总</button>
|
||||
@ -1543,12 +1552,32 @@
|
||||
>平台 / 店铺明细</button>
|
||||
</div>
|
||||
<div class="receipt-metric-dialog__scroll">
|
||||
<section
|
||||
class="receipt-metric-panel"
|
||||
id="receipt-metric-platform-panel"
|
||||
role="tabpanel"
|
||||
aria-labelledby="receipt-metric-platform-tab"
|
||||
data-receipt-metric-panel="platform"
|
||||
>
|
||||
<table class="receipt-metric-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">平台</th>
|
||||
<th scope="col">账单名称</th>
|
||||
<th scope="col" class="is-number">总金额（万元）</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-receipt-platform-rows></tbody>
|
||||
</table>
|
||||
<div class="receipt-metric-dialog__empty" data-receipt-platform-empty>加载中…</div>
|
||||
</section>
|
||||
<section
|
||||
class="receipt-metric-panel"
|
||||
id="receipt-metric-summary-panel"
|
||||
role="tabpanel"
|
||||
aria-labelledby="receipt-metric-summary-tab"
|
||||
data-receipt-metric-panel="summary"
|
||||
hidden
|
||||
>
|
||||
<table class="receipt-metric-table">
|
||||
<thead>
|
||||
@ -2298,8 +2327,10 @@
|
||||
var title = dialog.querySelector('[data-receipt-metric-title]');
|
||||
var subtitle = dialog.querySelector('[data-receipt-metric-subtitle]');
|
||||
var currentTotalEl = dialog.querySelector('[data-receipt-metric-current-total]');
|
||||
var platformRowsEl = dialog.querySelector('[data-receipt-platform-rows]');
|
||||
var summaryRowsEl = dialog.querySelector('[data-receipt-summary-rows]');
|
||||
var detailRowsEl = dialog.querySelector('[data-receipt-detail-rows]');
|
||||
var platformEmptyEl = dialog.querySelector('[data-receipt-platform-empty]');
|
||||
var summaryEmptyEl = dialog.querySelector('[data-receipt-summary-empty]');
|
||||
var detailEmptyEl = dialog.querySelector('[data-receipt-detail-empty]');
|
||||
var countEl = dialog.querySelector('[data-receipt-metric-count]');
|
||||
@ -2309,7 +2340,8 @@
|
||||
var tabs = Array.from(dialog.querySelectorAll('[data-receipt-metric-tab]'));
|
||||
var panels = Array.from(dialog.querySelectorAll('[data-receipt-metric-panel]'));
|
||||
var allMetricRows = [];
|
||||
var activeTab = 'summary';
|
||||
var activeTab = 'platform';
|
||||
var platformCount = 0;
|
||||
var summaryCount = 0;
|
||||
var detailCount = 0;
|
||||
|
||||
@ -2337,13 +2369,16 @@
|
||||
}
|
||||
|
||||
function setLoading(label) {
|
||||
platformRowsEl.replaceChildren();
|
||||
summaryRowsEl.replaceChildren();
|
||||
detailRowsEl.replaceChildren();
|
||||
allMetricRows = [];
|
||||
resetFilterOptions();
|
||||
setActiveTab('summary');
|
||||
setActiveTab('platform');
|
||||
platformEmptyEl.hidden = false;
|
||||
summaryEmptyEl.hidden = false;
|
||||
detailEmptyEl.hidden = true;
|
||||
platformEmptyEl.textContent = '正在按平台汇总账单名称…';
|
||||
summaryEmptyEl.textContent = '正在汇总账单名称…';
|
||||
detailEmptyEl.textContent = '正在汇总平台店铺明细…';
|
||||
title.textContent = label + ' · 明细汇总';
|
||||
@ -2382,8 +2417,8 @@
|
||||
});
|
||||
}
|
||||
|
||||
function renderSummaryRows(rows) {
|
||||
summaryRowsEl.replaceChildren();
|
||||
function renderPlatformBillRows(target, rows) {
|
||||
target.replaceChildren();
|
||||
rows.forEach(function (row) {
|
||||
var tr = document.createElement('tr');
|
||||
var platform = document.createElement('td');
|
||||
@ -2396,10 +2431,18 @@
|
||||
amount.className = 'is-number';
|
||||
amount.textContent = wan(row.amount);
|
||||
tr.appendChild(amount);
|
||||
summaryRowsEl.appendChild(tr);
|
||||
target.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPlatformRows(rows) {
|
||||
renderPlatformBillRows(platformRowsEl, rows);
|
||||
}
|
||||
|
||||
function renderSummaryRows(rows) {
|
||||
renderPlatformBillRows(summaryRowsEl, rows);
|
||||
}
|
||||
|
||||
function renderDetailRows(rows) {
|
||||
detailRowsEl.replaceChildren();
|
||||
rows.forEach(function (row) {
|
||||
@ -2418,9 +2461,13 @@
|
||||
}
|
||||
|
||||
function updateFooterCount() {
|
||||
countEl.textContent = activeTab === 'summary'
|
||||
? '共 ' + summaryCount.toLocaleString('zh-CN') + ' 条平台账单汇总'
|
||||
: '共 ' + detailCount.toLocaleString('zh-CN') + ' 条平台店铺明细';
|
||||
if (activeTab === 'platform') {
|
||||
countEl.textContent = '共 ' + platformCount.toLocaleString('zh-CN') + ' 条平台账单汇总';
|
||||
} else if (activeTab === 'summary') {
|
||||
countEl.textContent = '共 ' + summaryCount.toLocaleString('zh-CN') + ' 条账单名称汇总';
|
||||
} else {
|
||||
countEl.textContent = '共 ' + detailCount.toLocaleString('zh-CN') + ' 条平台店铺明细';
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveTab(name) {
|
||||
@ -2457,9 +2504,15 @@
|
||||
}
|
||||
totalsByPlatformBillItem[key].amount += Number(row.amount || 0);
|
||||
});
|
||||
var summaryRows = Object.keys(totalsByPlatformBillItem).map(function (key) {
|
||||
var platformBillRows = Object.keys(totalsByPlatformBillItem).map(function (key) {
|
||||
return totalsByPlatformBillItem[key];
|
||||
}).sort(function (left, right) {
|
||||
});
|
||||
var platformRows = platformBillRows.slice().sort(function (left, right) {
|
||||
return left.platform.localeCompare(right.platform, 'zh-CN')
|
||||
|| Math.abs(right.amount) - Math.abs(left.amount)
|
||||
|| left.bill_item.localeCompare(right.bill_item, 'zh-CN');
|
||||
});
|
||||
var summaryRows = platformBillRows.slice().sort(function (left, right) {
|
||||
return Math.abs(right.amount) - Math.abs(left.amount)
|
||||
|| left.platform.localeCompare(right.platform, 'zh-CN')
|
||||
|| left.bill_item.localeCompare(right.bill_item, 'zh-CN');
|
||||
@ -2467,18 +2520,22 @@
|
||||
var filteredTotal = summaryRows.reduce(function (sum, row) {
|
||||
return sum + Number(row.amount || 0);
|
||||
}, 0);
|
||||
platformCount = platformRows.length;
|
||||
summaryCount = summaryRows.length;
|
||||
detailCount = rows.length;
|
||||
renderPlatformRows(platformRows);
|
||||
renderSummaryRows(summaryRows);
|
||||
renderDetailRows(rows);
|
||||
currentTotalEl.textContent = wan(filteredTotal);
|
||||
updateFooterCount();
|
||||
platformEmptyEl.hidden = platformRows.length > 0;
|
||||
summaryEmptyEl.hidden = summaryRows.length > 0;
|
||||
detailEmptyEl.hidden = rows.length > 0;
|
||||
if (!summaryRows.length) {
|
||||
if (!platformRows.length) {
|
||||
var emptyText = allMetricRows.length
|
||||
? '当前筛选条件下没有明细。'
|
||||
: '当前筛选条件下没有可展示的明细。';
|
||||
platformEmptyEl.textContent = emptyText;
|
||||
summaryEmptyEl.textContent = emptyText;
|
||||
detailEmptyEl.textContent = emptyText;
|
||||
}
|
||||
@ -2518,6 +2575,7 @@
|
||||
var noDataText = data.balanced
|
||||
? '当前筛选条件下没有可展示的明细。'
|
||||
: '账单项目明细尚未同步，请先重跑业绩明细同步任务。';
|
||||
platformEmptyEl.textContent = noDataText;
|
||||
summaryEmptyEl.textContent = noDataText;
|
||||
detailEmptyEl.textContent = noDataText;
|
||||
}
|
||||
@ -2525,10 +2583,13 @@
|
||||
}).catch(function (error) {
|
||||
allMetricRows = [];
|
||||
resetFilterOptions();
|
||||
renderPlatformRows([]);
|
||||
renderSummaryRows([]);
|
||||
renderDetailRows([]);
|
||||
platformEmptyEl.hidden = false;
|
||||
summaryEmptyEl.hidden = false;
|
||||
detailEmptyEl.hidden = false;
|
||||
platformEmptyEl.textContent = error.message || '指标明细读取失败，请稍后重试。';
|
||||
summaryEmptyEl.textContent = error.message || '指标明细读取失败，请稍后重试。';
|
||||
detailEmptyEl.textContent = summaryEmptyEl.textContent;
|
||||
currentTotalEl.textContent = '—';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user