Barcode Scan + Barcode Print
This commit is contained in:
Wian Drs
@@ -6,8 +6,7 @@
|
||||
<h5>Data Barang</h5>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-add bg-danger btn-out mr-2">Pengeluaran</button>
|
||||
<button class="btn btn-warning btn-add btn-add-item mr-2">Tambah Barang</button>
|
||||
<button class="btn btn-add bg-primary" id="generate_pdf">Generate PDF</button>
|
||||
<!-- <button class="btn btn-warning btn-add btn-add-item mr-2">Tambah Barang</button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -93,7 +92,7 @@
|
||||
|
||||
<!-- MODAL BARANAG KELUAR -->
|
||||
<div class="modal fade" id="modalKeluar">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header bg-danger text-white">
|
||||
@@ -102,6 +101,55 @@
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<center>
|
||||
<div id="scannerArea">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="serial_number"
|
||||
class="form-control form-control-lg text-center"
|
||||
placeholder="Scan QR Barang"
|
||||
autocomplete="off"
|
||||
autofocus>
|
||||
|
||||
<small class="scan-note">
|
||||
Scanner akan otomatis menyimpan.
|
||||
</small><br>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-warning btn-block camera-btn mt-4"
|
||||
id="btnCamera">
|
||||
|
||||
<i class="fa fa-camera mr-2"></i>
|
||||
Scan dengan Kamera
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="cameraArea" style="display:none;">
|
||||
|
||||
<div id="reader"></div>
|
||||
|
||||
<small class="scan-note d-block mt-2">
|
||||
Arahkan QR Code ke kamera.
|
||||
</small>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary btn-block mt-3"
|
||||
id="btnCloseCamera">
|
||||
|
||||
Tutup Kamera
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
<div id="tableBarcode"></div>
|
||||
|
||||
<hr>
|
||||
<div id="group_account_biaya">
|
||||
<label class="mt-2">Akun Biaya</label>
|
||||
<select id="account_biaya" class="form-control"></select>
|
||||
@@ -112,7 +160,7 @@
|
||||
<input type="date" id="tanggal_keluar" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- <div>
|
||||
<label class="mt-2">Gudang</label>
|
||||
<select id="warehouse_id_keluar" class="form-control"></select>
|
||||
</div>
|
||||
@@ -125,9 +173,8 @@
|
||||
<div class="d-none" id="group_qty_keluar">
|
||||
<label class="mt-2">Jumlah Barang</label>
|
||||
<input type="number" id="qty_keluar" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-none" id="group_keterangan">
|
||||
</div> -->
|
||||
<div class="mb-2" id="group_keterangan">
|
||||
<label for="keterangan" class="form-label">Keterangan</label>
|
||||
<textarea class="form-control" id="keterangan_keluar" rows="3"></textarea>
|
||||
</div>
|
||||
@@ -196,6 +243,191 @@
|
||||
|
||||
<script>
|
||||
|
||||
// URUSAN BARCODE INPUT DAN CAMSCANNER
|
||||
let daftarBarang = [];
|
||||
let isSaving = false;
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#serial_number").focus();
|
||||
$("#serial_number").keypress(function(e){
|
||||
if(e.which==13){
|
||||
e.preventDefault();
|
||||
if(!isSaving){
|
||||
getBarcodeId();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function getBarcodeId(){
|
||||
let barcode = ($("#serial_number").val() || "").trim();
|
||||
if(barcode==""){
|
||||
return;
|
||||
}
|
||||
$.post(
|
||||
"<?=base_url('items/get_barcode_item');?>",
|
||||
{
|
||||
barcode:barcode
|
||||
},
|
||||
function(r){
|
||||
if(!r.status){
|
||||
Swal.fire({
|
||||
icon:"error",
|
||||
title:"Oops...",
|
||||
text:r.message
|
||||
});
|
||||
$("#serial_number").val("").focus();
|
||||
return;
|
||||
}
|
||||
let exist = daftarBarang.find(function(v){
|
||||
return v.barcode_id == r.data.barcode_id;
|
||||
});
|
||||
|
||||
if(exist){
|
||||
Swal.fire({
|
||||
icon: "warning",
|
||||
title: "Barcode sudah discan",
|
||||
timer: 1000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
|
||||
$("#serial_number").val("").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
daftarBarang.push(r.data);
|
||||
renderTable();
|
||||
$("#serial_number").val("").focus();
|
||||
},
|
||||
"json"
|
||||
);
|
||||
}
|
||||
|
||||
function renderTable(){
|
||||
|
||||
let html='';
|
||||
|
||||
html+='<div class="table-responsive">';
|
||||
html+='<table class="table table-bordered table-hover table-sm mb-0">';
|
||||
html+='<thead>';
|
||||
html+='<tr>';
|
||||
html+='<th width="50">No</th>';
|
||||
html+='<th width="180">Barcode</th>';
|
||||
html+='<th width="150">Kode Barang</th>';
|
||||
html+='<th>Nama Barang</th>';
|
||||
html+='<th width="180">Serial Number</th>';
|
||||
html+='<th width="80" class="text-center">Action</th>';
|
||||
html+='</tr>';
|
||||
html+='</thead>';
|
||||
html+='<tbody>';
|
||||
|
||||
if(daftarBarang.length==0){
|
||||
|
||||
html+='<tr>';
|
||||
html+='<td colspan="6" class="text-center text-muted py-4">';
|
||||
html+='Belum ada barcode yang discan.';
|
||||
html+='</td>';
|
||||
html+='</tr>';
|
||||
|
||||
}else{
|
||||
|
||||
$.each(daftarBarang,function(i,v){
|
||||
|
||||
html+='<tr>';
|
||||
html+='<td>'+(i+1)+'</td>';
|
||||
html+='<td><strong>'+v.barcode+'</strong></td>';
|
||||
html+='<td>'+v.kode_detail+'</td>';
|
||||
html+='<td>'+v.nama_barang+'</td>';
|
||||
html+='<td>'+(v.serial_number?v.serial_number:'-')+'</td>';
|
||||
html+='<td class="text-center">';
|
||||
html+='<button class="btn btn-sm btn-outline-danger btnRemove" data-id="'+v.barcode_id+'">';
|
||||
html+='<i class="bi bi-trash"></i>';
|
||||
html+='</button>';
|
||||
html+='</td>';
|
||||
html+='</tr>';
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
html+='</tbody>';
|
||||
html+='</table>';
|
||||
html+='</div>';
|
||||
|
||||
$("#tableBarcode").html(html);
|
||||
|
||||
}
|
||||
|
||||
$(document).on("click",".btnRemove",function(){
|
||||
|
||||
let id=$(this).data("id");
|
||||
|
||||
daftarBarang=daftarBarang.filter(function(v){
|
||||
return v.barcode_id!=id;
|
||||
});
|
||||
|
||||
renderTable();
|
||||
|
||||
$("#serial_number").focus();
|
||||
|
||||
});
|
||||
|
||||
|
||||
let html5QrCode=null;
|
||||
|
||||
$("#btnCamera").click(function(){
|
||||
|
||||
$("#scannerArea").hide();
|
||||
$("#cameraArea").show();
|
||||
|
||||
html5QrCode=new Html5Qrcode("reader");
|
||||
|
||||
html5QrCode.start(
|
||||
{
|
||||
facingMode:"environment"
|
||||
},
|
||||
{
|
||||
fps:10,
|
||||
qrbox:220
|
||||
},
|
||||
function(decodedText){
|
||||
|
||||
html5QrCode.stop().then(function(){
|
||||
|
||||
$("#cameraArea").hide();
|
||||
$("#scannerArea").show();
|
||||
|
||||
$("#serial_number")
|
||||
.val(decodedText);
|
||||
|
||||
saveSerial();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
$("#btnCloseCamera").click(function(){
|
||||
|
||||
if(html5QrCode){
|
||||
|
||||
html5QrCode.stop().then(function(){
|
||||
|
||||
$("#cameraArea").hide();
|
||||
$("#scannerArea").show();
|
||||
|
||||
$("#serial_number").focus();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
// URUSAN BARCODE INPUT DAN CAMSCANNER
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
let action = 'add';
|
||||
@@ -279,20 +511,20 @@ loadGudang();
|
||||
loadKas();
|
||||
loadKode();
|
||||
|
||||
// ================= ADD =================
|
||||
$('.btn-add-item').click(function(){
|
||||
action='add';
|
||||
resetForm();
|
||||
// // ================= ADD =================
|
||||
// $('.btn-add-item').click(function(){
|
||||
// action='add';
|
||||
// resetForm();
|
||||
|
||||
$('#qty').closest('div').show();
|
||||
$('#kode_barang').closest('div').show();
|
||||
$('#warehouse_id').closest('div').show();
|
||||
$('#account_kas').closest('div').show();
|
||||
$('#modalItem').modal('show');
|
||||
loadGudang();
|
||||
loadKas();
|
||||
loadKode();
|
||||
});
|
||||
// $('#qty').closest('div').show();
|
||||
// $('#kode_barang').closest('div').show();
|
||||
// $('#warehouse_id').closest('div').show();
|
||||
// $('#account_kas').closest('div').show();
|
||||
// $('#modalItem').modal('show');
|
||||
// loadGudang();
|
||||
// loadKas();
|
||||
// loadKode();
|
||||
// });
|
||||
|
||||
// ================= EDIT =================
|
||||
$(document).on('click','.btn-editItem',function(){
|
||||
@@ -412,6 +644,12 @@ $('.btn-out').click(function(){
|
||||
loadKasOut();
|
||||
});
|
||||
|
||||
$('#modalKeluar').on('shown.bs.modal', function () {
|
||||
setTimeout(function () {
|
||||
$('#serial_number').trigger('focus').select();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$('#warehouse_id_keluar').on('change', function(){
|
||||
let warehouse_id = $(this).val();
|
||||
|
||||
@@ -682,26 +920,5 @@ $('#btnAdjust').click(function(){
|
||||
|
||||
});
|
||||
|
||||
|
||||
//PDF GENERATE//
|
||||
$('#generate_pdf').on('click', function(){
|
||||
|
||||
let btn = $(this);
|
||||
|
||||
btn.prop('disabled', true)
|
||||
.html('Generate PDF...');
|
||||
|
||||
window.open(
|
||||
|
||||
"<?= base_url('generateitems/generatepdf'); ?>",
|
||||
'_blank'
|
||||
);
|
||||
|
||||
setTimeout(function(){
|
||||
btn.prop('disabled', false)
|
||||
.html('Generate PDF');
|
||||
},1000);
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user