Vue.js - 3. 기본예제 (복잡한 if,for)-설문지

Vue.js 3. 기본예제 (복잡한 if,for)-설문지

 

- 아래 scipt는 작동 되지 않는다. 서버에서 설문항목이 조회되어야 정상작동 된다.

- if문, for문장에 대해서 참고용으로만 보면 된다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="container"> <div id="contents"> <div class="tit_area02"> <h2>설문 조사를 실시하고 있습니다.</h2> <p>고객님 설문 참여 해주세요.</p> </div> <!-- form @submit.prevent="save"--> <div class="survey"> <dl> <dt>질문을 확인하시고 답변 부탁드립니다.</dt> <dd> <ul class="question"> <!-- 질문 for --> <li v-for="quest in questList"> <span class="tit-tx" v-text="quest.QUST_NO + '. ' + quest.ITEM_CN_S" v-show="quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='10' && ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] == quest.UP_ANS_NO) || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false))"> </span> <!-- 답안문항 for --> <div class="cons" v-for="item in itemList"> <!-- =============================================================================== --> <!-- radio (10:단수선택) --> <!-- =============================================================================== --> <label class="label" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '10'" v-show="quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='10' && ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] == quest.UP_ANS_NO)"> <span class="radio"> <input type="radio" class="radio" v-model="ansList[quest.ANS_DTL_NO]" :value="item.SRVY_SHEET_ANS_NO"> <i></i> </span> {{circleNum[item.ANS_ORDR_SEQ]}} {{item.ANS_CN}} <!-- ({{item.ETC_ADD_YN}}) --> </label> <input type="text" class="input block add_txt" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '10' && item.ETC_ADD_YN == 'Y'" v-model="ansList[item.ADD_ANS_NO]" v-show="(ansList[quest.ANS_DTL_NO] == item.SRVY_SHEET_ANS_NO) && (quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='10' && ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] == quest.UP_ANS_NO) || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false)))"> <!-- =============================================================================== --> <!-- checkbox (20:복수선택) --> <!-- =============================================================================== --> <label class="label" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '20'" v-show="quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false))"> <span class="checkbox"> <input type="checkbox" class="checkbox" v-model="ansList[quest.ANS_DTL_NO]" :value="item.SRVY_SHEET_ANS_NO"> <i></i> </span> {{circleNum[item.ANS_ORDR_SEQ]}} {{item.ANS_CN}} <!-- ({{item.ETC_ADD_YN}}) --> </label> <input type="text" class="input block add_txt" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '20' && item.ETC_ADD_YN == 'Y'" v-model="ansList[item.ADD_ANS_NO]" v-show="(ansList[quest.ANS_DTL_NO] ? (ansList[quest.ANS_DTL_NO].indexOf(item.SRVY_SHEET_ANS_NO) >= 0 ? true:false) : false) && (quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false)))"> </div> <!-- =============================================================================== --> <!-- textarea --> <!-- =============================================================================== --> <input class="textarea block add_txt_row" v-if="quest.ANS_TYPE == '20'" v-model="ansList[quest.ANS_DTL_NO]"></input></p> <div class="text_end">설문에 끝까지 응답해 주셔서 대단히 감사합니다.</div> <div class="btn_box"><button class="btn" type="submit">설문 참여하기</button></div> <!-- /survey --> <p> </p> <!-- /contents --> <script> var vm = new Vue({ el: '#container', data: { search: {surveyId:null}, ansList : { }, questList: null, itemList : null, circleNum : ['', '①','②','③','④','⑤','⑥','⑦','⑧','⑨'] }, created: function() { this.search['surveyId'] = this.urlParam("surveyId"); }, mounted: function() { this.init(); }, methods: { init: function() { var param = this.search; this.http('<c:url value="/cs/sv/survey/surveyInit.json" />', param, function(data) { this.questList = data.questList; this.itemList = data.itemList; this.ansList["surveyId"] = this.search["surveyId"]; var itemJson = JSON.parse(JSON.stringify(data.itemList)); //1. main 값들 set this.ansList['SRVY_SHEET_NO'] = itemJson[0].SRVY_SHEET_NO; //2. 복수선택에 대한 배열변수 선언 var questLen = this.questList.length; for(var ii=0; ii<questLen; ii++){ if (this.questList[ii].CTRL_TYPE == '20') { Vue.set(this.ansList, this.questList[ii].ANS_DTL_NO, []); } } }); }, save: function() { console.log('전송 데이터 : ', this.ansList); var bValid = this.validation(); if (bValid == false) return; this.httpBody('<c:url value="/cs/sv/survey/save.json" />', this.ansList, function(data) { alert(data.result); //close(); }); }, urlParam: function(name){ var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results==null){ return null; } else{ return decodeURI(results[1]) || 0; } }, validation: function() { var questJson = JSON.parse(JSON.stringify(this.questList)); var itemJson = JSON.parse(JSON.stringify(this.itemList)); var questLen = this.questList.length; //1. 문제별 FOR문 for(var ii=0; ii<questLen; ii++) { var lowOustYn = this.questList[ii].LOW_OUST_YN; //하위문항여부 var qustNo = this.questList[ii].QUST_NO; //문항번호 var questDtlNo = this.questList[ii].SRVY_SHEET_DTL_NO; //설문지상세번호 var questAnsNo = this.ansList[this.questList[ii].ANS_DTL_NO]; //문제번호별 답 var ansType = this.questList[ii].ANS_TYPE; //답안유형 var sizeLmit = this.questList[ii].SIZE_LMIT; //사이즈한도 //1. 답변 선택 여부 if (lowOustYn == 'N' && this.isNull(questAnsNo) == true) { alert("(" + qustNo + ") - 문항에 답변을 하지 않았습니다."); return false; } //2. 내가 하위문항 이면 if (lowOustYn == 'Y' && this.isNull(questAnsNo) == true) { //내 상위의 답안번호가 체크 되었으면 - 필수 검사 var upCtrlType = questJson[ii].UP_CTRL_TYPE; //상위컨트롤유형 var upDtlNo = questJson[ii].UP_SRVY_SHEET_DTL_NO; //상위설문지상세번호 var upAnsNo = questJson[ii].UP_ANS_NO; //상위답안번호 var varUpAnsNo = "ANS_DTL_NO_" + upDtlNo; //상위 설문지상세 변수 //내 상위가 체크 되었는지 여부 var bUpSelected = false; if (upCtrlType == "10") { bUpSelected = this.ansList[varUpAnsNo] == upAnsNo ? true : false; }else{ bUpSelected = this.ansList[varUpAnsNo] ? (this.ansList[varUpAnsNo].indexOf(upAnsNo) > 0 ? true : false) : false; } if (bUpSelected == true){ alert("(" + qustNo + ") - 문항에 답변을 하지 않았습니다."); return false; } } //3. radio버튼 이면 -> 추가 답변 검사 // // ANS_DTL_NO_15 : 1 // ADD_ANS_NO_15_1: 난 Radio답변 var varAddAnsNo = "ADD_ANS_NO_" + questDtlNo + "_" + questAnsNo; //radion 문항에 대한 추가답변 변수 var addAnsNotes = this.ansList[varAddAnsNo]; if (this.questList[ii].CTRL_TYPE == '10' && this.isNull(addAnsNotes)) { var itemLen = this.itemList.length; for(var jj=0; jj<itemLen; jj++) { var itemDtlNo = itemJson[jj].SRVY_SHEET_DTL_NO; var itemAnsNo = itemJson[jj].SRVY_SHEET_ANS_NO; if (questDtlNo == itemDtlNo && questAnsNo == itemAnsNo) { var ansOrdrSeq = this.circleNum[itemJson[jj].ANS_ORDR_SEQ]; var etcAddYn = itemJson[jj].ETC_ADD_YN; if (etcAddYn == 'Y') { alert("(" + qustNo + "- 문항, " + ansOrdrSeq + "번) 답변에 추가 설명 부탁 합니다."); return false; }else{ break; } } } } //3. checkbox버튼 이면서 추가 답변 검사 // // ANS_DTL_NO_1 : [1, 5] // ADD_ANS_NO_1_1 : 난 1번에 대한 Checkbox답변 // ADD_ANS_NO_1_5 : 난 5번에 대한 Checkbox답변 if (this.questList[ii].CTRL_TYPE == '20') { var itemLen = this.itemList.length; //checkbox답변 갯수 for var ansLen = questAnsNo.length; for(var kk=0; kk<ansLen; kk++) { var varAddAnsNo = "ADD_ANS_NO_" + questDtlNo + "_" + questAnsNo[kk]; var addAnsNotes = this.ansList[varAddAnsNo]; if (this.isNull(addAnsNotes)) { //항목에 대한 for for(var jj=0; jj<itemLen; jj++) { var itemDtlNo = itemJson[jj].SRVY_SHEET_DTL_NO; var itemAnsNo = itemJson[jj].SRVY_SHEET_ANS_NO; if (questDtlNo == itemDtlNo && questAnsNo[kk] == itemAnsNo) { var etcAddYn = itemJson[jj].ETC_ADD_YN; var ansOrdrSeq = this.circleNum[itemJson[jj].ANS_ORDR_SEQ]; if (etcAddYn == 'Y') { alert("(" + qustNo + "-문항, " + ansOrdrSeq + "-번) 답변에 추가 설명 부탁 합니다."); return false; }else{ break; } } } } } } //4. 주관식 인 경우 if (ansType == "20"){ var textSize = questAnsNo.length; if (textSize > sizeLmit) { alert("(" + qustNo + "-문항)에 " + sizeLmit + "자를 넘을 수 없습니다." + "\n(현재 : " + textSize + " 자 입력)"); return false; } } } return true; }, isNull : function(val){ if (val=="" || val==null || val==undefined) return true; else return false; }, // 문항 조회 여부 //fn_questVisible : function(idx) { // // var questJson = JSON.parse(JSON.stringify(this.questList)); // // //1. 내가 하위문항이 아니면 return true (바로 보여주면 됨) // if (questJson[idx].LOW_OUST_YN == "N") return true; // // //2. 내가 하위문항 이면서 && 내 상위의.하위포함여부 가 체크 되었으면 보여주기(return true) // var upDtlNo = questJson[idx].UP_SRVY_SHEET_DTL_NO; //상위설문지상세번호 // var upCtrlType = questJson[idx].UP_CTRL_TYPE; //상위컨트롤유형 // //var upQustNo = questJson[idx].UP_QUST_NO; // // if (upCtrlType == '10') { // var varUpAnsNo = "ANS_DTL_NO_" + upDtlNo; //상위 설문지상세 변수 // var upAnswer = this.ansList[varUpAnsNo]; // return this.isNull(upAnswer) ? false : true; // }else{ // // } // // return false; //} } }); //참고. location.href를 사용할 때는 아래처럼 하면 됨 //location.href='<c:url value="/cs/sv/survey/survey.fnc" />?surveyId=' + this.search["surveyId"]; //아래처럼도 할 수 있지만.. 위쪽으로 해야 보안등에서 더 좋음 //location.href="http://www.keiis.co.kr/cs/sv/survey/survey.fnc?surveyId=" + this.search["surveyId"]; </script>