Files
dbx-main/app/modules/cupang/templates/cupang/view.html
T
king ca87c254c0 fix(cupang): 3열 프레임 높이를 그리드 행(1fr)로 고정 — ③ 목록만 스크롤
원인: .cpg-calc3 의 행 높이가 auto 라 카드가 화면 아래로 넘치도록 늘어났고,
페이지 스크롤도 없어서 아래쪽(마지막 상자, [+ 새 혼합 상자])이 잘렸다.

- grid-template-rows: minmax(0,1fr) 로 행을 컨테이너 높이에 고정
- 카드 overflow:hidden, ①표/②목록/③센터목록만 내부 스크롤
- 그동안 덧댄 !important 패치와 JS 높이 강제 지정 제거(충돌 정리)
- 2열/1열로 접히면 행이 여러 개라 카드 max-height(76vh)로 처리

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-01 17:38:51 +09:00

186 lines
7.4 KiB
HTML

{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% endblock %}
{% block content %}
{# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}
<section class="cpg">
<div class="erp-page-actions">
<a class="erp-btn erp-btn-primary" href="/cupang/?date={{ shipment.ship_date }}">◀◀ 달력</a>
<span class="erp-badge erp-badge-neutral">{{ shipment.status }}</span>
</div>
<div class="cpg-calc3">
<!-- ① 품목 -->
<div class="erp-card cpg-form-card cpg-calc-card">
<div class="cpg-card-head">
<h2>① 품목</h2>
<span class="erp-muted">{{ items|length }}종 · {{ total_qty }}개</span>
</div>
<div class="erp-table-wrap">
<table class="erp-table cpg-calc-table">
<colgroup>
<col class="cpg-col-name" />
<col class="cpg-col-qty" />
</colgroup>
<thead>
<tr><th>제품명</th><th>수량</th></tr>
</thead>
<tbody>
{% for it in items %}
<tr class="cpg-view-row">
<td title="{{ it.product_name }}">{{ it.product_name }}</td>
<td class="cpg-calc-num">{{ it.quantity }}</td>
</tr>
{% endfor %}
{% if not items %}
<tr><td colspan="2" class="erp-muted">품목이 없습니다.</td></tr>
{% endif %}
</tbody>
</table>
</div>
</div>
<!-- ② 상자 요약 -->
<div class="erp-card cpg-form-card cpg-calc-sum">
<div class="cpg-card-head">
<h2>② 상자 요약</h2>
<span class="erp-muted">확정 당시 수량 기준으로 다시 계산한 값</span>
</div>
<div id="cpg-sum-body">
<div class="cpg-sum-kpis">
<div class="cpg-kpi">
<span class="cpg-kpi-label">총 상자</span>
<strong class="cpg-kpi-value">{{ calc.grand_total_boxes }}상자</strong>
<span class="cpg-kpi-hint">제품별 + 혼합</span>
</div>
<div class="cpg-kpi">
<span class="cpg-kpi-label">출고</span>
<strong class="cpg-kpi-value">{{ shipment.outbound_summary or '—' }}</strong>
<span class="cpg-kpi-hint">확정 시 기록</span>
</div>
<div class="cpg-kpi">
<span class="cpg-kpi-label">총 수량</span>
<strong class="cpg-kpi-value">{{ total_qty }}개</strong>
<span class="cpg-kpi-hint">{{ items|length }}종</span>
</div>
</div>
<div class="cpg-sum-scroll">
<h3 class="cpg-sum-h3">제품별 상자</h3>
<div class="cpg-sum-prods">
{% for r in calc.results if r.configured %}
<div class="cpg-sum-prod is-done">
<div class="cpg-sum-prod-head">
<span class="cpg-sum-prod-name">{{ r.product_name }}</span>
</div>
<div class="cpg-sum-prod-nums">
<strong>{{ r.full_boxes }}상자</strong>
<span class="erp-muted">{{ r.quantity }}개 · 입수량 {{ r.units_per_box }}</span>
{% if r.remainder_units %}
<span class="cpg-sum-left">자투리 {{ r.remainder_units }}개</span>
{% else %}
<span class="cpg-sum-exact">딱 맞음</span>
{% endif %}
</div>
</div>
{% endfor %}
{% set unconfigured = calc.results | rejectattr('configured') | list %}
{% if unconfigured %}
<p class="erp-muted">상자 입수량 미설정:
{% for r in unconfigured %}{{ r.product_name }}{% if not loop.last %}, {% endif %}{% endfor %}
</p>
{% endif %}
</div>
<h3 class="cpg-sum-h3">자투리 혼합 상자
<span class="erp-muted">{% if not calc.mixes %}— 자투리 없음{% else %}— 1장 = 1상자{% endif %}</span>
</h3>
<div class="cpg-sum-boxes">
{% for m in calc.mixes %}
{% for b in m.boxes %}
<div class="cpg-box-card is-done">
<div class="cpg-box-info">
<div class="cpg-box-title">{{ m.box_name }} 혼합 #{{ loop.index }}</div>
<ul class="cpg-box-items">
{% for it in b['items'] %}
<li><span>{{ it.product_name }}</span><b>{{ it.quantity }}개</b></li>
{% endfor %}
</ul>
<div class="cpg-box-bar"><span style="width:{{ b.fill_percent }}%"></span></div>
<div class="cpg-box-fillnum">{{ b.fill_percent }}% 채움</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
<!-- ③ 센터 -->
<div class="erp-card cpg-form-card cpg-dist-card">
<div class="cpg-card-head">
<h2>③ 센터</h2>
<span class="erp-muted">출고 #{{ shipment.id }}</span>
</div>
<div class="cpg-dist-list">
<div class="cpg-dist-center has-items">
<div class="cpg-dist-head">
<strong>{{ shipment.center_name_snapshot or '센터 미지정' }}</strong>
<span class="erp-badge erp-badge-neutral">{{ shipment.ship_method }}</span>
<span class="cpg-dist-sum">
<span class="erp-badge erp-badge-neutral">{{ calc.grand_total_boxes }}상자</span>
<span class="erp-badge erp-badge-neutral">{{ total_qty }}개</span>
</span>
</div>
<ul class="cpg-dist-items">
{% if shipment.box_plan %}
{% for e in shipment.box_plan %}
<li class="cpg-dist-item{% if e.kind == 'mix' %} is-mix{% endif %}">
<div class="cpg-dist-line">
<span class="cpg-dist-name">{{ e.name }}</span>
<span class="cpg-dist-unit">{{ e.count }}상자 · {{ e.quantity }}개</span>
</div>
{% if e.kind == 'mix' and e['items'] %}
<ul class="cpg-dist-tree">
{% for it in e['items'] %}
<li><span class="cpg-tree-name">{{ it.product_name }}</span>
<span class="cpg-tree-qty">{{ it.quantity }}개</span></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% else %}
{% for it in items %}
<li class="cpg-dist-item">
<div class="cpg-dist-line">
<span class="cpg-dist-name">{{ it.product_name }}</span>
<span class="cpg-dist-unit">{{ it.quantity }}개</span>
</div>
</li>
{% endfor %}
{% endif %}
</ul>
</div>
<dl class="cpg-view-meta">
<div><dt>작성일</dt><dd>{{ shipment.document_date }}</dd></div>
<div><dt>출고일</dt><dd>{{ shipment.ship_date }}</dd></div>
<div><dt>센터입고일</dt><dd>{{ shipment.center_arrival_date }}</dd></div>
<div><dt>작업자</dt><dd>{{ shipment.worker or '—' }}</dd></div>
{% if shipment.memo %}<div><dt>메모</dt><dd>{{ shipment.memo }}</dd></div>{% endif %}
</dl>
</div>
</div>
</div><!-- /cpg-calc3 -->
</section>
{% endblock %}