1월21일 작업
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
this.choicesInstances = new Map();
|
||||
this.data = {
|
||||
nationality: '',
|
||||
nationalityCode: '', // 선택된 국적 코드 저장용
|
||||
nationalityCode: '',
|
||||
visitPath: ''
|
||||
};
|
||||
this.isInitialized = false;
|
||||
@@ -25,6 +25,7 @@
|
||||
this.bindEvents();
|
||||
this.isInitialized = true;
|
||||
|
||||
$('input').attr('autocomplete', 'off');
|
||||
}
|
||||
|
||||
validateDependencies() { return !!($ && window.Choices); }
|
||||
@@ -47,16 +48,15 @@
|
||||
if (nationalityInstance) {
|
||||
const element = nationalityInstance.passedElement.element;
|
||||
element.addEventListener('change', (event) => {
|
||||
this.data.nationalityCode = event.detail.value; // 국적 코드 업데이트
|
||||
this.data.nationalityCode = event.detail.value;
|
||||
this.updateUIByNationality(event.detail.value);
|
||||
});
|
||||
}
|
||||
|
||||
$('#modalAddress, #btnSearchAddress').on('click', () => {
|
||||
this.openAddrSearch();
|
||||
});
|
||||
$('#address, #btnSearchAddress').on('click', () => {
|
||||
this.openAddrSearch();
|
||||
});
|
||||
|
||||
// 체크박스 직접 클릭 방지 및 안내 문구 출력
|
||||
const consentIds = ['#agreePrivacy', '#agreeProcedure', '#agreeTerms', '#refusePhoto'];
|
||||
$(consentIds.join(', ')).on('click', (e) => {
|
||||
if (!this.allowSystemCheck) {
|
||||
@@ -64,8 +64,33 @@
|
||||
alert('동의서 보기 버튼을 클릭하여 내용을 확인하신 후 [동의함] 버튼을 눌러주세요.');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#btnFillTestData').on('click', () => {
|
||||
// 1. 기본 텍스트 정보
|
||||
$('input[name="modalUserName"]').val('홍길동');
|
||||
$('input[name="modalUserRrn1"]').val('950101');
|
||||
$('input[name="modalUserRrn2"]').val('1234567').trigger('input'); // input 트리거로 생년월일/성별 로직 실행
|
||||
$('input[name="modalPhoneNumber"]').val('01012345678');
|
||||
$('input[name="address"]').val('서울특별시 강남구 테헤란로 123');
|
||||
$('input[name="addressDtl"]').val('메이드유 빌딩 5층');
|
||||
$('#email').val('test@madeu.com');
|
||||
$('input[name="introName"]').val('관리자');
|
||||
$('textarea[name="modalEtc"]').val('특이사항 없음 (테스트 데이터)');
|
||||
|
||||
// 2. 방문경로 (Choices.js 인스턴스 제어)
|
||||
const channelInstance = this.choicesInstances.get('channel');
|
||||
if (channelInstance) {
|
||||
const firstVal = channelInstance.config.choices[1]?.value; // 첫 번째 옵션 선택
|
||||
if (firstVal) channelInstance.setChoiceByValue(firstVal);
|
||||
}
|
||||
|
||||
// 3. 동의서 항목 강제 체크
|
||||
// 시스템 체크 허용 플래그를 일시적으로 켜서 click 방지 로직을 우회합니다.
|
||||
this.allowSystemCheck = true;
|
||||
$('#agreePrivacy, #agreeProcedure, #agreeTerms, #refusePhoto').prop('checked', true);
|
||||
this.allowSystemCheck = false;
|
||||
|
||||
//alert('테스트 데이터가 입력되었습니다.');
|
||||
});
|
||||
}
|
||||
|
||||
updateUIByNationality(selectedCode) {
|
||||
@@ -122,7 +147,7 @@
|
||||
instance.setChoices(choices, 'value', 'label', true);
|
||||
if (choicesKey === 'nationality') {
|
||||
instance.setChoiceByValue(this.KOREA_CODE);
|
||||
this.data.nationalityCode = this.KOREA_CODE; // 초기 국적 설정
|
||||
this.data.nationalityCode = this.KOREA_CODE;
|
||||
this.updateUIByNationality(this.KOREA_CODE);
|
||||
}
|
||||
}
|
||||
@@ -130,388 +155,256 @@
|
||||
});
|
||||
}
|
||||
|
||||
openAddrSearch() {
|
||||
// 1. 다이얼로그를 담을 컨테이너 생성 (없으면 생성)
|
||||
let $addrDialog = $('#addrSearchDialog');
|
||||
if ($addrDialog.length === 0) {
|
||||
$addrDialog = $('<div id="addrSearchDialog" style="display:none; overflow:hidden;"></div>').appendTo('body');
|
||||
}
|
||||
openAddrSearch() {
|
||||
let $addrDialog = $('#addrSearchDialog');
|
||||
if ($addrDialog.length === 0) {
|
||||
$addrDialog = $('<div id="addrSearchDialog" style="display:none; overflow:hidden;"></div>').appendTo('body');
|
||||
}
|
||||
|
||||
// 2. jQuery UI Dialog 초기화
|
||||
$addrDialog.dialog({
|
||||
modal: true,
|
||||
title: '주소 검색',
|
||||
width: 500,
|
||||
height: 500,
|
||||
resizable: false,
|
||||
draggable: true,
|
||||
open: function() {
|
||||
const guideElement = document.getElementById('addrSearchDialog');
|
||||
// 3. daum.Postcode를 해당 div 내(embed)에 실행
|
||||
new daum.Postcode({
|
||||
oncomplete: (data) => {
|
||||
let addr = data.userSelectedType === 'R' ? data.roadAddress : data.jibunAddress;
|
||||
document.getElementById("modalAddress").value = addr;
|
||||
document.getElementById("modalAddressDetail").focus();
|
||||
|
||||
// 선택 완료 후 다이얼로그 닫기
|
||||
$addrDialog.dialog('close');
|
||||
},
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}).embed(guideElement);
|
||||
},
|
||||
close: function() {
|
||||
$(this).dialog('destroy').empty();
|
||||
}
|
||||
});
|
||||
$addrDialog.dialog({
|
||||
modal: true,
|
||||
title: '주소 검색',
|
||||
width: 500,
|
||||
height: 500,
|
||||
resizable: false,
|
||||
draggable: true,
|
||||
open: function() {
|
||||
const guideElement = document.getElementById('addrSearchDialog');
|
||||
new daum.Postcode({
|
||||
oncomplete: (data) => {
|
||||
let addr = data.userSelectedType === 'R' ? data.roadAddress : data.jibunAddress;
|
||||
document.getElementById("address").value = addr;
|
||||
document.getElementById("addressDtl").focus();
|
||||
$addrDialog.dialog('close');
|
||||
},
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}).embed(guideElement);
|
||||
},
|
||||
close: function() {
|
||||
$(this).dialog('destroy').empty();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// NewPatientPage 클래스 내부에 추가
|
||||
savePatientData(signatureData) {
|
||||
// 서버 UserDTO 구조와 매핑될 데이터 수집
|
||||
const param = {
|
||||
userName: $('input[name="modalUserName"]').val(),
|
||||
nationality: this.data.nationalityCode, // Choices로 선택된 코드값
|
||||
nationalityCode: 'C202404110001', // 국적 카테고리 고정값
|
||||
birthday: $('#modalBirthday').val(),
|
||||
gender: $('input[name="modalGender"]:checked').val(),
|
||||
userRrn1: $('input[name="modalUserRrn1"]').val(),
|
||||
userRrn2: $('input[name="modalUserRrn2"]').val(),
|
||||
userPno: $('input[name="modalUserPno"]').val(),
|
||||
phoneNumber: $('input[name="modalPhoneNumber"]').val(),
|
||||
channel: $('#selectChannel').val(),
|
||||
channelCode: 'C202404110003', // 방문경로 카테고리 고정값
|
||||
introUserId: $('input[name="modalRecommendId"]').val(), // 추천인 텍스트
|
||||
etc: $('textarea[name="modalEtc"]').val(),
|
||||
smsYn: $('input[name="modalSmsYn"]:checked').val(),
|
||||
refusePhotoYn: $('#refusePhoto').is(':checked') ? 'Y' : 'N',
|
||||
signatureData: signatureData, // 서명 Base64 데이터
|
||||
address: $('#address').val(),
|
||||
addressDtl: $('#addressDtl').val(),
|
||||
email: $('#email').val(),
|
||||
introName: $('#introName').val()
|
||||
};
|
||||
|
||||
// 로딩바가 있다면 여기서 표시 (예: $.blockUI();)
|
||||
console.log(param);
|
||||
$.ajax({
|
||||
url: '/kiosk/putUser.do',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(param),
|
||||
success: (res) => {
|
||||
// Controller의 resultMap.put("success", true)와 대응
|
||||
if (res.success) {
|
||||
alert(res.msgDesc || '고객 등록이 완료되었습니다.');
|
||||
location.href = '/kiosk'; // 완료 후 메인으로 이동
|
||||
} else {
|
||||
alert(res.msgDesc || '저장에 실패했습니다.');
|
||||
}
|
||||
},
|
||||
error: (xhr) => {
|
||||
alert('서버와 통신 중 오류가 발생했습니다.');
|
||||
console.error(xhr);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* [Utility] 서명 다이얼로그 관리 클래스
|
||||
*/
|
||||
class SignatureDialogManager {
|
||||
constructor(modalId = 'agreementInsertModal') {
|
||||
this.modalId = modalId;
|
||||
this.callback = null;
|
||||
this.signaturePad = null;
|
||||
}
|
||||
|
||||
init() {
|
||||
$(`#${this.modalId}`).remove();
|
||||
$('body').append(this.getHtmlTemplate());
|
||||
|
||||
const $modal = $(`#${this.modalId}`);
|
||||
$modal.dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
width: 500,
|
||||
resizable: false,
|
||||
draggable: true,
|
||||
dialogClass: 'signature-ui-dialog',
|
||||
open: () => {
|
||||
this.initSignaturePad();
|
||||
$(".ui-dialog-titlebar").hide();
|
||||
}
|
||||
});
|
||||
|
||||
this.setEvent();
|
||||
}
|
||||
|
||||
initSignaturePad() {
|
||||
const canvas = document.querySelector(`#${this.modalId} canvas`);
|
||||
if (!canvas) return;
|
||||
|
||||
try {
|
||||
this.signaturePad = new SignaturePad(canvas, {
|
||||
backgroundColor: 'rgb(255, 255, 255)',
|
||||
penColor: 'rgb(0, 0, 0)'
|
||||
});
|
||||
this.resizeCanvas(canvas);
|
||||
} catch (e) {
|
||||
console.error("SignaturePad 로드 실패.");
|
||||
}
|
||||
}
|
||||
|
||||
resizeCanvas(canvas) {
|
||||
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
canvas.getContext("2d").scale(ratio, ratio);
|
||||
if (this.signaturePad) this.signaturePad.clear();
|
||||
}
|
||||
|
||||
setEvent() {
|
||||
const $modal = $(`#${this.modalId}`);
|
||||
$modal.find('.btnCancle').on('click', () => $modal.dialog('close'));
|
||||
$modal.find('.btnReset').on('click', () => {
|
||||
if (this.signaturePad) this.signaturePad.clear();
|
||||
});
|
||||
$modal.find('.btnSave').on('click', () => {
|
||||
if (this.signaturePad && this.signaturePad.isEmpty()) {
|
||||
alert("서명을 진행해 주세요.");
|
||||
return;
|
||||
}
|
||||
const dataUrl = this.signaturePad.toDataURL();
|
||||
if (this.callback) this.callback(dataUrl);
|
||||
$modal.dialog('close');
|
||||
});
|
||||
}
|
||||
|
||||
open(callback) {
|
||||
this.init();
|
||||
this.callback = callback;
|
||||
$(`#${this.modalId}`).dialog('open');
|
||||
}
|
||||
|
||||
getHtmlTemplate() {
|
||||
return `
|
||||
<div id="${this.modalId}" title="서명 확인" style="display:none; padding:0;">
|
||||
<style>
|
||||
.signature-ui-dialog { border-radius: 12px; overflow: hidden; border: none; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
|
||||
.sig-header { padding: 15px; background: #339af0; color: #fff; font-weight: bold; }
|
||||
.sig-body { padding: 20px; text-align: center; }
|
||||
|
||||
/* 문구와 버튼을 나란히 배치하기 위한 스타일 */
|
||||
.sig-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sig-info-text { color: #495057; margin: 0; font-size: 14px; }
|
||||
|
||||
.canvas-area { border: 1px solid #dee2e6; background: #f8f9fa; border-radius: 4px; margin-bottom: 10px; }
|
||||
.canvas-area canvas { width: 100%; height: 200px; cursor: crosshair; display: block; }
|
||||
.sig-footer { padding: 15px; background: #f8f9fa; text-align: right; border-top: 1px solid #eee; }
|
||||
.sig-btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; margin-left: 5px; }
|
||||
.sig-btn-primary { background: #339af0; color: #fff; }
|
||||
.sig-btn-secondary { background: #adb5bd; color: #fff; }
|
||||
</style>
|
||||
<div class="sig-header">본인 서명 확인</div>
|
||||
<div class="sig-body">
|
||||
<div class="sig-info-row">
|
||||
<p class="sig-info-text">아래 영역에 서명해 주세요.</p>
|
||||
<button type="button" class="sig-btn sig-btn-secondary btnReset" style="font-size: 12px; padding: 4px 10px; margin: 0;">지우기</button>
|
||||
</div>
|
||||
|
||||
<div class="canvas-area">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sig-footer">
|
||||
<button type="button" class="sig-btn sig-btn-secondary btnCancle">취소</button>
|
||||
<button type="button" class="sig-btn sig-btn-primary btnSave">등록 완료</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* [Modal] 고객 검색 팝업 클래스
|
||||
* 작성일 : 2024. 04. 02.
|
||||
* 작성자 : NTsoft (Refactored to Class)
|
||||
*/
|
||||
/**
|
||||
* [Modal] 고객 검색 팝업 클래스 (jQuery UI Dialog 버전)
|
||||
*/
|
||||
class UserIntroSelectModal {
|
||||
constructor() {
|
||||
this.callback = null;
|
||||
this.dataList = null;
|
||||
this.modalId = 'userIntroSelectModal';
|
||||
}
|
||||
|
||||
init() {
|
||||
$(`#${this.modalId}`).remove();
|
||||
$('body').append(this.getHtmlTemplate());
|
||||
|
||||
$(`#${this.modalId}`).dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
width: 450, // 3개 항목이므로 너비를 좀 더 슬림하게 조정
|
||||
resizable: false,
|
||||
draggable: true,
|
||||
dialogClass: 'user-select-dialog', // CSS 커스텀 클래스 연결
|
||||
open: function() {
|
||||
$(".ui-dialog-titlebar").hide(); // 타이틀바 숨김
|
||||
$('.ui-widget-overlay').css({ 'opacity': 0.5, 'background': '#000' });
|
||||
}
|
||||
});
|
||||
|
||||
this.setEvent();
|
||||
}
|
||||
|
||||
setEvent() {
|
||||
const $modal = $(`#${this.modalId}`);
|
||||
$modal.find('.btnCancle').on("click", () => $modal.dialog("close"));
|
||||
|
||||
$modal.find('#searchIntroUserBtn').on('click', () => this.searchIntroUserList());
|
||||
$modal.find('#introUserSearchKeyword').on('keypress', (e) => {
|
||||
if (e.which === 13) this.searchIntroUserList();
|
||||
});
|
||||
}
|
||||
|
||||
searchIntroUserList() {
|
||||
const searchKeyword = document.querySelector("#introUserSearchKeyword").value;
|
||||
if (searchKeyword.length < 2) {
|
||||
alert("검색어를 2자 이상 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("menuClass", window.menuClass || "");
|
||||
formData.append("userSearchKeywordParam", searchKeyword);
|
||||
// 정렬 파라미터 추가
|
||||
formData.append("userSort", "BIRTHDAY DESC");
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webuser/selectListUserOption.do'),
|
||||
data: formData,
|
||||
dataType: "json",
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
success: (data) => {
|
||||
if (data.msgCode === '0') this.renderTable(data.rows);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderTable(rows) {
|
||||
const tbody = document.querySelector(`#${this.modalId} tbody`);
|
||||
tbody.innerHTML = "";
|
||||
this.dataList = rows;
|
||||
|
||||
if (!rows || rows.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="3" style="text-align: center; padding: 40px 0; color: #adb5bd;">조회 결과가 없습니다.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
rows.forEach((user, index) => {
|
||||
const genderClass = (user.gender === '남' || user.gender === 'M') ? 'gender-M' : 'gender-F';
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td class="user-name">${user.userName}</td>
|
||||
<td>${this.convertDateFormat(user.birthday)}</td>
|
||||
<td><span class="gender-tag ${genderClass}">${user.gender}</span></td>
|
||||
`;
|
||||
tr.onclick = () => {
|
||||
if (this.callback) this.callback(user);
|
||||
$(`#${this.modalId}`).dialog("close");
|
||||
};
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
popup(callback) {
|
||||
this.init();
|
||||
this.callback = callback;
|
||||
$(`#${this.modalId}`).dialog("open");
|
||||
}
|
||||
|
||||
convertDateFormat(input) {
|
||||
if (!input) return '-';
|
||||
const dateMatch = input.match(/\d{4}-\d{2}-\d{2}/);
|
||||
return dateMatch ? dateMatch[0].replace(/-/g, '.') : input;
|
||||
}
|
||||
|
||||
getHtmlTemplate() {
|
||||
return `
|
||||
<div id="${this.modalId}" style="display:none;">
|
||||
<div class="search-header">
|
||||
<div class="search-input-wrapper">
|
||||
<input id="introUserSearchKeyword" type="text" placeholder="고객명 또는 생년월일" />
|
||||
<button id="searchIntroUserBtn" class="btn-search">검색</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>성함</th>
|
||||
<th>생년월일</th>
|
||||
<th>성별</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: center; padding: 40px 0; color: #adb5bd;">검색어를 입력하세요.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer-ui">
|
||||
<button type="button" class="btn-close-ui btnCancle">닫기</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* [Utility] 서명 다이얼로그 관리 클래스 (jQuery UI 버전)
|
||||
*/
|
||||
class SignatureDialogManager {
|
||||
constructor(modalId = 'agreementInsertModal') {
|
||||
this.modalId = modalId;
|
||||
this.callback = null;
|
||||
this.signaturePad = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 다이얼로그 초기화 및 DOM 생성
|
||||
*/
|
||||
init() {
|
||||
$(`#${this.modalId}`).remove();
|
||||
$('body').append(this.getHtmlTemplate());
|
||||
|
||||
const $modal = $(`#${this.modalId}`);
|
||||
|
||||
// jQuery UI Dialog 설정
|
||||
$modal.dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
width: 500,
|
||||
resizable: false,
|
||||
draggable: true,
|
||||
dialogClass: 'signature-ui-dialog',
|
||||
open: () => {
|
||||
this.initSignaturePad();
|
||||
// 기본 타이틀바 숨기기 (커스텀 헤더 사용 시)
|
||||
$(".ui-dialog-titlebar").hide();
|
||||
}
|
||||
});
|
||||
|
||||
this.setEvent();
|
||||
}
|
||||
|
||||
/**
|
||||
* 서명 패드 라이브러리 초기화
|
||||
*/
|
||||
initSignaturePad() {
|
||||
const canvas = document.querySelector(`#${this.modalId} canvas`);
|
||||
if (!canvas) return;
|
||||
|
||||
try {
|
||||
this.signaturePad = new SignaturePad(canvas, {
|
||||
backgroundColor: 'rgb(255, 255, 255)',
|
||||
penColor: 'rgb(0, 0, 0)'
|
||||
});
|
||||
this.resizeCanvas(canvas);
|
||||
} catch (e) {
|
||||
console.error("SignaturePad 로드 실패. 라이브러리를 확인하세요.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 캔버스 크기 최적화
|
||||
*/
|
||||
resizeCanvas(canvas) {
|
||||
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
canvas.getContext("2d").scale(ratio, ratio);
|
||||
if (this.signaturePad) this.signaturePad.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* 이벤트 바인딩
|
||||
*/
|
||||
setEvent() {
|
||||
const $modal = $(`#${this.modalId}`);
|
||||
|
||||
// 취소/닫기
|
||||
$modal.find('.btnCancle').on('click', () => $modal.dialog('close'));
|
||||
|
||||
// 지우기 (초기화)
|
||||
$modal.find('.btnReset').on('click', () => {
|
||||
if (this.signaturePad) this.signaturePad.clear();
|
||||
});
|
||||
|
||||
// 등록 완료 (저장)
|
||||
$modal.find('.btnSave').on('click', () => {
|
||||
if (this.signaturePad && this.signaturePad.isEmpty()) {
|
||||
alert("서명을 진행해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const dataUrl = this.signaturePad.toDataURL();
|
||||
if (this.callback) this.callback(dataUrl);
|
||||
$modal.dialog('close');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 다이얼로그 오픈
|
||||
* @param {Function} callback 서명 완료 후 실행될 함수
|
||||
*/
|
||||
open(callback) {
|
||||
this.init();
|
||||
this.callback = callback;
|
||||
$(`#${this.modalId}`).dialog('open');
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML 템플릿
|
||||
*/
|
||||
getHtmlTemplate() {
|
||||
return `
|
||||
<div id="${this.modalId}" title="서명 확인" style="display:none; padding:0;">
|
||||
<style>
|
||||
.signature-ui-dialog { border-radius: 12px; overflow: hidden; border: none; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
|
||||
.sig-header { padding: 15px; background: #339af0; color: #fff; font-weight: bold; }
|
||||
.sig-body { padding: 20px; text-align: center; }
|
||||
.canvas-area { border: 1px solid #dee2e6; background: #f8f9fa; border-radius: 4px; margin-bottom: 10px; }
|
||||
.canvas-area canvas { width: 100%; height: 200px; cursor: crosshair; }
|
||||
.sig-footer { padding: 15px; background: #f8f9fa; text-align: right; border-top: 1px solid #eee; }
|
||||
.sig-btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; margin-left: 5px; }
|
||||
.sig-btn-primary { background: #339af0; color: #fff; }
|
||||
.sig-btn-secondary { background: #adb5bd; color: #fff; }
|
||||
</style>
|
||||
<div class="sig-header">본인 서명 확인</div>
|
||||
<div class="sig-body">
|
||||
<p style="margin-bottom: 10px; color: #495057;">아래 영역에 서명해 주세요.</p>
|
||||
<div class="canvas-area">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<button type="button" class="sig-btn sig-btn-secondary btnReset" style="font-size: 12px; padding: 4px 10px;">지우기</button>
|
||||
</div>
|
||||
<div class="sig-footer">
|
||||
<button type="button" class="sig-btn sig-btn-secondary btnCancle">취소</button>
|
||||
<button type="button" class="sig-btn sig-btn-primary btnSave">등록 완료</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(() => {
|
||||
|
||||
// 클래스 인스턴스 생성 (기존 소스와 호환성을 위해 변수명 유지 가능)
|
||||
const userIntroSelectModal = new UserIntroSelectModal();
|
||||
|
||||
const signatureDialog = new SignatureDialogManager();
|
||||
$('.registration_bth').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
// 2. 서명 모달 오픈 (jQuery UI 기반으로 커스텀한 경우)
|
||||
if (typeof signatureDialog !== 'undefined') {
|
||||
signatureDialog.open((signatureData) => {
|
||||
// 서명 완료 시 실행될 콜백: 여기서 실제 서버 전송(Ajax) 함수 호출
|
||||
this.savePatientData(signatureData);
|
||||
});
|
||||
}
|
||||
});
|
||||
const pageApp = new NewPatientPage();
|
||||
const signatureDialog = new SignatureDialogManager();
|
||||
const pageApp = new NewPatientPage();
|
||||
window.newPatientPage = pageApp;
|
||||
pageApp.init();
|
||||
|
||||
$('.consent-link').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
openConsentDialog($(this).data('type'));
|
||||
});
|
||||
$('.searchIntroUser').on('click', function() {
|
||||
// 모달 팝업 호출
|
||||
userIntroSelectModal.popup(function(data) {
|
||||
// [Callback] 고객을 선택했을 때 실행될 로직
|
||||
console.log("선택된 추천인 정보:", data);
|
||||
|
||||
// 1. input 필드에 선택된 사용자의 이름 표시
|
||||
$('input[name="modalRecommendId"]').val(data.userName);
|
||||
|
||||
// 2. (옵션) 실제 DB 저장을 위한 ID값 등을 hidden 필드에 저장할 경우
|
||||
// if ($('#recommendUserNo').length > 0) {
|
||||
// $('#recommendUserNo').val(data.muUserId);
|
||||
// }
|
||||
$('.btnSave').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
if (validateForm()) {
|
||||
//alert("검증 완료! 서명 단계로 이동합니다.");
|
||||
if (typeof signatureDialog !== 'undefined') {
|
||||
signatureDialog.open((signatureData) => {
|
||||
// 실제 저장 로직 호출 예시: pageApp.savePatientData(signatureData);
|
||||
console.log("서명 완료", signatureData);
|
||||
pageApp.savePatientData(signatureData);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}, { type: "recommend" }); // 필요 시 요청 파라미터 전달
|
||||
});
|
||||
function openConsentDialog(type) {
|
||||
if ($('#dynamicConsentDialog').length) $('#dynamicConsentDialog').dialog('destroy').remove();
|
||||
$('.consent-link').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
openConsentDialog($(this).data('type'));
|
||||
});
|
||||
|
||||
const $dialog = $('<div id=\"dynamicConsentDialog\" style=\"overflow-y: auto; padding: 20px; line-height: 1.6;\"></div>');
|
||||
function openConsentDialog(type) {
|
||||
if ($('#dynamicConsentDialog').length) $('#dynamicConsentDialog').dialog('destroy').remove();
|
||||
|
||||
const $dialog = $('<div id="dynamicConsentDialog" style="overflow-y: auto; padding: 20px; line-height: 1.6;"></div>');
|
||||
let isAgreed = false;
|
||||
|
||||
$dialog.dialog({
|
||||
modal: true, width: 800, height: 700,
|
||||
title: getDialogTitle(type),
|
||||
resizable: false, draggable: true,
|
||||
buttons: [
|
||||
{
|
||||
text: "동의함", class: "registration_bth",
|
||||
click: function() {
|
||||
$dialog.dialog({
|
||||
modal: true, width: 800, height: 700,
|
||||
title: getDialogTitle(type),
|
||||
resizable: false, draggable: true,
|
||||
buttons: [
|
||||
{
|
||||
text: "동의함", class: "registration_bth",
|
||||
click: function() {
|
||||
isAgreed = true;
|
||||
pageApp.allowSystemCheck = true;
|
||||
$('#' + type).prop('checked', true);
|
||||
$('#' + type).prop('checked', true);
|
||||
pageApp.allowSystemCheck = false;
|
||||
$(this).dialog('close');
|
||||
}
|
||||
},
|
||||
{ text: "닫기", class: "cancel_btn", click: function() { $(this).dialog('close'); } }
|
||||
],
|
||||
$(this).dialog('close');
|
||||
}
|
||||
},
|
||||
{ text: "닫기", class: "cancel_btn", click: function() { $(this).dialog('close'); } }
|
||||
],
|
||||
close: function() {
|
||||
if (!isAgreed) {
|
||||
pageApp.allowSystemCheck = true;
|
||||
@@ -520,44 +413,41 @@
|
||||
}
|
||||
$(this).dialog('destroy').remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$dialog.html('<div style=\"text-align:center; padding:50px;\">내용을 불러오는 중입니다...</div>');
|
||||
$dialog.html('<div style="text-align:center; padding:50px;">내용을 불러오는 중입니다...</div>');
|
||||
|
||||
$.ajax({
|
||||
url: '/kiosk/getConsentForm.do',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({
|
||||
consentFormTypeCd: getConsentFormTypeCd(type), // 코드로 변환하여 전송
|
||||
nationalCd: pageApp.data.nationalityCode // 현재 국적 코드 전송
|
||||
consentFormTypeCd: getConsentFormTypeCd(type),
|
||||
nationalCd: pageApp.data.nationalityCode
|
||||
}),
|
||||
success: function(res) {
|
||||
if(res && res.consentFormContent) {
|
||||
$dialog.html(res.consentFormContent);
|
||||
} else {
|
||||
$dialog.html('<div style=\"text-align:center; color:red;\">등록된 동의서 내용이 없습니다.</div>');
|
||||
$dialog.html('<div style="text-align:center; color:red;">등록된 동의서 내용이 없습니다.</div>');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$dialog.html('<div style=\"text-align:center; color:red;\">서버 통신 중 오류가 발생했습니다.</div>');
|
||||
$dialog.html('<div style="text-align:center; color:red;">서버 통신 중 오류가 발생했습니다.</div>');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getDialogTitle(type) {
|
||||
const titles = {
|
||||
function getDialogTitle(type) {
|
||||
const titles = {
|
||||
'agreePrivacy': '개인정보 수집 및 이용안내',
|
||||
'agreeProcedure': '시술동의서',
|
||||
'agreeTerms': '이용약관',
|
||||
'refusePhoto': '사진촬영동의서'
|
||||
};
|
||||
return titles[type] || '동의서';
|
||||
}
|
||||
return titles[type] || '동의서';
|
||||
}
|
||||
|
||||
/**
|
||||
* type 명칭을 DB consentFormTypeCd 코드로 변환
|
||||
*/
|
||||
function getConsentFormTypeCd(type) {
|
||||
const typeMapping = {
|
||||
'agreePrivacy': 'C202601180001',
|
||||
@@ -567,5 +457,63 @@
|
||||
};
|
||||
return typeMapping[type] || '';
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
let isValid = true;
|
||||
$('.validation-msg').text('');
|
||||
|
||||
// --- 1. 기본 정보 검증 ---
|
||||
let basicError = "";
|
||||
if (!$('input[name="modalUserName"]').val().trim()) {
|
||||
basicError = "이름 필수";
|
||||
} else if (!$('#selectNationality').val()) {
|
||||
basicError = "국적 선택";
|
||||
} else if ($('input[name="modalUserRrn1"]').val().length < 6) {
|
||||
basicError = "주민번호 확인";
|
||||
} else if (!$('input[name="modalPhoneNumber"]').val().trim()) {
|
||||
basicError = "연락처 필수";
|
||||
} else if (!$('#address').val().trim()) {
|
||||
basicError = "주소 검색 필요";
|
||||
}
|
||||
|
||||
if (basicError) {
|
||||
$('#msg-basic').text(" (⚠️ " + basicError + ")");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// --- 2. 개인정보 동의 검증 ---
|
||||
let consentError = "";
|
||||
if (!$('#agreePrivacy').is(':checked')) {
|
||||
consentError = "이용안내 미동의";
|
||||
} else if (!$('#agreeProcedure').is(':checked')) {
|
||||
consentError = "시술동의 미확인";
|
||||
} else if (!$('#agreeTerms').is(':checked')) {
|
||||
consentError = "약관 미동의";
|
||||
} else if (!$('#refusePhoto').is(':checked')) {
|
||||
consentError = "사진촬영 미동의";
|
||||
}
|
||||
|
||||
if (consentError) {
|
||||
$('#msg-consent').text(" (⚠️ " + consentError + ")");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
const firstErrorField = $('.validation-msg:contains("⚠️")').first();
|
||||
if (firstErrorField.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: firstErrorField.offset().top - 100
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
$('input, select, textarea').on('input change', function() {
|
||||
$(this).closest('section').find('.validation-msg').text('');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user