Files
dbx-main/app/modules/cupang/templates/cupang/form.html
T
king ae7daabae5 fix(cupang): 센터 분배 드래그 실패 지점 제거·센터 목록 가나다 정렬
드래그가 브라우저에서 먹지 않던 문제를 추정 대신 실패 가능 지점별로
전부 막았다.

- dragstart 리스너를 카드 요소에 직접 바인딩(위임으로는 잡히지 않는
  환경 대비). 렌더할 때마다 다시 바인딩한다.
- dragenter/dragover 를 모두 preventDefault — 하나만 막으면 드롭을
  거부하는 브라우저가 있다.
- 드롭 대상 범위를 ③ 카드 전체로 확대하고, 대상 패널은
  closest → elementFromPoint → (센터가 하나면) 그 센터 순으로 찾는다.
  패널 사이 여백에 놓아도 담긴다.
- dataTransfer.setData/getData 가 막힌 환경 대비로 dragKey 를 따로 보관해
  드롭 시 사용한다. 그래도 못 읽으면 클릭으로 담으라는 안내를 띄운다.
- 드래그 중에는 ③ 영역에 점선 강조를 준다.
- 드래그 직후 발생하는 click 은 무시해 대화상자가 두 번 뜨지 않게 한다.

센터 선택 목록은 이름 가나다순 정렬(한글 음절은 코드포인트 순).

tests/js: 여백 드롭·dragenter·setData 차단 환경 시나리오 추가. 전체 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-29 03:08:09 +09:00

113 lines
5.1 KiB
HTML

{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829d" />{% endblock %}
{% block content %}
<section class="cpg">
{% set action = '/cupang/new' if mode == 'new' else '/cupang/' ~ shipment.id ~ '/edit' %}
<form id="cpg-form" method="post" action="{{ action }}">
<input type="hidden" name="lines_json" id="cpg-lines-json" value="[]" />
<div class="cpg-form-2col">
<!-- ── 공통 헤더 (왼쪽) ── -->
<div class="erp-card cpg-form-card cpg-form-head">
<div class="cpg-card-head"><h2>공통 헤더</h2></div>
<div class="cpg-header-grid">
<label class="erp-field"><span>작성일 *</span>
<input class="erp-input" type="date" name="document_date" required
value="{{ shipment.document_date if shipment else default_date }}" /></label>
<label class="erp-field"><span>출고일 *</span>
<input class="erp-input" type="date" name="ship_date" required
value="{{ shipment.ship_date if shipment else default_date }}" /></label>
<label class="erp-field"><span>센터입고일 *</span>
<input class="erp-input" type="date" name="center_arrival_date" required
value="{{ shipment.center_arrival_date if shipment else default_date }}" /></label>
<label class="erp-field"><span>입고센터</span>
<select class="erp-select" name="center_id" id="cpg-center-select">
<option value="">— 선택 —</option>
{% for c in centers %}
<option value="{{ c.id }}" data-name="{{ c.name }}"
{% if shipment and shipment.center_id == c.id %}selected{% endif %}>{{ c.name }}</option>
{% endfor %}
</select></label>
<!-- 센터 스냅샷(자유 입력 허용: 과거 명칭 보존/센터 미등록 시) -->
<input type="hidden" name="center_name_snapshot" id="cpg-center-name"
value="{{ shipment.center_name_snapshot if shipment else '' }}" />
<label class="erp-field"><span>출고방식</span>
<select class="erp-select" name="ship_method">
{% for m in ship_methods %}
<option value="{{ m }}" {% if shipment and shipment.ship_method == m %}selected{% endif %}>{{ m }}</option>
{% endfor %}
</select></label>
<label class="erp-field"><span>작업자</span>
<input class="erp-input" type="text" name="worker"
value="{{ shipment.worker if shipment else '' }}" /></label>
</div>
<label class="erp-field cpg-full"><span>출고/박스 요약 (수동 보정 메모)</span>
<input class="erp-input" type="text" name="outbound_summary"
placeholder="예: 쿠팡박스 50, 6호상자 1, (50번 박스)"
value="{{ shipment.outbound_summary if shipment else '' }}" /></label>
<label class="erp-field cpg-full"><span>메모</span>
<textarea class="erp-input" name="memo" rows="2">{{ shipment.memo if shipment else '' }}</textarea></label>
<div class="erp-page-actions cpg-form-actions">
<button type="submit" class="erp-btn erp-btn-primary">저장</button>
{% if mode == 'edit' %}
<a class="erp-btn erp-btn-outline" href="/cupang/{{ shipment.id }}">취소</a>
{% else %}
<a class="erp-btn erp-btn-outline" href="/cupang/">취소</a>
{% endif %}
</div>
</div>
<!-- ── 품목 라인 (오른쪽) ── -->
<div class="erp-card cpg-form-card cpg-form-lines">
<div class="cpg-card-head cpg-lines-head">
<h2>품목 라인</h2>
<span class="erp-muted">
제품명 선택 시 제품코드 자동 입력. 수량 입력 시 박스 수 자동 계산.
{% if not products %}<a href="/cupang/products">설정에서 제품명 먼저 등록</a>{% endif %}
</span>
<div class="cpg-lines-btns">
<button type="button" class="erp-btn erp-btn-outline" id="cpg-add-line">+ 라인 추가</button>
<button type="button" class="erp-btn erp-btn-danger" id="cpg-del-line">선택 라인 삭제</button>
</div>
</div>
<div class="erp-table-wrap cpg-lines-scroll">
<table class="erp-table cpg-lines">
<thead>
<tr>
<th class="cpg-check-col"><input type="checkbox" id="cpg-check-all" title="전체 선택" /></th>
<th>제품명</th><th>제품코드</th><th>수량</th>
<th>입수량</th><th>박스 계산</th><th>라인메모</th>
</tr>
</thead>
<tbody id="cpg-lines-body"><!-- JS 렌더 --></tbody>
</table>
</div>
</div>
</div><!-- /cpg-form-2col -->
</form>
</section>
<script type="application/json" id="cpg-init-lines">
{% if shipment and shipment.lines %}{{ shipment.lines | tojson }}{% else %}[]{% endif %}
</script>
<script type="application/json" id="cpg-box-rules">
{{ box_rules | tojson }}
</script>
<script type="application/json" id="cpg-products">
{{ products | tojson }}
</script>
{% endblock %}
{% block scripts %}<script src="/static/cupang.js?v=20260530p" defer></script>{% endblock %}