2025-10-18 11:06:19 +09:00
|
|
|
<!DOCTYPE html>
|
2025-12-14 22:50:00 +09:00
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
|
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
|
|
|
|
|
2025-10-18 11:06:19 +09:00
|
|
|
<head>
|
2025-12-14 22:50:00 +09:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
|
<title>메이드유 CRM</title>
|
|
|
|
|
|
|
|
|
|
<!-- jQuery -->
|
|
|
|
|
<script src="/js/web/jquery.min.js"></script>
|
|
|
|
|
<script src="/js/web/jquery-ui.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Choices.js -->
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Flatpickr -->
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- CSS -->
|
|
|
|
|
<link rel="stylesheet" href="/css/web/font.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/kiosk/new-patient.css">
|
2025-10-18 11:06:19 +09:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="layout_top_script">
|
|
|
|
|
<script src="/js/kiosk/common.js"></script>
|
|
|
|
|
</th:block>
|
|
|
|
|
<th:block th:replace="/web/include/modal :: layout_modal"></th:block>
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="layout_content">
|
2025-12-14 22:50:00 +09:00
|
|
|
<div id="newPatientForm" class="new-patient-container">
|
|
|
|
|
|
|
|
|
|
<!-- Header -->
|
|
|
|
|
<header class="page-header">
|
|
|
|
|
<h1 class="title">신규 고객 등록</h1>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!-- Body -->
|
|
|
|
|
<main class="page-body">
|
|
|
|
|
<div class="form-grid-layout">
|
|
|
|
|
|
|
|
|
|
<!-- Column 1: Basic Info -->
|
|
|
|
|
<section class="form-section-card col-card">
|
|
|
|
|
<div class="section-title">기본 정보</div>
|
|
|
|
|
|
|
|
|
|
<!-- Nationality -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label class="required">국적</label>
|
|
|
|
|
<select id="selectNationality" name="nationality">
|
|
|
|
|
<option value="">국적 선택</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Name -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label class="required">고객명</label>
|
|
|
|
|
<input type="text" name="modalUserName" placeholder="이름을 입력하세요" />
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Birthday -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>생년월일</label>
|
|
|
|
|
<div class="date-input-wrapper">
|
|
|
|
|
<input name="modalBirthday" type="text" placeholder="YYYY-MM-DD" readonly />
|
|
|
|
|
<span class="age-text txtAge"></span>
|
|
|
|
|
<img src="/image/web/calendar.svg" alt="calendar">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Gender -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>성별</label>
|
|
|
|
|
<div class="radio-group">
|
|
|
|
|
<div class="radio-item">
|
|
|
|
|
<input type="radio" name="modalGender" id="genderF" value="F" />
|
|
|
|
|
<label for="genderF">여자</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radio-item">
|
|
|
|
|
<input type="radio" name="modalGender" id="genderM" value="M" />
|
|
|
|
|
<label for="genderM">남자</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Identification (Dynamic) -->
|
|
|
|
|
<div class="form-row foreigner_box">
|
|
|
|
|
<label>식별정보</label>
|
|
|
|
|
<select id="selectIdentification" name="identificationType">
|
|
|
|
|
<option value="pno" selected>여권번호</option>
|
|
|
|
|
<option value="arc">외국인등록번호</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div class="passport_number_box">
|
|
|
|
|
<input name="modalUserPno" type="text" placeholder="여권번호 입력" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="foreigner_number_box split-inputs" style="display:none;">
|
|
|
|
|
<input name="modalUserArc1" type="text" placeholder="000000" maxlength="6" />
|
|
|
|
|
<span class="split-divider">-</span>
|
|
|
|
|
<input name="modalUserArc2" type="password" placeholder="0000000" maxlength="7" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<div class="form-row local_box">
|
|
|
|
|
<label>주민등록번호</label>
|
|
|
|
|
<div class="split-inputs">
|
|
|
|
|
<input name="modalUserRrn1" type="text" placeholder="000000" maxlength="6" />
|
|
|
|
|
<span class="split-divider">-</span>
|
|
|
|
|
<input name="modalUserRrn2" type="password" placeholder="0000000" maxlength="7" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Column 2: Contact Info -->
|
|
|
|
|
<section class="form-section-card col-card">
|
|
|
|
|
<div class="section-title">연락처 및 동의</div>
|
|
|
|
|
|
|
|
|
|
<!-- User Type -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>고객구분</label>
|
|
|
|
|
<select id="selectUserType" name="userType">
|
|
|
|
|
<option value="">고객구분 선택</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Phone 1 -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label class="required">연락처</label>
|
|
|
|
|
<input name="modalPhoneNumber" type="tel" placeholder="010-0000-0000" />
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Phone 2 -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>보조 연락처</label>
|
|
|
|
|
<input name="modalPhoneNumber2" type="tel" placeholder="010-0000-0000" />
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Photo Refusal -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>사진 거부</label>
|
|
|
|
|
<div class="radio-group">
|
|
|
|
|
<div class="radio-item">
|
|
|
|
|
<input type="radio" name="modalRefusePhotoYn" id="photoY" value="Y" checked />
|
|
|
|
|
<label for="photoY">예</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radio-item">
|
|
|
|
|
<input type="radio" name="modalRefusePhotoYn" id="photoN" value="N" />
|
|
|
|
|
<label for="photoN">아니오</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- SMS -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>SMS 수신여부</label>
|
|
|
|
|
<div class="radio-group">
|
|
|
|
|
<div class="radio-item">
|
|
|
|
|
<input type="radio" name="modalSmsYn" id="smsY" value="Y" checked />
|
|
|
|
|
<label for="smsY">예</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radio-item">
|
|
|
|
|
<input type="radio" name="modalSmsYn" id="smsN" value="N" />
|
|
|
|
|
<label for="smsN">아니오</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Column 3: Additional Info -->
|
|
|
|
|
<section class="form-section-card col-card">
|
|
|
|
|
<div class="section-title">기타 정보</div>
|
|
|
|
|
|
|
|
|
|
<!-- Treatment -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>관심진료</label>
|
|
|
|
|
<select id="selectTreatment" name="treatment">
|
|
|
|
|
<option value="">관심진료 선택</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Channel -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>방문경로</label>
|
|
|
|
|
<select id="selectChannel" name="channel">
|
|
|
|
|
<option value="">방문경로 선택</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Recommender -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>추천인</label>
|
|
|
|
|
<div class="searchIntroUser" style="position:relative; cursor:pointer;">
|
|
|
|
|
<input type="text" name="modalRecommendId" placeholder="검색하여 선택하세요" readonly
|
|
|
|
|
style="cursor:pointer; padding-right:40px;" />
|
|
|
|
|
<img src="/image/web/search_B.svg" alt="search"
|
|
|
|
|
style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:18px;">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Etc -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>특이 사항 (시술/약물)</label>
|
|
|
|
|
<textarea name="modalEtc" placeholder="특이사항을 입력하세요"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Memo -->
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label>고객 메모</label>
|
|
|
|
|
<textarea name="modalMemo" placeholder="메모를 입력하세요"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
<!-- Footer -->
|
|
|
|
|
<footer class="page-footer">
|
|
|
|
|
<!-- Use project standard classes -->
|
|
|
|
|
<button type="button" class="cancel_btn btnCancle">취소</button>
|
|
|
|
|
<button type="button" class="registration_bth btnSave">등록 완료</button>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</th:block>
|
|
|
|
|
<th:block layout:fragment="layout_popup">
|
|
|
|
|
</th:block>
|
|
|
|
|
<th:block layout:fragment="layout_script">
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
// Choices.js 인스턴스 저장
|
|
|
|
|
let choicesInstances = {};
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
newPatientPage.init();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let newPatientPage = {
|
|
|
|
|
data: {
|
|
|
|
|
nationality: '',
|
|
|
|
|
nationalityCode: '',
|
|
|
|
|
userType: '',
|
|
|
|
|
visitPath: '',
|
|
|
|
|
treatment: ''
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
init: function () {
|
|
|
|
|
this.initChoices();
|
|
|
|
|
this.loadCommonCategories();
|
|
|
|
|
this.initDatepicker();
|
|
|
|
|
this.setEvent();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Choices.js 초기화
|
|
|
|
|
initChoices: function () {
|
|
|
|
|
const choicesConfig = {
|
|
|
|
|
searchEnabled: true,
|
|
|
|
|
searchPlaceholderValue: '검색...',
|
|
|
|
|
noResultsText: '결과 없음',
|
|
|
|
|
noChoicesText: '선택 가능한 항목이 없습니다',
|
|
|
|
|
itemSelectText: '선택',
|
|
|
|
|
removeItemButton: false,
|
|
|
|
|
shouldSort: false,
|
|
|
|
|
placeholderValue: '선택하세요'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 국적
|
|
|
|
|
choicesInstances.nationality = new Choices('#selectNationality', {
|
|
|
|
|
...choicesConfig,
|
|
|
|
|
placeholder: true,
|
|
|
|
|
placeholderValue: '국적 선택'
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 고객구분
|
|
|
|
|
choicesInstances.userType = new Choices('#selectUserType', {
|
|
|
|
|
...choicesConfig,
|
|
|
|
|
placeholder: true,
|
|
|
|
|
placeholderValue: '고객구분 선택'
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 관심진료
|
|
|
|
|
choicesInstances.treatment = new Choices('#selectTreatment', {
|
|
|
|
|
...choicesConfig,
|
|
|
|
|
placeholder: true,
|
|
|
|
|
placeholderValue: '관심진료 선택'
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 방문경로
|
|
|
|
|
choicesInstances.channel = new Choices('#selectChannel', {
|
|
|
|
|
...choicesConfig,
|
|
|
|
|
placeholder: true,
|
|
|
|
|
placeholderValue: '방문경로 선택'
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 식별정보 (여권/외국인등록번호)
|
|
|
|
|
choicesInstances.identification = new Choices('#selectIdentification', {
|
|
|
|
|
...choicesConfig,
|
|
|
|
|
searchEnabled: false,
|
|
|
|
|
placeholder: false
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 초기 상태 설정 (한국인 기본)
|
|
|
|
|
$('.foreigner_box').hide();
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// Change 이벤트 바인딩
|
|
|
|
|
this.bindChoicesEvents();
|
2025-10-18 11:06:19 +09:00
|
|
|
},
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
bindChoicesEvents: function () {
|
|
|
|
|
let self = this;
|
|
|
|
|
|
|
|
|
|
// 식별정보 변경
|
|
|
|
|
let idSelect = document.getElementById('selectIdentification');
|
|
|
|
|
if (idSelect) {
|
|
|
|
|
idSelect.addEventListener('change', function (e) {
|
|
|
|
|
if (this.value === 'pno') {
|
|
|
|
|
$('.passport_number_box').show();
|
|
|
|
|
$('.foreigner_number_box').hide();
|
|
|
|
|
} else {
|
|
|
|
|
$('.passport_number_box').hide();
|
|
|
|
|
$('.foreigner_number_box').show();
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-10-18 11:06:19 +09:00
|
|
|
}
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 국적 변경
|
|
|
|
|
document.getElementById('selectNationality').addEventListener('change', function (e) {
|
|
|
|
|
self.data.nationalityCode = this.value;
|
|
|
|
|
let selectedText = this.options[this.selectedIndex]?.text || '';
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
if (selectedText.includes('대한민국') || this.value.includes('KR') || this.value === 'Local') {
|
|
|
|
|
self.data.nationality = 'Local';
|
|
|
|
|
$('.local_box').show();
|
|
|
|
|
$('.foreigner_box').hide();
|
|
|
|
|
} else {
|
|
|
|
|
self.data.nationality = 'Foreigner';
|
|
|
|
|
$('.local_box').hide();
|
|
|
|
|
$('.foreigner_box').show();
|
|
|
|
|
}
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 고객구분 변경
|
|
|
|
|
document.getElementById('selectUserType').addEventListener('change', function (e) {
|
|
|
|
|
self.data.userType = this.value;
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 관심진료 변경
|
|
|
|
|
document.getElementById('selectTreatment').addEventListener('change', function (e) {
|
|
|
|
|
self.data.treatment = this.value;
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 방문경로 변경
|
|
|
|
|
document.getElementById('selectChannel').addEventListener('change', function (e) {
|
|
|
|
|
self.data.visitPath = this.value;
|
|
|
|
|
let selectedText = this.options[this.selectedIndex]?.text || '';
|
|
|
|
|
|
|
|
|
|
if (selectedText.includes('소개')) {
|
|
|
|
|
$('.searchIntroUser').show();
|
|
|
|
|
} else {
|
|
|
|
|
$('input[name="modalRecommendId"]').val('').removeAttr('data-userid');
|
|
|
|
|
}
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
},
|
2025-12-14 22:50:00 +09:00
|
|
|
|
|
|
|
|
// 공통 코드 로드
|
|
|
|
|
loadCommonCategories: function () {
|
|
|
|
|
this.fetchCategory('C202404110001', 'nationality'); // 국적
|
|
|
|
|
this.fetchCategory('C202404110002', 'userType'); // 고객구분
|
|
|
|
|
this.fetchCategory('C202404110003', 'channel'); // 방문경로
|
|
|
|
|
this.fetchTreatmentList(); // 관심진료
|
2025-10-18 11:06:19 +09:00
|
|
|
},
|
2025-12-14 22:50:00 +09:00
|
|
|
|
|
|
|
|
fetchCategory: function (code, choicesKey) {
|
2025-10-18 11:06:19 +09:00
|
|
|
$.ajax({
|
2025-12-14 22:50:00 +09:00
|
|
|
url: '/kiosk/getCategoryItem.do',
|
2025-10-18 11:06:19 +09:00
|
|
|
type: 'POST',
|
2025-12-14 22:50:00 +09:00
|
|
|
data: { categoryCode: code },
|
|
|
|
|
success: function (data) {
|
|
|
|
|
if (data.rows && data.rows.length > 0) {
|
|
|
|
|
let choices = data.rows.map(item => ({
|
|
|
|
|
value: item.categoryitemcode || item.commonCode || '',
|
|
|
|
|
label: item.categoryitemname || item.codeName || ''
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
// Choices 인스턴스에 옵션 설정
|
|
|
|
|
if (choicesInstances[choicesKey]) {
|
|
|
|
|
choicesInstances[choicesKey].setChoices(choices, 'value', 'label', true);
|
|
|
|
|
|
|
|
|
|
// 국적의 경우 기본값 설정 (대한민국)
|
|
|
|
|
if (choicesKey === 'nationality') {
|
|
|
|
|
let defaultItem = choices.find(c => c.label.includes('대한민국'));
|
|
|
|
|
if (defaultItem) {
|
|
|
|
|
choicesInstances[choicesKey].setChoiceByValue(defaultItem.value);
|
|
|
|
|
newPatientPage.data.nationalityCode = defaultItem.value;
|
|
|
|
|
newPatientPage.data.nationality = 'Local';
|
|
|
|
|
}
|
2025-10-18 11:06:19 +09:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2025-12-14 22:50:00 +09:00
|
|
|
error: function (xhr) {
|
|
|
|
|
console.error("카테고리 조회 실패:", code, xhr.responseText);
|
2025-10-18 11:06:19 +09:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
fetchTreatmentList: function () {
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '/kiosk/getTreatmentOptionList.do',
|
|
|
|
|
type: 'POST',
|
|
|
|
|
success: function (data) {
|
|
|
|
|
if (data.rows && data.rows.length > 0) {
|
|
|
|
|
let choices = data.rows.map(item => ({
|
|
|
|
|
value: item.mutreatmentid || '',
|
|
|
|
|
label: item.treatmentname || ''
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
if (choicesInstances.treatment) {
|
|
|
|
|
choicesInstances.treatment.setChoices(choices, 'value', 'label', true);
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-10-18 11:06:19 +09:00
|
|
|
}
|
2025-12-14 22:50:00 +09:00
|
|
|
});
|
|
|
|
|
},
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// Datepicker 초기화 (Flatpickr)
|
|
|
|
|
initDatepicker: function () {
|
|
|
|
|
let birthdayInput = document.querySelector('input[name="modalBirthday"]');
|
|
|
|
|
if (!birthdayInput) return;
|
|
|
|
|
|
|
|
|
|
let fp = flatpickr(birthdayInput, {
|
|
|
|
|
locale: "ko",
|
|
|
|
|
dateFormat: "Y-m-d",
|
|
|
|
|
maxDate: "today",
|
|
|
|
|
disableMobile: true,
|
|
|
|
|
onChange: function (selectedDates, dateStr, instance) {
|
|
|
|
|
if (selectedDates.length > 0) {
|
|
|
|
|
let birthDate = selectedDates[0];
|
|
|
|
|
let today = new Date();
|
|
|
|
|
let age = today.getFullYear() - birthDate.getFullYear();
|
|
|
|
|
|
|
|
|
|
// 만 나이 계산
|
|
|
|
|
let m = today.getMonth() - birthDate.getMonth();
|
|
|
|
|
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
|
|
|
|
|
age--;
|
|
|
|
|
}
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
$('.txtAge').text('만 ' + age + '세');
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 주민번호 앞자리 자동 완성 (YYMMDD)
|
|
|
|
|
let yy = String(birthDate.getFullYear()).substring(2);
|
|
|
|
|
let mm = String(birthDate.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
let dd = String(birthDate.getDate()).padStart(2, '0');
|
|
|
|
|
$('input[name="modalUserRrn1"]').val(yy + mm + dd);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 래퍼/아이콘 클릭 시 달력 열기
|
|
|
|
|
$('.date-input-wrapper').off('click').on('click', function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
fp.open();
|
|
|
|
|
});
|
|
|
|
|
},
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 이벤트 설정
|
|
|
|
|
setEvent: function () {
|
|
|
|
|
$('.cancel_btn').off('click').on("click", function () { history.back(); });
|
|
|
|
|
$('.registration_bth').off('click').on("click", function () { newPatientPage.save(); });
|
|
|
|
|
|
|
|
|
|
// 추천인 검색
|
|
|
|
|
$('.searchIntroUser').off('click').on('click', function () {
|
|
|
|
|
if (typeof userIntroSelectModal !== 'undefined') {
|
|
|
|
|
userIntroSelectModal.popup(function (obj) {
|
|
|
|
|
$('input[name="modalRecommendId"]').val(obj.username).attr('data-userid', obj.muuserid);
|
|
|
|
|
}, {});
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
// 전화번호 포맷
|
|
|
|
|
$('input[name="modalPhoneNumber"], input[name="modalPhoneNumber2"]').on('input', function () {
|
|
|
|
|
this.value = this.value.replace(/[^0-9]/g, '').replace(/(\d{3})(\d{3,4})(\d{4})/, '$1-$2-$3').substring(0, 13);
|
2025-10-18 11:06:19 +09:00
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
save: function () {
|
|
|
|
|
let userName = $('input[name="modalUserName"]').val().trim();
|
|
|
|
|
let phone = $('input[name="modalPhoneNumber"]').val().replace(/-/g, '');
|
|
|
|
|
let phone2 = $('input[name="modalPhoneNumber2"]').val().replace(/-/g, '');
|
|
|
|
|
let birthday = $('input[name="modalBirthday"]').val();
|
|
|
|
|
let gender = $('input[name="modalGender"]:checked').val();
|
|
|
|
|
let smsYn = $('input[name="modalSmsYn"]:checked').val();
|
|
|
|
|
let refusePhoto = $('input[name="modalRefusePhotoYn"]:checked').val();
|
|
|
|
|
let rrn1 = $('input[name="modalUserRrn1"]').val();
|
|
|
|
|
let rrn2 = $('input[name="modalUserRrn2"]').val();
|
|
|
|
|
let pno = $('input[name="modalUserPno"]').val();
|
|
|
|
|
let arc1 = $('input[name="modalUserArc1"]').val();
|
|
|
|
|
let arc2 = $('input[name="modalUserArc2"]').val();
|
|
|
|
|
let memo = $('textarea[name="modalMemo"]').val();
|
|
|
|
|
let etc = $('textarea[name="modalEtc"]').val();
|
|
|
|
|
let introUserId = $('input[name="modalRecommendId"]').attr('data-userid') || '';
|
|
|
|
|
|
|
|
|
|
// 유효성 검사
|
|
|
|
|
if (!userName) { modalEvent.warning("알림", "고객명을 입력해주세요."); return; }
|
|
|
|
|
if (!phone || phone.length < 10) { modalEvent.warning("알림", "올바른 연락처를 입력해주세요."); return; }
|
|
|
|
|
if (!$('#agree_privacy').is(':checked')) { modalEvent.warning("알림", "개인정보 수집 이용에 동의해야 합니다."); return; }
|
2025-10-18 11:06:19 +09:00
|
|
|
|
2025-12-14 22:50:00 +09:00
|
|
|
$.ajax({
|
|
|
|
|
url: '/kiosk/putUser.do',
|
|
|
|
|
type: 'POST',
|
|
|
|
|
data: {
|
|
|
|
|
nationality: this.data.nationality,
|
|
|
|
|
nationalityCode: this.data.nationalityCode,
|
|
|
|
|
userName: userName,
|
|
|
|
|
phoneNumber: phone,
|
|
|
|
|
phoneNumber2: phone2,
|
|
|
|
|
birthday: birthday,
|
|
|
|
|
gender: gender,
|
|
|
|
|
userRrn1: rrn1,
|
|
|
|
|
userRrn2: rrn2,
|
|
|
|
|
userPno: pno,
|
|
|
|
|
userArc1: arc1,
|
|
|
|
|
userArc2: arc2,
|
|
|
|
|
userTypeCode: this.data.userType,
|
|
|
|
|
channelCode: this.data.visitPath,
|
|
|
|
|
muGroupId: this.data.treatment,
|
|
|
|
|
introUserId: introUserId,
|
|
|
|
|
memo: memo,
|
|
|
|
|
etc: etc,
|
|
|
|
|
smsYn: smsYn,
|
|
|
|
|
refusePhotoYn: refusePhoto
|
|
|
|
|
},
|
|
|
|
|
success: function (data) {
|
|
|
|
|
if (data.msgCode == '0') {
|
|
|
|
|
modalEvent.success("등록 성공", "신규 고객 등록이 완료되었습니다.", function () {
|
|
|
|
|
location.href = '/kiosk/kiosk_main';
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
modalEvent.danger("오류", data.msgDesc);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
error: function () {
|
|
|
|
|
modalEvent.danger("오류", "통신 중 오류가 발생했습니다.");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2025-10-18 11:06:19 +09:00
|
|
|
};
|
2025-12-14 22:50:00 +09:00
|
|
|
</script>
|
2025-10-18 11:06:19 +09:00
|
|
|
</th:block>
|
2025-12-14 22:50:00 +09:00
|
|
|
|
2025-10-18 11:06:19 +09:00
|
|
|
</html>
|
