帳票出力作成

2026-02-01 20:13:52 +09:00
parent 0ac598ce2b
commit a2d7b54cd3
9 changed files with 2352 additions and 72 deletions
--- a/frontend/payroll-calculation.html
+++ b/frontend/payroll-calculation.html
--- a/frontend/voucher-export-test.html
+++ b/frontend/voucher-export-test.html
@@ -0,0 +1,349 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>账票出力 - UI テスト</title>
+    <style>
+      body {
+        font-family: "Arial", sans-serif;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+        background: #f5f5f5;
+      }
+      .test-section {
+        background: white;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 5px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .test-item {
+        padding: 10px;
+        margin: 5px 0;
+        border-left: 4px solid #007bff;
+        background: #f9f9f9;
+      }
+      .test-item.pass {
+        border-left-color: #28a745;
+        background: #e8f5e9;
+      }
+      .test-item.fail {
+        border-left-color: #dc3545;
+        background: #ffebee;
+      }
+      button {
+        padding: 10px 20px;
+        margin: 5px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      .btn-primary {
+        background: #007bff;
+        color: white;
+      }
+      .btn-success {
+        background: #28a745;
+        color: white;
+      }
+      .btn-danger {
+        background: #dc3545;
+        color: white;
+      }
+      code {
+        background: #f4f4f4;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: "Courier New", monospace;
+      }
+      h2 {
+        color: #333;
+        border-bottom: 2px solid #007bff;
+        padding-bottom: 10px;
+      }
+      pre {
+        background: #f4f4f4;
+        padding: 15px;
+        border-radius: 5px;
+        overflow-x: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>📄 账票出力機能 - UIテスト</h1>
+
+    <div class="test-section">
+      <h2>機能テストチェックリスト</h2>
+
+      <div class="test-item">
+        <strong>✓ 新しいTab「📄 账票出力」が追加されている</strong><br />
+        <code>payroll-calculation.html</code> に新しいTab按钮が追加されました。
+      </div>
+
+      <div class="test-item">
+        <strong>✓ フォーム入力要素が実装されている</strong><br />
+        期間選択、従業員選択、支払タイプが実装されました。
+      </div>
+
+      <div class="test-item">
+        <strong>✓ プレビュー・CSV出力ボタンが用意されている</strong><br />
+        <code>previewVouchers()</code> と
+        <code>exportVouchersCSV()</code> 関数が実装されました。
+      </div>
+
+      <div class="test-item">
+        <strong>✓ 無データアラートモーダルが実装されている</strong><br />
+        <code>showNoDataAlert()</code> 関数でモーダルダイアログを表示します。
+      </div>
+    </div>
+
+    <div class="test-section">
+      <h2>API統合確認</h2>
+
+      <p>以下のAPIが正しく統合されています:</p>
+      <ul>
+        <li><code>GET /payroll/vouchers/employees</code> - 従業員リスト取得</li>
+        <li>
+          <code>POST /payroll/vouchers/export</code> -
+          账票出力（プレビュー・CSV）
+        </li>
+      </ul>
+
+      <div
+        style="
+          background: #f0f8ff;
+          padding: 15px;
+          border-radius: 5px;
+          margin: 15px 0;
+        "
+      >
+        <h3 style="margin-top: 0">プレビューAPI呼び出し例</h3>
+        <pre>
+{
+  "start_year": 2026,
+  "start_month": 1,
+  "end_year": 2026,
+  "end_month": 1,
+  "employee_ids": [1],
+  "voucher_type": "all",
+  "format": "preview"
+}</pre
+        >
+      </div>
+    </div>
+
+    <div class="test-section">
+      <h2>実装された機能一覧</h2>
+
+      <h3>【フロントエンド】</h3>
+      <ul>
+        <li>✓ 期間選択（開始年月～終了年月）</li>
+        <li>✓ 従業員マルチセレクト（全選択・全解除機能付き）</li>
+        <li>✓ 支払タイプ選択（給与・賞与・両方）</li>
+        <li>✓ プレビュー表示</li>
+        <li>✓ CSV出力</li>
+        <li>✓ 無データ提示</li>
+        <li>✓ 結果摘要表示</li>
+      </ul>
+
+      <h3>【バックエンド】</h3>
+      <ul>
+        <li>✓ 時間範囲検証</li>
+        <li>✓ 従業員ID検証</li>
+        <li>✓ 给与・賞与デ タ取得</li>
+        <li>✓ データ存在判定</li>
+        <li>✓ 詳細摘要生成</li>
+        <li>✓ エラー処理</li>
+      </ul>
+    </div>
+
+    <div class="test-section">
+      <h2>ユーザーフロー</h2>
+
+      <ol>
+        <li>
+          <strong>「📄 账票出力」Tabをクリック</strong>
+          <div class="test-item">従業員リストが自動的に読み込まれます</div>
+        </li>
+
+        <li>
+          <strong>期間を選択</strong>
+          <div class="test-item">
+            開始年月は必須、終了年月は任意（単月指定の場合は開始年月のみ）
+          </div>
+        </li>
+
+        <li>
+          <strong>従業員を選択</strong>
+          <div class="test-item">
+            複数選択可能。「全選択」「全解除」ボタンで一括操作可能
+          </div>
+        </li>
+
+        <li>
+          <strong>支払タイプを選択</strong>
+          <div class="test-item">
+            「給与・賞与両方」「給与のみ」「賞与のみ」から選択
+          </div>
+        </li>
+
+        <li>
+          <strong>「プレビュー」ボタンをクリック</strong>
+          <div class="test-item">
+            以下の場合が想定されます：
+            <ul style="margin: 5px 0">
+              <li><strong>有データ：</strong>結果摘要と詳細データが表示</li>
+              <li><strong>無データ：</strong>提示ダイアログが表示</li>
+            </ul>
+          </div>
+        </li>
+
+        <li>
+          <strong>「CSV出力」ボタン</strong>
+          <div class="test-item">データをCSV形式でダウンロード可能</div>
+        </li>
+      </ol>
+    </div>
+
+    <div class="test-section">
+      <h2>テスト手順</h2>
+
+      <button class="btn-primary" onclick="startServerTest()">
+        1. サーバー起動確認
+      </button>
+      <button class="btn-primary" onclick="testAPIEmployees()">
+        2. 従業員API確認
+      </button>
+      <button class="btn-primary" onclick="testAPIExport()">
+        3. エクスポートAPI確認
+      </button>
+      <button class="btn-success" onclick="openPayrollPage()">
+        4. payroll-calculation.htmlを開く
+      </button>
+
+      <div id="testResults" style="margin-top: 20px"></div>
+    </div>
+
+    <div class="test-section">
+      <h2>対応状況</h2>
+
+      <div class="test-item pass">
+        <strong>✓ 第1段階: 後端APIの実装</strong><br />
+        ✓ 5つのAPI端点 ✓ データ検証・エラー処理 ✓ 無データ提示
+      </div>
+
+      <div class="test-item pass">
+        <strong>✓ 第2段階: フロントエンドUI実装</strong><br />
+        ✓ 新Tabの追加 ✓ フォーム要素の実装 ✓ API統合 ✓ プレビュー表示 ✓ CSV出力
+        ✓ エラー処理
+      </div>
+
+      <div class="test-item">
+        <strong>⏳ 第3段階: PDF生成（将来実装予定）</strong><br />
+        reportlab統合、PDF生成ロジック
+      </div>
+    </div>
+
+    <div class="test-section">
+      <h2>次のステップ</h2>
+
+      <ol>
+        <li>
+          サーバーを起動:
+          <code
+            >cd backend && python -m uvicorn app.main:app --reload --port
+            8000</code
+          >
+        </li>
+        <li>payroll-calculation.htmlを訪問</li>
+        <li>「📄 账票出力」Tabをクリック</li>
+        <li>条件を入力してプレビュー</li>
+        <li>CSV出力をテスト</li>
+      </ol>
+    </div>
+
+    <script>
+      const API_BASE = "http://localhost:8000";
+
+      function addTestResult(message, status = "info") {
+        const div = document.getElementById("testResults");
+        const element = document.createElement("div");
+        element.className = `test-item ${status === "pass" ? "pass" : status === "fail" ? "fail" : ""}`;
+        element.textContent = message;
+        div.appendChild(element);
+        div.scrollIntoView({ behavior: "smooth" });
+      }
+
+      async function startServerTest() {
+        addTestResult("サーバー接続確認中...");
+        try {
+          const response = await fetch(API_BASE + "/docs");
+          if (response.ok) {
+            addTestResult("✓ サーバーが起動しています", "pass");
+          } else {
+            addTestResult(
+              "✗ サーバーレスポンスエラー: " + response.status,
+              "fail",
+            );
+          }
+        } catch (error) {
+          addTestResult("✗ サーバーに接続できません: " + error.message, "fail");
+        }
+      }
+
+      async function testAPIEmployees() {
+        addTestResult("従業員API確認中...");
+        try {
+          const response = await fetch(
+            API_BASE + "/payroll/vouchers/employees",
+          );
+          const data = await response.json();
+          addTestResult(
+            `✓ 従業員API成功: ${data.total}人の従業員が取得できました`,
+            "pass",
+          );
+        } catch (error) {
+          addTestResult("✗ 従業員API失敗: " + error.message, "fail");
+        }
+      }
+
+      async function testAPIExport() {
+        addTestResult("エクスポートAPI確認中...");
+        try {
+          const payload = {
+            start_year: 2026,
+            start_month: 1,
+            employee_ids: [1],
+            voucher_type: "all",
+            format: "preview",
+          };
+          const response = await fetch(API_BASE + "/payroll/vouchers/export", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          });
+          const data = await response.json();
+          addTestResult(
+            `✓ エクスポートAPI成功: ステータス=${data.status}`,
+            "pass",
+          );
+        } catch (error) {
+          addTestResult("✗ エクスポートAPI失敗: " + error.message, "fail");
+        }
+      }
+
+      function openPayrollPage() {
+        addTestResult("payroll-calculation.htmlを開いています...");
+        window.open("/payroll-calculation.html", "_blank");
+        setTimeout(() => {
+          addTestResult(
+            "✓ payroll-calculation.htmlをブラウザで開きました",
+            "pass",
+          );
+        }, 1000);
+      }
+    </script>
+  </body>
+</html>