255 lines
13 KiB
PHP
255 lines
13 KiB
PHP
<?php
|
|
// items.php
|
|
require_once 'config.php';
|
|
include 'header.php';
|
|
|
|
// ดึงตัวเลือกสำหรับ Filter
|
|
$categories = $pdo->query("SELECT DISTINCT category_code, category FROM procurement_items WHERE category IS NOT NULL ORDER BY category_code, category")->fetchAll();
|
|
$departments = $pdo->query("SELECT DISTINCT department FROM procurement_items WHERE department IS NOT NULL ORDER BY department")->fetchAll(PDO::FETCH_COLUMN);
|
|
$statuses = $pdo->query("SELECT DISTINCT status FROM procurement_items WHERE status IS NOT NULL ORDER BY status")->fetchAll(PDO::FETCH_COLUMN);
|
|
|
|
// ดึงรายการจัดซื้อทั้งหมด
|
|
$stmt = $pdo->query("SELECT * FROM procurement_items ORDER BY id ASC");
|
|
$items = $stmt->fetchAll();
|
|
?>
|
|
|
|
<style>
|
|
/* ตั้งค่าบังคับจัดกึ่งกลางให้ชื่อหัวคอลัมน์ทั้งหมด (th) */
|
|
#procurementTable th {
|
|
text-align: center !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
/* Custom Progress Bar Style */
|
|
.custom-progress-container {
|
|
background-color: #e9ecef;
|
|
border-radius: 20px;
|
|
height: 12px;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.progress-bar-danger {
|
|
background: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%);
|
|
}
|
|
|
|
.progress-bar-info {
|
|
background: linear-gradient(90deg, #36d1dc 0%, #5b86e5 100%);
|
|
}
|
|
|
|
.progress-bar-success-custom {
|
|
background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
|
|
}
|
|
|
|
.badge-progress {
|
|
font-size: 0.75rem;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
min-width: 42px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<div class="card p-4 shadow-sm mb-4">
|
|
|
|
<!-- 1. แถวหัวข้อและปุ่มเพิ่มรายการ -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom">
|
|
<h4 class="fw-bold mb-0"><i class="bi bi-list-task me-2 text-primary"></i>รายการจัดซื้อครุภัณฑ์ ประจำปี 2569</h4>
|
|
<div>
|
|
<button class="btn btn-success me-2 shadow-sm" onclick="alert('เปิดฟอร์มเพิ่มรายการใหม่')">
|
|
<i class="bi bi-plus-circle me-1"></i> เพิ่มรายการจัดซื้อ
|
|
</button>
|
|
<a href="index.php" class="btn btn-outline-secondary shadow-sm">
|
|
<i class="bi bi-arrow-left me-1"></i> กลับหน้าหลัก
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. กล่องกรองข้อมูล (Filter Section) -->
|
|
<div class="row g-3 mb-4 bg-light p-3 rounded border shadow-sm">
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-bold small text-muted">กรองตามหน่วยงาน</label>
|
|
<select id="deptFilter" class="form-select form-select-sm">
|
|
<option value="">-- ทั้งหมดทุกหน่วยงาน --</option>
|
|
<?php foreach ($departments as $dept): ?>
|
|
<option value="<?= htmlspecialchars($dept) ?>"><?= htmlspecialchars($dept) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-bold small text-muted">กรองตามหมวดหมู่รายการ</label>
|
|
<select id="catFilter" class="form-select form-select-sm">
|
|
<option value="">-- ทั้งหมดทุกหมวดหมู่ --</option>
|
|
<?php foreach ($categories as $cat): ?>
|
|
<option value="<?= htmlspecialchars($cat['category']) ?>">
|
|
<?= $cat['category_code'] ? '[' . $cat['category_code'] . '] ' : '' ?><?= htmlspecialchars($cat['category']) ?>
|
|
</option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-bold small text-muted">กรองตามสถานะการจัดซื้อ</label>
|
|
<select id="statusFilter" class="form-select form-select-sm">
|
|
<option value="">-- ทั้งหมดทุกสถานะ --</option>
|
|
<?php foreach ($statuses as $st): ?>
|
|
<option value="<?= htmlspecialchars($st) ?>"><?= htmlspecialchars($st) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2 d-flex align-items-end">
|
|
<button class="btn btn-sm btn-secondary w-100" onclick="resetFilters()">
|
|
<i class="bi bi-arrow-counterclockwise me-1"></i> ล้างการกรอง
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Data Table -->
|
|
<div class="table-responsive">
|
|
<table id="procurementTable" class="table table-hover align-middle w-100 fs-6">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="text-nowrap text-center" style="width: 5%;">ลำดับ</th>
|
|
<th class="text-nowrap text-center" style="width: 8%;">รหัส</th>
|
|
<th class="text-nowrap text-center" style="width: 25%;">รายการครุภัณฑ์</th>
|
|
<th class="text-nowrap text-center">หมวดหมู่</th>
|
|
<th class="text-nowrap text-center">หน่วยงาน</th>
|
|
<th class="text-nowrap text-center">งบตั้งต้น</th>
|
|
<th class="text-nowrap text-center">จัดซื้อจริง</th>
|
|
<th class="text-nowrap text-center" style="width: 14%;">ความคืบหน้า</th>
|
|
<th class="text-nowrap text-center">สถานะปัจจุบัน</th>
|
|
<th class="text-nowrap text-center">Timeline</th>
|
|
<th class="text-nowrap text-center" style="width: 10%;">จัดการ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($items as $row): ?>
|
|
<tr>
|
|
<td class="text-center"><?= $row['seq_no'] ?></td>
|
|
<td class="text-center"><code><?= $row['item_code'] ?: '-' ?></code></td>
|
|
<td>
|
|
<div class="fw-bold text-dark"><?= htmlspecialchars($row['item_name']) ?></div>
|
|
<small class="text-muted"><?= $row['quantity'] ?> <?= $row['unit'] ?> (<?= $row['plan_type'] ?>)</small>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-light text-dark border" title="<?= htmlspecialchars($row['category']) ?>">
|
|
<?= $row['category_code'] ? '[' . $row['category_code'] . '] ' : '' ?><?= htmlspecialchars($row['category']) ?>
|
|
</span>
|
|
</td>
|
|
<td><?= htmlspecialchars($row['department']) ?></td>
|
|
|
|
<!-- งบตั้งต้น -->
|
|
<td class="text-end fw-bold"><?= number_format($row['total_price'], 0) ?></td>
|
|
|
|
<!-- จัดซื้อจริง -->
|
|
<td class="text-end text-success fw-bold">
|
|
<?= $row['procured_price'] > 0 ? number_format($row['procured_price'], 0) : '-' ?>
|
|
</td>
|
|
|
|
<!-- ความคืบหน้า -->
|
|
<td>
|
|
<?php
|
|
$p = (int)$row['progress'];
|
|
if ($p <= 30) {
|
|
$barClass = 'progress-bar-danger';
|
|
$badgeBg = 'bg-danger text-white';
|
|
} elseif ($p <= 70) {
|
|
$barClass = 'progress-bar-info';
|
|
$badgeBg = 'bg-primary text-white';
|
|
} else {
|
|
$barClass = 'progress-bar-success-custom';
|
|
$badgeBg = 'bg-success text-white';
|
|
}
|
|
?>
|
|
<div class="d-flex align-items-center">
|
|
<div class="custom-progress-container flex-grow-1 me-2">
|
|
<div class="progress-bar <?= $barClass ?> progress-bar-striped progress-bar-animated h-100" style="width: <?= $p ?>%"></div>
|
|
</div>
|
|
<span class="badge <?= $badgeBg ?> badge-progress shadow-sm"><?= $p ?>%</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="text-center">
|
|
<?php
|
|
$badgeClass = match ($row['status']) {
|
|
'รอการยืนยันแผน' => 'bg-warning text-dark',
|
|
'อยู่ระหว่างดำเนินการ' => 'bg-primary',
|
|
'ใบส่งซื้อ/ทำสัญญา' => 'bg-info text-dark',
|
|
'ดำเนินการเสร็จสิ้น' => 'bg-success',
|
|
default => 'bg-secondary'
|
|
};
|
|
?>
|
|
<span class="badge <?= $badgeClass ?>"><?= $row['status'] ?></span>
|
|
</td>
|
|
<td class="text-center"><?= getTimelineBadge($row['due_date'], $row['status']) ?></td>
|
|
<td class="text-center">
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="qr_view.php?id=<?= $row['id'] ?>" target="_blank" class="btn btn-outline-dark" title="QR Code Mobile View">
|
|
<i class="bi bi-qr-code-scan"></i>
|
|
</a>
|
|
<?php if ($row['gdrive_folder_id']): ?>
|
|
<a href="https://drive.google.com/drive/folders/<?= $row['gdrive_folder_id'] ?>" target="_blank" class="btn btn-outline-primary" title="เปิดโฟลเดอร์ Google Drive">
|
|
<i class="bi bi-folder-symlink-fill"></i>
|
|
</a>
|
|
<?php endif; ?>
|
|
<button class="btn btn-outline-success" onclick="openApprovalModal(<?= $row['id'] ?>)" title="อนุมัติออนไลน์">
|
|
<i class="bi bi-check-circle"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery & DataTables JS -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var table = $('#procurementTable').DataTable({
|
|
"language": {
|
|
"url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
|
},
|
|
"pageLength": 10,
|
|
"order": [
|
|
[0, "asc"]
|
|
],
|
|
"columnDefs": [{
|
|
"orderable": false,
|
|
"targets": [7, 9, 10]
|
|
}]
|
|
});
|
|
|
|
// Custom Filters
|
|
$('#deptFilter').on('change', function() {
|
|
table.column(4).search(this.value).draw();
|
|
});
|
|
|
|
$('#catFilter').on('change', function() {
|
|
table.column(3).search(this.value).draw();
|
|
});
|
|
|
|
$('#statusFilter').on('change', function() {
|
|
table.column(8).search(this.value).draw();
|
|
});
|
|
});
|
|
|
|
function resetFilters() {
|
|
$('#deptFilter').val('');
|
|
$('#catFilter').val('');
|
|
$('#statusFilter').val('');
|
|
var table = $('#procurementTable').DataTable();
|
|
table.columns().search('').draw();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|