418 lines
11 KiB
HTML
418 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<script src="js/auth.js"></script>
|
||
<title>試算表</title>
|
||
<link rel="stylesheet" href="css/style.css" />
|
||
<link rel="stylesheet" href="/css/mobile.css" />
|
||
<style>
|
||
body {
|
||
font-family: "MS Gothic", "Meiryo", sans-serif;
|
||
margin: 24px auto;
|
||
font-size: 15px;
|
||
max-width: 1400px;
|
||
}
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 20px;
|
||
}
|
||
.search-form {
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background: #f5f5f5;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.search-form label {
|
||
margin-right: 5px;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
.search-form input {
|
||
margin-right: 15px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #999;
|
||
border-radius: 3px;
|
||
font-size: 14px;
|
||
}
|
||
.search-form button {
|
||
padding: 6px 20px;
|
||
margin: 0 5px;
|
||
background: #4caf50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.search-form button:hover {
|
||
background: #45a049;
|
||
}
|
||
.search-form button.secondary {
|
||
background: #2196f3;
|
||
}
|
||
.search-form button.secondary:hover {
|
||
background: #0b7dda;
|
||
}
|
||
.period-info {
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
th,
|
||
td {
|
||
border: 1px solid #999;
|
||
padding: 8px 10px;
|
||
text-align: right;
|
||
}
|
||
th {
|
||
background: #e8e8e8;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
td.left {
|
||
text-align: left;
|
||
}
|
||
td.right {
|
||
text-align: right;
|
||
}
|
||
td.center,
|
||
th.center {
|
||
text-align: center;
|
||
}
|
||
tr.total-row td {
|
||
background-color: #d8d8d8 !important;
|
||
font-weight: bold;
|
||
border-top: 2px solid #666;
|
||
}
|
||
tr.indent-row td:nth-child(2) {
|
||
padding-left: 40px !important;
|
||
}
|
||
.print-button {
|
||
background: #ff9800;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
margin-left: 10px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.print-button:hover {
|
||
background: #e68900;
|
||
}
|
||
/* 画面表示時：thead内の印刷用ヘッダー行を非表示 */
|
||
tr.print-header-title,
|
||
tr.print-header-period,
|
||
tr.print-header-meta {
|
||
display: none;
|
||
}
|
||
|
||
.print-header-cell {
|
||
border: none !important;
|
||
background: none !important;
|
||
background-color: white !important;
|
||
padding: 2px 5px !important;
|
||
}
|
||
|
||
@media print {
|
||
* {
|
||
-webkit-print-color-adjust: exact !important;
|
||
print-color-adjust: exact !important;
|
||
color-adjust: exact !important;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* 画面用の要素を印刷時に隠す */
|
||
#printDate,
|
||
h2,
|
||
.period-info,
|
||
.back-button,
|
||
.search-form,
|
||
.print-button,
|
||
#loadingStatus {
|
||
display: none !important;
|
||
}
|
||
|
||
/* thead内の印刷用ヘッダー行を表示 */
|
||
tr.print-header-title,
|
||
tr.print-header-period,
|
||
tr.print-header-meta {
|
||
display: table-row !important;
|
||
}
|
||
|
||
.print-header-cell {
|
||
border: none !important;
|
||
background: none !important;
|
||
background-color: white !important;
|
||
padding: 3px 5px !important;
|
||
}
|
||
|
||
/* 印刷時の単位・印刷日のスタイリング */
|
||
tr.print-header-meta th {
|
||
border: none !important;
|
||
background: none !important;
|
||
padding: 2px 5px !important;
|
||
text-align: right !important;
|
||
}
|
||
|
||
tr.print-header-meta th:last-child {
|
||
text-align: right !important;
|
||
}
|
||
|
||
tr.print-header-meta div {
|
||
text-align: right !important;
|
||
font-size: 10px !important;
|
||
font-weight: normal !important;
|
||
display: block !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
#theadPrintDate {
|
||
text-align: right !important;
|
||
align-items: center !important;
|
||
flex-wrap: wrap !important;
|
||
gap: 20px !important;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
thead {
|
||
display: table-header-group;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
tfoot {
|
||
display: none !important;
|
||
}
|
||
|
||
th {
|
||
background: #e8e8e8 !important;
|
||
font-weight: bold;
|
||
padding: 5px 6px;
|
||
border: 1px solid #666;
|
||
page-break-inside: avoid;
|
||
font-size: 11px;
|
||
}
|
||
|
||
td {
|
||
border: 1px solid #666;
|
||
padding: 4px 5px;
|
||
font-size: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
tr.total-row td {
|
||
background-color: #d8d8d8 !important;
|
||
font-weight: bold;
|
||
border-top: 2px solid #333;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
tbody tr {
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
tr.indent-row td:nth-child(2) {
|
||
padding-left: 20px !important;
|
||
}
|
||
|
||
td.left {
|
||
text-align: left;
|
||
white-space: normal;
|
||
}
|
||
|
||
td.right {
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
td.center,
|
||
th.center {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
@page {
|
||
size: A4 portrait;
|
||
margin-top: 10mm;
|
||
margin-bottom: 20mm;
|
||
margin-left: 10mm;
|
||
margin-right: 10mm;
|
||
|
||
@bottom-center {
|
||
content: "第 " counter(page) " 页";
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a
|
||
href="index.html"
|
||
style="
|
||
display: inline-block;
|
||
margin: 0 0 20px 0;
|
||
padding: 6px 16px;
|
||
background: #757575;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
"
|
||
>← メニューへ戻る</a
|
||
>
|
||
|
||
<h2>残高試算表（貸借・損益）</h2>
|
||
|
||
<div
|
||
id="loadingStatus"
|
||
style="display: none; color: #666; font-size: 12px; margin: 10px 0"
|
||
>
|
||
読み込み中...
|
||
</div>
|
||
|
||
<div class="search-form">
|
||
<label for="fiscalYear">年度：</label>
|
||
<select
|
||
id="fiscalYear"
|
||
style="
|
||
padding: 4px 8px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
font-size: 13px;
|
||
min-width: 200px;
|
||
"
|
||
>
|
||
<option value="">-- 選択してください --</option>
|
||
</select>
|
||
|
||
<label for="dateFrom">開始年月日:</label>
|
||
<input type="date" id="dateFrom" min="1900-01-01" max="2099-12-31" />
|
||
|
||
<label for="dateTo">終了年月日:</label>
|
||
<input type="date" id="dateTo" min="1900-01-01" max="2099-12-31" />
|
||
|
||
<button id="btnSearch">検索</button>
|
||
<button id="btnFullYear" class="secondary">全年度表示</button>
|
||
<button id="btnPrint" class="print-button">印刷</button>
|
||
</div>
|
||
|
||
<div class="period-info">
|
||
<span id="periodInfo">令和7年 1月 1日 ～ 令和7年 12月31日</span>
|
||
<span style="margin-left: 20px; float: right">単位: 円</span>
|
||
</div>
|
||
|
||
<table id="trialBalanceTable">
|
||
<thead>
|
||
<tr class="print-header-title">
|
||
<th
|
||
colspan="7"
|
||
class="print-header-cell"
|
||
style="text-align: center; font-size: 14px; font-weight: bold"
|
||
>
|
||
残高試算表（貸借・損益）
|
||
</th>
|
||
</tr>
|
||
<tr class="print-header-period">
|
||
<th
|
||
colspan="7"
|
||
class="print-header-cell"
|
||
style="text-align: center; font-size: 11px; font-weight: normal"
|
||
id="theadPeriodInfo"
|
||
></th>
|
||
</tr>
|
||
<tr class="print-header-meta">
|
||
<th colspan="5" class="print-header-cell"></th>
|
||
<th
|
||
colspan="2"
|
||
class="print-header-cell"
|
||
style="text-align: right !important; padding: 2px 5px"
|
||
>
|
||
<div
|
||
style="
|
||
text-align: right !important;
|
||
font-size: 10px;
|
||
line-height: 1.2;
|
||
display: block;
|
||
width: 100%;
|
||
"
|
||
id="theadPrintDate"
|
||
>
|
||
印刷日：2026年2月25日
|
||
</div>
|
||
<div
|
||
style="
|
||
text-align: right !important;
|
||
font-size: 10px;
|
||
line-height: 1.2;
|
||
display: block;
|
||
width: 100%;
|
||
"
|
||
>
|
||
単位：円
|
||
</div>
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<th class="left">科目コード</th>
|
||
<th class="center">科目名称</th>
|
||
<th>期首残高</th>
|
||
<th>借方発生額</th>
|
||
<th>貸方発生額</th>
|
||
<th>期末残高</th>
|
||
<th>構成比(%)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- JS 动态插入 -->
|
||
</tbody>
|
||
</table>
|
||
|
||
<script src="js/trial-balance.js"></script>
|
||
|
||
<!-- 立即初始化脚本：iOS Safari 的外部脚本加载问题的备选方案 -->
|
||
<script>
|
||
// 确保脚本被加载和执行
|
||
console.log("trial-balance.html inline script 执行中...");
|
||
|
||
if (typeof initTrialBalance === "function") {
|
||
console.log("initTrialBalance 函数が見つかりました, 実行します");
|
||
initTrialBalance();
|
||
} else {
|
||
console.warn(
|
||
"initTrialBalance 関数が見つかりません。js/trial-balance.js が読み込まれていない可能性があります",
|
||
);
|
||
// タイムアウトで再度チェック
|
||
setTimeout(() => {
|
||
if (typeof initTrialBalance === "function") {
|
||
console.log("遅延実行: initTrialBalance を実行します");
|
||
initTrialBalance();
|
||
} else {
|
||
console.error("js/trial-balance.js が読み込まれていません！");
|
||
}
|
||
}, 500);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|