티스토리 뷰

반응형

기존 문제점:

bootstrap toast 기능으로 표현하니, 화면이 쭉 지나가서 놓치기 쉽다고 수정요청을 해서,

sweetalert2 기능을 이용해서 만들어 봤습니다.

동작사항은 아래 영상으로 간단히 올려봅니다.

성공했을때 화면도 구성

이제 이 화면을 나타내게 만드는 코드를 정리해서 올려봅니다.

	// Ecount 품목등록------------------------------------------------------------------------------------------------------------
	Ecount_regist_item_go = function(callback){
	let Url = "https://oapi{ZONE}.ecount.com/OAPI/V2/InventoryBasic/SaveBasicProduct?SESSION_ID={SESSION_ID}"
	Url = Url.replace('{ZONE}','CD');
	Url = Url.replace('{SESSION_ID}','');
	let api= Url + callback ;

	const data = {
		"ProductList": [{		
		"Line": "0",	
		"BulkDatas": {	
			"PROD_CD": "",               // 품목코드연습 앞에 'test'란 단어를 넣어서 많들어봄 20자리까지 가능함.
			"PROD_DES": " ",
			"SIZE_FLAG": "1",
			"SIZE_DES": " ",                 // 필수규격 -> 기본적으로 품목명과 같이 함.
			"EMP_CD": "",     //           원래 예제파일에는 없는 사항인데 최주임님 넣어줌
			"UNIT": "Kg",
			"PROD_TYPE": "",
			"SET_FLAG": "",
			"BAL_FLAG": "1",
			"WH_CD": "",
			"IN_PRICE": "",
			"IN_PRICE_VAT": "",
			"OUT_PRICE": "",
			"OUT_PRICE_VAT": "",
			"REMARKS_WIN": "",
			"BAR_CODE": "",
			"VAT_YN": "",
			"TAX": "",
			"VAT_RATE_BY_BASE_YN": "",
			"VAT_RATE_BY": "",
			"CS_FLAG": "",
			"REMARKS": "",
			"INSPECT_TYPE_CD": "",
			"INSPECT_STATUS": "",
			"SAMPLE_PERCENT": "",			
			"CSORD_C0001": "",
			"CSORD_TEXT": "",
			"CSORD_C0003": "",
			"IN_TERM": "",
			"MIN_QTY": "",
			"CUST": "",                      // 구매처코드는 등록된 코드로 넣어야 함. (자료 갖고 있어야 함.) 금영스틸을 샘플로 넣음.	
			"LABOR_WEIGHT": "",
			"EXPENSES_WEIGHT": "",
			"MATERIAL_COST": "",
			"EXPENSE_COST": "",
			"LABOR_COST": "",
			"OUT_COST": "",
			"CONT1": "전체",                           // 담당자 설정부분 전체라는 단어를 넣음	
			"CONT6": "",
			"NO_USER1": "",
			"ITEM_TYPE": "",
			"SERIAL_TYPE": "",
			"PROD_SELL_TYPE": "",
			"PROD_WHMOVE_TYPE": "",
			"QC_BUY_TYPE": "",
			"QC_YN": ""
			}	
		}]
			}	    

		function replacer(key, value) {
			console.log.clear;
		  // document.write(key + " : " + value + '<br>');	  
		   console.log(typeof key);
	//	  console.log(value);
		  if(key == 'PROD_CD') 
			 return document.getElementById("item_code").value  // 품명코드 화면입력분을 적용함.		 
		  if(key == "PROD_DES") {
			  if(document.getElementById("item_name").value!='')
				  return document.getElementById("item_name").value;  // 품명규격 화면입력분을 적용함.
				else
				  return ' ';  // 공백리턴 없을 경우
		  }
			
		  if(key == "CUST") 
			return document.getElementById("company_code").value;    // 거래처 등록
		  if(key == 'EMP_CD') 	return $('#EMP_CD').val();  // 품명규격 화면입력분을 적용함.
		  if(key == 'SIZE_DES')           						// 규격은 필수 입력항목임.
			if($.trim($('#item_desc').val())=='')
				return '.';	
			 else					
			   return $('#item_desc').val(); 				       // 규격과 같은 것으로 .	        
		  if(key == 'UNIT') {         				 // 단위 변경
			return  $('#unitper').val();                
			  }else {
				return value;
			  }				  		  
		   }			
						
		const json = JSON.stringify(data, replacer);	  	  	
		console.log(json);
		console.log(callback);
		
		fetch(api, {
		  method: "POST",
		  headers: {
			"Content-Type": "application/json",
		  },
		  body: json  // end of body: JSON.stringify
		})
		  .then((response) => response.json())
		  .then((data) =>  	{
			  const par = JSON.parse(JSON.stringify(data));
			  console.log(par);	  
			  const answer = par.Data.ResultDetails[0].IsSuccess;
			  const result_error= par.Data.ResultDetails[0].TotalError;			  
			  if(answer==true)
				  {			


					Swal.fire({
					   title: 'ECOUNT 품목코드 등록',
					   text: '품목코드 등록이 완료되었습니다.',
					   icon: 'success',
					   
					   showCancelButton: false, // cancel버튼 보이기. 기본은 원래 없음
					   confirmButtonColor: '#3085d6', // confrim 버튼 색깔 지정
					   cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
					   confirmButtonText: '확인', // confirm 버튼 텍스트 지정
					   // cancelButtonText: '취소', // cancel 버튼 텍스트 지정
					   
					   reverseButtons: true, // 버튼 순서 거꾸로
					   
					}).then(result => {
					   // 만약 Promise리턴을 받으면,
					   if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면


		
				  // 이벤트									  
				  //  $("#Ecount_regist_item").html("<strong> 품목(생성완료) </strong>");
						//데이터추가
				$("#SelectWork").val("insert");	
											
				  if (ajaxRequest !== null) {
						ajaxRequest.abort();
					}

						 // ajax 요청 생성
						 ajaxRequest = $.ajax({
								url: "process.php",
								type: "post",		
								data: $("#board_form").serialize(),								
								success : function( data ){		
									
											 // opener 변수변경 후 함수 실행
								  $("#search", opener.document).val($('#item_code').val()); 	
								  
								 // opener.location.reload();
								  $(opener.location).attr("href", "javascript:reloadlist();");	
								  window.close();
								  
									  // 부모창 list.php에 적용된다.
									  if($("#create").val() !== 'create')

										 {	
											$(opener.location).attr("href", "javascript:reloadlist();");		
											setTimeout(function() {self.close(); }, 1000);					
											
										 }
										else
										  {									  
											   $("#xmlcode", opener.document).val($('#item_code').val()); 	  
											   $("#xmlmsg", opener.document).val($('#item_name').val()); 
												// 생성 초기화									   
											   $("#create", opener.document).val('');
												setTimeout(function() {self.close(); }, 1000);	
											
										  }
																		
														},
														error : function( jqxhr , status , error ){
															console.log( jqxhr , status , error );
															   } 			      		
									});	 // end of ajax
							   
					   
						  
					   }
				
						});				  // end of swal
				   
				  }
				  

				  else
				  {
						  Swal.fire({ icon: 'error', // Alert 타입  error
							  title: '전송 실패, 오류를 확인해 주세요!', // Alert 제목 
							  text: result_error , // Alert 내용 
							}); 						
														
					  
				  }
			  
			});	  
	}	
				  
	  
	
});	  // end of ready


	// 창닫기 버튼
	$("#closeBtn").on("click", function() {
		self.close();
	});	
	
	// 저장 버튼 서버에 저장하고 Ecount 전송함
	$("#saveBtn").on("click", function() {
	  Ecount_login_click('regist_item'); 											   
   });

 

ECOUNTERP API를 이용해서 입력하는 부분을 구현한 것입니다.

연구하느라 정말 오랜시간을 노력했어요~

 

모두모두 화이팅~

반응형
댓글