146 lines
5.0 KiB
HTML
146 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>POS 데이터 조회</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
</head>
|
|
<body class="p-4">
|
|
<h2>POS 데이터 조회</h2>
|
|
|
|
<form id="filterForm" class="row g-3">
|
|
<div class="col-md-3">
|
|
<label>시작일</label>
|
|
<input type="date" name="start_date" value="{{ start_date }}" class="form-control">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label>종료일</label>
|
|
<input type="date" name="end_date" value="{{ end_date }}" class="form-control">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>대분류</label>
|
|
<select name="ca01" class="form-select">
|
|
<option value="전체">전체</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>소분류</label>
|
|
<select name="ca03" class="form-select">
|
|
<option value="전체">전체</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 align-self-end">
|
|
<button type="submit" class="btn btn-primary w-100">조회</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<table class="table table-bordered mt-3" id="resultTable">
|
|
<thead>
|
|
<tr>
|
|
<th>대분류</th><th>중분류</th><th>소분류</th><th>상품명</th>
|
|
<th>수량</th><th>총매출액</th><th>총할인액</th><th>실매출액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th colspan="4" class="text-end">합계</th>
|
|
<th id="sum_qty">0</th>
|
|
<th id="sum_tot_amount">0</th>
|
|
<th id="sum_tot_discount">0</th>
|
|
<th id="sum_actual_amount">0</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<script>
|
|
async function fetchAndFillSelect(url, selectElem) {
|
|
const res = await fetch(url);
|
|
const list = await res.json();
|
|
selectElem.innerHTML = '';
|
|
list.forEach(val => {
|
|
const opt = document.createElement('option');
|
|
opt.value = val;
|
|
opt.textContent = val;
|
|
selectElem.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
const ca01Select = document.querySelector('select[name="ca01"]');
|
|
const ca03Select = document.querySelector('select[name="ca03"]');
|
|
|
|
// 대분류 목록 불러오기
|
|
await fetchAndFillSelect('/api/ca01_list', ca01Select);
|
|
|
|
// 대분류 변경 시 소분류 목록 갱신
|
|
ca01Select.addEventListener('change', async () => {
|
|
const selectedCa01 = ca01Select.value;
|
|
await fetchAndFillSelect(`/api/ca03_list?ca01=${encodeURIComponent(selectedCa01)}`, ca03Select);
|
|
});
|
|
|
|
// 초기 소분류 목록 불러오기
|
|
await fetchAndFillSelect('/api/ca03_list', ca03Select);
|
|
|
|
// 폼 제출 이벤트 처리
|
|
document.getElementById('filterForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const params = new URLSearchParams(formData);
|
|
|
|
const res = await fetch('/search?' + params.toString());
|
|
if (!res.ok) {
|
|
alert('조회 중 오류가 발생했습니다.');
|
|
return;
|
|
}
|
|
const data = await res.json();
|
|
|
|
const tbody = document.querySelector('#resultTable tbody');
|
|
tbody.innerHTML = '';
|
|
|
|
// 합계 초기화
|
|
let sum_qty = 0;
|
|
let sum_tot_amount = 0;
|
|
let sum_tot_discount = 0;
|
|
let sum_actual_amount = 0;
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = `<tr><td colspan="8" class="text-center">조회 결과가 없습니다.</td></tr>`;
|
|
} else {
|
|
data.forEach(row => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${row.ca01}</td>
|
|
<td>${row.ca02}</td>
|
|
<td>${row.ca03}</td>
|
|
<td>${row.name}</td>
|
|
<td>${row.qty}</td>
|
|
<td>${row.tot_amount}</td>
|
|
<td>${row.tot_discount}</td>
|
|
<td>${row.actual_amount}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
|
|
// 합계 계산
|
|
sum_qty += Number(row.qty) || 0;
|
|
sum_tot_amount += Number(row.tot_amount) || 0;
|
|
sum_tot_discount += Number(row.tot_discount) || 0;
|
|
sum_actual_amount += Number(row.actual_amount) || 0;
|
|
});
|
|
}
|
|
|
|
// 합계 출력
|
|
document.getElementById('sum_qty').textContent = sum_qty.toLocaleString();
|
|
document.getElementById('sum_tot_amount').textContent = sum_tot_amount.toLocaleString();
|
|
document.getElementById('sum_tot_discount').textContent = sum_tot_discount.toLocaleString();
|
|
document.getElementById('sum_actual_amount').textContent = sum_actual_amount.toLocaleString();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|