70 lines
3.5 KiB
PHP
70 lines
3.5 KiB
PHP
<!-- Modal สำหรับเซ็นอนุมัติออนไลน์ -->
|
|
<div class="modal fade" id="approvalModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold"><i class="bi bi-shield-check text-success"></i> ระบบอนุมัติออนไลน์ (e-Approval)</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form action="save_approval.php" method="POST" id="approvalForm">
|
|
<div class="modal-body">
|
|
<input type="hidden" name="item_id" id="modal_item_id">
|
|
<div class="mb-3">
|
|
<label class="form-label font-bold">ผู้อนุมัติ</label>
|
|
<input type="text" name="approver_name" class="form-class form-control" required placeholder="ชื่อ-นามสกุล">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">ความเห็น/ข้อเสนอแนะ</label>
|
|
<textarea name="comment" class="form-control" rows="2"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">วาดลายเซ็นดิจิทัล (Digital Signature)</label>
|
|
<div class="border rounded bg-light p-1">
|
|
<canvas id="sigCanvas" width="430" height="150" style="touch-action: none; cursor: crosshair;"></canvas>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-link text-danger p-0 mt-1" onclick="clearSignature()">ล้างลายเซ็น</button>
|
|
<input type="hidden" name="signature_data" id="signature_data">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" name="action" value="rejected" class="btn btn-outline-danger">ไม่อนุมัติ</button>
|
|
<button type="submit" name="action" value="approved" class="btn btn-success"><i class="bi bi-check-lg"></i> ลงนามอนุมัติ</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Canvas Digital Signature Script
|
|
const canvas = document.getElementById('sigCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
canvas.addEventListener('mousedown', () => drawing = true);
|
|
canvas.addEventListener('mouseup', () => {
|
|
drawing = false;
|
|
ctx.beginPath();
|
|
});
|
|
canvas.addEventListener('mousemove', draw);
|
|
|
|
function draw(e) {
|
|
if (!drawing) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
|
|
}
|
|
|
|
function clearSignature() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
document.getElementById('approvalForm').addEventListener('submit', function() {
|
|
document.getElementById('signature_data').value = canvas.toDataURL();
|
|
});
|
|
</script> |