//Grid용 클래스. 블록 처리용 class Tb_class { constructor(){ let _this = this; _this.tblPlantList = ""; _this.ajax_url = "./plant.ajax.php"; } //리스트 로드 getMainList () { let _this = this; let talert = window.setTimeout(function () { _this.tblPlantList.alert("Loading ...") }, 1000); //1초 이상 지연되면 로딩 출력 ajax_json({ url: _this.ajax_url, data: { mode: 'getPlantList' }, success: function (data) { if (data.code) { _this.tblPlantList.setData(data.data); }else{ kuls_alert(data.mesg); } }, error: function (request, status, error) { kuls_alert(error.message); }, complete: function () { window.clearTimeout(talert); _this.tblPlantList.clearAlert(); Tb_funcs.setFilter(); } }); return true; }; //Row 클릭 콜백 rowClick (e, tgt){ let _this = this; Tb_funcs2.getMainList(tgt.getData().PLANT_CD); jQuery(tgt.getElement()).siblings().removeClass("user-checked"); tgt.getElement().classList.add("user-checked"); $("#btnAddWc").attr("disabled", false); $("#btnPutWc").attr("disabled", false); }; setFilter () { let _this = this; _this.tblPlantList.setFilter(function(data){ //필터링 return ( true && ( !document.getElementById("S_USE_FLG") || ( !document.getElementById("S_USE_FLG").checked || data.USE_FLG === 'Y' ) ) && ( !document.getElementById("S_PLANT_NM") || ( (data.PLANT_CD+"|"+data.PLANT_NM).search(document.getElementById("S_PLANT_NM").value) !== -1 ) ) ) }, '=', true); }; //Row 추가 addRow(){ let _this = this; _this.tblPlantList.addRow({_STATUS_:'I', USE_FLG:'Y'}); } //Cell 변경 콜백 cellEdited (cell){ let _this = this; cell.getData()._STATUS_ = cell.getData()._STATUS_||'U'; }; //Cell 클릭 콜백 cellClick (e, tgt){ let _this = this; _this.tgt = tgt; switch( tgt.getField() ){ case "USE_FLG": tgt.setValue( tgt.getValue() == "Y"?"N":"Y" ); break; case "BIZ_AREA_NM": popBizareaList('BIZ_AREA_CD','BIZ_AREA_NM', tgt.getRow()._row); break; default: break; } }; // 공장 등록 putPlant (){ let _this = this; let pdata = _this.tblPlantList.getData(); let dupdata = pdata.map( data => data.PLANT_CD ).filter( data => data ); if( dupdata.filter( (data,idx) => dupdata.indexOf(data) !== idx ).length > 0 ){ kuls_alert("공장 코드가 중복됩니다."); return false; } let postdata = { 'mode': 'putPlant', 'reqdata': JSON.stringify(_this.tblPlantList.getData().filter(row=> row._STATUS_)), }; ajax_json({ url: _this.ajax_url, data: postdata, success: function (data) { if (data.code) { kuls_success("저장되었습니다."); _this.getMainList(); }else{ Tb_funcs.tblPlantList.getRows().forEach( row => { //일부 적용된 열 update 처리 if( data.data.includes(row.getData()['PLANT_CD']) ){ row.update({_STATUS_:'U'}); } } ); kuls_alert(data.mesg); } }, error: function (request, status, error) { kuls_alert(error.message); }, complete: function () { } }); return true; }; //시작 실행 init () { let _this = this; const fields = [ { formatter: "rownum", title: "No", width: "4%", }, { field: "PLANT_CD", title: "공장코드", width: "10%", editor:'input', editable:(cell)=>{ let val = cell.getData(); return val._STATUS_ === 'I' }, }, { field: "PLANT_NM", title: "공장명", width: "16%", editor:'input', }, { field: "ZIP_CD", title: "공장우편번호", width: "10%", editor:'input', }, { field: "ADDR", title: "공장주소", width: "20%", editor:'input', }, { field: "BIZ_AREA_NM", title: "사업장명", width: "14%", editor:'input', }, { field: "REMK", title: "비고", width: "20%", editor:'input', }, { field: "USE_FLG", title: "사용", width: "6%", cssClass:'user-editable', formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: {checkval:'Y'}}, ]; _this.tblPlantList = new Tabulator("#tblPlantList",{ layout: "fitColumns", height: "100%", data: [], //기본 데이터 columns: fields, //컬럼 설정 columnDefaults: { //컬럼 공통 규칙 vertAlign: "middle", hozAlign: "center", resizable: "header",//Resize 는 헤더에서만 가능 headerHozAlign: "center", //헤더 정렬 headerSortTristate: true, //데이터 정렬 => 정/역/초기화 }, rowFormatter:function(row){ if(row.getData().USE_FLG != "Y"){ row.getElement().classList.add('text-secondary'); } }, headerSortElement: "", //정렬 아이콘 }); _this.tblPlantList.on("tableBuilt", () => { //Tabulator 초기 데이터 불러오기 이벤트 _this.getMainList(); }); _this.tblPlantList.on("rowClick", (e,tgt) => { //Tabulator Row Click _this.rowClick && Tb_funcs.rowClick(e,tgt); }); _this.tblPlantList.on("cellClick", (e,tgt) => { //Tabulator cell Click _this.cellClick && Tb_funcs.cellClick(e,tgt); }); _this.tblPlantList.on("cellEdited", (cell) => { //Tabulator cell Edited _this.cellEdited && Tb_funcs.cellEdited(cell); }); ['click','keypress'].forEach(evt => document.querySelector("#btnAddPlant").addEventListener(evt,()=>{_this.addRow()})); ['click','keypress'].forEach(evt => document.querySelector("#btnPutPlant").addEventListener(evt,()=>{_this.putPlant()})); ['change','keydown','keyup'].forEach(evt => document.querySelectorAll("#S_PLANT_NM, #S_USE_FLG").forEach(tgt=>tgt.addEventListener(evt,()=>{Tb_funcs.setFilter()}))); }; } //Grid용 클래스. 블록 처리용 class Tb_class2 { constructor(){ let _this = this; _this.tblWcList = ""; _this.ajax_url = "./plant.ajax.php"; _this.pc = ""; } //리스트 로드 getMainList (pc) { let _this = this; _this.pc = pc; let talert = window.setTimeout(function () { _this.tblWcList.alert("Loading ...") }, 1000); //1초 이상 지연되면 로딩 출력 ajax_json({ url: _this.ajax_url, data: { mode: 'getWcList', PLANT_CD: pc }, success: function (data) { if (data.code) { _this.tblWcList.setData(data.data); }else{ kuls_alert(data.mesg); } }, error: function (request, status, error) { kuls_alert(error.message); }, complete: function () { window.clearTimeout(talert); _this.tblWcList.clearAlert(); Tb_funcs2.setFilter(); } }); return true; }; setFilter () { let _this = this; _this.tblWcList.setFilter(function(data){ //필터링 return ( true && ( !document.getElementById("S_USE_FLG") || ( !document.getElementById("S_USE_FLG").checked || data.USE_FLG === 'Y' ) ) && ( !document.getElementById("S_WC_NM") || ( (data.WC_CD+"|"+data.WC_NM).search(document.getElementById("S_WC_NM").value) !== -1 ) ) ) }, '=', true); }; //Row 추가 addRow(){ let _this = this; _this.tblWcList.addRow({_STATUS_:'I', USE_FLG:'Y', PLANT_CD:_this.pc}); } //Cell 클릭 콜백 cellClick (e, tgt){ let _this = this; _this.tgt = tgt; switch( tgt.getField() ){ case "USE_FLG": tgt.setValue( tgt.getValue() == "Y"?"N":"Y" ); break; } }; //Cell 변경 콜백 cellEdited (cell){ let _this = this; cell.getData()._STATUS_ = cell.getData()._STATUS_||'U'; }; // 작업장 등록 putWc (){ let _this = this; let pdata = _this.tblWcList.getData(); let dupdata = pdata.map( data => data.WC_CD ).filter( data => data );; if( dupdata.filter( (data,idx) => dupdata.indexOf(data) !== idx ).length > 0 ){ kuls_alert("작업장 코드가 중복됩니다."); return false; } let postdata = { 'mode': 'putWc', 'reqdata': JSON.stringify(_this.tblWcList.getData().filter(row=> row._STATUS_)), }; ajax_json({ url: _this.ajax_url, data: postdata, success: function (data) { if (data.code) { kuls_success("저장되었습니다."); _this.getMainList(_this.pc); }else{ Tb_funcs2.tblWcList.getRows().forEach( row => { //일부 적용된 열 update 처리 if( data.data.includes(row.getData()['WC_CD']) ){ row.update({_STATUS_:'U'}); } } ); kuls_alert(data.mesg); } }, error: function (request, status, error) { kuls_alert(error.message); }, complete: function () { } }); return true; }; init () { let _this = this; const fields = [ { formatter: "rownum", title: "No", width: "20%", }, { field: "WC_CD", title: "작업장코드", width: "30%", editor:'input', editable:(cell)=>{ let val = cell.getData(); return val._STATUS_ === 'I' }, }, { field: "WC_NM", title: "작업장명", width: "30%", editor:'input', }, { field: "USE_FLG", title: "사용", width: "20%", cssClass:'user-editable', formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: {checkval:'Y'}}, ]; _this.tblWcList = new Tabulator("#tblWcList",{ layout: "fitColumns", height: "100%", data: [], //기본 데이터 columns: fields, //컬럼 설정 columnDefaults: { //컬럼 공통 규칙 vertAlign: "middle", hozAlign: "center", resizable: "header",//Resize 는 헤더에서만 가능 headerHozAlign: "center", //헤더 정렬 headerSortTristate: true, //데이터 정렬 => 정/역/초기화 }, rowFormatter:function(row){ if(row.getData().USE_FLG != "Y"){ row.getElement().classList.add('text-secondary'); } }, headerSortElement: "", //정렬 아이콘 }); _this.tblWcList.on("cellClick", (e,tgt) => { //Tabulator cell Click _this.cellClick && Tb_funcs.cellClick(e,tgt); }); _this.tblWcList.on("cellEdited", (cell) => { //Tabulator cell Edited _this.cellEdited && Tb_funcs.cellEdited(cell); }); ['click','keypress'].forEach(evt => document.querySelector("#btnAddWc").addEventListener(evt,()=>{_this.addRow()})); ['click','keypress'].forEach(evt => document.querySelector("#btnPutWc").addEventListener(evt,()=>{_this.putWc()})); ['change','keydown','keyup'].forEach(evt => document.querySelectorAll("#S_WC_NM, #S_USE_FLG").forEach(tgt=>tgt.addEventListener(evt,()=>{Tb_funcs2.setFilter()}))); }; } const Tb_funcs = new Tb_class(); const Tb_funcs2 = new Tb_class2(); Tb_funcs.init(); Tb_funcs2.init();