97 lines
2.6 KiB
HTML
97 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>资金流水</title>
|
||
</head>
|
||
<body>
|
||
<h2>📄 资金流水</h2>
|
||
|
||
<div>
|
||
<label>账户ID：</label>
|
||
<input id="accountId" type="number" value="101" style="width: 80px" />
|
||
<label>从：</label>
|
||
<input id="fromDate" type="date" />
|
||
<label>到：</label>
|
||
<input id="toDate" type="date" />
|
||
<button onclick="loadTransactions()">查询</button>
|
||
</div>
|
||
|
||
<table
|
||
border="1"
|
||
cellpadding="6"
|
||
style="margin-top: 10px; border-collapse: collapse"
|
||
>
|
||
<thead>
|
||
<tr>
|
||
<th>日期</th>
|
||
<th>摘要</th>
|
||
<th style="text-align: right">金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="txBody">
|
||
<tr>
|
||
<td colspan="3">请输入条件后查询</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<script>
|
||
function formatYen(v) {
|
||
return "¥ " + Number(v).toLocaleString("ja-JP");
|
||
}
|
||
|
||
async function loadTransactions() {
|
||
const accountId = document.getElementById("accountId").value;
|
||
const from = document.getElementById("fromDate").value;
|
||
const to = document.getElementById("toDate").value;
|
||
|
||
let url = `/cash/transactions?account_id=${accountId}`;
|
||
if (from) url += `&from=${from}`;
|
||
if (to) url += `&to=${to}`;
|
||
|
||
const body = document.getElementById("txBody");
|
||
body.innerHTML = "<tr><td colspan='3'>读取中...</td></tr>";
|
||
|
||
try {
|
||
const res = await fetch(url);
|
||
const data = await res.json();
|
||
|
||
body.innerHTML = "";
|
||
if (data.length === 0) {
|
||
body.innerHTML = "<tr><td colspan='3'>无数据</td></tr>";
|
||
return;
|
||
}
|
||
|
||
data.forEach((row) => {
|
||
const tr = document.createElement("tr");
|
||
tr.innerHTML = `
|
||
<td>${row.journal_date}</td>
|
||
<td>${row.description}</td>
|
||
<td style="text-align:right;color:${row.amount < 0 ? "red" : "black"};">
|
||
${formatYen(row.amount)}
|
||
</td>
|
||
`;
|
||
body.appendChild(tr);
|
||
});
|
||
} catch (e) {
|
||
body.innerHTML = "<tr><td colspan='3'>读取失败</td></tr>";
|
||
}
|
||
}
|
||
|
||
function getQueryParam(name) {
|
||
const params = new URLSearchParams(window.location.search);
|
||
return params.get(name);
|
||
}
|
||
|
||
window.onload = () => {
|
||
const accountId = getQueryParam("account_id");
|
||
if (accountId) {
|
||
document.getElementById("accountId").value = accountId;
|
||
loadTransactions();
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|