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

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

$(function() {
    $("input.date-no-req").daterangepicker({
        singleDatePicker : true,
        showDropdowns : true,
        locale : {
            format : "YYYY-MM-DD"
        },
        autoUpdateInput: false,
        maxDate : new Date()
    }).on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));
        
        $(this).trigger( "change" );
    }).on( "change", function(){
        if( $( this ).val() > getNowYmd() ) {
            $( this ).val( getNowYmd() );
        }
    });
    
    
//     $("input[name='endDate']").daterangepicker({
//      singleDatePicker : true,
//         showDropdowns : true,
//         locale : {
//             format : "YYYY-MM-DD"
//         },
//         autoUpdateInput: false,
//         maxDate : new Date()
//     }).on('apply.daterangepicker', function(ev, picker) {
        
//         $(this).val(picker.startDate.format('YYYY-MM-DD'));
//         $(this).trigger( "change" );
//     });
    
    $("input.date-no-req").on( "change", function(){
        console.log( $( this ).val() );
        
        $("input[name='startDate']").daterangepicker({
            singleDatePicker : true,
            showDropdowns : true,
            locale : {
                format : "YYYY-MM-DD"
            },
            autoUpdateInput: false,
            maxDate : $("input[name='endDate']").val()
        }).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD'));
            $(this).trigger( "change" );
        });
        
        if( $("input[name='endDate']").val() != "" ){
            if( $("input[name='startDate']").val() > $("input[name='endDate']").val() ) {
                $("input[name='startDate']").val( $( this ).val() );
            }
        }
        
        if( $("input[name='endDate']").val() != "" ){
            if( $("input[name='startDate']").val() > $("input[name='endDate']").val() ) {
                $("input[name='startDate']").val( $("input[name='endDate']").val() );
            }
        }
    });
    
    
    $( "#searchForm" ).validate({
        rules: {
            startDate : {
                //date : true
            },
            endDate : {
                //date : true
            }
        },
        onkeyup: function( element, event ) {
            $( element ).valid();
        },
        onfocusout: function (element) {
            $( element ).val( $.trim( $( element ).val() ) );
            $( element ).valid();
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
    
    if( startDate != "" ){
        $("input[name='startDate']").val( startDate );
    }
    
    if( endDate != "" ){
        $("input[name='endDate']").val( endDate );
    }
});

function getExcel(){
	if( $.trim( $( "#downMemo" ).val() ) == "" ){
		alertBox({ txt : "사유를 입력해주세요" });
		$( ".modal-header>.modal-title h3" ).remove();
		return false;
	}
    var newForm = $( "#searchForm" ).clone();
    
    newForm.attr( "id", "excelForm" );
    newForm.attr( "method", "post" );
    newForm.attr( "action", "./excel" );
    newForm.attr( "target", "_blank" );
    newForm.hide();
    
    $( document.body ).append( newForm );
    newForm.append( $("#downMemo").clone() );
    newForm.submit();
    $( "button.close" ).click();
    $( "#downMemo" ).val( "" );
    $( "#excelForm" ).remove();
}
</script>
<style>
/* tr.phr-info td{vertical-align:top !important;} */
span.phr-type{background:#f8f9fa; border-radius:4px;padding:0 10px;border:1px solid #dee2e6;}
span.phr-value{font-weight:500;}
span.phr-date{color:#777777;}
span.no-data{color:#999999;}
</style>
</head>
<body>
    <div class="modal fade" id="excelDownMemo" tabindex="-1" role="dialog" aria-hidden="true" data-memoid="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">환자 리스트 Excel 다운로드</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span> </button>
                </div>
                <div class="modal-body m-3">
                    <table class="table mobile-table">
                        <colgroup>
                            <col style="width: 20%">
                            <col style="width: 80%">
                        </colgroup>
                        <tr>
                            <th><span class="fix">*</span>다운로드 사유</th>
                            <td>
                                <div class="form-row">
                                    <textarea id="downMemo" name="downMemo" class="form-control" rows="6" placeholder="" maxlength="200"></textarea>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="addMemoTools modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
                    <button type="button" class="btn btn-primary" onclick="getExcel();">제출 후 다운로드</button>
                </div>
            </div>
        </div>
    </div>
    
    <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 active">환자관리</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <form action="?" method="get" id="searchForm">
                                    <div class="card-body">
                                        <table class="table mobile-table">
                                            <colgroup>
                                                <col style="width: 10%">
                                                <col style="width: 40%">
                                                <col style="width: 10%">
                                                <col style="width: 40%">
                                            </colgroup>
                                            <tr>
                                                <th>상태 검색 조건</th>
                                                <td>
                                                    <select class="custom-select form-control" id="inputState" name="inputState">
                                                        <option value="ALL">전체</option>
                                                        <option value="H" <c:if test="${inputState eq 'H'}"> selected="selected"</c:if>>입소</option>
                                                        <option value="D" <c:if test="${inputState eq 'D'}"> selected="selected"</c:if>>퇴소</option>
                                                        <option value="T" <c:if test="${inputState eq 'T'}"> selected="selected"</c:if>>지정병원 이송</option>
                                                        <option value="E" <c:if test="${inputState eq 'E'}"> selected="selected"</c:if>>기타</option>
                                                    </select></td>
                                                <th>검색어</th>
                                                <td>
                                                    <input type="text" class="form-control" id="inputPassword4" name="patientName" placeholder="환자명 or 호실 입력" value="<c:out value="${patientName}" />">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>입퇴소 검색 일자</th>
                                                <td>
                                                    <div class="row">
                                                        <div class="col-5">
                                                            <div class="form-group mb-xl-0">
                                                                <input class="form-control date-no-req" type="text" name="startDate" value="" onKeyup="inputYMDNumber(this);" autocomplete="off"  placeholder="검색 시작일자">
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="col-2 text-center">
                                                            ~</div>
                                                        <div class="col-5">
                                                            <div class="form-group mb-xl-0">
                                                                <input class="form-control date-no-req" type="text" name="endDate" value="" onKeyup="inputYMDNumber(this);" autocomplete="off" placeholder="검색 종료일자">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td colspan="2">
                                                    <button class="btn btn-primary">검색</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>정렬 조건</th>
                                                <td>
                                                    <div class="form-row">
                                                        <div class="col-5">
                                                            <div class="form-group mb-xl-0">
                                                                <select class="custom-select form-control" id="sortType" name="sortType">
                                                                    <option value="patient_name" <c:if test="${sortType eq 'patient_name'}">selected="selected"</c:if>>환자명</option>
                                                                    <option value="room_number" <c:if test="${sortType eq 'room_number'}">selected="selected"</c:if>>호실</option>
                                                                    <option value="hospitalization_date" <c:if test="${sortType eq 'hospitalization_date'}">selected="selected"</c:if>>입소일자</option>
                                                                    <option value="expected_discharge_date" <c:if test="${sortType eq 'expected_discharge_date'}">selected="selected"</c:if>>퇴소예정일</option>
                                                                    <option value="disisolation_date" <c:if test="${sortType eq 'disisolation_date'}">selected="selected"</c:if>>상태변경일</option>
                                                                    <option value="state" <c:if test="${sortType eq 'state'}">selected="selected"</c:if>>상태</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-5">
                                                            <div class="form-group mb-xl-0">
                                                                <select class="custom-select form-control" id="sort" name="sort">
                                                                    <option value="desc" <c:if test="${sort eq 'desc'}">selected="selected"</c:if>>내림차순</option>
                                                                    <option value="asc" <c:if test="${sort eq 'asc'}">selected="selected"</c:if>>오름차순</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td colspan="2">
                                                    <button class="btn btn-primary">정렬하기</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-3">전체 :
                                            <fmt:formatNumber value="${total}" pattern="#,###" />
                                        </div>
                                        <div class="col-9 text-right">
                                            <c:if test="${data._SES_GROUP_IDX eq 1 or data._SES_GROUP_IDX eq 2 or data._SES_GROUP_IDX eq 4}">
                                                <button class="btn btn-success mb-1" data-toggle="modal" data-target="#excelDownMemo">Excel 다운로드</button>
                                            </c:if>
                                            <a class="btn btn-primary mb-1" target="_blank" href="/store/manual/survey">입소자 문진표 서식 다운로드</a>
                                            <c:if test="${role._CREATE eq 'Y'}">
                                                <button class="btn btn-primary mb-1" onclick="location.href='./new';">신규환자등록</button>
                                            </c:if>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-striped text-center">
                                            <colgroup>
                                                <col style=" width: 5%; ">
                                                <col style=" width: 7%; ">
                                                <col style=" width: 10%; ">
                                                <c:if test="${data._SES_CENTER_CODE eq '0'}">
                                                    <col style=" width: 15%; ">
                                                </c:if>
                                                <col style=" width: 12%; ">
                                                <col style=" width: 10%; ">
                                                <col style=" width: 10%; ">
                                                <col style=" width: 10%; ">
                                                <col style=" width: 10%; ">
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>번호</th>
                                                    <th>환자명</th>
                                                    <th>호실</th>
                                                    <c:if test="${data._SES_CENTER_CODE eq '0'}">
                                                        <th>생활치료센터명</th>
                                                    </c:if>
                                                    <th>성별 / 나이</th>
                                                    <th>확진일자</th>
                                                    <th>입소일자</th>
                                                    <th>퇴소예정일</th>
                                                    <th>상태(상태 변경일)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <c:choose>
                                                    <c:when test="${total > 0}">
                                                        <c:forEach var="l" items="${item}" varStatus="lStatus">
                                                            <c:set var="viewLink" value="./info?patientIdx=${l.patientIdx}" />
                                                            <c:set var="pageNum" value="${ ( total - lStatus.index ) - ( (page - 1) * pageSize ) }" />
                                                            
                                                            <tr>
                                                                <td rowspan="2"><fmt:formatNumber value="${pageNum}" pattern="#,###" /></td>
                                                                <td rowspan="2">
                                                                    <a href="${viewLink}" class="font-weight-bold"><c:out value="${l.patientName}" /></a>
                                                                </td>
                                                                <td>
                                                                    <c:if test="${l.wardNumber ne null and l.wardNumber ne ''}">
                                                                        <c:out value="${l.wardNumber}"/>동
                                                                    </c:if>
                                                                    <c:out value="${l.roomNumber}" />호 
                                                                </td>
                                                                <c:if test="${data._SES_CENTER_CODE eq '0'}">
                                                                    <td><c:out value="${l.centerName}" /></td>
                                                                </c:if>
                                                                <td><c:out value="${l.gender} / ${l.age}" /></td>
                                                                <td><c:out value="${l.confirmationDate}" /></td>
                                                                <td><c:out value="${l.hospitalizationDate}" /></td>
                                                                <td>
                                                                    <c:if test="${l.expectedDischargeDate ne ''}">
                                                                        <c:out value="${l.expectedDischargeDate}" />
                                                                    </c:if>
                                                                </td>
                                                                <td>
<%--                                                                     <c:if test="${l.disisolationDate eq null or l.disisolationDate eq ''}"> --%>
<%--                                                                         <c:out value="${l.state}" /> --%>
<%--                                                                     </c:if> --%>
                                                                    <c:if test="${l.disisolationDate ne ''}">
                                                                        <fmt:parseDate var="dDate" value="${l.disisolationDate}" pattern="yyyy-MM-dd" />
                                                                        <c:set var="disisolationDate"><fmt:formatDate value="${dDate}" pattern="yyyy-MM-dd" /></c:set>
                                                                        <c:if test="${l.state ne '입소(지정)'}">
                                                                            <c:out value="${l.state}(${disisolationDate})" />
                                                                        </c:if>
                                                                        <c:if test="${l.state eq '입소(지정)'}">
                                                                            <c:out value="${l.state}" />
                                                                        </c:if>
                                                                        
                                                                    </c:if>
<%--                                                                     <c:out value="${l.state}(${disisolationDate})" /> --%>
                                                                </td>
                                                            </tr>
                                                            <tr class="phr-info">
                                                               <td>
                                                                   <span class="phr-type">체온</span><br/>
                                                                   <c:choose>
                                                                       <c:when test="${l.temperature eq '' or l.temperature eq null}"><span class="no-data">미측정</span></c:when>
                                                                       <c:otherwise>
                                                                           <span class="phr-value"><c:out value="${l.temperature}" /> ˚C</span><br/>
                                                                           <span class="phr-date"><c:out value="${l.temperatureCreateDate}" /></span>
                                                                       </c:otherwise>
                                                                   </c:choose>
                                                               </td>
                                                               <td>
                                                                   <span class="phr-type">혈압</span><br/>
                                                                   <c:choose>
                                                                       <c:when test="${l.systolicBloodPressure eq '' or l.systolicBloodPressure eq null}"><span class="no-data">미측정</span></c:when>
                                                                       <c:otherwise>
                                                                           <span class="phr-value"><c:out value="${l.systolicBloodPressure}" /> mmHg / <c:out value="${l.diastolicBloodPressure}" /> mmHg</span><br/>
                                                                           <span class="phr-date"><c:out value="${l.systolicBloodPressureCreateDate}" /></span>
                                                                       </c:otherwise>
                                                                   </c:choose>
                                                                   
                                                               </td>
                                                               <td>
                                                                   <span class="phr-type">맥박</span><br/>
                                                                   <c:choose>
                                                                       <c:when test="${l.pulseRate eq '' or l.pulseRate eq null}"><span class="no-data">미측정</span></c:when>
                                                                       <c:otherwise>
                                                                           <span class="phr-value"><c:out value="${l.pulseRate}" /> bpm</span><br/>
                                                                           <span class="phr-date"><c:out value="${l.pulseRateCreateDate}" /></span>
                                                                       </c:otherwise>
                                                                   </c:choose>
                                                               </td>
                                                               <td>
                                                                   <span class="phr-type">산소포화도</span><br/>
                                                                   <c:choose>
                                                                       <c:when test="${l.oxygenSaturation eq '' or l.oxygenSaturation eq null}"><span class="no-data">미측정</span></c:when>
                                                                       <c:otherwise>
                                                                           <span class="phr-value"><c:out value="${l.oxygenSaturation}" /> %</span><br/>
                                                                           <span class="phr-date"><c:out value="${l.oxygenSaturationCreateDate}" /></span>
                                                                       </c:otherwise>
                                                                   </c:choose>
                                                               </td>
                                                               <td>
                                                                   <span class="phr-type">혈당</span><br/>
                                                                   <c:choose>
                                                                       <c:when test="${l.bloodSugar eq '' or l.bloodSugar eq null}"><span class="no-data">미측정</span></c:when>
                                                                       <c:otherwise>
                                                                           <span class="phr-value"><c:out value="${l.bloodSugar}" /> mg/dL</span><br/>
                                                                           <span class="phr-date"><c:out value="${l.bloodSugarCreateDate}" /></span>
                                                                       </c:otherwise>
                                                                   </c:choose>
                                                               </td>
                                                               <td <c:if test="${data._SES_CENTER_CODE eq '0'}">colspan="2"</c:if>>
                                                                   <span class="phr-type">임상증상</span><br/>
                                                                   <c:choose>
                                                                       <c:when test="${l.symptomContent eq '' or l.symptomContent eq null or l.createDate eq null or l.createDate eq ''}"><span class="no-data">없음</span></c:when>
                                                                       <c:otherwise>
                                                                           <span class="phr-value"><c:out value="${l.symptomContent}" /></span><br/>
                                                                           <span class="phr-date"><c:out value="${l.createDate}" /></span>
                                                                       </c:otherwise>
                                                                   </c:choose>
                                                               </td>
                                                            </tr>
                                                        </c:forEach>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <tr>
                                                            <td colspan="9">등록된 환자가 없습니다.</td>
                                                        </tr>
                                                    </c:otherwise>
                                                </c:choose>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row mt-5">
                                         <div class="col-12 col-lg-6 mb-2">
                                            <!-- <select
                                                class="custom-select form-control col-md-2"
                                                id="inputState"
                                                name="inputState">
                                                <option value="success"
                                                    selected="">전체</option>
                                                <option value="info">입소</option>
                                                <option value="warning">퇴소</option>
                                            </select> -->
                                        </div>
                                        <div class="col-12 col-lg-6 mb-2">
                                            <jsp:include page="${data._INCLUDE}/paging.jsp" flush="true">
                                                <jsp:param name="firstPageNo" value="${paging.firstPageNo}" />
                                                <jsp:param name="prevPageNo"  value="${paging.prevPageNo}" />
                                                <jsp:param name="startPageNo" value="${paging.startPageNo}" />
                                                <jsp:param name="pageNo"      value="${paging.pageNo}" />
                                                <jsp:param name="endPageNo"   value="${paging.endPageNo}" />
                                                <jsp:param name="nextPageNo"  value="${paging.nextPageNo}" />
                                                <jsp:param name="finalPageNo" value="${paging.finalPageNo}" />
                                                <jsp:param name="preFix"      value="${paging.preFix}" />
                                                <jsp:param name="url"         value="${paging.url}" />
                                                <jsp:param name="total"       value="${paging.totalCount}" />
                                            </jsp:include>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 환자관리 END -->
                </div>
            </main>

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