refactor: merge channel groups into single list in matrix
This commit is contained in:
+12
-23
@@ -550,7 +550,7 @@
|
|||||||
|
|
||||||
function renderMatrix() {
|
function renderMatrix() {
|
||||||
// 列 = 产品(按 pkg 区分,同名产品用地区区分显示);行 = 渠道
|
// 列 = 产品(按 pkg 区分,同名产品用地区区分显示);行 = 渠道
|
||||||
// 每个订单条目是一列
|
// 每个订单条目是一列,代投+自投渠道合并
|
||||||
const cols = orderData.map(o => ({
|
const cols = orderData.map(o => ({
|
||||||
key: o.pkg,
|
key: o.pkg,
|
||||||
label: o.product,
|
label: o.product,
|
||||||
@@ -559,15 +559,13 @@
|
|||||||
channels: new Set([...(o.agency_channels||[]), ...(o.self_channels||[])])
|
channels: new Set([...(o.agency_channels||[]), ...(o.self_channels||[])])
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// 收集所有渠道,分代投 / 自投两组
|
// 收集所有渠道(代投+自投合并去重,保持出现顺序)
|
||||||
const agencySet = new Set();
|
const channels = [];
|
||||||
const selfSet = new Set();
|
|
||||||
orderData.forEach(o => {
|
orderData.forEach(o => {
|
||||||
(o.agency_channels||[]).forEach(c => agencySet.add(c));
|
[...(o.agency_channels||[]), ...(o.self_channels||[])].forEach(c => {
|
||||||
(o.self_channels||[]).forEach(c => selfSet.add(c));
|
if (!channels.includes(c)) channels.push(c);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
const agencyChannels = [...agencySet];
|
|
||||||
const selfChannels = [...selfSet];
|
|
||||||
|
|
||||||
// 表头
|
// 表头
|
||||||
const thead = document.querySelector('#matrixTable thead');
|
const thead = document.querySelector('#matrixTable thead');
|
||||||
@@ -588,22 +586,13 @@
|
|||||||
return `<td style="text-align:center;"><span class="status-badge ${cls}" style="padding:2px 8px;font-size:10px;">${col.status}</span></td>`;
|
return `<td style="text-align:center;"><span class="status-badge ${cls}" style="padding:2px 8px;font-size:10px;">${col.status}</span></td>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const groupRows = (title, channels) => {
|
|
||||||
if (!channels.length) return '';
|
|
||||||
let html = `<tr><td colspan="${cols.length+1}" style="background:#eef2ff;font-weight:700;color:#4338ca;font-size:12px;">${title}</td></tr>`;
|
|
||||||
html += channels.map(ch => `
|
|
||||||
<tr>
|
|
||||||
<td style="position:sticky;left:0;background:#fff;font-weight:500;">${ch}</td>
|
|
||||||
${cols.map(col => cell(col, ch)).join('')}
|
|
||||||
</tr>
|
|
||||||
`).join('');
|
|
||||||
return html;
|
|
||||||
};
|
|
||||||
|
|
||||||
const tbody = document.querySelector('#matrixTable tbody');
|
const tbody = document.querySelector('#matrixTable tbody');
|
||||||
tbody.innerHTML =
|
tbody.innerHTML = channels.map(ch => `
|
||||||
groupRows('代投渠道', agencyChannels) +
|
<tr>
|
||||||
groupRows('平台自投渠道', selfChannels);
|
<td style="position:sticky;left:0;background:#fff;font-weight:500;">${ch}</td>
|
||||||
|
${cols.map(col => cell(col, ch)).join('')}
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
function populateFilters() {
|
function populateFilters() {
|
||||||
|
|||||||
Reference in New Issue
Block a user