/** * * @author : 우영두 * @fileName : ftTabulator.js * @date : 2024.01.09 * @description : 받는사람 목록 tabulator 관련 js * =========================================================== * DATE AUTHOR NOTE * ----------------------------------------------------------- * * 2024.01.09 우영두 최초 생성 * * * */ $(document).ready(function (){ //받는사람 연락처 내용 처리 //Tabulator AJAX Data Loading tableL = new Tabulator(".callList_box", { height:"255px", layout:"fitColumns", //data:tabledata, //autoColumns:true, headerHozAlign:"center", validationMode:"highlight", //clipboard:false, //clipboardCopySelector:"table", //clipboardPasteAction:"insert", // insert, update, replace placeholder:"복사(Ctrl+C)한 내용을 여기에 붙여넣기(Ctrl+V) 해주세요.", //fit columns to width of table (optional) resizableColumns:false, columns:[ //Define Table Columns {formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, hozAlign:"center", headerSort:false, cellClick:function(e, cell){ cell.getRow().toggleSelect(); }}, {title:"이름", hozAlign:"center", field:"name", editor:"input", validator:["maxLength:12"], cellEdited:function(cell){ //cell - cell component fnReplCell(); }}, {title:"휴대폰", hozAlign:"center", field:"phone", editor:"input", width:100, validator:["required","minLength:10", "maxLength:12"], cellEdited:function(cell){ //cell - cell component fnDuplPhone(); }}, {title:"[*1*]", hozAlign:"center", field:"rep1", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){ //cell - cell component fnReplCell(); }}, {title:"[*2*]", hozAlign:"center", field:"rep2", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){ //cell - cell component fnReplCell(); }}, {title:"[*3*]", hozAlign:"center", field:"rep3", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){ //cell - cell component fnReplCell(); }}, {title:"[*4*]", hozAlign:"center", field:"rep4", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){ //cell - cell component fnReplCell(); }}, ], validationFailed:function(cell, value, parameters){ // 유효성 체크 함수 - 아직 잘 모르겠음 //take action on validation fail var valid = cell.isValid(); var fieldNm = cell.getField(); var cellVal = cell.getValue(); var returnVal = ""; if(!valid){ if(fieldNm == "name"){ alert("받는사람 이름은 최대 12글자까지만 입력 가능합니다."); cell.setValue(strMaxLengthSubstring(cellVal, 11)); //스크립트 함수가 0부터 시작이므로 원하는 글자수 -1을 해줘야한다. cell.clearValidation(); }else if(fieldNm == "phone"){ alert("휴대폰번호는 하이픈(-)을 제외한 숫자만 정확히 입력해 주세요."); }else{ alert("치환문자를 정확히 입력해 주세요. 40글자 이내로 입력 가능합니다."); cell.setValue(strMaxLengthSubstring(cellVal, 39)); cell.clearValidation(); } //해당 셀 데이터 삭제 //cell.setValue(""); } return value % parameters.phone; }, }); //주소록 불러오기 팝업 내용 //Tabulator AJAX Data Loading tableAddr = new Tabulator(".callAddr_box", { height:"255px", layout:"fitColumns", headerHozAlign:"center", validationMode:"highlight", placeholder:"주소록 그룹을 선택해 주세요.", //fit columns to width of table (optional) resizableColumns:false, columns:[ //Define Table Columns {formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, hozAlign:"center", headerSort:false, cellClick:function(e, cell){ cell.getRow().toggleSelect(); } }, {title:"그룹명", hozAlign:"center", field:"addrGroupNm", editor:"input", width:120, validator:["required","minLength:2", "maxLength:40"]}, {title:"이름", hozAlign:"center", field:"addrName", editor:"input", width:120, validator:["maxLength:12"]}, {title:"휴대폰번호", hozAlign:"center", field:"addrPhone", editor:"input", width:120, validator:["required","minLength:10", "maxLength:11"]}, ], validationFailed:function(cell, value, parameters){ // 유효성 체크 함수 - 아직 잘 모르겠음 var valid = cell.isValid(); var fieldNm = cell.getField(); if(!valid){ if(fieldNm == "addrName"){ alert("받는사람 이름은 최대 12글자까지만 입력 가능합니다."); }else if(fieldNm == "addrPhone"){ alert("휴대폰번호는 하이픈(-)을 제외한 숫자만 정확히 입력해 주세요."); }else if(fieldNm == "addrGroupNm"){ alert("그룹명을 정확히 입력해 주세요. 2 ~ 40글자 이내로 입력 가능합니다."); } //해당 셀 데이터 삭제 cell.setValue(""); } return value % parameters.addrPhone; }, }); //받는사람 번호 버튼 클릭시 Tabulator에 데이터 넣어주기 $('.addCallToF').click(function(){ var callToNum = $('#callTo').val(); if(callToNum == null || callToNum == ""){ alert("받는사람 번호를 입력해 주세요."); return false; }else if(!checkHpNum(callToNum)){ alert("올바른 전화번호를 입력해 주세요."); $('#callTo').val(""); return false; } //핸드폰 번호에 '-' 문자 제거하기 callToNum = removeDash(callToNum); //기존 받는사람 연락처 모두 불러오기 var data = tableL.getRows(); var tableData = []; var dpCnt = 0; for(var i=0; i < tableL.getRows().length; i++){ if(callToNum == data[i].getData().phone){ dpCnt++; } } if(dpCnt > 0){ alert("받는사람 리스트에 동일한 연락처가 있습니다."); $('#callTo').val(""); return false; }else{ tabledata = [{phone: callToNum},]; //빈 row 데이터 삭제하기 var befData = tableL.getRows(); var totLen = tableL.getRows().length; for(var i=0; i < totLen; i++){ tableData.push({phone: data[i].getData().phone.trim(), name: data[i].getData().name}); } //연락처 추가해 주기 addPhoneInfo(tabledata); $('#callTo').val(""); } }); //받는사람 전체삭제 버튼 처리 $('.all_del').click(function(){ var data = tableL.getRows(); if(data == null || data == ""){ alert("받는사람을 추가해 주세요."); return false; }else{ if(confirm("받는사람 목록을 모두 삭제하시겠습니까?")){ tableL.clearData(); $("#rowTotCnt").text(0); //총건수 수정 $("#rowDupCnt").text(0); //중복건수 수정 totalFtPriceSum(0); //결제 금액 수정 } } }); // 받는사람 선택삭제 버튼 처리해주기 $('.select_del').click(function(){ if(tableL == null || tableL == ""){ alert("받는사람을 추가해 주세요."); return false; } var selectedData = tableL.getSelectedRows(); if(selectedData == "" || selectedData == null){ alert("삭제할 연락처를 선택해주세요."); return false; }else{ // 선택한 Row 데이터 삭제하기 if(confirm("선택하신 받는 사람을 삭제하시겠습니까?")){ for(var i=0; i < selectedData.length; i++){ selectedData[i].delete(); } totRows = tableL.getRows().length; var smsTxtArea = $('#inputTemplateContent').val(); //일괄변환 문구 결제금액 처리 if(smsTxtArea.indexOf("#{이름}") > -1 || smsTxtArea.indexOf("#{1}") > -1 || smsTxtArea.indexOf("#{2}") > -1 || smsTxtArea.indexOf("#{3}") > -1 || smsTxtArea.indexOf("#{4}") > -1){ fnFtReplCell(); }else{ //결제 금액 구하기 totalFtPriceSum(totRows); } //결제금액 합계 파라이터에 입력 $('#rowTotCnt').text(numberWithCommas(totRows)); } } }); //주소록 불러오기 버튼 클릭시 $('.popupAddr').click(function(){ var login = '${LoginVO.id}'; if(login == null || login == ''){ alert("로그인 후 이용이 가능합니다."); return false; } $("#addrGroupLoad").load("/web/mjon/msgdata/selectAddrGroupListAjax.do", "" ,function(response, status, xhr){ //리스트 스크롤 처리해주기 $(".adr_pop_list").mCustomScrollbar({ axis: 'y', scrollbarPosition: "outside", theme: "dark", autoHideScrollbar: false }); }); }); //엑섹불러오기 버튼 클릭시 파일 첨부 실행 $('.upImg').click(function(){ // 엑셀파일 불러오기 선택 시 $("#imgFile").click(); }); //최근전송내역 팝업 선택추가 버튼 처리(체크내역 받는사람 리스트로 추가해주기) $(document).on('click', '#latestAddPhone', function (){ var addPhoneList = []; //신규로 추가할 전화번호 저장변수 $("input:checkbox[name='latAddrChk']:checked").each(function(index){ var chkPhone = $(this).val(); if(!checkHpNum(chkPhone)){ alert("올바른 전화번호가 아닙니다."); return false; }else{ addPhoneList.push({phone: removeDash(chkPhone.trim())}); } }); if(addPhoneList.length > 0){ //연락처 추가해 주기 addPhoneInfo(addPhoneList); $("#btnLatestAddPhoneClose").trigger("click"); } else { alert("연락처를 선택해주세요."); return false; } //중복연락처 제거 //var removeDuplData = dupliPhoneData(addPhoneList); //받는사람 목록에 추가 //tableL.addData(removeDuplData); //총 받는사람 수 계산 //totRows = tableL.getRows().length; //updateTotCnt(totRows); //결제 금액 구하기 //totalPriceSum(totRows); }); //최근전송내역 팝업 선택 취소 버튼 처리 $(document).on('click', '#latestCancelPhone', function (){ $("input[name=latAddrChk]").prop("checked", false); }); //최근전송내역 팝업 삭제 버튼 처리 $(document).on('click', '#latestAddrDel', function (){ $(this).parent("#latestLi").remove(); }); //자주보내는 번호 팝업 선택추가 버튼 처리(체크내역 받는사람 리스트로 추가해주기) $(document).on('click', '#bookMarkAddPhone', function (){ var addPhoneList = []; //신규로 추가할 전화번호 저장변수 $("input:checkbox[name='bookAddrChk']:checked").each(function(index){ var chkPhone = $(this).val(); if(!checkHpNum(chkPhone)){ alert("올바른 전화번호가 아닙니다."); return false; }else{ addPhoneList.push({phone: removeDash(chkPhone.trim())}); } }); if(addPhoneList.length > 0){ //연락처 추가해 주기 addPhoneInfo(addPhoneList); $("#btnLatestAddPhoneClose").trigger("click"); } else { alert("연락처를 선택해주세요."); return false; } //중복연락처 제거 //var removeDuplData = dupliPhoneData(addPhoneList); //받는사람 목록에 추가 //tableL.addData(removeDuplData); //총 받는사람 수 계산 //totRows = tableL.getRows().length; //updateTotCnt(totRows); //결제 금액 구하기 //totalPriceSum(totRows); }); //자주보내는 번호 팝업 선택 취소 버튼 처리 $(document).on('click', '#bookMarkCancelPhone', function (){ $("input[name=bookAddrChk]").prop("checked", false); }); //자주보내는 번호 팝업 삭제 버튼 처리 $(document).on('click', '#bookMarkAddrDel', function (){ $(this).parent("#bookMarkLi").remove(); }); // 자주보내는 번호 팝업 닫기 버튼 처리 $(document).on('click', '#btnLatestAddPhoneClose', function (){ // 자주보내는 번호 체크박스 해제처리 setCheckBoxUnChecked(); }); // 자주보내는 번호 체크박스 해제처리 function setCheckBoxUnChecked() { $("input[name=latAddrChk]").prop("checked", false); $("input[name=bookAddrChk]").prop("checked", false); } //오류 검사 버튼 처리 $('.check_validity').click(function(){ var invalid = tableL.getInvalidCells(); //오류 데이터 체크 var dataLen = tableL.getRows().length; //연락처 데이터 갯수 var totLen = invalid.length; //오류 데이터 갯수 var errMsg = ""; //최종 alert에 표시할 메시지 저장 변수 if(dataLen > 0){ //연락처 정보가 있으면 수행 if(totLen > 0){ //내용에 오류가 있으면 수행 //오류 데이터 값 저장 for(var i=0; i < totLen; i++){ var cellValue = invalid[i].getValue(); if(i == 0){ errMsg = cellValue; }else{ errMsg = errMsg +", "+ cellValue; } } if(errMsg == "" || errMsg == null){ alert("내용에 오류가 있습니다."); return false; }else{ alert(errMsg + "의 내용에 오류가 있습니다."); return false; } }else{ alert("오류 데이터가 없습니다."); return false; } }else{ alert("연락처를 입력해 주세요."); return false; } }); }); var tableErrorData = []; var totRows = 0; // 좌측 받는사람 총 갯수 /* * 토탈 카운트 화면에 노출 * 변수 없는 리스트만 체크 */ function updateTotCnt(){ $("#rowTotCnt").text($('#wrap01_body .list_body').length); } //주소록 불러오기에서 수신자 리스트 화면에 추가해주기 function addPhoneInfo(data){ if(data == null){ alert("연락처 정보가 없습니다."); return; }else{ var idx = 0; var newData = data;//중복 연락처는 하나만 남기고 모두 제거 var recTableData = tableL.getRows(); // 받는사람 리스트의 전체 목록을 저장 var tableData = []; //기존 받는사람 리스트를 배열에 미리 담아둔다. if(recTableData.length > 0){ for(var j=0; j < recTableData.length; j++){ tableData.push({phone: removeDash(recTableData[j].getData().phone) , name: recTableData[j].getData().name, rep1: recTableData[j].getData().rep1, rep2: recTableData[j].getData().rep2, rep3: recTableData[j].getData().rep3, rep4: recTableData[j].getData().rep4}); } } //받는사람 리스트를 담아둔 배열에 신규 추가 데이터를 추가해 준다. for(var i=0; i < newData.length; i++){ tableData.push({phone: removeDash(newData[i].phone) , name: newData[i].name, rep1: newData[i].rep1, rep2: newData[i].rep2, rep3: newData[i].rep3, rep4: newData[i].rep4}); } var temp = tableData.length; //기존 수신 리스트를 지워준 후 신규 전체 리스트를 추가해준다. tableL.clearData(); //기존 받는사람 목록을 삭제. tableL.addData(dupliPhoneData(tableData)); // 받는사람 목록에 주소 정보 입력하기 _fileForm2 = []; //form file data 초기화 _fileIdx = 0; //form file idx 초기화 totRows = tableL.getRows().length; var smsTxtArea = $('#inputTemplateContent').val(); //일괄변환 문구 결제금액 처리 if(smsTxtArea.indexOf("#{이름}") > -1 || smsTxtArea.indexOf("#{1}") > -1 || smsTxtArea.indexOf("#{2}") > -1 || smsTxtArea.indexOf("#{3}") > -1 || smsTxtArea.indexOf("#{4}") > -1){ fnFtReplCell(); }else{ //결제 금액 구하기 totalFtPriceSum(totRows); } //결제금액 합계 파라이터에 입력 $('#rowTotCnt').text(numberWithCommas(totRows)); } } function addrToList(){ var selectedData = tableAddr.getSelectedRows(); var tableData = []; if(selectedData == "" || selectedData == null){ alert("주소록을 선택해 주세요."); return false; }else{ // 선택한 Row 데이터 저장해주기 for(var i=0; i < selectedData.length; i++){ //좌측 받는사람 리스트를 담아둔 배열에 데이터를 추가해 준다. tableData.push({phone: removeDash(selectedData[i].getData().addrPhone), name: selectedData[i].getData().addrName, rep1: selectedData[i].getData().addrRep1, rep2: selectedData[i].getData().addrRep2, rep3: selectedData[i].getData().addrRep3, rep4: selectedData[i].getData().addrRep4} ); } //선택한 데이터 받는사람 리스트에 추가해 주기 addPhoneInfo(tableData); $(".closeAddr").trigger("click"); //주소록 레이어 팝업의 Tabulator 데이터 지워주기 tableAddr.clearData(); } } //특정문구 일괄변환 문자길이 체크 하기 function fnFtReplCell(){ var smsTxtArea = $('#inputTemplateContent').val(); //이벤트 잔여 캐시 자동 처리 관련 변수 var eachPrice = parseFloat($("#eachPrice").val()); var kakaoFtPrice = parseFloat($("#kakaoFtPrice").val()); var shortPrice = parseFloat($("#shortPrice").val()); var longPrice = parseFloat($("#longPrice").val()); if(smsTxtArea.indexOf("#{이름}") > -1 || smsTxtArea.indexOf("#{1}") > -1 || smsTxtArea.indexOf("#{2}") > -1 || smsTxtArea.indexOf("#{3}") > -1 || smsTxtArea.indexOf("#{4}") > -1){ var rowData = tableL.getRows(); var recTableData = tableL.getRows(); // 받는사람 리스트의 전체 목록을 저장 //var tableData = []; var msg_short = 0; //단문문자 갯수 var msg_long = 0; //장문문자 갯수 //일괄변환문자 포함 여부 변경 - 문자내용에 치환변환 문자는 있지만 받는사람 데이터에 치환 데이터를 안넣는 경우 오류가 발생하여 상태값 입력 위치 상단으로 변경함. //치환데이터가 없는 경우 Alert 띄우고 빠져나가기 때문에 치환문자 상태 체크값이 누락되어서 변경함 - 20230407 우영두 $('#txtReplYn').val("Y"); var nmStatus = false; var rep1Status = false; var rep2Status = false; var rep3Status = false; var rep4Status = false; var varValStatus = true; if(smsTxtArea.indexOf("#{이름}") > -1){ nmStatus = true; } if(smsTxtArea.indexOf("#{1}") > -1){ rep1Status = true; } if(smsTxtArea.indexOf("#{2}") > -1){ rep2Status = true; } if(smsTxtArea.indexOf("#{3}") > -1){ rep3Status = true; } if(smsTxtArea.indexOf("#{4}") > -1){ rep4Status = true; } //기존 받는사람 리스트를 배열에 미리 담아둔다. if(recTableData.length > 0){ for(var j=0; j < recTableData.length; j++){ var smsTxt = smsTxtArea; if(typeof recTableData[j].getData().name != 'undefined' && recTableData[j].getData().name != null && recTableData[j].getData().name != ""){ var name = recTableData[j].getData().name; smsTxt = stringReplaceAll(smsTxt, "#{이름}", name); }else{ if(nmStatus){ //alert("#{이름} 변수에 데이터가 없는 항목이 있습니다. 받는사람 변수 데이터를 확인해 주세요."); varValStatus = false; //break; } } if(typeof recTableData[j].getData().rep1 != 'undefined' && recTableData[j].getData().rep1 != null && recTableData[j].getData().rep1 != ""){ var rep1 = recTableData[j].getData().rep1; smsTxt = stringReplaceAll(smsTxt, "#{1}", rep1); }else{ if(rep1Status){ //alert("#{1} 변수에 데이터가 없는 항목이 있습니다. 받는사람 변수 데이터를 확인해 주세요."); varValStatus = false; //break; } } if(typeof recTableData[j].getData().rep2 != 'undefined' && recTableData[j].getData().rep2 != null && recTableData[j].getData().rep2 != ""){ var rep2 = recTableData[j].getData().rep2; smsTxt = stringReplaceAll(smsTxt, "#{2}", rep2); }else{ if(rep2Status){ //alert("#{2} 변수에 데이터가 없는 항목이 있습니다. 받는사람 변수 데이터를 확인해 주세요."); varValStatus = false; //break; } } if(typeof recTableData[j].getData().rep3 != 'undefined' && recTableData[j].getData().rep3 != null && recTableData[j].getData().rep3 != ""){ var rep3 = recTableData[j].getData().rep3; smsTxt = stringReplaceAll(smsTxt, "#{3}", rep3); }else{ if(rep3Status){ //alert("#{3} 변수에 데이터가 없는 항목이 있습니다. 받는사람 변수 데이터를 확인해 주세요."); varValStatus = false; //break; } } if(typeof recTableData[j].getData().rep4 != 'undefined' && recTableData[j].getData().rep4 != null && recTableData[j].getData().rep4 != ""){ var rep4 = recTableData[j].getData().rep4; smsTxt = stringReplaceAll(smsTxt, "#{4}", rep4); }else{ if(rep4Status){ //alert("#{4} 변수에 데이터가 없는 항목이 있습니다. 받는사람 변수 데이터를 확인해 주세요."); varValStatus = false; //break; } } var msgLen = strMaxCharacterCnt(smsTxt); var maxLenChar = 1000; var imgType = $("#imageType").val(); //일반 이미지 첨부시 글자수 최대 400글자 if(imgType == "I"){ maxLenChar = 400; }else if(imgType == "W"){ //와이드 이미지 첨부시 글자수 최대 76글자 maxLenChar = 76; } if(msgLen < 1){ }else if(msgLen > maxLenChar){ alert("친구톡 내용은 "+ maxLenChar +" 자를 넘을 수 없습니다."); tableL.clearData(); //기존 받는사람 목록을 삭제. return false; } } //치환문자에 데이터가 누락된 경우 알림 메세지를 보여주고 받는사람 목록을 지워준다. /*if(!varValStatus){ alert("치환변수 데이터가 없는 항목이 있습니다. 받는사람 변수 데이터를 확인해 주세요."); tableL.clearData(); //기존 받는사람 목록을 삭제. return false; }*/ } //결제 금액 구하기 totalFtPriceSum(tableL.getRows().length); } } //오류 검사 버튼 처리 $('.check_validity').click(function(){ var invalid = tableL.getInvalidCells(); //오류 데이터 체크 var dataLen = tableL.getRows().length; //연락처 데이터 갯수 var totLen = invalid.length; //오류 데이터 갯수 var errMsg = ""; //최종 alert에 표시할 메시지 저장 변수 if(dataLen > 0){ //연락처 정보가 있으면 수행 if(totLen > 0){ //내용에 오류가 있으면 수행 //오류 데이터 값 저장 for(var i=0; i < totLen; i++){ var cellValue = invalid[i].getValue(); if(i == 0){ errMsg = cellValue; }else{ errMsg = errMsg +", "+ cellValue; } } if(errMsg == "" || errMsg == null){ alert("내용에 오류가 있습니다."); return false; }else{ alert(errMsg + "의 내용에 오류가 있습니다."); return false; } }else{ alert("오류 데이터가 없습니다."); return false; } }else{ alert("연락처를 입력해 주세요."); return false; } });