Deneyim: Ürün Kabul - Hasar Tespit Tutanağı

Hazırlanan form, ürün kabulünde bir standart olarak kazandırılan formun, kurumsal yapıda kullanılmasıdır. Kodu not defteri ile açarak "Ctrl+F" ile arama yapılarak, "Helpdesk" ve "MYO MÜDÜRLÜĞÜ" kelimesini aratarak, departman ve Müdürlüğünüze göre ifadelerle güncelleyip kaydedebilirsiniz. Kurumunuzun logosunu "logo.jpg" olarak kaydederek formda kalıcı bir ikon oluşturabilirsiniz.

Tablo ve Resim ekleyebilir, İmza alanını çoğaltabilir, düzenleyebilirsiniz.

Baskı ön izleme, Yazdırma, Kaydetme işlemleri ile kullanıma hazır durumdadır.

HTML Kod:

<!DOCTYPE html>

<head>

<title>Ürün Kabul-Hasar Tespit Tutanağı</title>

<style>

* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }

:root { --primary:#2563eb; --bg:#f3f4f6; --text:#111827; --border:#dbe4ee; }

body { background:var(--bg); color:var(--text); padding:20px; }

.container { width: 100%; max-width: 100%; margin: auto; overflow-x: hidden; }

.section-box { background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; }

/* HEADER BÖLÜMÜ */

.main-header {

padding: 12px 15px;

display: grid;

grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

align-items: center;

box-shadow: 0 2px 4px rgba(0,0,0,.05);

gap: 10px;

}

.header-left {

display: flex;

align-items: center;

gap: 12px;

overflow: hidden;

}

.logo-wrapper {

width: 50px;

height: 50px;

border: 1px solid var(--border);

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

cursor: pointer;

}

.logo-wrapper img { width: 90%; height: 90%; object-fit: contain; }

.header-center {

align-self: center;

text-align: center;

}

.main-title {

font-size: clamp(12px, 1.8vw, 18px);

font-weight: 800;

line-height: 1.2;

outline: none;

white-space: nowrap;

}

.header-right {

display: flex;

flex-direction: column;

align-items: flex-end;

justify-content: center;

gap: 4px;

overflow: hidden;

}

/* Her İki Yan Metin İçin Ortak Sınıf */

.side-text {

font-size: 10px;

font-weight: 700;

color: #64748b;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

line-height: 1.3;

}

/* Orta Alan - Div Textarea */

.main-panel { padding:20px; }

.editable-text {

width: 100%;

padding: 5px;

outline: none;

background: transparent;

font-size: 16px;

min-height: 50px;

text-align: center;

line-height: 1.5;

word-wrap: break-word;

text-indent: 40px;

}

/* Tablo Yapıştırma Alanı (Sayfa Sınırları) */

.paste-area {

min-height: 60px;

width: 100%;

max-width: 794px;

padding: 10px;

margin: 30px auto 15px auto;

border-top: 1px dashed var(--border);

border-bottom: 1px dashed var(--border);

border-left: 2px dashed #ef4444;

border-right: 2px dashed #ef4444;

border-radius: 4px;

outline: none;

background: transparent;

font-size: 14px;

position: relative;

overflow-x: auto;

}

.paste-area::before {

content: "◄ A4 Sayfa Sınırı ►";

position: absolute;

top: -25px;

left: 50%;

transform: translateX(-50%);

font-size: 12px;

color: #ef4444;

font-weight: 700;

pointer-events: none;

}

.paste-area:empty::after {

content: attr(data-placeholder);

color: #94a3b8;

font-style: italic;

display: block;

text-align: center;

margin-top: 10px;

}

.paste-area:focus { border-color: var(--primary); }

/* TABLO DÜZENLEMELERİ (Genişlik Aşımını Önleme) */

.paste-area table {

border-collapse: collapse !important;

width: 100% !important;

max-width: 100% !important;

margin: 5px auto !important;

background-color: #fff !important;

table-layout: fixed !important;

word-break: break-word !important;

}

.paste-area th, .paste-area td {

border: 1px solid #94a3b8 !important;

padding: 6px !important;

word-break: break-word !important;

overflow-wrap: break-word !important;

white-space: normal !important;

position: relative;

max-width: 100% !important;

box-sizing: border-box !important;

}

/* Resim Alanı */

.image-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; margin-top: 10px; }

.img-thumb {

max-width: 100%; width: auto; height: auto; max-height: 300px;

object-fit: contain; border-radius:8px; border:1px solid var(--border); cursor:pointer;

}

.actions { display:flex; gap:10px; justify-content:center; margin-bottom:15px; }

.btn { border:none; padding:10px 20px; border-radius:10px; font-weight:600; cursor:pointer; color:#fff; transition: opacity 0.2s; }

.btn:hover { opacity: 0.9; }

.btn-primary { background:var(--primary); }

.btn-success { background:#16a34a; }

.btn-light { background: #e5e7eb; color: #374151; }

.btn-light:hover { background: #d1d5db; }

/* İmza Alanı */

.signature-container { margin-bottom: 12px; }

.signature-controls { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }

.signature-grid { display:flex; justify-content:space-evenly; gap: 15px; padding:15px; flex-wrap: wrap; }

.signature-box { padding:5px; text-align:center; flex: 1; min-width: 180px; max-width: 300px; }

.editable-title { font-size:11px; font-weight:bold; min-height:16px; outline:none; margin-bottom: 2px; }

.editable-title:focus { border-bottom: 1px dashed var(--primary); }

.edit-name { border:none; background:transparent; text-align:center; width:100%; font-weight:bold; cursor:pointer; padding:5px; }

.edit-name:focus { outline:none; border:1px solid var(--primary); border-radius:4px; }

.sig-line { color:#94a3b8; font-size:11px; margin-top:5px; border-top:1px solid var(--border); display:inline-block; padding:0 30px; }

/* Yazdırma (Print) Kuralları */

@media print {

@page { size: portrait; margin: 1cm; }

body { background:#fff; padding:0; }

.container { max-width: 100% !important; overflow: hidden !important; }

.actions, .btn, .signature-controls { display:none !important; }

.section-box { border:1px solid #ccc; box-shadow:none; margin-bottom: 5px; }

.signature-grid { flex-wrap: nowrap; gap: 10px; }

.editable-text {

text-align: justify !important;

text-indent: 40px !important;

}

.paste-area:empty { display: none !important; }

.main-header { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; }

.main-title { font-size: 18px !important; white-space: nowrap !important; }

.paste-area::before { display: none !important; }

.paste-area { border: none !important; padding: 0 !important; margin: 5px 0 !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; }

/* KESİN ÇÖZÜM: Yazdırırken tablonun ve hücrelerin taşması tamamen engellendi */

.paste-area table {

width: 100% !important;

max-width: 100% !important;

min-width: 0 !important;

table-layout: fixed !important;

}

.paste-area th, .paste-area td {

border: 1px solid #000 !important;

font-size: 11px !important;

width: auto !important;

max-width: 100% !important;

min-width: 0 !important;

word-break: break-word !important;

overflow-wrap: break-word !important;

white-space: normal !important;

}

.image-gallery { gap: 5px; }

.img-thumb {

max-width: 48% !important;

max-height: 250px !important;

page-break-inside: avoid;

}

</style>

</head>

<body>

<div class="side-text">Helpdesk</div>

</div>

<div class="main-title" contenteditable="true">ÜRÜN KABUL<br>HASAR TESPİT TUTANAĞI</div>

</div>

<div class="side-text">MYO MÜDÜRLÜĞÜ</div>

</div>

Ürün kabul alanında gerçekleştirilen teslim alma işlemleri sırasında yapılan kontrollerde, sevkiyat içerisinde bulunan bazı kolilerde <strong>ezilme ve ambalaj deformasyonu</strong> olduğu tespit edilmiştir.<br><br>

Hasar tespit edilen koliler kayıt altına alınmış, durum fotoğraf ile belgelenmiştir. Hasar tespit edilen koliler ayrılarak inceleme sürecine alınmış ve ürün içeriklerine yönelik kontrol çalışmaları başlatılmıştır.

</div>

<button class="btn btn-primary" onclick="imageInput.click()">+ Resim Ekle</button>

</div>

<button class="btn btn-success" onclick="window.print()">Yazdır / PDF</button>

</div>

<button class="btn btn-light" onclick="removeSignature()" style="padding: 5px 15px; font-size: 14px;">- İmza Çıkar</button>

</div>

<input type="text" class="edit-name" value="İsim Soyisim" readonly

ondblclick="this.readOnly=false;" onblur="this.readOnly=true;">

</div>

const tarih = document.getElementById('tarih');

tarih.value = new Date().toISOString().split('T')[0];

const imageInput = document.getElementById('imageInput');

const imageGallery = document.getElementById('imageGallery');

imageInput.addEventListener('change', (e) => {

for (let file of e.target.files) {

const reader = new FileReader();

reader.onload = (ev) => {

const img = document.createElement('img');

img.src = ev.target.result;

img.className = 'img-thumb';

img.onclick = () => {

if(confirm('Bu resmi silmek istediğinize emin misiniz?')) img.remove();

};

imageGallery.appendChild(img);

};

reader.readAsDataURL(file);

}

});

const logoWrapper = document.getElementById('logoWrapper');

const logoInput = document.getElementById('logoInput');

const logoImage = document.getElementById('logoImage');

logoWrapper.onclick = () => logoInput.click();

logoInput.onchange = (e) => {

const reader = new FileReader();

reader.onload = (ev) => logoImage.src = ev.target.result;

reader.readAsDataURL(e.target.files[0]);

};

function addSignature() {

const grid = document.getElementById('signatureGrid');

const box = document.createElement('div');

box.className = 'signature-box';

box.innerHTML = `

<input type="text" class="edit-name" value="İsim Soyisim" readonly

ondblclick="this.readOnly=false;" onblur="this.readOnly=true;">

grid.appendChild(box);

}

function removeSignature() {

const grid = document.getElementById('signatureGrid');

if (grid.children.length > 1) {

grid.removeChild(grid.lastElementChild);

} else {

alert('Formda en az bir imza alanı bulunmalıdır.');

}

// --- YAPILAN TABLOYU SINIRA SIĞDIRMA VE TAŞMAYI ENGELLEME FONKSİYONU ---

const tableContainer = document.getElementById('tableContainer');

tableContainer.addEventListener('paste', function(e) {

setTimeout(() => {

const tables = tableContainer.querySelectorAll('table');

tables.forEach(table => {

table.removeAttribute('width');

table.style.width = '100%';

table.style.maxWidth = '100%';

table.style.tableLayout = 'fixed';

// Tablo içindeki tüm elementlerin harici genişlik değerlerini temizleyip sığmaya zorla

const allElements = table.querySelectorAll('*');

allElements.forEach(el => {

el.removeAttribute('width');

el.removeAttribute('height');

el.style.width = '';

el.style.maxWidth = '100%';

el.style.minWidth = '0';

el.style.wordBreak = 'break-word';

el.style.overflowWrap = 'break-word';

});

}, 50);

});

// --- ÖZGÜR TABLO BOYUTLANDIRMA SİSTEMİ (ALAN İÇİNE HAPSEDİLDİ) ---

let isResizing = false;

let currentTarget = null;

let startX, startY, startWidth, startHeight;

let resizeType = '';

tableContainer.addEventListener('mousemove', function(e) {

if (isResizing) return;

const table = e.target.closest('table');

const cell = e.target.closest('td, th');

if (table) {

const tableRect = table.getBoundingClientRect();

const isNearTableCorner = (e.clientX > tableRect.right - 20) && (e.clientY > tableRect.bottom - 20);

if (isNearTableCorner) {

if (cell) cell.style.cursor = 'nwse-resize';

table.style.cursor = 'nwse-resize';

return;

}

if (cell) {

const rect = cell.getBoundingClientRect();

const nearRight = e.clientX > rect.right - 8;

const nearBottom = e.clientY > rect.bottom - 8;

if (nearRight && nearBottom) cell.style.cursor = 'nwse-resize';

else if (nearRight) cell.style.cursor = 'col-resize';

else if (nearBottom) cell.style.cursor = 'row-resize';

else {

cell.style.cursor = 'text';

if (table) table.style.cursor = 'text';

}

});

tableContainer.addEventListener('mousedown', function(e) {

const table = e.target.closest('table');

const cell = e.target.closest('td, th');

if (table) {

const tableRect = table.getBoundingClientRect();

const isNearTableCorner = (e.clientX > tableRect.right - 20) && (e.clientY > tableRect.bottom - 20);

if (isNearTableCorner) {

isResizing = true;

currentTarget = table;

resizeType = 'table';

startX = e.clientX;

startY = e.clientY;

startWidth = table.offsetWidth;

startHeight = table.offsetHeight;

e.preventDefault();

return;

}

if (cell) {

const rect = cell.getBoundingClientRect();

const nearRight = e.clientX > rect.right - 8;

const nearBottom = e.clientY > rect.bottom - 8;

if (nearRight || nearBottom) {

isResizing = true;

currentTarget = cell;

startX = e.clientX;

startY = e.clientY;

startWidth = currentTarget.offsetWidth;

startHeight = currentTarget.offsetHeight;

if (nearRight && nearBottom) resizeType = 'both';

else if (nearRight) resizeType = 'col';

else resizeType = 'row';

e.preventDefault();

}

});

document.addEventListener('mousemove', function(e) {

if (!isResizing || !currentTarget) return;

const containerInnerWidth = tableContainer.clientWidth - 20;

if (resizeType === 'table') {

let newWidth = startWidth + (e.clientX - startX);

newWidth = Math.min(containerInnerWidth, Math.max(100, newWidth));

const newHeight = Math.max(50, startHeight + (e.clientY - startY));

currentTarget.style.width = newWidth + 'px';

currentTarget.style.minWidth = newWidth + 'px';

currentTarget.style.maxWidth = containerInnerWidth + 'px';

currentTarget.style.height = newHeight + 'px';

currentTarget.style.minHeight = newHeight + 'px';

} else {

if (resizeType === 'col' || resizeType === 'both') {

let newWidth = startWidth + (e.clientX - startX);

newWidth = Math.min(containerInnerWidth, Math.max(30, newWidth));

currentTarget.style.width = newWidth + 'px';

currentTarget.style.minWidth = newWidth + 'px';

currentTarget.style.maxWidth = containerInnerWidth + 'px';

}

if (resizeType === 'row' || resizeType === 'both') {

let newHeight = startHeight + (e.clientY - startY);

newHeight = Math.max(20, newHeight);

currentTarget.style.height = newHeight + 'px';

currentTarget.style.minHeight = newHeight + 'px';

}

});

document.addEventListener('mouseup', function() {

isResizing = false;

currentTarget = null;

resizeType = '';

});

</script>

</body>

</html>

Kaynaklar:

* Gemini