126 lines
4.2 KiB
JavaScript
126 lines
4.2 KiB
JavaScript
Router.register('/shipments/summary', async () => {
|
|
setTimeout(async () => {
|
|
const queryBtn = document.getElementById('summary-query-btn');
|
|
const startDateInput = document.getElementById('start-date');
|
|
const endDateInput = document.getElementById('end-date');
|
|
const resultDiv = document.getElementById('summary-result');
|
|
|
|
// 设置默认日期为当前月份
|
|
const now = new Date();
|
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
|
|
|
if (startDateInput) {
|
|
startDateInput.value = firstDay.toISOString().split('T')[0];
|
|
}
|
|
if (endDateInput) {
|
|
endDateInput.value = lastDay.toISOString().split('T')[0];
|
|
}
|
|
|
|
const performQuery = async () => {
|
|
const startDate = startDateInput?.value;
|
|
const endDate = endDateInput?.value;
|
|
|
|
if (!startDate || !endDate) {
|
|
resultDiv.innerHTML = '<div class="error">请选择开始和结束日期</div>';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
resultDiv.innerHTML = '<div>查询中...</div>';
|
|
|
|
const res = await fetch(`/api/shipments/summary?start=${encodeURIComponent(startDate)}&end=${encodeURIComponent(endDate)}`, {
|
|
credentials: 'include'
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.records && data.records.length > 0) {
|
|
const totalQty = data.records.reduce((sum, r) => sum + (r.qty || 0), 0);
|
|
|
|
const tableRows = data.records.map(record => `
|
|
<tr>
|
|
<td>${record.date}</td>
|
|
<td>${record.qty}</td>
|
|
<td>${record.receiver || '-'}</td>
|
|
<td>${record.ts || '-'}</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
resultDiv.innerHTML = `
|
|
<div style="margin-bottom:16px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px">
|
|
<div style="display:flex;align-items:center;gap:16px">
|
|
<div>
|
|
<div style="color:var(--text-2);font-size:14px">查询时间段</div>
|
|
<div style="font-weight:600;margin-top:4px">${startDate} 至 ${endDate}</div>
|
|
</div>
|
|
<div style="margin-left:auto">
|
|
<div style="color:var(--text-2);font-size:14px">总出货数量</div>
|
|
<div style="font-weight:600;font-size:24px;color:var(--primary);margin-top:4px">${totalQty}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="overflow-x:auto">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>发货日期</th>
|
|
<th>数量</th>
|
|
<th>收货方</th>
|
|
<th>录入时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${tableRows}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
} else {
|
|
resultDiv.innerHTML = `
|
|
<div class="result-card error">
|
|
<div class="result-title">未找到记录</div>
|
|
<div class="result-item">该时间段内没有发货记录</div>
|
|
</div>
|
|
`;
|
|
}
|
|
} catch (e) {
|
|
resultDiv.innerHTML = `<div class="error">查询失败：${e.message}</div>`;
|
|
}
|
|
};
|
|
|
|
queryBtn?.addEventListener('click', performQuery);
|
|
|
|
// 自动执行一次查询
|
|
performQuery();
|
|
}, 0);
|
|
|
|
return `<div class="card">
|
|
<div style="font-weight:600;margin-bottom:16px">发货汇总信息查询</div>
|
|
|
|
<div style="margin-bottom:16px">
|
|
<div class="grid cols-2" style="margin-bottom:12px">
|
|
<div class="field">
|
|
<label>开始日期</label>
|
|
<input
|
|
id="start-date"
|
|
type="date"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="field">
|
|
<label>结束日期</label>
|
|
<input
|
|
id="end-date"
|
|
type="date"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button class="btn" id="summary-query-btn">查询</button>
|
|
</div>
|
|
|
|
<div id="summary-result"></div>
|
|
</div>`;
|
|
});
|