350 lines
10 KiB
HTML
350 lines
10 KiB
HTML
<!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>
|