거래명세서커밋

This commit is contained in:
leeheejin
2025-11-13 13:44:01 +09:00
parent 258ed89c84
commit 56aa05513c
4 changed files with 229 additions and 131 deletions

View File

@@ -33,6 +33,12 @@
$(document).ready(function(){
_fnc_datepick();
// 그리드 높이 동적 계산 (Total 합계 영역 + 여유 공간 80px)
fnc_calculateContentHeight("gridDiv", 80);
$(window).resize(function() {
fnc_calculateContentHeight("gridDiv", 80);
});
// select2가 로드되었을 때만 초기화
if(typeof $.fn !== 'undefined' && typeof $.fn.select2 === 'function') {
$('.select2').select2();
@@ -255,14 +261,14 @@ function fn_search(){
if(_tabulGrid){
_tabulGrid.setData(response.RESULTLIST || []);
} else {
// 그리드 초기화
_tabulGrid = new Tabulator("#mainGrid", {
layout: _tabul_layout_fitColumns,
height: "650px", // 그리드 고정 높이 설정
columns: columns,
data: response.RESULTLIST || [],
selectable: "highlight" // 다중 선택 가능하도록 설정
});
// 그리드 초기화
_tabulGrid = new Tabulator("#mainGrid", {
layout: _tabul_layout_fitColumns,
height: "100%", // 부모 컨테이너 높이에 맞춤
columns: columns,
data: response.RESULTLIST || [],
selectable: "highlight" // 다중 선택 가능하도록 설정
});
// 행 클릭으로 다중 선택
_tabulGrid.on("rowClick", function(e, row){

View File

@@ -30,6 +30,20 @@
_fnc_datepick(); // 날짜 선택기 초기화
$('.select2').select2(); // select2 초기화
// 그리드 높이 동적 계산 (Total 합계 영역 + 여유 공간 80px)
fnc_calculateContentHeight("gridDiv", 80);
// 디버그: 계산된 높이 확인
console.log("=== 그리드 높이 디버그 ===");
console.log("윈도우 높이:", $(window).height());
console.log("#gridDiv 높이:", $('#gridDiv').height());
console.log("#mainGrid 높이:", $('#mainGrid').height());
$(window).resize(function() {
fnc_calculateContentHeight("gridDiv", 80);
console.log("리사이즈 후 #gridDiv 높이:", $('#gridDiv').height());
});
// 품번/품명 Select2 AJAX 초기화
initPartSelect2Ajax("#search_partNo", "#search_partName", "#search_partObjId", {
debug: true
@@ -341,15 +355,22 @@ function fn_search(){
// 그리드 데이터 설정
if(_tabulGrid){
_tabulGrid.setData(response.RESULTLIST || []);
} else {
// 그리드 초기화
_tabulGrid = new Tabulator("#mainGrid", {
layout: _tabul_layout_fitColumns,
columns: columns,
data: response.RESULTLIST || [],
selectable: true
});
}
} else {
// 그리드 초기화
_tabulGrid = new Tabulator("#mainGrid", {
height: "100%",
layout: _tabul_layout_fitColumns,
columns: columns,
data: response.RESULTLIST || [],
selectable: true
});
// 그리드 생성 후 높이 재계산
setTimeout(function() {
console.log("그리드 생성 후 #mainGrid 높이:", $('#mainGrid').height());
console.log("그리드 생성 후 .tabulator 높이:", $('.tabulator').height());
}, 100);
}
// 조회된 전체 데이터의 판매원화총액 합계 계산
var totalSalesAmountKRW = 0;
@@ -377,7 +398,7 @@ function fn_search(){
// 페이징 HTML 업데이트
if(response.PAGE_HTML){
$("#pagingArea").html(response.PAGE_HTML);
$(".table_paging_wrap").html(response.PAGE_HTML);
}
},
error: function(xhr, status, error) {
@@ -556,16 +577,16 @@ function fn_bulkRegister(){
</table>
</div>
<!-- Total 합계 표시 영역 (판매원화총액 기준) -->
<div style="padding: 5px 10px; background: #f5f5f5; border-radius: 3px; margin: 10px 0;">
<span style="font-weight: bold; font-size: 13px;">
발주 금액 : <span id="totalSalesAmountKRW" style="color: #4CAF50;">0</span> 원
<span style="margin-left: 10px; font-size: 12px;">
(출고 : <span id="shippedAmountKRW" style="color: #2196F3;">0</span> 원,
미출고 : <span id="notShippedAmountKRW" style="color: #FF9800;">0</span> 원)
</span>
<!-- Total 합계 표시 영역 (판매원화총액 기준) -->
<div style=" background: #f5f5f5; border-radius: 3px; clear: both;">
<span style="font-weight: bold; font-size: 13px;">
발주 금액 : <span id="totalSalesAmountKRW" style="color: #4CAF50;">0</span> 원
<span style="margin-left: 10px; font-size: 12px;">
(출고 : <span id="shippedAmountKRW" style="color: #2196F3;">0</span> 원,
미출고 : <span id="notShippedAmountKRW" style="color: #FF9800;">0</span> 원)
</span>
</div>
</span>
</div>
<%@include file= "/WEB-INF/view/common/common_gridArea.jsp" %>
</div>

View File

@@ -30,11 +30,13 @@ body {
.container {
width: 210mm;
min-height: 297mm;
height: 297mm;
margin: 0 auto;
padding: 0;
border: 2px solid #000;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
overflow: hidden;
}
/* 제목 */
@@ -51,6 +53,7 @@ body {
.info-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.info-table td {
@@ -80,7 +83,7 @@ body {
background-color: #e8e8e8;
font-weight: bold;
text-align: center;
width: 15%;
width: 10%;
font-size: 9pt;
}
@@ -88,7 +91,6 @@ body {
font-size: 13pt;
font-weight: bold;
text-align: center;
width: 40%;
}
.stamp-cell {
@@ -111,10 +113,26 @@ body {
line-height: 1.4;
}
.receiver-cell {
.date-label-cell {
background-color: #e8e8e8;
font-weight: bold;
text-align: center;
width: 8%;
font-size: 9pt;
padding: 6px;
}
.date-value-cell {
text-align: left;
padding: 6px 10px;
font-size: 9pt;
}
.receiver-cell {
text-align: center;
padding: 8px 12px;
width: 30%;
vertical-align: middle;
}
.receiver-name {
@@ -134,14 +152,54 @@ body {
background-color: #e8e8e8;
font-weight: bold;
text-align: center;
width: 30px;
line-height: 1.5;
font-size: 10pt;
padding: 4px 2px;
width: 10px;
line-height: 1.4;
font-size: 7pt;
padding: 0px;
vertical-align: middle;
letter-spacing: 0;
position: relative;
}
.supplier-row-1, .supplier-row-2, .supplier-row-3, .supplier-row-4 {
.supplier-field-label {
background-color: #e8e8e8;
font-weight: bold;
text-align: center;
width: 10%;
font-size: 9pt;
padding: 4px 2px;
word-break: keep-all;
}
.supplier-field-label-small {
background-color: #e8e8e8;
font-weight: bold;
text-align: center;
width: 7%;
font-size: 9pt;
padding: 4px 2px;
word-break: keep-all;
}
.supplier-field-value {
text-align: center;
font-size: 9pt;
padding: 4px 6px;
word-break: break-word;
overflow: visible;
white-space: normal;
}
.supplier-field-value-small {
text-align: center;
font-size: 9pt;
padding: 4px 6px;
word-break: break-word;
overflow: visible;
white-space: normal;
}
.supplier-row-1, .supplier-row-1-right, .supplier-row-2, .supplier-row-3, .supplier-row-4 {
text-align: left;
font-size: 9pt;
padding: 6px 10px;
@@ -154,6 +212,9 @@ body {
.supplier-label-inline {
font-weight: bold;
margin-right: 8px;
margin-left: 15px;
padding-left: 15px;
border-left: 1px solid #666;
font-size: 8pt;
}
@@ -168,6 +229,7 @@ body {
.amount-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 15px;
border-bottom: 2px solid #000;
background-color: #f9f9f9;
@@ -176,27 +238,28 @@ body {
.amount-label {
font-size: 10pt;
margin-right: 15px;
flex: 1;
}
.amount-text {
font-size: 13pt;
font-weight: bold;
margin-right: 8px;
flex: 2;
text-align: right;
}
.amount-won-symbol {
font-size: 16pt;
font-weight: bold;
margin: 0 10px;
flex: 0.5;
text-align: center;
}
.amount-number {
font-size: 15pt;
font-weight: bold;
flex: 1;
flex: 2;
text-align: right;
padding-right: 15px;
}
/* 품목 테이블 */
@@ -220,7 +283,7 @@ body {
}
.items-table td {
height: 28px;
height: 38px;
}
.items-table td[contenteditable="true"] {
@@ -272,14 +335,16 @@ body {
.footer-table {
width: 100%;
border-collapse: collapse;
margin-top: 40px;
margin-bottom: 0;
}
.footer-table td {
border: 1px solid #000;
padding: 12px 15px;
padding: 8px 12px;
width: 50%;
vertical-align: top;
height: 90px;
height: 60px;
}
.footer-label {
@@ -346,7 +411,7 @@ function fn_loadData() {
var statementData = {
success: true,
customerName: firstItem.CUSTOMER,
supplierName: "㈜피에스",
supplierName: "㈜피에스",
supplierRegNo: "314-81-75146",
supplierAddress: "대전광역시 유성구 국제과학10로 8",
supplierBusiness: "제조",
@@ -416,6 +481,7 @@ function fn_fillData(data) {
var totalSupply = 0;
var totalVat = 0;
var totalQuantity = 0;
var tbody = $("#itemsBody");
tbody.empty();
@@ -425,23 +491,25 @@ function fn_fillData(data) {
$.each(data.items, function(i, item) {
console.log("품목 " + (i+1) + ":", item);
var quantity = parseInt(item.QUANTITY || item.quantity || 0);
var supply = parseInt(item.SUPPLYPRICE || item.supplyPrice || 0);
var vat = parseInt(item.VAT || item.vat || 0);
totalQuantity += quantity;
totalSupply += supply;
totalVat += vat;
var row = $("<tr>");
row.append($("<td contenteditable='true' class='text-left'>").text(item.PRODUCTNAME || item.productName || ""));
row.append($("<td contenteditable='true'>").text(item.SPEC || item.spec || ""));
row.append($("<td contenteditable='true'>").text(item.QUANTITY || item.quantity || ""));
row.append($("<td contenteditable='true'>").text(quantity));
row.append($("<td contenteditable='true' class='text-right'>").text(fn_num(item.UNITPRICE || item.unitPrice || 0)));
row.append($("<td contenteditable='true' class='text-right'>").text(fn_num(supply)));
row.append($("<td contenteditable='true' class='text-right'>").text(fn_num(vat)));
tbody.append(row);
});
// 빈 행 추가 (최소 7개 행 유지)
for(var i = data.items.length; i < 7; i++) {
// 빈 행 추가 (최소 9개 행 유지)
for(var i = data.items.length; i < 9; i++) {
var row = $("<tr>");
for(var j = 0; j < 6; j++) {
row.append($("<td contenteditable='true'>").html("&nbsp;"));
@@ -450,8 +518,8 @@ function fn_fillData(data) {
}
} else {
console.log("품목 데이터가 없습니다.");
// 빈 행 7개 추가
for(var i = 0; i < 7; i++) {
// 빈 행 9개 추가
for(var i = 0; i < 9; i++) {
var row = $("<tr>");
for(var j = 0; j < 6; j++) {
row.append($("<td contenteditable='true'>").html("&nbsp;"));
@@ -460,14 +528,10 @@ function fn_fillData(data) {
}
}
// 합계 행
var totalRow = $("<tr class='total-row'>");
totalRow.append($("<td colspan='2'>").text("계"));
totalRow.append($("<td>").text(data.items ? data.items.length : 0));
totalRow.append($("<td>").html("&nbsp;"));
totalRow.append($("<td class='text-right'>").text(fn_num(totalSupply)));
totalRow.append($("<td class='text-right'>").text(fn_num(totalVat)));
tbody.append(totalRow);
// tfoot의 합계 행 업데이트
$("#totalQuantity").text(totalQuantity);
$("#totalSupplyPrice").text(fn_num(totalSupply));
$("#totalVat").text(fn_num(totalVat));
// 합계 금액
var total = totalSupply + totalVat;
@@ -560,73 +624,71 @@ function fn_close() {
<!-- 상단 정보 테이블 -->
<table class="info-table">
<!-- 첫번째 행: 납품일 (왼쪽만) -->
<tr class="row-1">
<td class="date-cell" rowspan="2">
<span class="date-label">납품일:</span>
<span id="deliveryDate" contenteditable="true">수요일, 9월 24, 2025</span>
</td>
<td class="reg-label-cell">등록 번호</td>
<td class="reg-value-cell">
<span id="registrationNo" contenteditable="true">314-81-75146</span>
</td>
<td class="stamp-cell" rowspan="5">
<div class="stamp-box">
<div>성 명</div>
<div contenteditable="true" style="margin-top: 3px;">이동현</div>
</div>
</td>
</tr>
<!-- 첫번째 행: 납품일 -->
<tr class="row-1">
<td class="date-label-cell">납품일</td>
<td class="date-value-cell" colspan="4">
<span id="deliveryDate" contenteditable="true">수요일, 9월 24, 2025</span>
</td>
<td class="supplier-label-cell" rowspan="5">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
<div>공</div>
<div>급</div>
<div>자</div>
</div>
</td>
<td class="reg-label-cell">등록 번호</td>
<td class="reg-value-cell" colspan="4">
<span id="registrationNo" contenteditable="true">314-81-75146</span>
</td>
</tr>
<!-- 두번째 행 -->
<tr class="row-2">
<td class="supplier-label-cell" rowspan="4">공<br>급<br>자</td>
<td class="supplier-row-1">
<div class="supplier-inline">
<span class="supplier-label-inline">상호(법인명)</span>
<span contenteditable="true" id="supplierName">㈜알피에스</span>
</div>
</td>
</tr>
<!-- 세번째 행: 수신자 + 공급자 -->
<tr class="row-3">
<td class="receiver-cell" rowspan="2">
<span class="receiver-name" contenteditable="true" id="receiverName">㈜OOO</span>
<span class="receiver-suffix">귀하</span>
</td>
<td class="supplier-row-2">
<div class="supplier-inline">
<span class="supplier-label-inline">사업장주소</span>
<span contenteditable="true" id="supplierAddr">대전광역시 유성구 국제과학10로 8</span>
</div>
</td>
</tr>
<!-- 네번째 행 -->
<tr class="row-4">
<td class="supplier-row-3">
<div class="supplier-inline">
<span class="supplier-label-inline">업 태</span>
<span contenteditable="true" id="supplierBiz">제조</span>
<span class="supplier-label-inline" style="margin-left: 15px;">종 목</span>
<span contenteditable="true" id="supplierType">금속절삭가공기계의</span>
</div>
</td>
</tr>
<!-- 다섯번째 행 -->
<tr class="row-5">
<td class="supply-text-cell">
<span contenteditable="true" id="supplyText">아래와 같이 공급합니다.</span>
</td>
<td class="supplier-row-4">
<div class="supplier-inline">
<span class="supplier-label-inline">전화 번호</span>
<span contenteditable="true" id="supplierTel">TEL:042-602-3300/FAX:042-672</span>
</div>
</td>
</tr>
<!-- 두번째 행: 수신자 + 상호/성명 -->
<tr class="row-2">
<td class="receiver-cell" rowspan="3" colspan="5">
<span class="receiver-name" contenteditable="true" id="receiverName">㈜OOO</span>
<span class="receiver-suffix">귀하</span>
</td>
<td class="supplier-field-label">상호(법인명)</td>
<td class="supplier-field-value">
<span contenteditable="true" id="supplierName">㈜알피에스</span>
</td>
<td class="supplier-field-label-small">성 명</td>
<td class="supplier-field-value-small" colspan="2">
<span contenteditable="true">이동현</span>
</td>
</tr>
<!-- 세번째 행: 사업장주소 -->
<tr class="row-3">
<td class="supplier-field-label">사업장주소</td>
<td class="supplier-field-value" colspan="4">
<span contenteditable="true" id="supplierAddr">대전광역시 유성구 국제과학10로 8</span>
</td>
</tr>
<!-- 네번째 행: 업태/종목 -->
<tr class="row-4">
<td class="supplier-field-label">업 태</td>
<td class="supplier-field-value">
<span contenteditable="true" id="supplierBiz">제조</span>
</td>
<td class="supplier-field-label-small">종 목</td>
<td class="supplier-field-value-small" colspan="2">
<span contenteditable="true" id="supplierType">금속절삭가공기계의</span>
</td>
</tr>
<!-- 다섯번째 행: 아래와 같이 공급합니다 + 전화번호 -->
<tr class="row-5">
<td class="supply-text-cell" colspan="5">
<span contenteditable="true" id="supplyText">아래와 같이 공급합니다.</span>
</td>
<td class="supplier-field-label">전화 번호</td>
<td class="supplier-field-value" colspan="4">
<span contenteditable="true" id="supplierTel">TEL:042-602-3300 / FAX:042-672</span>
</td>
</tr>
</table>
<!-- 합계 금액 -->
@@ -652,14 +714,23 @@ function fn_close() {
</thead>
<tbody id="itemsBody">
</tbody>
<tfoot>
<tr class="note-row">
<td colspan="6" style="text-align: left; padding: 20px;">
<div style="font-weight: bold; margin-bottom: 5px;">&lt;비고&gt;</div>
<div contenteditable="true" id="noteContent">Spindle S/N : 187-1062, 1096, 1099</div>
</td>
</tr>
<tr class="total-row">
<td colspan="2" style="text-align: center; font-weight: bold;">계</td>
<td id="totalQuantity" style="text-align: right; font-weight: bold;">0</td>
<td></td>
<td id="totalSupplyPrice" style="text-align: right; font-weight: bold;">0</td>
<td id="totalVat" style="text-align: right; font-weight: bold;">0</td>
</tr>
</tfoot>
</table>
<!-- 비고 -->
<div class="note-section">
<div class="note-title">&lt;비고&gt;</div>
<div class="note-content" contenteditable="true" id="noteContent">Spindle S/N : 187-1062, 1096, 1099</div>
</div>
<!-- 하단 -->
<table class="footer-table">
<tr>

View File

@@ -59,7 +59,7 @@ function fnc_tabul_search(layoutParam, gridObj, searchURL, columnParam, showChec
if(showApp) allColumns = allColumns.concat(_columnAppStatus);
gridObj = new Tabulator("#mainGrid", {
height : "auto",//"640px",
height : "100%",
layout : fnc_checkNullDefaultValue(layoutParam, _tabul_layout_fitDataStretch), //fitDataFill fitDataStretch
//selectable: true,
placeholder : "조회된 정보가 없습니다.",