From fb114a222c0521a6ff5829c0e446afa96a0a9dff Mon Sep 17 00:00:00 2001 From: king Date: Fri, 19 Jun 2026 00:16:15 +0900 Subject: [PATCH] =?UTF-8?q?feat(malaysia):=20=EC=B0=BD=EA=B3=A0=20POG?= =?UTF-8?q?=EB=A5=BC=20=EB=A9=B4=EB=B3=84=20A4=201=EC=9E=A5(Side=20A/B/Gro?= =?UTF-8?q?und)=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 전체 1장 → 면마다 한 페이지로 출력. 행을 flex 균등 분배해 칸·글자 크게(cqh 2배) 한눈에 보이게. 시트별 page-break 적용. Co-Authored-By: Claude Opus 4.8 --- .../templates/malaysia/rack_view.html | 41 ++++++------ app/static/malaysia_rack_view.js | 63 ++++++++++--------- 2 files changed, 55 insertions(+), 49 deletions(-) diff --git a/app/modules/malaysia/templates/malaysia/rack_view.html b/app/modules/malaysia/templates/malaysia/rack_view.html index 3a90838..3a12bc8 100644 --- a/app/modules/malaysia/templates/malaysia/rack_view.html +++ b/app/modules/malaysia/templates/malaysia/rack_view.html @@ -125,37 +125,39 @@ align-items:center; margin-bottom:16px; } .pog-toolbar .pog-title { margin-right:auto; color:#fff; font-weight:700; font-size:16px; } - .pog-pages { display:flex; justify-content:center; } - /* A4 가로(297:210) 시트. container-type:size → 자식이 cqh/cqw 로 시트에 맞춰 축소 */ + .pog-pages { display:flex; flex-direction:column; gap:18px; align-items:center; } + /* A4 가로(297:210) 시트 — 면(Side A/B/Ground)마다 1장. + container-type:size → 자식이 cqh/cqw 로 시트 크기에 맞춰 확대/축소 */ .pog-sheet { background:#fff; width:min(100%, 1180px); aspect-ratio:297/210; box-shadow:0 8px 24px rgba(0,0,0,.3); border-radius:4px; - padding:1.6cqh 1.4cqw; box-sizing:border-box; + padding:2.5cqh 2cqw; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; container-type:size; } .pog-sheet .pog-sheet-head { display:flex; justify-content:space-between; align-items:baseline; - font-weight:800; color:#0f172a; margin-bottom:1cqh; flex:0 0 auto; + font-weight:800; color:#0f172a; margin-bottom:2cqh; flex:0 0 auto; } - .pog-sheet .pog-sheet-head .pog-t { font-size:2.4cqh; } - .pog-sheet .pog-sheet-head .pog-meta { font-size:1.6cqh; color:#475569; font-weight:600; } - .pog-sheet .rv-board { gap:1cqh; flex:1 1 auto; min-height:0; } - .pog-sheet .rv-side { display:flex; flex-direction:column; min-height:0; } - .pog-sheet .rv-side h3 { font-size:1.7cqh; margin:0 0 0.4cqh; } - .pog-sheet .rv-row { gap:0.6cqw; margin-bottom:0.6cqh; } + .pog-sheet .pog-sheet-head .pog-t { font-size:4.2cqh; } + .pog-sheet .pog-sheet-head .pog-meta { font-size:2.6cqh; color:#475569; font-weight:600; } + /* 면 1개가 시트 높이를 꽉 채운다(행 flex 균등 분배 → 칸 커짐) */ + .pog-sheet .rv-side { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } + .pog-sheet .rv-side h3 { display:none; } + .pog-sheet .rv-row { flex:1 1 0; gap:1.4cqw; margin:0 0 1.4cqh; min-height:0; } + .pog-sheet .rv-row:last-child { margin-bottom:0; } .pog-sheet .rv-cell { - min-height:0; height:9.2cqh; padding:0.5cqh 0.6cqw; border-radius:3px; - cursor:default; overflow:hidden; background:#f8fafc; + height:auto; min-height:0; padding:1.2cqh 1.2cqw; border-radius:5px; + cursor:default; overflow:hidden; background:#f8fafc; justify-content:flex-start; } .pog-sheet .rv-cell.is-empty { background:#fff; } .pog-sheet .rv-cell-head { - font-size:1.25cqh; font-weight:700; margin-bottom:0.3cqh; padding-bottom:0.2cqh; + font-size:2.6cqh; font-weight:800; margin-bottom:1cqh; padding-bottom:0.6cqh; } .pog-sheet .rv-pick { display:none !important; } - .pog-sheet .rv-items { gap:0.3cqh; } - .pog-sheet .rv-item { font-size:1.25cqh; line-height:1.2; } - .pog-sheet .rv-empty-note { font-size:1.25cqh; } + .pog-sheet .rv-items { gap:0.8cqh; } + .pog-sheet .rv-item { font-size:2.6cqh; line-height:1.3; } + .pog-sheet .rv-empty-note { font-size:2.6cqh; } @media print { body.printing-pog .erp-sidebar, body.printing-pog .erp-topbar { display:none !important; } @@ -166,12 +168,13 @@ } body.printing-pog .pog-toolbar { display:none !important; } body.printing-pog .pog-pages { display:block !important; } - /* 한 장에 전체 도면. height:100vh → 컨테이너 높이=페이지 높이라 cqh 가 그대로 맞음 */ + /* 면(시트)마다 한 장. height:100vh → 컨테이너=페이지라 cqh 가 그대로 맞음 */ body.printing-pog .pog-sheet { width:100% !important; height:100vh !important; aspect-ratio:auto !important; box-shadow:none !important; border-radius:0 !important; - page-break-after:avoid; page-break-inside:avoid; + page-break-inside:avoid; break-before:page; page-break-before:always; } + body.printing-pog .pog-sheet:first-child { break-before:auto; page-break-before:auto; } } {% endblock %} @@ -261,5 +264,5 @@
- + {% endblock %} diff --git a/app/static/malaysia_rack_view.js b/app/static/malaysia_rack_view.js index 3cc3610..83a9730 100644 --- a/app/static/malaysia_rack_view.js +++ b/app/static/malaysia_rack_view.js @@ -212,45 +212,48 @@ document.body.classList.remove("printing-cells"); } - // ── 창고 POG (전체 도면 A4 가로 1장) 미리보기 ── + // ── 창고 POG: 면(Side A/B/Ground)마다 A4 가로 1장 미리보기 ── function openPOG() { var board = document.getElementById("rv-board"); var pages = document.getElementById("pog-pages"); if (!board || !pages) return; - var sheet = document.createElement("div"); - sheet.className = "pog-sheet"; - - // 머리말: 제목 + 창고/기준 재고조사 - var head = document.createElement("div"); - head.className = "pog-sheet-head"; - var ttl = document.createElement("span"); - ttl.className = "pog-t"; - ttl.textContent = t("창고 POG", "Warehouse POG"); - var meta = document.createElement("span"); - meta.className = "pog-meta"; var wh = board.getAttribute("data-wh") || ""; var st = board.getAttribute("data-stocktake") || ""; - meta.textContent = [wh, st].filter(Boolean).join(" | "); - head.appendChild(ttl); - head.appendChild(meta); - sheet.appendChild(head); - - // 보드 통째로 복제 → 인터랙티브 요소 제거(체크박스/드래그) - var clone = board.cloneNode(true); - clone.removeAttribute("id"); - clone.removeAttribute("style"); - [].slice.call(clone.querySelectorAll(".rv-cell")).forEach(function (c) { - c.removeAttribute("draggable"); - c.classList.remove("is-selected", "is-dragover", "dragging"); - }); - [].slice.call(clone.querySelectorAll(".rv-pick")).forEach(function (cb) { - cb.parentNode && cb.parentNode.removeChild(cb); - }); - sheet.appendChild(clone); + var metaTxt = [wh, st].filter(Boolean).join(" | "); pages.innerHTML = ""; - pages.appendChild(sheet); + [].slice.call(board.querySelectorAll(".rv-side")).forEach(function (side) { + var sheet = document.createElement("div"); + sheet.className = "pog-sheet"; + + // 머리말: 면 이름(Side A/B/Ground) + 창고/기준 재고조사 + var head = document.createElement("div"); + head.className = "pog-sheet-head"; + var ttl = document.createElement("span"); + ttl.className = "pog-t"; + var h3 = side.querySelector("h3"); + ttl.textContent = h3 ? h3.textContent.trim() : t("창고 POG", "Warehouse POG"); + var meta = document.createElement("span"); + meta.className = "pog-meta"; + meta.textContent = metaTxt; + head.appendChild(ttl); + head.appendChild(meta); + sheet.appendChild(head); + + // 면 복제 → 인터랙티브 요소 제거(체크박스/드래그) + var clone = side.cloneNode(true); + [].slice.call(clone.querySelectorAll(".rv-cell")).forEach(function (c) { + c.removeAttribute("draggable"); + c.classList.remove("is-selected", "is-dragover", "dragging"); + }); + [].slice.call(clone.querySelectorAll(".rv-pick")).forEach(function (cb) { + cb.parentNode && cb.parentNode.removeChild(cb); + }); + sheet.appendChild(clone); + pages.appendChild(sheet); + }); + document.body.classList.add("printing-pog"); document.getElementById("pog-overlay").classList.add("is-open"); }