Files
njts-accounting-core/frontend/trial-balance.html
2025-12-22 17:30:32 +09:00

108 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>試算表</title>
<style>
body {
font-family: sans-serif;
margin: 24px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ccc;
padding: 6px 10px;
text-align: right;
}
th {
background: #f5f5f5;
}
td.left {
text-align: left;
}
tfoot td {
font-weight: bold;
background: #fafafa;
}
</style>
</head>
<body>
<h2>試算表</h2>
<table id="trialBalanceTable">
<thead>
<tr>
<th class="left">科目コード</th>
<th class="left">科目名称</th>
<th>期首残高</th>
<th>借方合計</th>
<th>贷方合計</th>
<th>期末残高</th>
</tr>
</thead>
<tbody>
<!-- JS 动态插入 -->
</tbody>
<tfoot>
<tr>
<td colspan="2" class="left">合計</td>
<td id="totalOpening">0</td>
<td id="totalDebit">0</td>
<td id="totalCredit">0</td>
<td id="totalClosing">0</td>
</tr>
</tfoot>
</table>
<script>
const API_BASE = "http://127.0.0.1:18080"; // 和你后端一致
async function loadTrialBalance() {
const res = await fetch(`${API_BASE}/trial-balance`);
if (!res.ok) {
alert("試算表の取得に失敗しました");
return;
}
const data = await res.json();
const tbody = document.querySelector("#trialBalanceTable tbody");
tbody.innerHTML = "";
data.accounts.forEach((acc) => {
const tr = document.createElement("tr");
tr.innerHTML = `
<td class="left">${acc.account_code}</td>
<td class="left">${acc.account_name}</td>
<td>${Number(acc.opening_balance).toLocaleString()}</td>
<td>${Number(acc.debit).toLocaleString()}</td>
<td>${Number(acc.credit).toLocaleString()}</td>
<td>${Number(acc.closing_balance).toLocaleString()}</td>
`;
tbody.appendChild(tr);
});
// totals
document.getElementById("totalOpening").innerText = Number(
data.totals.opening_balance
).toLocaleString();
document.getElementById("totalDebit").innerText = Number(
data.totals.debit
).toLocaleString();
document.getElementById("totalCredit").innerText = Number(
data.totals.credit
).toLocaleString();
document.getElementById("totalClosing").innerText = Number(
data.totals.closing_balance
).toLocaleString();
}
loadTrialBalance();
</script>
</body>
</html>