공통화 작업 및 워커 해더
This commit is contained in:
@@ -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));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user