給与管理システム新規作成
This commit is contained in:
admin
378
frontend/payroll-salary-settings.html
Normal file
378
frontend/payroll-salary-settings.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>給与管理 - 給与設定</title>
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<style>
|
||||
.employee-select {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
margin-right: 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
table th {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>給与管理 - 給与設定</h1>
|
||||
|
||||
<div class="employee-select">
|
||||
<label><strong>従業員を選択:</strong></label>
|
||||
<select id="employeeSelect" onchange="loadSalarySettings()">
|
||||
<option value="">従業員を選択してください</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="settingsContent" style="display: none">
|
||||
<h2>給与設定履歴</h2>
|
||||
<button class="btn btn-primary" onclick="showAddForm()">
|
||||
新規設定追加
|
||||
</button>
|
||||
<div id="settingsList"></div>
|
||||
|
||||
<div
|
||||
id="addForm"
|
||||
style="
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<h3>給与設定の追加</h3>
|
||||
<form onsubmit="saveSalarySetting(event)">
|
||||
<div class="form-group">
|
||||
<label>基本給 (円) *</label>
|
||||
<input type="number" name="base_salary" step="0.01" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>時給 (円)</label>
|
||||
<input type="number" name="hourly_rate" step="0.01" />
|
||||
<small>時給制の場合に入力してください</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>雇用形態 *</label>
|
||||
<select name="employment_type" required>
|
||||
<option value="">選択してください</option>
|
||||
<option value="正社員">正社員</option>
|
||||
<option value="契約社員">契約社員</option>
|
||||
<option value="パート">パート</option>
|
||||
<option value="アルバイト">アルバイト</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>支給形態 *</label>
|
||||
<select name="payment_type" required>
|
||||
<option value="">選択してください</option>
|
||||
<option value="月給">月給</option>
|
||||
<option value="時給">時給</option>
|
||||
<option value="日給">日給</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>通勤手当 (円)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="commute_allowance"
|
||||
step="0.01"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>その他手当 (円)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="other_allowance"
|
||||
step="0.01"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>適用開始日 *</label>
|
||||
<input type="date" name="valid_from" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>適用終了日</label>
|
||||
<input type="date" name="valid_to" />
|
||||
<small>通常は空欄のままにしてください</small>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">保存</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
onclick="hideAddForm()"
|
||||
>
|
||||
キャンセル
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="currentSetting"
|
||||
style="
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background: #e7f3ff;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<h3>現在の給与設定</h3>
|
||||
<div id="currentSettingContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE = "http://localhost:8000";
|
||||
let currentEmployeeId = null;
|
||||
|
||||
async function loadEmployees() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/payroll/employees/?is_active=true`
|
||||
);
|
||||
const employees = await response.json();
|
||||
|
||||
const select = document.getElementById("employeeSelect");
|
||||
select.innerHTML =
|
||||
'<option value="">従業員を選択してください</option>' +
|
||||
employees
|
||||
.map(
|
||||
(emp) =>
|
||||
`<option value="${emp.employee_id}">${emp.employee_code} - ${emp.name}</option>`
|
||||
)
|
||||
.join("");
|
||||
} catch (error) {
|
||||
alert("従業員一覧の取得に失敗しました");
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSalarySettings() {
|
||||
const employeeId = document.getElementById("employeeSelect").value;
|
||||
if (!employeeId) {
|
||||
document.getElementById("settingsContent").style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
currentEmployeeId = employeeId;
|
||||
document.getElementById("settingsContent").style.display = "block";
|
||||
|
||||
try {
|
||||
// 給与設定履歴を取得
|
||||
const response = await fetch(
|
||||
`${API_BASE}/payroll/settings/salary/${employeeId}`
|
||||
);
|
||||
const settings = await response.json();
|
||||
|
||||
const html = `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>適用期間</th>
|
||||
<th>基本給</th>
|
||||
<th>時給</th>
|
||||
<th>雇用形態</th>
|
||||
<th>支給形態</th>
|
||||
<th>通勤手当</th>
|
||||
<th>その他手当</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${settings
|
||||
.map(
|
||||
(s) => `
|
||||
<tr>
|
||||
<td>${s.valid_from} ～ ${
|
||||
s.valid_to || "現在"
|
||||
}</td>
|
||||
<td>¥${Number(
|
||||
s.base_salary
|
||||
).toLocaleString()}</td>
|
||||
<td>${
|
||||
s.hourly_rate
|
||||
? "¥" +
|
||||
Number(s.hourly_rate).toLocaleString()
|
||||
: "-"
|
||||
}</td>
|
||||
<td>${s.employment_type}</td>
|
||||
<td>${s.payment_type}</td>
|
||||
<td>¥${Number(
|
||||
s.commute_allowance
|
||||
).toLocaleString()}</td>
|
||||
<td>¥${Number(
|
||||
s.other_allowance
|
||||
).toLocaleString()}</td>
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
document.getElementById("settingsList").innerHTML = html;
|
||||
|
||||
// 現在の設定を取得
|
||||
loadCurrentSetting(employeeId);
|
||||
} catch (error) {
|
||||
alert("給与設定の取得に失敗しました");
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCurrentSetting(employeeId) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/payroll/settings/salary/${employeeId}/current`
|
||||
);
|
||||
if (response.ok) {
|
||||
const setting = await response.json();
|
||||
|
||||
const html = `
|
||||
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:15px;">
|
||||
<div><strong>基本給:</strong> ¥${Number(
|
||||
setting.base_salary
|
||||
).toLocaleString()}</div>
|
||||
<div><strong>時給:</strong> ${
|
||||
setting.hourly_rate
|
||||
? "¥" +
|
||||
Number(setting.hourly_rate).toLocaleString()
|
||||
: "-"
|
||||
}</div>
|
||||
<div><strong>雇用形態:</strong> ${
|
||||
setting.employment_type
|
||||
}</div>
|
||||
<div><strong>支給形態:</strong> ${
|
||||
setting.payment_type
|
||||
}</div>
|
||||
<div><strong>通勤手当:</strong> ¥${Number(
|
||||
setting.commute_allowance
|
||||
).toLocaleString()}</div>
|
||||
<div><strong>その他手当:</strong> ¥${Number(
|
||||
setting.other_allowance
|
||||
).toLocaleString()}</div>
|
||||
<div><strong>適用期間:</strong> ${
|
||||
setting.valid_from
|
||||
} ～ ${setting.valid_to || "現在"}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById("currentSettingContent").innerHTML = html;
|
||||
} else {
|
||||
document.getElementById("currentSettingContent").innerHTML =
|
||||
"<p>給与設定が登録されていません</p>";
|
||||
}
|
||||
} catch (error) {
|
||||
document.getElementById("currentSettingContent").innerHTML =
|
||||
"<p>給与設定の取得に失敗しました</p>";
|
||||
}
|
||||
}
|
||||
|
||||
function showAddForm() {
|
||||
document.getElementById("addForm").style.display = "block";
|
||||
// デフォルト値設定
|
||||
document.querySelector('[name="valid_from"]').value = new Date()
|
||||
.toISOString()
|
||||
.split("T")[0];
|
||||
}
|
||||
|
||||
function hideAddForm() {
|
||||
document.getElementById("addForm").style.display = "none";
|
||||
document.querySelector("#addForm form").reset();
|
||||
}
|
||||
|
||||
async function saveSalarySetting(event) {
|
||||
event.preventDefault();
|
||||
const form = event.target;
|
||||
const formData = new FormData(form);
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
|
||||
data.employee_id = parseInt(currentEmployeeId);
|
||||
data.base_salary = parseFloat(data.base_salary) || 0;
|
||||
data.commute_allowance = parseFloat(data.commute_allowance) || 0;
|
||||
data.other_allowance = parseFloat(data.other_allowance) || 0;
|
||||
|
||||
if (data.hourly_rate) {
|
||||
data.hourly_rate = parseFloat(data.hourly_rate);
|
||||
} else {
|
||||
delete data.hourly_rate;
|
||||
}
|
||||
|
||||
if (!data.valid_to) {
|
||||
delete data.valid_to;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/payroll/settings/salary`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert("給与設定を保存しました");
|
||||
hideAddForm();
|
||||
loadSalarySettings();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert("保存に失敗しました: " + error.detail);
|
||||
}
|
||||
} catch (error) {
|
||||
alert("保存に失敗しました");
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 初期化
|
||||
loadEmployees();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user