공통화 작업 및 워커 해더

This commit is contained in:
2026-04-07 15:39:41 +09:00
parent cba387de9d
commit 6a72ccebd5
51 changed files with 1185 additions and 2497 deletions

View File

@@ -4,104 +4,38 @@
table th {
text-align: center;
}
.tab-header {
display: inline;
}
</style>
<h4 class="mb-3">처리가능 수량관리</h4>
<div class="col-12">
<div class="main-card mb-3 card">
<!-- 탭은 card-header 안에 -->
<div class="card-header tab-header pb-0">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-eg10-0">일자별 처리가능 수량</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-eg10-1">지역별 수량</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-eg10-2">기본 수량</a>
</li>
</ul>
<!-- 타이틀 -->
<div class="card-header bg-white border-bottom shadow-sm">
<h4 class="mb-0 fw-bold text-dark">처리가능 수량관리</h4>
</div>
<!-- 탭 -->
<ul class="nav nav-tabs px-3 pt-3 bg-white border-bottom">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-eg10-0">일자별 처리가능 수량</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-eg10-1">지역별 수량</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-eg10-2">기본 수량</a>
</li>
</ul>
<div class="card-body">
<!-- 공통 검색/필터 영역 -->
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
<div class="d-flex flex-wrap align-items-end gap-2">
<label class="form-label mb-1 small me-2">조회조건</label>
<!-- 첫번째탭 -->
<div id="form1" class="d-flex flex-wrap align-items-end gap-2">
<div class="input-group input-group-sm" style="min-width: 320px;">
<input type="date" class="form-control" name="sdate" id="sdate">
<span class="input-group-text">~</span>
<input type="date" class="form-control" name="edate" id="edate">
</div>
</div>
<!-- 두번째탭 -->
<div id="form2" class="d-none">
<div class="d-flex align-items-end gap-1">
<select class="form-select form-select-sm" name="region2" id="region2" style="min-width: 180px;">
<option value="">지역 선택</option>
<?php foreach ($sido as $s): ?>
<option value="<?= $s['region_cd'] ?>" <?php if ($s['region_cd'] == "1100000000") {
echo "selected";
} ?>>
<?= $s['region_nm'] ?>
</option>
<?php endforeach; ?>
</select>
<div class="input-group input-group-sm" style="min-width: 180px;">
<input type="date" class="form-control" name="sdate2" id="sdate2">
</div>
</div>
</div>
<!-- 세번째탭 -->
<div id="form3" class="d-none">
<div class="d-flex align-items-end gap-1">
<select class="form-select form-select-sm" name="region3" id="region3" style="min-width: 180px;">
<option value="">지역 선택</option>
<?php foreach ($sido as $s): ?>
<option value="<?= $s['region_cd'] ?>" <?php if ($s['region_cd'] == "1100000000") {
echo "selected";
} ?>>
<?= $s['region_nm'] ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<div class="d-flex gap-1 ms-auto">
<button class="btn btn-sm btn-outline-success" id="excel-download" type="button">
<i class="fa fa-fw" aria-hidden="true" title="file-excel-o"></i> 엑셀다운로드
</button>
<button class="btn btn-sm btn-outline-light" type="button" id="btnSearch">
조회
</button>
</div>
</div>
<!-- 탭 컨텐츠는 tab-content 바로 아래에 -->
<div class="tab-content">
<!-- 1) 일자별 -->
<div class="tab-pane fade show active" id="tab-eg10-0" role="tabpanel">
<div class="border rounded p-3 bg-white">
<table class="table table-sm table-hover table-striped mb-0 align-middle text-center w-100" id="tbl1">
<table class="table table-sm table-hover table-striped mb-0 align-middle text-center w-100" id="tbl1" >
<thead>
<tr>
<th rowspan="2" class="align-middle">날짜</th>
@@ -121,6 +55,36 @@
<!-- 2) 지역별 -->
<div class="tab-pane fade" id="tab-eg10-1" role="tabpanel">
<!-- 조회조건 -->
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
<div class="d-flex flex-wrap align-items-end gap-2">
<label class="form-label mb-1 small me-2">조회조건</label>
<div id="form2" class="d-flex align-items-end gap-1">
<select class="form-select form-select-sm" name="region2" id="region2" style="min-width: 180px;">
<option value="">지역 선택</option>
<?php foreach ($sido as $s): ?>
<option value="<?= $s['region_cd'] ?>" <?php if ($s['region_cd'] == "1100000000") {
echo "selected";
} ?>>
<?= $s['region_nm'] ?>
</option>
<?php endforeach; ?>
</select>
<div class="input-group input-group-sm" style="min-width: 180px;">
<input type="date" class="form-control" name="sdate2" id="sdate2">
</div>
</div>
</div>
<div class="d-flex gap-1 ms-auto">
<button class="btn btn-sm btn-outline-success" id="excel-download" type="button">
<i class="fa fa-fw" aria-hidden="true" title="file-excel-o"></i> 엑셀다운로드
</button>
<button class="btn btn-sm btn-outline-light" type="button" id="btnSearch">
조회
</button>
</div>
</div>
<div class="border rounded p-3 bg-white">
<table class="table table-sm table-hover table-striped mb-0 align-middle text-center w-100" id="tbl2">
<thead>
@@ -142,6 +106,33 @@
<!-- 3) 기본 수량 -->
<div class="tab-pane fade" id="tab-eg10-2" role="tabpanel">
<!-- 조회조건 -->
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
<div class="d-flex flex-wrap align-items-end gap-2">
<label class="form-label mb-1 small me-2">조회조건</label>
<div id="form3" class="d-flex align-items-end gap-1">
<select class="form-select form-select-sm" name="region3" id="region3" style="min-width: 180px;">
<option value="">지역 선택</option>
<?php foreach ($sido as $s): ?>
<option value="<?= $s['region_cd'] ?>" <?php if ($s['region_cd'] == "1100000000") {
echo "selected";
} ?>>
<?= $s['region_nm'] ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="d-flex gap-1 ms-auto">
<button class="btn btn-sm btn-outline-success" id="excel-download" type="button">
<i class="fa fa-fw" aria-hidden="true" title="file-excel-o"></i> 엑셀다운로드
</button>
<button class="btn btn-sm btn-outline-light" type="button" id="btnSearch">
조회
</button>
</div>
</div>
<div class="border rounded p-3 bg-white">
<table class="table table-sm table-hover table-striped mb-0 align-middle text-center w-100" id="tbl3">
<thead>
@@ -193,9 +184,12 @@
initForm();
$("#sdate, #edate").on("change", function () {
table1.ajax.reload();
});
// DataTable 초기화 후 날짜 변경 이벤트 등록
setTimeout(() => {
$("#sdate-dt, #edate-dt").on("change", function () {
if (table1) table1.ajax.reload();
});
}, 500);
$("#btnSearch").on("click", function () {
@@ -216,6 +210,47 @@
language: lang_kor,
serverSide: true,
processing: true,
dom: '<"d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2"<"#tbl1-filter">r>tip',
initComplete: function () {
// DataTable 생성 완료 후 필터 영역에 조회조건 삽입
const fmt = d => d.toISOString().slice(0, 10);
const lastDate = getLastDateOfMonth(date.getFullYear(), date.getMonth() + 1);
$('#tbl1-filter').html(`
<div class="d-flex flex-wrap align-items-end gap-2">
<label class="form-label mb-1 small me-2">조회조건</label>
<div class="input-group input-group-sm" style="min-width: 320px;">
<input type="date" class="form-control" id="sdate-dt" value="${fmt(date)}">
<span class="input-group-text">~</span>
<input type="date" class="form-control" id="edate-dt" value="${fmt(lastDate)}">
</div>
</div>
<div class="d-flex gap-1 ms-auto">
<button id="excel-download-dt" class="btn btn-sm btn-outline-success" type="button">
<i class="fa fa-fw fa-file-excel-o"></i> 엑셀다운로드
</button>
<button id="btnSearch1" class="btn btn-sm btn-outline-light" type="button">조회</button>
</div>
`);
// 이벤트 바인딩
$('#sdate-dt, #edate-dt').on('change', function () {
table1.ajax.reload();
});
$('#btnSearch1').on('click', function () {
table1.ajax.reload();
});
$('#excel-download-dt').on('click', function () {
$.ajax({
url: "/article/processible/excel",
method: "GET",
data: { sdate: $("#sdate-dt").val(), edate: $("#edate-dt").val() },
beforeSend: function () { blockUI.blockPage({ message: tpl }) },
complete: function () { blockUI.unblockPage() },
success: function (result) { downloadExcelWithHeader(result.data); }
});
});
},
ajax: {
url: '/article/processible/getList1',
type: 'GET',
@@ -228,11 +263,15 @@
blockUI.unblockPage()
},
data: function (d) {
d.sdate = $("#sdate").val(); // 시작일
d.edate = $("#edate").val(); // 종료일
const fmt = d2 => d2.toISOString().slice(0, 10);
const lastDate = getLastDateOfMonth(date.getFullYear(), date.getMonth() + 1);
d.start = d.start || 0
d.length = d.length || 10
// input이 DOM에 있으면 그 값, 없으면 오늘/말일 기본값
d.sdate = $("#sdate-dt").val() || fmt(date);
d.edate = $("#edate-dt").val() || fmt(lastDate);
d.start = d.start || 0;
d.length = d.length || 10;
},
},
"columnDefs": [
@@ -357,10 +396,10 @@
const fmt = d => d.toISOString().slice(0, 10);
$('#sdate').val(fmt(date));
$('#sdate-dt').val(fmt(date));
const lastDate = getLastDateOfMonth(date.getFullYear(), date.getMonth() + 1);
$('#edate').val(fmt(lastDate));
$('#edate-dt').val(fmt(lastDate));
$('#sdate2').val(fmt(date));
}