修正
This commit is contained in:
@@ -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
0
frontend/pages/cash-transactions.html
Normal file
0
frontend/pages/cash-transactions.html
Normal file
202
frontend/pages/cash.html
Normal file
202
frontend/pages/cash.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user