hjjeong
60356f886c
- 견적서 템플릿 2종 추가 (estimateTemplate1.jsp, estimateTemplate2.jsp) - 견적서 작성 팝업 기능 구현 (estimateList_new.jsp) - 견적서 템플릿 컨트롤러 및 서비스 메서드 추가 - 견적서 템플릿용 DB 테이블 스키마 생성 스크립트 추가 - 회사 직인 이미지 추가 - 견적서 양식: A4 인쇄 최적화, 동적 품목 추가/수정, 자동 금액 계산
553 lines
15 KiB
Plaintext
553 lines
15 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ page import="com.pms.common.utils.*"%>
|
|
<%@ page import="java.util.*" %>
|
|
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
|
|
<%@include file= "/init.jsp" %>
|
|
<%
|
|
PersonBean person = (PersonBean)session.getAttribute(Constants.PERSON_BEAN);
|
|
String userId = CommonUtils.checkNull(person.getUserId());
|
|
String objId = CommonUtils.checkNull(request.getParameter("objId"));
|
|
%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title><%=Constants.SYSTEM_NAME%> - 견적서 양식1</title>
|
|
<style type="text/css">
|
|
@media print {
|
|
@page {
|
|
size: A4;
|
|
margin: 10mm;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: "Malgun Gothic", "맑은 고딕", Arial, sans-serif;
|
|
font-size: 12pt;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.estimate-container {
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
background: white;
|
|
margin: 0 auto;
|
|
padding: 20mm;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 28pt;
|
|
font-weight: bold;
|
|
letter-spacing: 20px;
|
|
margin-bottom: 40px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.info-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.info-table td {
|
|
padding: 5px 8px;
|
|
border: 1px solid #000;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.info-table .label {
|
|
background-color: #f0f0f0;
|
|
font-weight: bold;
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.company-info {
|
|
float: right;
|
|
text-align: right;
|
|
margin-top: -80px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.company-stamp {
|
|
width: 120px;
|
|
height: 120px;
|
|
border: 2px solid #e74c3c;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.company-stamp-text {
|
|
writing-mode: vertical-rl;
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
color: #e74c3c;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.company-details {
|
|
font-size: 9pt;
|
|
line-height: 1.6;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 11pt;
|
|
margin-bottom: 20px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.items-table th,
|
|
.items-table td {
|
|
border: 1px solid #000;
|
|
padding: 6px 8px;
|
|
text-align: center;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.items-table th {
|
|
background-color: #f0f0f0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.items-table .col-no { width: 8%; }
|
|
.items-table .col-desc { width: 22%; }
|
|
.items-table .col-spec { width: 25%; }
|
|
.items-table .col-qty { width: 8%; }
|
|
.items-table .col-unit { width: 10%; }
|
|
.items-table .col-price { width: 12%; }
|
|
.items-table .col-amount { width: 12%; }
|
|
.items-table .col-note { width: 13%; }
|
|
|
|
.items-table .text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.items-table .text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.notes-section {
|
|
margin-top: 30px;
|
|
font-size: 10pt;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.notes-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer-company {
|
|
text-align: right;
|
|
margin-top: 40px;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-area {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.plm_btns {
|
|
padding: 10px 30px;
|
|
margin: 0 5px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
border: 1px solid #ddd;
|
|
background-color: #f8f9fa;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.plm_btns:hover {
|
|
background-color: #e2e6ea;
|
|
border-color: #dae0e5;
|
|
}
|
|
|
|
input[type="text"],
|
|
textarea {
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.editable {
|
|
background-color: #fffef0;
|
|
}
|
|
|
|
@media print {
|
|
.editable {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
|
|
// 인쇄 버튼
|
|
$("#btnPrint").click(function(){
|
|
window.print();
|
|
});
|
|
|
|
// 저장 버튼
|
|
$("#btnSave").click(function(){
|
|
if(confirm("견적서를 저장하시겠습니까?")) {
|
|
fn_save();
|
|
}
|
|
});
|
|
|
|
// 닫기 버튼
|
|
$("#btnClose").click(function(){
|
|
self.close();
|
|
});
|
|
|
|
// 행 추가 버튼
|
|
$("#btnAddRow").click(function(){
|
|
fn_addItemRow();
|
|
});
|
|
|
|
// 금액 자동 계산
|
|
$(document).on("change keyup", ".item-qty, .item-price", function(){
|
|
fn_calculateAmount($(this).closest("tr"));
|
|
});
|
|
|
|
// 콤마 자동 추가
|
|
$(".item-price, .item-amount").on("blur", function(){
|
|
var val = $(this).val().replace(/,/g, "");
|
|
if(!isNaN(val) && val !== "") {
|
|
$(this).val(addComma(val));
|
|
}
|
|
});
|
|
|
|
// 데이터 로드
|
|
if("<%=objId%>" !== "" && "<%=objId%>" !== "-1") {
|
|
fn_loadData();
|
|
}
|
|
});
|
|
|
|
// 금액 계산
|
|
function fn_calculateAmount(row) {
|
|
var qty = row.find(".item-qty").val().replace(/,/g, "") || "0";
|
|
var price = row.find(".item-price").val().replace(/,/g, "") || "0";
|
|
|
|
var amount = parseInt(qty) * parseInt(price);
|
|
if(!isNaN(amount)) {
|
|
row.find(".item-amount").val(addComma(amount));
|
|
}
|
|
}
|
|
|
|
// 콤마 추가
|
|
function addComma(num) {
|
|
var regexp = /\B(?=(\d{3})+(?!\d))/g;
|
|
return num.toString().replace(regexp, ',');
|
|
}
|
|
|
|
// 행 추가 함수
|
|
function fn_addItemRow() {
|
|
// 비고 행 제외하고 마지막 품목 행 찾기
|
|
var $lastRow = $("#itemsTableBody tr").not(":last");
|
|
var lastRowIndex = $lastRow.length;
|
|
var nextNo = lastRowIndex + 1;
|
|
|
|
// 새 행 생성
|
|
var newRow = '<tr>' +
|
|
'<td>' + nextNo + '</td>' +
|
|
'<td class="text-left editable"><input type="text" class="item-desc" value=""></td>' +
|
|
'<td class="text-left editable"><textarea class="item-spec"></textarea></td>' +
|
|
'<td class="editable"><input type="text" class="item-qty" value=""></td>' +
|
|
'<td class="editable"><input type="text" class="item-unit" value="EA"></td>' +
|
|
'<td class="text-right editable"><input type="text" class="item-price" value=""></td>' +
|
|
'<td class="text-right editable"><input type="text" class="item-amount" value="₩0" readonly></td>' +
|
|
'<td class="editable"><input type="text" class="item-note" value=""></td>' +
|
|
'</tr>';
|
|
|
|
// 비고 행 바로 위에 추가
|
|
$("#itemsTableBody tr:last").before(newRow);
|
|
|
|
// 콤마 자동 추가 이벤트 바인딩
|
|
$("#itemsTableBody").find(".item-price, .item-amount").last().on("blur", function(){
|
|
var val = $(this).val().replace(/,/g, "");
|
|
if(!isNaN(val) && val !== "") {
|
|
$(this).val(addComma(val));
|
|
}
|
|
});
|
|
}
|
|
|
|
// 데이터 로드
|
|
function fn_loadData() {
|
|
$.ajax({
|
|
url: "/contractMgmt/getEstimateDetail.do",
|
|
type: "POST",
|
|
data: {
|
|
objId: "<%=objId%>"
|
|
},
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if(data && data.estimate) {
|
|
// 데이터 바인딩
|
|
$("#executor").val(data.estimate.EXECUTOR || "");
|
|
$("#recipient").val(data.estimate.RECIPIENT || "");
|
|
$("#estimate_no").val(data.estimate.ESTIMATE_NO || "");
|
|
$("#contact_person").val(data.estimate.CONTACT_PERSON || "");
|
|
$("#greeting_text").val(data.estimate.GREETING_TEXT || "견적을 요청해 주셔서 대단히 감사합니다.\n하기와 같이 견적서를 제출합니다.");
|
|
|
|
// 품목 데이터 로드
|
|
if(data.items && data.items.length > 0) {
|
|
// 기존 행 초기화 후 데이터 추가
|
|
var itemsHtml = "";
|
|
for(var i = 0; i < data.items.length; i++) {
|
|
var item = data.items[i];
|
|
itemsHtml += '<tr>';
|
|
itemsHtml += '<td>' + (i + 1) + '</td>';
|
|
itemsHtml += '<td class="text-left editable"><input type="text" class="item-desc" value="' + (item.DESCRIPTION || '') + '"></td>';
|
|
itemsHtml += '<td class="text-left editable"><textarea class="item-spec">' + (item.SPECIFICATION || '') + '</textarea></td>';
|
|
itemsHtml += '<td class="editable"><input type="text" class="item-qty" value="' + (item.QUANTITY || '') + '"></td>';
|
|
itemsHtml += '<td class="editable"><input type="text" class="item-unit" value="' + (item.UNIT || 'EA') + '"></td>';
|
|
itemsHtml += '<td class="text-right editable"><input type="text" class="item-price" value="' + (item.UNIT_PRICE ? addComma(item.UNIT_PRICE) : '') + '"></td>';
|
|
itemsHtml += '<td class="text-right editable"><input type="text" class="item-amount" value="' + (item.AMOUNT ? addComma(item.AMOUNT) : '₩0') + '" readonly></td>';
|
|
itemsHtml += '<td class="editable"><input type="text" class="item-note" value="' + (item.NOTE || '') + '"></td>';
|
|
itemsHtml += '</tr>';
|
|
}
|
|
$("#itemsTableBody").html(itemsHtml);
|
|
}
|
|
|
|
// 비고 로드
|
|
$("#note1").val(data.estimate.NOTE1 || "1. 견적유효기간: 일");
|
|
$("#note2").val(data.estimate.NOTE2 || "2. 납품기간: 발주 후 1주 이내");
|
|
$("#note3").val(data.estimate.NOTE3 || "3. VAT 별도");
|
|
$("#note4").val(data.estimate.NOTE4 || "4. 결제 조건 : 기존 결제조건에 따름.");
|
|
}
|
|
},
|
|
error: function() {
|
|
Swal.fire("데이터를 불러오는데 실패했습니다.");
|
|
}
|
|
});
|
|
}
|
|
|
|
// 저장
|
|
function fn_save() {
|
|
var items = [];
|
|
$("#itemsTableBody tr").each(function(idx) {
|
|
var row = $(this);
|
|
items.push({
|
|
seq: idx + 1,
|
|
description: row.find(".item-desc").val(),
|
|
specification: row.find(".item-spec").val(),
|
|
quantity: row.find(".item-qty").val(),
|
|
unit: row.find(".item-unit").val(),
|
|
unit_price: row.find(".item-price").val().replace(/,/g, ""),
|
|
amount: row.find(".item-amount").val().replace(/,/g, "").replace(/₩/g, ""),
|
|
note: row.find(".item-note").val()
|
|
});
|
|
});
|
|
|
|
var formData = {
|
|
objId: "<%=objId%>",
|
|
template_type: "1",
|
|
executor: $("#executor").val(),
|
|
recipient: $("#recipient").val(),
|
|
estimate_no: $("#estimate_no").val(),
|
|
contact_person: $("#contact_person").val(),
|
|
greeting_text: $("#greeting_text").val(),
|
|
note1: $("#note1").val(),
|
|
note2: $("#note2").val(),
|
|
note3: $("#note3").val(),
|
|
note4: $("#note4").val(),
|
|
items: JSON.stringify(items)
|
|
};
|
|
|
|
$.ajax({
|
|
url: "/contractMgmt/saveEstimate.do",
|
|
type: "POST",
|
|
data: formData,
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if(data.result === "success") {
|
|
Swal.fire({
|
|
title: "저장되었습니다.",
|
|
icon: "success"
|
|
}).then(function() {
|
|
if(opener && opener.fn_search) {
|
|
opener.fn_search();
|
|
}
|
|
self.close();
|
|
});
|
|
} else {
|
|
Swal.fire("저장에 실패했습니다.");
|
|
}
|
|
},
|
|
error: function() {
|
|
Swal.fire("저장 중 오류가 발생했습니다.");
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="estimate-container">
|
|
<!-- 제목 -->
|
|
<div class="title">견 적 서</div>
|
|
|
|
<!-- 상단 정보 테이블 -->
|
|
<table class="info-table">
|
|
<colgroup>
|
|
<col width="80px" />
|
|
<col width="*" />
|
|
<col width="300px" />
|
|
</colgroup>
|
|
<tr>
|
|
<td class="label">시행일자</td>
|
|
<td class="editable">
|
|
<input type="text" id="executor" value="">
|
|
</td>
|
|
<td rowspan="4" style="text-align: center; border: none; vertical-align: middle; padding: 0;">
|
|
<div style="width: 100%; text-align: center; margin-bottom: 5px;">
|
|
<img src="/images/company_stamp.png" alt="회사 도장" style="width: 100%; height: auto;"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
|
<div class="company-stamp" style="display: none; width: 100%; height: 250px;">
|
|
<div class="company-stamp-text">㈊알피에스<br>RPS CO., LTD<br>대표이사이동준</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: left; font-size: 9pt; line-height: 1.8; padding: 0 5px;">
|
|
담당자 : 영업부<br>
|
|
연락처 :
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">수신처</td>
|
|
<td class="editable">
|
|
<input type="text" id="recipient" value="">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">수신인</td>
|
|
<td class="editable">
|
|
<input type="text" id="contact_person" value="구매 담당자님 귀하">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">견적번호</td>
|
|
<td class="editable">
|
|
<input type="text" id="estimate_no" value="">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- 인사말 -->
|
|
<div style="margin-bottom: 10px; padding: 0px 5px; line-height: 1.6; font-size: 10pt;">
|
|
견적을 요청해 주셔서 대단히 감사합니다.<br>
|
|
하기와 같이 견적서를 제출합니다.
|
|
</div>
|
|
|
|
<!-- 부가세 별도 표시 -->
|
|
<div style="text-align: right; margin-top: -30px; margin-bottom: 20px; padding-right: 10px; font-size: 10pt;">
|
|
부가세 별도
|
|
</div>
|
|
|
|
<!-- 품목 테이블 -->
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-no">번호<br>NO.</th>
|
|
<th class="col-desc">품 명<br>DESCRIPTION</th>
|
|
<th class="col-spec">규 격<br>SPECIFICATION</th>
|
|
<th class="col-qty">수량<br>Q'TY</th>
|
|
<th class="col-unit">단위<br>UNIT</th>
|
|
<th class="col-price">단 가<br>UNIT<br>PRICE</th>
|
|
<th class="col-amount">금 액<br>AMOUNT</th>
|
|
<th class="col-note">비고</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="itemsTableBody">
|
|
<tr>
|
|
<td>1</td>
|
|
<td class="text-left editable"><input type="text" class="item-desc" value=""></td>
|
|
<td class="text-left editable"><textarea class="item-spec"></textarea></td>
|
|
<td class="editable"><input type="text" class="item-qty" value=""></td>
|
|
<td class="editable"><input type="text" class="item-unit" value="EA"></td>
|
|
<td class="text-right editable"><input type="text" class="item-price" value=""></td>
|
|
<td class="text-right editable"><input type="text" class="item-amount" value="₩0" readonly></td>
|
|
<td class="editable"><input type="text" class="item-note" value=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td class="text-left editable"><input type="text" class="item-desc" value=""></td>
|
|
<td class="text-left editable"><textarea class="item-spec"></textarea></td>
|
|
<td class="editable"><input type="text" class="item-qty" value=""></td>
|
|
<td class="editable"><input type="text" class="item-unit" value="EA"></td>
|
|
<td class="text-right editable"><input type="text" class="item-price" value=""></td>
|
|
<td class="text-right editable"><input type="text" class="item-amount" value="" readonly></td>
|
|
<td class="editable"><input type="text" class="item-note" value=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="8" style="height: 100px; vertical-align: top; padding: 10px; text-align: left;">
|
|
<div style="font-weight: bold; margin-bottom: 10px; text-align: left;"><비고></div>
|
|
<textarea id="note_remarks" style="width: 100%; height: 70px; border: none; resize: none; font-family: inherit; font-size: 10pt; text-align: left;"></textarea>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- 참조사항 섹션 -->
|
|
<div class="notes-section">
|
|
<div class="notes-title"><참조사항></div>
|
|
<div class="editable"><input type="text" id="note1" value="1. 견적유효기간: 일"></div>
|
|
<div class="editable"><input type="text" id="note2" value="2. 납품기간: 발주 후 1주 이내"></div>
|
|
<div class="editable"><input type="text" id="note3" value="3. VAT 별도"></div>
|
|
<div class="editable"><input type="text" id="note4" value="4. 결제 조건 : 기존 결제조건에 따름."></div>
|
|
</div>
|
|
|
|
<!-- 하단 회사명 -->
|
|
<div class="footer-company">
|
|
㈜알피에스
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 영역 -->
|
|
<div class="btn-area no-print">
|
|
<input type="button" value="행 추가" id="btnAddRow" class="plm_btns">
|
|
<input type="button" value="인쇄" id="btnPrint" class="plm_btns">
|
|
<input type="button" value="저장" id="btnSave" class="plm_btns">
|
|
<input type="button" value="닫기" id="btnClose" class="plm_btns">
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|