Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Print label layout

Browse Source
This commit is contained in:
Baghaztra 2025-10-21 09:43:23 +07:00
parent 7cd3e54402
commit e82c4c6d91
3 changed files with 1543 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -141,9 +141,12 @@ docker compose --env-file .env.production up -d --build
# Siapkan database
docker exec -it abbauf_kasir_app php artisan migrate --seed
# Atau import database secara manual
docker exec -i abbauf_kasir_db mysql -u kasir_user -pkasir_password kasir_db < ./toko_emas.sql
# Periksa database (opsional)
docker exec -it abbauf_kasir_db bash
mysql -u root -p
mysql -u kasir_user -pkasir_password kasir_db
```
### 8. Print Label
@ -157,6 +160,7 @@ mysql -u root -p
- Pilih printer `NIIMBOT B3S_P` dan atur kertas ke ukuran kertas `40mm x 30mm`, margin `Default`, scale `Default`
- Klik print
### 9. Print Nota
---
## 🌐 Akses Aplikasi

81
resources/js/components/PrintBarcode.vue
View File

@ -37,7 +37,9 @@ const printBarcode = () => {
const printWindow = window.open('', '_blank');
const kode = props.code || 'N/A';
const nama = props.item.nama || 'N/A';
const berat = props.item.berat ? `(${props.item.berat} g)` : '';
const berat = props.item.berat ? `${props.item.berat} g` : '';
const kadar = props.item.kadar ? `${props.item.kadar} K` : '';
const harga = props.item.harga_jual ? `Rp${props.item.harga_jual.toLocaleString('id-ID')},00` : '';
printWindow.document.write(`
<html>
@ -70,29 +72,47 @@ const printBarcode = () => {
height: 38mm;
}
.barcode-container {
width: 12mm;
height: 38mm;
display: flex;
align-items: center;
justify-content: center;
}
.barcode-img {
transform: rotate(90deg);
transform-origin: center;
max-height: 12mm;
max-width: 12mm;
}
.details-container {
width: 12mm;
.left-side {
width: 12.5mm;
height: 38mm;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.left-content {
position: absolute;
width: fit-content;
height: 12.5mm;
transform: rotate(90deg);
transform-origin: center;
display: flex;
align-items: center;
gap: 2mm;
}
.barcode-img {
height: 10mm;
width: auto;
flex-shrink: 0;
}
.info-box {
display: flex;
flex-direction: column;
gap: 0.5mm;
font-size: 5pt;
line-height: 1.2;
}
.right-side {
width: 12.5mm;
height: 38mm;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.item-name {
@ -101,25 +121,30 @@ const printBarcode = () => {
white-space: normal;
word-wrap: break-word;
position: absolute;
width: 32mm;
width: 36mm;
text-align: center;
transform: rotate(270deg);
top: 50%;
left: 50%;
transform-origin: center;
translate: -50% -50%;
}
</style>
</head>
<body>
<div class="label">
<div class="barcode-container">
<img id="barcode-img" class="barcode-img"
src="${barcodeUrl.value}" alt="Barcode" />
<!-- Sisi Kiri: Barcode + Info -->
<div class="left-side">
<div class="left-content">
<img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" />
<div class="info-box">
${harga ? `<div>${harga}</div>` : ''}
${berat ? `<div>Berat: ${berat}</div>` : ''}
${kadar ? `<div>Kadar: ${kadar}</div>` : ''}
</div>
</div>
</div>
<div class="details-container">
<div class="item-name">${nama} ${berat}</div>
<div class="right-side">
<div class="item-name">${nama}</div>
</div>
</div>
</body>

1485
storage/toko_emas.sql Normal file
View File

File diff suppressed because one or more lines are too long