This commit is contained in:
admin
2025-12-22 17:30:32 +09:00
parent 87fa1aaa1f
commit 001b7bf08f
12 changed files with 1380 additions and 506 deletions

View File

@@ -30,7 +30,67 @@
<tbody></tbody>
</table>
<h3>💰 当前资金状况</h3>
<table border="1" cellpadding="6" style="border-collapse: collapse">
<thead>
<tr style="background: #f5f5f5">
<th>账户</th>
<th style="text-align: right">余额</th>
</tr>
</thead>
<tbody id="cashBalanceBody">
<tr>
<td colspan="2">读取中...</td>
</tr>
</tbody>
<tfoot>
<tr style="font-weight: bold">
<td>合计</td>
<td id="cashBalanceTotal" style="text-align: right">-</td>
</tr>
</tfoot>
</table>
<script src="js/api.js"></script>
<script src="js/trial_balance.js"></script>
<script>
const API_BASE = "http://127.0.0.1:18080";
function formatYen(v) {
return "¥ " + Number(v).toLocaleString("ja-JP");
}
async function loadCashBalance() {
const body = document.getElementById("cashBalanceBody");
const totalEl = document.getElementById("cashBalanceTotal");
body.innerHTML = "<tr><td colspan='2'>读取中...</td></tr>";
totalEl.innerText = "-";
try {
const res = await fetch(`${API_BASE}/cash/balance`);
const data = await res.json();
body.innerHTML = "";
data.items.forEach((item) => {
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${item.account_name}</td>
<td style="text-align:right;">${formatYen(item.balance)}</td>
`;
body.appendChild(tr);
});
totalEl.innerText = formatYen(data.total_balance);
} catch (e) {
body.innerHTML = `<tr><td colspan="2">读取失败</td></tr>`;
}
}
// 页面加载时自动读取
window.addEventListener("DOMContentLoaded", loadCashBalance);
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

202
frontend/pages/cash.html Normal file
View File

@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>資金状況</title>
<style>
body {
font-family: sans-serif;
margin: 24px;
}
h2,
h3 {
margin-top: 0;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 12px;
}
th,
td {
border: 1px solid #ccc;
padding: 6px;
text-align: right;
}
th {
background: #f5f5f5;
}
th.left,
td.left {
text-align: left;
}
.total {
font-weight: bold;
background: #f0f0f0;
}
.filter {
margin: 8px 0;
display: flex;
gap: 12px;
align-items: center;
}
input,
select,
button {
padding: 4px 6px;
}
</style>
</head>
<body>
<h2>💰 現在の資金状況</h2>
<!-- 残高 -->
<table id="balanceTable">
<thead>
<tr>
<th class="left">口座</th>
<th>残高</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr class="total">
<td class="left">合計</td>
<td id="totalBalance">-</td>
</tr>
</tfoot>
</table>
<hr />
<h3>📄 資金流水</h3>
<!-- 条件 -->
<div class="filter">
<label>口座:</label>
<select id="accountSelect"></select>
<label>期間:</label>
<input type="date" id="fromDate" />
<input type="date" id="toDate" />
<button onclick="reloadTransactions()">表示</button>
</div>
<!-- 流水表 -->
<table id="txTable">
<thead>
<tr>
<th class="left">日付</th>
<th class="left">摘要</th>
<th class="left">相手科目</th>
<th>入金</th>
<th>出金</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const API = "http://127.0.0.1:8000";
// --------------------
// 初期化
// --------------------
async function init() {
await loadBalances();
await loadAccounts();
// 初期期間:当月
const now = new Date();
const first = new Date(now.getFullYear(), now.getMonth(), 1);
document.getElementById("fromDate").value = first
.toISOString()
.slice(0, 10);
document.getElementById("toDate").value = now
.toISOString()
.slice(0, 10);
}
init();
// --------------------
// 残高
// --------------------
async function loadBalances() {
const res = await fetch(`${API}/cash/balance`);
const data = await res.json();
const tbody = document.querySelector("#balanceTable tbody");
tbody.innerHTML = "";
data.items.forEach((i) => {
tbody.innerHTML += `
<tr>
<td class="left">${i.account_name}</td>
<td>${Number(i.balance).toLocaleString()}</td>
</tr>`;
});
document.getElementById("totalBalance").innerText = Number(
data.total_balance
).toLocaleString();
}
// --------------------
// 口座一覧
// --------------------
async function loadAccounts() {
const res = await fetch(`${API}/cash/balance`);
const data = await res.json();
const sel = document.getElementById("accountSelect");
sel.innerHTML = data.items
.map(
(i) => `<option value="${i.account_id}">${i.account_name}</option>`
)
.join("");
reloadTransactions();
}
// --------------------
// 再表示
// --------------------
function reloadTransactions() {
const accountId = document.getElementById("accountSelect").value;
const from = document.getElementById("fromDate").value;
const to = document.getElementById("toDate").value;
loadTransactions(accountId, from, to);
}
// --------------------
// 流水
// --------------------
async function loadTransactions(accountId, from, to) {
let url = `${API}/cash/transactions?account_id=${accountId}`;
if (from) url += `&from=${from}`;
if (to) url += `&to=${to}`;
const res = await fetch(url);
const rows = await res.json();
const tbody = document.querySelector("#txTable tbody");
tbody.innerHTML = "";
rows.forEach((r) => {
tbody.innerHTML += `
<tr>
<td class="left">${r.journal_date}</td>
<td class="left">${r.description}</td>
<td class="left">${r.counter_account}</td>
<td>${r.amount > 0 ? r.amount.toLocaleString() : ""}</td>
<td>${r.amount < 0 ? (-r.amount).toLocaleString() : ""}</td>
</tr>`;
});
}
</script>
</body>
</html>

View File

@@ -1,56 +1,107 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>算表</title>
<style>
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>
<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>
<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>
<table id="trialBalanceTable">
<thead>
<tr>
<th>科目代码</th>
<th>科目名称</th>
<th>借方合计</th>
<th>贷方合计</th>
</tr>
</thead>
<tbody>
<!-- JS 动态插入 -->
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<td id="totalDebit">0</td>
<td id="totalCredit">0</td>
</tr>
</tfoot>
</table>
<script>
const API_BASE = "http://127.0.0.1:18080"; // 和你后端一致
<script src="./js/trial-balance.js"></script>
async function loadTrialBalance() {
const res = await fetch(`${API_BASE}/trial-balance`);
if (!res.ok) {
alert("試算表の取得に失敗しました");
return;
}
</body>
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>