LifeCenter/src/main/webapp/WEB-INF/jsp/patient/new.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>

<script type="text/javascript">
function patientNewInit() {
    if( $( "#basalN" ).is( ":checked" ) ) {
        $( "td.basalDisease input" ).prop( "disabled", true );
    }
    
    $( "label.label-readonly-check" ).each( function( i, v ){
        var $this = $(v);
        var checkbox = $this.find( "input[type='checkbox']" );
        var textbox  = $this.find( "input[type='text']" );
        
        if( !checkbox.is(":checked") ){
            textbox.prop( "readonly", true );
        }
    });
};
function setEventHandler(){
    //체크yes시 content입력 처리
    $( "label.label-readonly-check input[type='checkbox']" ).on( "click", function(){
        var $this = $( this );
        
        $this.closest( "label" ).find( "input[type='text']" ).prop( "readonly", $this.is( ":checked" ) === false );
        
        if( $this.is( ":checked" ) === false ) {
            $this.closest( "label" ).find( "input[type='text']" ).val( "" );
        } else {
            $this.closest( "label" ).find( "input[type='text']" ).focus();
        };
    }); 
    
    
    //기저질환유무 처리
    $( "input[name='basalDiseaseYn']" ).on( "click", function(){
        var $this = $( this );
        
        if( $this.val() == "Y" ){
            patientNewInit();
            $( ".basalDisease input" ).prop( "disabled", false );
        } else {
            $( "td.basalDisease input" ).prop( "disabled", true );
            $( "td.basalDisease input[type='checkbox']" ).prop( "checked", false );
            $( "td.basalDisease input[type='text']" ).val( "" );
        }
    });

    $( "input[name='pregnancyStatus']" ).on( "click", function(){
        var $this = $( this );
        if ($this.val() == "Y") {
            $("#pregnancyWeek").prop("disabled", false);
        } else {
            $("#pregnancyWeek").prop("disabled", true);
            $("#pregnancyWeek").val("");
        }
    });
    
    //입소일시
    $( ".hospitalizationDate" ).on( "change", function(){
        var ymd  = $( "#hospitalizationDateYmd" ).val();
        var hour = $( "#hospitalizationDateHour" ).val();
        var min  = $( "#hospitalizationDateMin" ).val();
        
        hour = Number(hour) < 10 ? "0" + hour : hour;
        min  = Number(min) < 10 ? "0" + min   : min;
        
        $( "#hospitalizationDate" ).val( ymd + " " + hour + ":" + min + ":00" );
    });
    
    //성별 남선택시 임신유무 고정
    $( "input[name='gender']" ).on( "click", function(){
        var gender = $( this ).val();
        console.log( gender );
        
        if( gender == "M" ) {
            $( "input[name='pregnancyStatus']:input[value='N']" ).prop( "checked", true );
            $( "input[name='pregnancyStatus']:input[value='Y']" ).prop( "disabled", true );
            $( "#pregnancyWeek" ).val( "" ).prop( "disabled", true );
        } else {
            $( "input[name='pregnancyStatus']:input[value='N']" ).prop( "checked", false );
            $( "input[name='pregnancyStatus']:input[value='Y']" ).prop( "disabled", false );
        }
    });
    
    //생년월일
    $( ".select-date" ).on( "change", function(){
        var $this = $( this );
        var wrap  = $this.closest( "div.date" );
        
        var dateYear  = wrap.find( ".date-year" ).val();
        var dateMonth = wrap.find( ".date-month" ).val();
        var dateDay   = wrap.find( ".date-day" ).val();
        
        dateMonth = Number(dateMonth) < 10 ? "0" + dateMonth : dateMonth;
        dateDay   = Number(dateDay) < 10   ? "0" + dateDay   : dateDay;
        
        wrap.find( "input.error-box" ).val( dateYear  + "-" + dateMonth  + "-" + dateDay );
    });
    
    $( "input.date" ).daterangepicker({
        singleDatePicker : true,
        showDropdowns : true,
        locale : {
            format : "YYYY-MM-DD"
        }
    });
    
    $( "input.date-no-req" ).daterangepicker({
        singleDatePicker : true,
        showDropdowns : true,
        locale : {
            format : "YYYY-MM-DD"
        },
        autoUpdateInput: false
    });
    
    $('input.date-no-req').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));
    });
}
$( function(){
    patientNewInit();
    setEventHandler();
    
    $( "#patientForm" ).validate({
        rules: {
            hospitalizationDate : {
                date : true
            },
            patientPhone : {
                phoneValid : true
            },
            guardianPhone : {
                phoneValid : true
            },
            jumin : {
                date : true
            }
        },
        messages : {
//             jumin : "생년월일을 모두 선택해주세요",
            gender: "성별을 선택해주세요",
//             wardNumber : "동을 입력해주세요",
            roomNumber : "호실을 입력해주세요",
            hospitalizationDate : {
                date:"입소일시를 선택해주세요"
            }
        },
        onkeyup: function( element, event ) {
            $( element ).valid();
        },
        onfocusout: function (element) {
            $( element ).val( $.trim( $( element ).val() ) );
            $( element ).valid();
        },
        errorPlacement: function(error, element) {
            if (element.attr("type") == "radio") {
                error.insertBefore(element);
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
});
</script>
</head>
<body>
    <div class="wrapper">
        <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>

        <div class="main">
            <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>

            <main class="content">
                <div class="container-fluid p-0">
                    <!-- 환자관리 : 신규환자 등록 START -->
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h1 class="h3 mb-3">환자정보등록</h1>
                        </div>
                        <div class="col-12 col-lg-6  text-right">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
                                    <li class="breadcrumb-item">환자관리</li>
                                    <li class="breadcrumb-item active">환자정보 등록</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <c:if test="${centerCount eq 0}">
                                        <table class="table mobile-table">
                                            <tr>
                                              <th>치료센터</th>
                                              <td class="text-danger">등록된 생활치료센터가 없거나<br/>환자 신규등록 권한이 없습니다. </td>
                                            </tr>
                                        </table>
                                    </c:if>
                                    
                                    <c:if test="${centerCount > 0}">
                                        <c:set var="now" value="<%=new java.util.Date()%>" />
                                        <c:set var="action" value="/patient/new/insert" />
                                        
                                        <form id="patientForm" action="${action}" method="post" onsubmit="return false">
                                            <table class="table mobile-table">
                                                <colgroup>
                                                    <col style="width:15%">
                                                    <col style="width:35%">
                                                    <col style="width:15%">
                                                    <col style="width:35%">
                                                </colgroup>
                                                <tr>
                                                    <th>치료센터</th>
                                                    <td><c:out value="${centerName}"/></td>
                                                    <th><span class="fix">*</span>입소일시</th>
                                                    <td colspan="2">
                                                        <!-- 입소일시 -->
                                                        <c:set var="sysYmd"><fmt:formatDate value="${now}" pattern="yyyy-MM-dd" /></c:set>
                                                            
                                                        <div class="form-group calendar-bar mb-xl-0">
                                                            <input class="form-control date hospitalizationDate" type="text" value="${sysYmd}" name="hospitalizationDate" id="hospitalizationDateYmd">
                                                            <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th><span class="fix">*</span>병동 번호</th>
                                                    <td>
                                                        <div class="form-check-inline">
                                                            <!-- 병동 번호 (동 /호실) -->
                                                            <input type="text" class="form-control" name="wardNumber"> <span>동</span>
                                                            <input type="text" class="form-control" name="roomNumber" required> <span>호</span>
                                                        </div>
                                                    </td>
                                                    <th><span class="fix">*</span>이름</th>
                                                    <td>
                                                        <!-- 환자 이름 -->
                                                        <input type="text" name="patientName" class="form-control" placeholder="이름을 입력해주세요" required>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th><span class="fix">*</span>성별</th>
                                                    <td>
                                                        <!-- 성별 -->
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="gender" value="M" required>
                                                            <span class="form-check-label">남</span>
                                                        </label>
                                                        
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="gender" value="F" required>
                                                            <span class="form-check-label">여</span>
                                                        </label>
                                                    </td>
                                                    <th><span class="fix">*</span>생년월일</th>
                                                    <td>
                                                        <!-- 생년월일 -->
                                                        <div class="form-group calendar-bar mb-xl-0">
                                                            <input type="text" class="form-control date-no-req jumin" id="jumin" name="jumin" autocomplete="off" placeholder="yyyy-mm-dd 형식으로 입력하세요" required>
                                                            <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th><span class="fix">*</span>연락처</th>
                                                    <td>
                                                        <input type="text" name="patientPhone" class="form-control" placeholder="연락처를 입력해주세요" required>
                                                    </td>
                                                    <th>보호자 연락처</th>
                                                    <td>
                                                        <input type="text" name="guardianPhone" class="form-control" placeholder="보호자 연락처를 입력해주세요">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>증상시작일</th>
                                                    <td>
                                                        <div class="form-group calendar-bar mb-xl-0">
                                                            <input class="form-control date-no-req" type="text" name="symptomStartDate" autocomplete="off">
                                                            <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                        </div>
                                                    </td>
                                                    <th><span class="fix">*</span>확진일</th>
                                                    <td>
                                                        <div class="form-group calendar-bar mb-xl-0">
                                                            <input class="form-control date" type="text" name="confirmationDate" autocomplete="off">
                                                            <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                        </div>
                                                    </td>
                                                </tr>
                                                
                                                <!-- 안보이도록처리 (신규등록 환자 상태는 무조건 입소, 빈값으로 submit) -->
                                                <tr class="d-none">
<!--                                                     <th>격리해제 예정일</th> -->
                                                    <th>상태 변경일</br>(퇴소, 지정병원이송, 기타)</th>
                                                    <td colspan="3">
                                                        <div class="form-group calendar-bar mb-xl-0">
                                                            <input class="form-control date-no-req" type="text" name="disisolationDate" autocomplete="off">
                                                            <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>최근약복용<br />(최근 24시간 이내)</th>
                                                    <td>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" value="N" name="drugYn" onclick="$('#drugContent').attr('readonly', true).val('');">
                                                            <span class="form-check-label">미복용</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" value="Y" name="drugYn" onclick="$('#drugContent').removeAttr('readonly');">
                                                            <span class="form-check-label">복용</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input type="text" id="drugContent" class="form-control" name="drugContent" placeholder="약명을 입력하세요." readonly>
                                                        </label>
                                                    </td>
                                                    <th>임신</th>
                                                    <td>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="pregnancyStatus" value="N">
                                                            <span class="form-check-label">무</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="pregnancyStatus" value="Y">
                                                            <span class="form-check-label">유</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                                <select class="custom-select" name="pregnancyWeek" id="pregnancyWeek" disabled>
                                                                      <option value="" selected="">임신 주차</option>
                                                                      <c:forEach var="p" begin="1" end="40" step="1">
                                                                          <option value="${p}">${p} 주</option>
                                                                      </c:forEach>
                                                                </select>
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th rowspan="4">기저질환 여부</th>
                                                    <td colspan="3">
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="basalY" name="basalDiseaseYn" value="Y">
                                                            <span class="form-check-label">예</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="basalN" name="basalDiseaseYn" value="N">
                                                            <span class="form-check-label">아니오</span>
                                                        </label>
                                                        (예인 경우 하단의 기저질환을 선택하세요)
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" class="basalDisease">
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="highBloodPressureCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">고혈압</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="lowBloodPressureCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">저혈압</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="organTransplantCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">장기이식(신장, 간 등)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="diabetesCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">당뇨병</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="respiratoryDiseaseCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">호흡기 질환</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="immunologicalDiseaseCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">면역질환(류마티스 등)</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                                
                                                <tr>
                                                    <td colspan="3" class="basalDisease">
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="heartDisease" type="checkbox" value="Y">
                                                            <span class="form-check-label">심장질환</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="liverDisease" type="checkbox" value="Y">
                                                            <span class="form-check-label">간질환</span>
                                                        </label>
                                                        <label class="form-check form-check-inline label-readonly-check">
                                                            <input class="form-check-input" name="operation" type="checkbox" value="Y">
<!--                                                             ( <input type="text" id="operationContent" name="operationContent" class="form-control form-control-sm w150" name=""> ) -->
                                                            <span class="form-check-label">수술</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="allergyCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">알레르기</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="kidneyDisease" type="checkbox" value="Y">
                                                            <span class="form-check-label">신장질환</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" class="basalDisease">
                                                        <label class="form-check form-check-inline label-readonly-check">
                                                            <input class="form-check-input" name="cancerCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">암 ( <input type="text" name="cancerName" class="form-control form-control-sm w150"> )</span>
                                                        </label>
                                                        <label class="form-check form-check-inline label-readonly-check">
                                                            <input class="form-check-input" name="etcCheckDisease" type="checkbox" value="Y">
                                                            <span class="form-check-label">기타 ( <input type="text" name="etcContentDisease" class="form-control form-control-sm w150"> )</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                                
                                                
                                                <!-- 현재 증상 (입소 당시) -->
                                                <tr>
                                                    <th rowspan="3">현재 증상<br />(입소 당시)</th>
                                                    <td colspan="3">
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="feverCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">열감(열나는 느낌)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="coughCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">기침</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="colic" type="checkbox" value="Y">
                                                            <span class="form-check-label">복통(배아픔)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="coldFitCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">오한(추운 느낌)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="sputumCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">가래</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="ocinCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">오심(구역질)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="chestPain" type="checkbox" value="Y">
                                                            <span class="form-check-label">흉통(가슴 통증)</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3">
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="noseCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">콧물 또는 코 막힘</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="vomitingCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">구토</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="musclePainCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">근육통(몸살)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="soreThroatCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">인후통(목 아픔)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="diarrheaCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">설사</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="headacheCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">두통(머리아픔)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="dyspneaCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">호흡곤란(숨가쁨)</span>
                                                        </label>
                                                        <label class="form-check form-check-inline">
                                                            <input class="form-check-input" name="fatigueCheck" type="checkbox" value="Y">
                                                            <span class="form-check-label">권태감(피곤함)</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3">
                                                        <label class="form-check form-check-inline label-readonly-check">
                                                            <input class="form-check-input" name="etcCheckSymptom" type="checkbox" value="Y">
                                                            <span class="form-check-label">기타 ( <input type="text" name="etcContentSymptom" class="form-control form-control-sm w150"> )</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>체온</th>
                                                    <td>우측 (<input type="text" class="form-control form-control-sm w50" name="feverRight">)℃ /  좌측 (<input type="text" class="form-control form-control-sm w50" name="feverLeft">)℃</td>
                                                    
                                                    <th>맥박수</th>
                                                    <td>
                                                        (<input type="text" class="form-control form-control-sm w50" name="pulseRate">) 회/분
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>호흡수</th>
                                                    <td>
                                                        (<input type="text" class="form-control form-control-sm w50" name="respirationRate">) 회/분
                                                    </td>
                                                    <th>혈압</th>
                                                    <td>수축기 (
                                                        <input type="text" class="form-control form-control-sm w50" name="bloodPressureLevelCon">)mmHg  
                                                        /  이완기 (
                                                        <input type="text" class="form-control form-control-sm w50" name="bloodPressureLevelRel">)mmHg
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>산소포화도</th>
                                                    <td colspan="3">
                                                        (<input type="text" class="form-control form-control-sm w50" name="oxygenSaturation">) %
                                                    </td>
                                                </tr>
                                            </table>
                                            <div class="row mt-3">
                                                <div class="col-12">
                                                    <div class="text-right">
                                                        <button type="button" class="btn btn-outline-primary w100" onclick="history.back();">취소</button>
                                                        <button type="submit" class="btn btn-primary w100">등록</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 환자관리 : 신규환자 등록 END -->
                </div>
            </main>

            <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
        </div>
    </div>

</body>
</html>