clean-parking/src/main/webapp/WEB-INF/views/biz/minwon/dayanswer/dayanswer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"></div>
                <button type="button" onclick="location.href='<c:url value='/template/noticeSample/register.do'/>'" class="newbtn bg1">등록</button>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="gs_b_top">
            <ul class="lef">
                <li class="th">검색구분</li>
                <li>
                    <select id="searchCondition" name="searchCondition" class="input">
                        <option value="">전체</option>
                        <option value="title" <c:if test="${paramVO.searchCondition eq 'title'}">selected</c:if>>접수번호</option>
                        <option value="contents" <c:if test="${paramVO.searchCondition eq 'contents'}">selected</c:if>>처리자명</option>
                        <option value="writer" <c:if test="${paramVO.searchCondition eq 'writer'}">selected</c:if>>전화번호</option>
                        <input type="hidden" id="tabState" name="tabState" value=""/>
                    </select>
                </li>
                <li class="th">검색어</li>
                <li><input type="text" id="searchKeyword" name="searchKeyword" class="input" value="${param.searchKeyword}"/></li>
                <li class="th">접수일자 지정</li>
                <li>
                    <input type="text" id="searchStartDt" name="searchStartDt" class="input calender datepicker" value="${param.searchStartDt}" /> ~
                    <input type="text" id="searchEndDt" name="searchEndDt" class="input calender datepicker" value="${param.searchEndDt}" />
                </li>
                <li>
                    <button type="button" id="search_btn" class="newbtnss bg1">검색</button>
                    <button type="button" id="btnExcel" class="newbtnss bg1">엑셀다운로드</button>

                </li>
            </ul>
            <ul class="rig2">
                <li>
                    <select id="perPageSelect" class="input">
                        <option value="10" <c:if test="${param.perPage eq '10'}">selected</c:if>>페이지당 10</option>
                        <option value="30" <c:if test="${empty param.perPage or param.perPage eq '30'}">selected</c:if>>페이지당 30</option>
                        <option value="100" <c:if test="${param.perPage eq '100'}">selected</c:if>>페이지당 100</option>
                    </select>
                    <span class="page_number"><span id="currentPage"></span><span class="bar">/</span><sapn id="totalPages"></sapn> Pages</span>
                </li>
            </ul>
        </div>
        <div class="state-tab-wrap">
            <ul class="state-tabs">
                <li class="on" data-state="">전체</li>
                <li data-state="FIN_BU" value="6">답변완료(부과)</li>
                <li data-state="FIN_GE" value="7">답변완료(계도)</li>
                <li data-state="FIN_ME" value="8">답변완료(미부과)</li>
                <li data-state="FIN_ADD" value="9">답변완료(수기)</li>
                <li data-state="FAIL" value="5">답변실패</li>
                <li data-state="INCOMP" value="fail">답변미대상</li>
            </ul>
        </div>

        <style>
            .state-tab-wrap {
                margin: 10px 0;
            }

            .state-tabs {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
            }

            .state-tabs li {
                padding: 6px 14px;
                border: 1px solid #ccc;
                border-bottom: none;
                background: #f5f5f5;
                font-size: 12px;
                cursor: pointer;
                margin-right: 4px;
            }

            .state-tabs li.on {
                background: #ffffff;
                font-weight: bold;
                border-bottom: 1px solid #ffffff;
            }
            .state-area {
                margin-top: 10px;
                padding: 10px 0;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .state-label {
                font-weight: bold;
                margin-right: 5px;
                white-space: nowrap;
            }

            .state-input {
                width: 120px;
                height: 28px;
                padding: 4px;
                border: 1px solid #ccc;
            }

            .state-area button {
                height: 32px;
                padding: 0 12px;
            }
        </style>
        <div class="gs_booking">
            <div class="row">
                <div class="col-sm-12">
                    <div class="box_column">
                        <div class="containers">
                            <div id="grid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gs_booking">

        </div>
            <div class="state-area">
                <label class="state-label">새처리상태값</label>
                <input type="text" id="newStateValue" class="state-input">

                <button type="button" id="btnAllChange" class="newbtnss bg1">전체 답변상태변경</button>
                <button type="button" id="btnOneChange" class="newbtnss bg1">1개 답변상태변경</button>
                <button type="button" id="btncdmake"    class="newbtnss bg1">표지정보조회 CD 만들기</button>
            </div>
            <div class="status-right">
                <span id="statusSummary">
                    초기 0, 대기 1, 대상(부과) 2, 대상(계도) 3, 대상(서손) 4, 실패 5,
                    완료(부과) 6, 완료(계도) 7, 완료(서손) 8, 완료(수기) 9, 미대상 A, 미대상(서손) B
                </span>
            </div>
        </div>
    </div>
</div>

<!-- /Main body -->
<script type="text/javascript">

    let INIT_POPUP = null;
    let SEARCH_COND = {};
    let GRID = null;

    // 검색조건 세팅
    let setSearchCond = function () {
        let searchCondition = $.trim(nvl($("#searchCondition").val(), ""));
        let searchKeyword   = $.trim(nvl($("#searchKeyword").val(), ""));
        let searchUseYn     = $.trim(nvl($("#searchUseYn").val(), ""));
        let searchStartDt   = $.trim(nvl($("#searchStartDt").val(), ""));
        let searchEndDt     = $.trim(nvl($("#searchEndDt").val(), ""));
        let tabState        = $.trim(nvl($("#tabState").val(), ""));

        SEARCH_COND.searchCondition = searchCondition;
        SEARCH_COND.searchKeyword   = searchKeyword;
        SEARCH_COND.searchUseYn     = searchUseYn;
        SEARCH_COND.searchStartDt   = searchStartDt;
        SEARCH_COND.searchEndDt     = searchEndDt;
        SEARCH_COND.tabState        = tabState;
    };

    const fnBiz = {

        init: () => {
            initGrid();
        },

        eventListener: () => {

            // 엑셀 다운로드
            $('#btnExcel').on('click', function () {
                const params = $.param({
                    searchCondition: $('#searchCondition').val(),
                    searchKeyword:   $('#searchKeyword').val(),
                    searchStartDt:   $('#searchStartDt').val(),
                    searchEndDt:     $('#searchEndDt').val()
                });

                const url = '${pageContext.request.contextPath}/minwon/dayanswer/dayanswer-excel.do?' + params;
                window.location.href = url;
            });

            // 전체 상태 변경
            $('#btnAllChange').on('click', function () {
                const newState = $.trim($('#newStateValue').val());

                if (!GRID) {
                    alert('그리드가 아직 초기화되지 않았습니다.');
                    return;
                }

                const checkedRowKeys = GRID.getCheckedRowKeys();
                if (checkedRowKeys.length > 0) {
                    alert('체크된 행이 있습니다.\n전체 답변상태변경은 체크를 모두 해제한 상태에서만 가능합니다.\n' +
                        '한 개만 수정하려면 [1개 답변상태변경] 버튼을 사용해주세요.');
                    return;
                }
                if (!newState) {
                    alert('새 처리상태값을 입력하세요.');
                    return;
                }

                if (!confirm('현재 조회된 모든 건의 처리상태를 [' + newState + '] 로 변경하시겠습니까?')) {
                    return;
                }

                $.ajax({
                    url: '<c:url value="/minwon/dayanswer/update-all-state.ajax"/>',
                    type: 'POST',
                    data: {
                        newState:       newState,
                        searchCondition: $('#searchCondition').val(),
                        searchKeyword:   $('#searchKeyword').val(),
                        searchStartDt:   $('#searchStartDt').val(),
                        searchEndDt:     $('#searchEndDt').val()
                    },
                    success: function () {
                        alert('전체 답변상태가 변경되었습니다.');
                        const currentPage = GRID.getPagination()._currentPage || 1;
                        GRID.readData(currentPage);
                    },
                    error: function () {
                        alert('상태 변경 중 오류가 발생했습니다.');
                    }
                });
            });

            // 한 건 상태 변경
            $('#btnOneChange').on('click', function () {
                const newState = $.trim($('#newStateValue').val());

                if (!newState) {
                    alert('새 처리상태값을 입력하세요.');
                    return;
                }
                if (!GRID) {
                    alert('그리드가 아직 초기화되지 않았습니다.');
                    return;
                }

                const checkedRowKeys = GRID.getCheckedRowKeys();

                if (checkedRowKeys.length === 0) {
                    alert('상태를 변경할 행을 1개 선택하세요.');
                    return;
                }
                if (checkedRowKeys.length > 1) {
                    alert('1개 답변상태변경은 한 행만 선택할 수 있습니다.');
                    return;
                }

                const rowData = GRID.getRow(checkedRowKeys[0]);
                if (!rowData) {
                    alert('선택된 행 정보를 가져올 수 없습니다.');
                    return;
                }

                const asMmcode = rowData.asMmcode;

                if (!confirm('선택한 건의 상태를 [' + newState + '] 로 변경하시겠습니까?')) {
                    return;
                }

                $.ajax({
                    url: '<c:url value="/minwon/dayanswer/update-one-state.ajax"/>',
                    type: 'POST',
                    data: {
                        asMmcode: asMmcode,
                        newState: newState
                    },
                    success: function () {
                        alert('선택한 답변 상태가 변경되었습니다.');
                        const currentPage = GRID.getPagination()._currentPage || 1;
                        GRID.readData(currentPage);
                    },
                    error: function () {
                        alert('상태 변경 중 오류가 발생했습니다.');
                    }
                });
            });

            // 검색 버튼
            $('#search_btn').on('click', function () {
                let startDate = $("#searchStartDt").val();
                let endDate   = $("#searchEndDt").val();

                if ((startDate && !endDate) || (!startDate && endDate)) {
                    alert("등록일 검색 시 시작일과 종료일을 모두 입력해주세요.");
                    return;
                }
                if (startDate && endDate) {
                    if (!isDate(startDate) || !isDate(endDate)) {
                        alert("유효한 날짜 형식이 아닙니다. (YYYY-MM-DD)");
                        return;
                    }
                    let startDateObj = new Date(startDate);
                    let endDateObj   = new Date(endDate);
                    if (startDateObj > endDateObj) {
                        alert("시작일은 종료일보다 이후일 수 없습니다.");
                        return;
                    }
                }

                $("#page").val(1);
                GRID.readData(1);
            });

            // 검색어 엔터
            $('#searchKeyword').on('keypress', function (e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $('#search_btn').trigger('click');
                }
            });

            // perPage 변경 이벤트 추가
            $('#perPageSelect').on('change', () => {
                const pagination = TuiGrid.instance.getPagination();
                if (!pagination) return;

                pagination.setItemsPerPage($('#perPageSelect').val());
                pagination.reset(TuiGrid.instance.getRowCount());
                pagination.movePageTo(1);
            });

            // 상태 탭 클릭
            $('.state-tabs li').on('click', function (e) {
                $('.state-tabs li').removeClass('on');
                $(this).addClass('on');

                const state = $(this).data('state') || '';
                $('#tabState').val(state);


                SEARCH_COND = {};
                GRID.readData(1);
            });
        }
    };

    /** tui-grid Set */
    const initGrid = () => {

        const gridColumns = [
            { header: '답변일시',  name: 'asPostDt', width: 150, align: 'center' },
            { header: '번호',      name: 'asBbsNo',  width: 150,  align: 'center' },
            { header: '신청자',    name: 'asUser',   width: 150, align: 'center' },
            { header: '접수일자',  name: 'asJsdate', width: 150, align: 'center' },
            { header: '처리기한',  name: 'asLimitDt',width: 150, align: 'center' },
            { header: '위반일자',  name: 'mmDate',   width: 150, align: 'center' },
            { header: '접수번호',  name: 'asJsno',   width: 150, align: 'center' },
            { header: '차량번호',  name: 'mmCarno',  width: 150, align: 'center' },
            { header: '미부과사유',name: 'ccCause',  width: 150, align: 'center' },
            { header: '처리상태',  name: 'asState',  width: 150,  align: 'center' },
            { header: 'mmCode',   name: 'mmCode',  sortable: true, width: 150, align: 'center', hidden: true}
        ];

        const gridDatasource = {
            api: {
                readData: {
                    url: '<c:url value="/minwon/dayanswer/dayanswer-select.ajax"/>',
                    method: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    processData: true
                }
            },
            initialRequest: true,   //  직접 readData(1) 호출할 거라 false
            serializer: function (params) {
                setSearchCond();
                SEARCH_COND.perPage = params.perPage;
                SEARCH_COND.page    = params.page;

                return $.param(SEARCH_COND);
            }
        };

        const perPage = parseInt($('#perPageSelect').val() || 10, 10);

        const gridOptions = {
            el: 'grid',
            rowHeaders: ['checkbox'],
            columns: gridColumns,
            noData: "처리 할 초기자료가 없습니다.",
            pageOptions: {
                useClient: true,
                perPage: perPage
            }
        };

        // 실제 GRID 생성
        GRID = TuiGrid.of(gridOptions, gridDatasource, (res) => {
            // 서버 응답 후 페이지 정보 세팅
            const data = res.data || {};
            if (data.pagination) {
                $("#currentPage").text(data.pagination.page || '');
                $("#totalPages").text(data.pagination.totalPages || '');
            }

            // 더블 클릭 이벤트
            GRID.on("dblclick", (e) => {
                var popUrl = '/minwon/init/init_popup.do';
                var popTitle = "initPopup";
                var popOption = "width=1400px, height=900px, resizable=yes, scrollbars=yes, location=no, top=100px, left=100px";

                // 1) localStorage에 저장
                console.log(e)

                let cursor  = e.instance.getValue(e.rowKey, 'mmCode');
                let mmCodes = e.instance.getData().map(row => row.mmCode);

                console.log(cursor);

                const state = { cursor, mmCodes, savedAt: Date.now() };
                localStorage.setItem('TOTAL_INFO_STATE', JSON.stringify(state));

                // 2) 팝업이 없거나 닫혀 있으면 새로 열기
                if (!INIT_POPUP || INIT_POPUP.closed) {
                    INIT_POPUP = window.open(popUrl, popTitle, popOption);
                } else {
                    // 이미 떠 있으면 새로 안 만들고, 그 창에 포커스만 줌
                    INIT_POPUP.focus();
                    INIT_POPUP.INIT_POP_API.search();
                }
            });
        });

        //  최초 1페이지 조회
        GRID.readData(1);
    };

    // 레디펑션
    $(function () {
        fnBiz.init();
        fnBiz.eventListener();
    });

</script>