add.js에 formulaChange수정중

src/main/java/com/ns/mobile/website/biz/dto/BusinessPartnerDto.java

@@ -17,12 +17,14 @@ public class BusinessPartnerDto extends BaseDto{
 	
 	String partnerName;
 	String carrierName;
+	boolean serialYn;
 	
 	public static BusinessPartnerDto of(BusinessPartner businessPartner) {
 	    
 		BusinessPartnerDto businessPartnerDto = BusinessPartnerDto.builder()
 				.partnerName(businessPartner.getPartnerName())
 				.carrierName(businessPartner.getCarrierName())
+				.serialYn(businessPartner.isSerialYn())
 				.build();
 		businessPartnerDto.base(businessPartner);
         

src/main/java/com/ns/mobile/website/biz/entity/BusinessPartner.java

@@ -16,5 +16,6 @@ public class BusinessPartner extends BaseEntity{
 	
 	private String partnerName;
 	private String carrierName;
+	private boolean serialYn;
 	
 }

src/main/resources/static/res/front/js/biz/guest/add.js

@@ -9,6 +9,10 @@ let appVue = new Vue({
 			phoneList: [],
 			subRatePlanList: []
 		},
+		view :{
+			mainRatePlanList: [],
+			subRatePlanList: []
+		},
         openingDate : '',
 		businessPartner : '',
 		mobileCarrier: '',
@@ -17,9 +21,15 @@ let appVue = new Vue({
 		phoneNumber: '',
 		pname: '',
 		pbirthday: '',
-		pphoneNumber: '',
+		pphoneNumber: '',		
-		
+		mainRatePlan: '',
-		mainRatePlan: ''
+		subRatePlan: '',
+		serialNumber: '',
+		installment: '0',
+		petName: '',
+		insertType: 'change',
+		usim: '0',
+		formula: ''
     },
     mounted: function () {
         this.init();
@@ -32,6 +42,20 @@ let appVue = new Vue({
 		init: function () {
             let $this = this;
         	$this.bindData();
+			$this.insertTypeChange();
+			
+			$(".money").on('blur', function(e){
+			    e.stopPropagation();
+			    e.stopImmediatePropagation();
+			    let value = e.target.value;
+				value = Number(value.replaceAll(',', ''));
+				if(isNaN(value)) {         //NaN인지 판별
+					e.target.value = 0;   
+			  	}else {                   //NaN이 아닌 경우
+			    	const formatValue = value.toLocaleString('ko-KR');
+			    	e.target.value = formatValue;
+			  	}
+			});
 		},
         bindData: function () {
             let $this = this;
@@ -52,20 +76,13 @@ let appVue = new Vue({
 
 				$('.selectpicker').selectpicker();
             });
-        },
-        businessPartnerChange: function (){
-        	let $this = this;
-			$this.mobileCarrier = $('#businessPartner').find(':selected').data('carrier')
-			
-			for(var count = 0; count < changeItem.size(); count++){                
-                var option = $("<option>"+changeItem[count]+"</option>");
-                $('#mainRatePlan').append(option);
-            }
         },
 		birthdayChange: function (){
 			let $this = this;
 			if($this.birthday.length != 8){ //생일 입력 안됨
-				console.log($this.birthday.length);
+				$('#pname').removeAttr('disabled');
+				$('#pbirthday').removeAttr('disabled');
+				$('#pphoneNumber').removeAttr('disabled');		
 				return false;
 			}
 			var date = new Date();
@@ -81,17 +98,82 @@ let appVue = new Vue({
 		    var age = monthDay < birthdaymd ? year - birthdayy - 1 : year - birthdayy;
 			
 			if(18 < age){ //성인
-				console.log(age+"성인");
 				$('#pname').attr('disabled', 'disabled');
 				$('#pbirthday').attr('disabled', 'disabled');
 				$('#pphoneNumber').attr('disabled', 'disabled');
 
 			}else{ //민짜
-				console.log(age+"민짜");
 				$('#pname').removeAttr('disabled');
 				$('#pbirthday').removeAttr('disabled');
 				$('#pphoneNumber').removeAttr('disabled');					
 			}
+		},
+		insertTypeChange: function(){
+			let $this = this;
+			switch($this.insertType){
+				case 'change':
+				case 'other':
+					$this.usim = '0';
+					break;
+				case 'move':
+				case 'new':
+					$this.usim = '7,700';
+					break;
+			}
+		},
+		businessPartnerChange: function (){
+			let index = $('#businessPartner').find(':selected').index();
+        	let $this = this;
+			//통신사 셋팅
+			$this.mobileCarrier = $this.info.businessPartnerList[index].carrierName;
+			
+			//요금제 셋팅
+			$this.view.mainRatePlanList = []; //배열 초기화
+			Array.prototype.push.apply($this.view.mainRatePlanList, $this.info.mainRatePlanList.filter(function(x){
+				if(x.carrierName === $this.mobileCarrier){
+					return true;					
+				}
+			}));
+			$('#mainRatePlan').selectpicker('refresh');
+			//$('#mainRatePlan').find(':selected').index(); //선택값쓸떄
+			
+			//시리얼 입력 여부
+			if($this.info.businessPartnerList[index].serialYn){ 
+				$("#serialNumber").removeAttr('disabled');
+			}else{
+				$("#serialNumber").attr('disabled', 'disabled');
+			}
+			
+        },
+		formulaChange: function(e){
+			let $this = this; 
+			var result = 0;
+			var calc = e.target.value; //1+7+8-5-4+4 = 11
+			var calcList = calc.split('+');//1//7//8-5-4//4
+			calcList.forEach(function(num1, i){
+				if(num1.indexOf('-') == -1){ //only 숫자
+					result += parseInt(num1);
+					console.log("+"+num1);
+				}else{//빼기 8-5-4
+					num1.split('-').forEach(function(num2, j){
+						if(j==0 && i==0){
+							result =parseInt(num1);
+							console.log("="+num1);
+							j++;
+						}else if(j==0){
+							result +=parseInt(num2);
+							console.log("+"+num2);
+						}
+						else{
+							result -=parseInt(num2);
+							console.log("-"+num1);
+						}
+					});
+				}
+			});
+			
+			console.log(result);
+			
 		}
     }
 });

src/main/webapp/WEB-INF/view/guest/add.jsp

@@ -33,7 +33,7 @@
 						    <label for="businessPartner" class="col-sm-1 col-form-label mb-3 pt-3">거래처</label>
 						    <div class="col-sm-3 mb-3 pt-3">
 								<select class="selectpicker show-tick"  title='' data-live-search="true" id="businessPartner" v-model="businessPartner" @change="businessPartnerChange" tabindex="2" >
-							        	<option v-for="x in info.businessPartnerList">{{x.partnerName}}</option>
+							        	<option v-for="(x, index) in info.businessPartnerList" :index="x.id">{{x.partnerName}}</option>
 								</select>
 						    </div>
 						    <label for="mobileCarrier" class="col-sm-1 col-form-label mb-3 pt-3">통신사</label>
@@ -53,7 +53,7 @@
 						    <div class="vr p-0 m-0"></div>
 						    <label for="pname" class="col-sm-2 col-form-label mb-3 pt-3">법대이름</label>
 						    <div class="col-sm-3 mb-3 pt-3">
-						    	<input type="text" class="form-control" id="pname" v-model="pname" value="황민창" tabindex="7">
+						    	<input type="text" class="form-control" id="pname" v-model="pname" value="황민창" tabindex="7" disabled="disabled">
 						    </div>
 						</div>
 						
@@ -65,7 +65,7 @@
 						    <div class="vr p-0 m-0"></div>
 						    <label for="pbirthday" class="col-sm-2 col-form-label mb-3">법대생년월일</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="pbirthday" v-model="pbirthday" value="" tabindex="8">
+						    	<input type="text" class="form-control" id="pbirthday" v-model="pbirthday" value="" tabindex="8" disabled="disabled">
 						    </div>
 						</div>
 						
@@ -77,7 +77,7 @@
 						    <div class="vr p-0"></div>
 						    <label for="pphoneNumber" class="col-sm-2 col-form-label mb-3">법대핸드폰번호</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="pphoneNumber" v-model="pphoneNumber" value="" tabindex="9">
+						    	<input type="text" class="form-control" id="pphoneNumber" v-model="pphoneNumber" value="" tabindex="9" disabled="disabled">
 						    </div>
 						</div>
 					</div>
@@ -85,41 +85,51 @@
 					<h5 class="mt-3 mb-3">개통정보</h5>
 					<div class="border border-2 mb-3">
 						<div class="row d-flex justify-content-center">
-							<label for="name" class="col-sm-2 col-form-label mb-3 pt-3">할부개월</label>
+							<label for="installment" class="col-sm-2 col-form-label mb-3 pt-3">할부개월</label>
 						    <div class="col-sm-3 mb-3 pt-3">
-						    	<input type="text" class="form-control" id="name" value="24">
+						    	<select class="form-select" v-model="installment">
+									<option value="0" selected>0개월</option>
+									<option value="12">12개월</option>
+									<option value="24">24개월</option>
+									<option value="36">36개월</option>
+								</select>						    	
 						    </div>
 						    <div class="vr p-0 m-0"></div>
-						    <label for="pname" class="col-sm-2 col-form-label mb-3 pt-3">펫네임</label>
+						    <label for="petName" class="col-sm-2 col-form-label mb-3 pt-3">펫네임</label>
 						    <div class="col-sm-3 mb-3 pt-3">
-						    	<input type="text" class="form-control" id="pname" value="아이폰12">
+						    	<input type="text" class="form-control" id="petName" v-model="petName" value="아이폰12">
 						    </div>
 						</div>
 						
 						<div class="row d-flex justify-content-center">
-							<label for="birthday" class="col-sm-2 col-form-label mb-3">일련번호</label>
+							<label for="serialNumber" class="col-sm-2 col-form-label mb-3">일련번호</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="birthday" value="JYNWTXQC7W">
+						    	<input type="text" class="form-control" id="serialNumber" v-model="serialNumber" value="JYNWTXQC7W">
 						    </div>
 						    <div class="vr p-0 m-0"></div>
-						    <label for="pbirthday" class="col-sm-2 col-form-label mb-3">가입구분</label>
+						    <label for="insertType" class="col-sm-2 col-form-label mb-3">가입구분</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="pbirthday" value="MNP">
+						    	<select class="form-select" v-model="insertType" @change="insertTypeChange">
+									<option value="change" selected>기변</option>
+									<option value="move">MNP</option>
+									<option value="new">신규</option>
+									<option value="other">유선</option>
+								</select>
 						    </div>
 						</div>
 						
 						<div class="row d-flex justify-content-center">
 							<label for="phoneNumber" class="col-sm-2 col-form-label mb-3">부가서비스</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="phoneNumber" value="V컬러링">
+						    	<select class="selectpicker show-tick"  title='' data-live-search="true" id="subRatePlan" v-model="subRatePlan" >
+							        	<option v-for="(x, index) in view.subRatePlanList" :index="x.id">{{x.planName}}</option>
+								</select>
 						    </div>
 						    <div class="vr p-0"></div>
-						    <label for="pphoneNumber" class="col-sm-2 col-form-label mb-3">요금제</label>
+						    <label for="mainRatePlan" class="col-sm-2 col-form-label mb-3">요금제</label>
 						    <div class="col-sm-3 mb-3">
-								<select class="selectpicker show-tick"  title='' data-live-search="true" id="mainRatePlan" v-model="mainRatePlan" tabindex="15" >
+								<select class="selectpicker show-tick"  title='' data-live-search="true" id="mainRatePlan" v-model="mainRatePlan" >
-									<%-- <c:forEach var="x" items="${guestAddInfo.mainRatePlanList}" varStatus="status">						    		 
+							        	<option v-for="(x, index) in view.mainRatePlanList" :index="x.id">{{x.planName}}</option>
-										<option v-if="${x.carrierName == mobileCarrier }">${x.planName}</option>
-							        </c:forEach> --%>
 								</select>
 						    </div>
 						</div>
@@ -128,38 +138,38 @@
 					<h5 class="mt-3 mb-3">리베이트</h5>
 					<div class="border border-2 mb-3">
 						<div class="row d-flex justify-content-center">
-							<label for="name" class="col-sm-2 col-form-label mb-3 pt-3">계산식</label>
+							<label for="formula" class="col-sm-2 col-form-label mb-3 pt-3">계산식</label>
 						    <div class="col-sm-3 mb-3 pt-3">
-						    	<input type="text" class="form-control" id="name" value="1+2+4+5+6-2">
+						    	<input type="text" class="form-control" id="formula" value="1+2+4+5+6-2" v-model="formula" @input="formulaChange">
 						    </div>
 						    <div class="vr p-0 m-0"></div>
 						    <label for="pname" class="col-sm-2 col-form-label mb-3 pt-3">액면R/B</label>
 						    <div class="col-sm-3 mb-3 pt-3">
-						    	<input type="text" class="form-control" id="pname" readonly value="160,000">
+						    	<input type="text" class="form-control money" id="pname" readonly value="160000">
 						    </div>
 						</div>
 						
 						<div class="row d-flex justify-content-center">
 							<label for="birthday" class="col-sm-2 col-form-label mb-3">고객현금</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="birthday" value="130,000">
+						    	<input type="text" class="form-control money" id="birthday" value="130000">
 						    </div>
 						    <div class="vr p-0 m-0"></div>
-						    <label for="pbirthday" class="col-sm-2 col-form-label mb-3">유심비</label>
+						    <label for="usim" class="col-sm-2 col-form-label mb-3">유심비</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="pbirthday" readonly value="7,700">
+						    	<input type="text" class="form-control money" id="usim" v-model="usim" value="7700">
 						    </div>
 						</div>
 						
 						<div class="row d-flex justify-content-center">
 							<label for="birthday" class="col-sm-2 col-form-label mb-3">소개비</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="birthday" value="10,000">
+						    	<input type="text" class="form-control money" id="birthday" value="10000">
 						    </div>
 						    <div class="vr p-0 m-0"></div>
 						    <label for="pbirthday" class="col-sm-2 col-form-label mb-3">페이백(P/B)</label>
 						    <div class="col-sm-3 mb-3">
-						    	<input type="text" class="form-control" id="pbirthday" readonly value="30,000">
+						    	<input type="text" class="form-control money" id="pbirthday" readonly value="30000">
 						    </div>
 						</div>