wixon/jongryangje
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 전화주문 접수 관리 화면 표 레이아웃/정렬 개선

Browse Source 
- 접수 리스트(전화) 카드를 넓게, 지정판매소 정보 카드를 좁게 비율 조정
- 접수 품목 내역/포장 명세 표 헤더를 sticky 처리하고 높이를 행 4개 기준으로 고정
- 그리드 items-start 적용해 접수 리스트 카드 하단 빈 공간 제거
- 포장 명세 품목을 soi_idx 내림차순으로 정렬
This commit is contained in:
taekyoungc
2026-07-01 11:48:23 +09:00
parent 1e21f07fd6
commit 9933a18e03
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/Views/bag/order_phone_manage.php
View File

@@ -15,8 +15,8 @@
</form>
</section>
<div class="grid grid-cols-1 xl:grid-cols-5 gap-3 mt-2">
<section class="xl:col-span-2 border border-gray-300 rounded-lg bg-white overflow-hidden">
<div class="grid grid-cols-1 xl:grid-cols-9 gap-3 mt-2 items-start">
<section class="xl:col-span-5 border border-gray-300 rounded-lg bg-white overflow-hidden">
<div class="px-3 py-2 border-b border-gray-200 bg-gray-50 text-sm font-semibold text-gray-700">접수 리스트(전화)</div>
<div class="max-h-[72vh] overflow-auto">
<table class="w-full data-table text-sm">
@@ -39,7 +39,7 @@
</div>
</section>
<section class="xl:col-span-3 border border-gray-300 rounded-lg bg-white overflow-hidden">
<section class="xl:col-span-4 border border-gray-300 rounded-lg bg-white overflow-hidden">
<div class="px-3 py-2 border-b border-gray-200 bg-gray-50 text-sm font-semibold text-gray-700">지정판매소 정보</div>
<form id="order-detail-form" action="<?= base_url('bag/order/phone/manage/update') ?>" method="POST" class="p-3 space-y-3">
@@ -64,17 +64,17 @@
</div>
<div class="px-1 text-sm font-semibold text-gray-700">접수 품목 내역</div>
<div class="border border-gray-300 rounded-lg p-4 overflow-auto">
<div class="border border-gray-300 rounded-lg overflow-auto max-h-[179px]">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-14 text-center">번호</th>
<th class="text-left">품목</th>
<th class="w-24 text-right">단가</th>
<th class="w-24 text-right">접수량</th>
<th class="w-24 text-right">포장량</th>
<th class="w-28 text-right">접수금액</th>
<th class="w-40 text-right">포장단위(박스/팩/낱장)</th>
<th class="w-14 text-center sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">번호</th>
<th class="text-left sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">품목</th>
<th class="w-24 text-right sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">단가</th>
<th class="w-24 text-right sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">접수량</th>
<th class="w-24 text-right sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">포장량</th>
<th class="w-28 text-right sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">접수금액</th>
<th class="w-40 text-right sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">포장단위(박스/팩/낱장)</th>
</tr>
</thead>
<tbody id="detail-items-body">
@@ -99,15 +99,15 @@
<span class="font-semibold text-gray-700">포장 명세</span>
<span class="text-gray-600">포장량: <span id="packing-total" class="font-bold text-blue-700">0</span> 개</span>
</div>
<div class="border border-gray-300 rounded-lg p-4 overflow-auto max-h-[40vh]">
<div class="border border-gray-300 rounded-lg overflow-auto max-h-[179px]">
<table class="w-full data-table text-sm">
<thead>
<tr>
<th class="w-12 text-center sticky top-0 z-10" style="background:#f9fafb;">No</th>
<th class="text-left sticky top-0 z-10" style="background:#f9fafb;">봉투종류</th>
<th class="w-28 text-center sticky top-0 z-10" style="background:#f9fafb;">봉투코드</th>
<th class="w-20 text-right sticky top-0 z-10" style="background:#f9fafb;">수량</th>
<th class="w-16 text-center sticky top-0 z-10" style="background:#f9fafb;">포장</th>
<th class="w-12 text-center sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">No</th>
<th class="text-left sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">봉투종류</th>
<th class="w-28 text-center sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">봉투코드</th>
<th class="w-20 text-right sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">수량</th>
<th class="w-16 text-center sticky top-0 z-10" style="background:#fff;box-shadow:inset 0 -1px 0 #e5e7eb;">포장</th>
</tr>
</thead>
<tbody id="packing-body">
@@ -297,7 +297,8 @@
function packEsc(s) { return String(s == null ? '' : s).replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c])); }
function renderPacking(order) {
if (!packingBody) return;
const items = Array.isArray(order.items) ? order.items : [];
const items = (Array.isArray(order.items) ? order.items.slice() : [])
.sort((a, b) => (Number(b.soi_idx) || 0) - (Number(a.soi_idx) || 0)); // 내림차순
const rows = [];
let no = 0;
const addRow = (code, name, qty, unit) => {