/* * @Overview 공정 등록 */ class Tb_operation_class { constructor(container) { let _this = this; _this.ajaxUrl = "./operation.ajax.php"; _this.tbList = ""; this.container = document.querySelector(container); _this.table = this.container.querySelector(".hy-table") this.upBtn = this.container.querySelector(".up-btn") || "" this.downBtn = this.container.querySelector(".down-btn") || "" this.addBtn = this.container.querySelector(".add-btn") this.removeBtn = this.container.querySelector(".remove-btn") } /* * @Overview 데이터 세팅 함수 * @Parameter 없음 */ getMainList() { let _this = this; const OP_NM = document.querySelector("#OP_NM").value; const USE_FLG = document.querySelector("#USE_FLG").value; const talert = window.setTimeout(function () { _this.tbList.alert("Loading ...") }, 1000); //1초 이상 지연되면 로딩 출력 ajax_json({ url: _this.ajaxUrl, data: { mode: 'getOperationList', OP_NM : OP_NM, USE_FLG: USE_FLG }, success: function (data) { if (data.code) { _this.tbList.setData(data.data); }else{ kuls_alert(data.mesg); } }, error: function (request, status, error) { kuls_alert(error.message); }, complete: function () { window.clearTimeout(talert); _this.tbList.clearAlert(); } }); return true; } /* * @Overview 데이터 필터 함수 * @Parameter 없음 */ setFilter() {} /* * @Overview 테이블 행 추가 함수 * @Parameter 없음 * @function 기본키, _STATUS_:I 값을 넣은 행 추가 */ addRow() { this.tbList.addRow({_STATUS_ : "I", USE_FLG : "Y", DISPLAY_SEQ : "5"}, true) } excelDataLoad(table_block, title) { let _this = this; let filename = title + "_"+luxon.DateTime.now().toFormat('yyyyMMdd')+".xlsx"; tb_common_funtions.tabu2xls(table_block, filename, title, _this.tbList.getData('active').map( row => { return row; })) }; /* * @Overview 테이블 행 삭제 함수 * @Parameter 없음 * @function 선택된 모든 행 STATUS D */ removeRow() { const selectedRows = this.tbList.getRows().filter(row=>{ return row.getData().check ==="Y" }); if(selectedRows.length > 0 ){ // 선택된 각 행 삭제 selectedRows.forEach((row) => { // STAUS D로 바꾸기 row.getData()._STATUS_ = row.getData()._STATUS_=="I"?null:"D"; const rowElement = row.getElement(); rowElement.classList.add("remove-row"); }); }else{ kuls_alert("삭제할 행을 선택해주세요.") } } /* * @Overview 삭제 취소 함수 * @Parameter 삭제 행 * @function 클릭시 삭제 취소 & STATUS를 공란으로 변경 */ clearRemove(tgt){ if(tgt._row.data._STATUS_ == "D"){ tgt._row.data._STATUS_ = ""; tgt._row.getElement().classList.remove("remove-row") } } /* * @Overview 테이블 행 클릭 함수 * @Parameter 셀 * @function 클릭한 테이블 행 선택 */ rowClick(e,tgt) { // 삭제가 가능하도록 ROW SELECT // staus D로 바꾸기? if (tgt.isSelected()) { tgt.deselect(); } else { tgt.select(); } } copyRow(){} /* * @Overview cell 클릭 함수 * @Parameter 클릭한 cell * @Function 클릭한 cell의 filed 값에 따라 토글 상태 변경 또는 팝업 */ cellClick(e, tgt) { let editor = tgt.getColumn().getDefinition().editor; switch (tgt.getField()) { case "USE_FLG": tgt.setValue(tgt.getValue() == "Y" ? "N" : "Y"); tgt.getElement().classList.add("tabulator-editable") break; case "QC_FLG": tgt.setValue(tgt.getValue() == "Y" ? "N" : "Y"); tgt.getElement().classList.add("tabulator-editable") break; case "OS_FLG": tgt.setValue(tgt.getValue() == "Y" ? "N" : "Y"); tgt.getElement().classList.add("tabulator-editable") break; case "check": tgt.setValue(tgt.getValue() == "Y" ? "" : "Y"); this.clearRemove(tgt.getRow()) break; default: if (!editor) { this.rowClick && this.rowClick(e, tgt.getRow()); } break; } } /* * @Overview 테이블 셀 수정 함수 * @Parameter 셀 * @function 셀 편집이 이후 저장될수 있도록 _STATUS_:U로 데이터 업데이트 */ cellEdited(cell) { cell.getData()._STATUS_ = cell.getData()._STATUS_ || "U"; } /* * @Overview 추가, 수정 및 삭제 데이터 저장 * @Parameter 없음 * @Function 사번 중복 확인 * @Function _STATUS_ U, I, D인 데이터베이스 가져와서 처리. */ putOperation (){ let _this = this; if(this.tbList.getData().filter(row=> row._STATUS_).length == 0){ this.getMainList(); return false; } let postdata = { 'mode': 'putOperation', 'reqdata': JSON.stringify(this.tbList.getData().filter(row=> row._STATUS_)), }; ajax_json({ url: _this.ajaxUrl, data: postdata, success: function (data) { if (data.code) { kuls_success("저장되었습니다."); _this.getMainList(); }else{ _this.tbList.getRows().forEach( row => { //일부 적용된 열 update 처리 if( data.data.includes(row.getData()['OP_CD']) ){ } } ); kuls_alert(data.mesg); } }, error: function (request, status, error) { kuls_alert(error.message); }, complete: function () { } }); return true; }; /* * @Overview 최초 실행 함수 * @Parameter 없음 */ init() { let _this = this; // field 정의 const fields = [ { field:"check", title: "삭제", width: "3%", headerSort: false, formatter: tb_common_funtions.formatterCheckboxIcon, formatterParams: { checkval: "Y" }, }, {formatter: "rownum", title: "NO", minWidth: 35, width: "2%"}, {field: "DISPLAY_SEQ", title: "표시순서", minWidth: 50, width: "5%", editor: "input",}, {field: "OP_GRP", title: "공정그룹", minWidth: 200, width: '10%', editor: "input", visible: false}, { field: "OP_CD", title: "공정 코드", minWidth: 100, width: "5%", editor: tb_custom_editor.pkCode, editorParams: {type: 'upper'}, formatter: tb_custom_formatter.pkCode, formatterParams : {tableClass: this}, // validator: "alphanumeric" }, { field: "OP_NM", title: "공정명", minWidth: 200, width: '13%', editor: tb_custom_editor.upper, hozAlign: "left", cssClass: "editable-cell" }, { field: "OS_FLG", title: "설비제외공정", minWidth: 80, width: "5%", cssClass: "tabulator-editable", formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: {checkval: "Y"}, }, { field: "QC_FLG", title: "품질공정", minWidth: 80, width: "5%", cssClass: "tabulator-editable", formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: {checkval: "Y"}, }, { field: "USE_FLG", title: "사용", width: "5%", cssClass: "tabulator-editable", formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: {checkval: "Y"}, }, {field: "REMK", title: "비고", width: "18%", editor: "input", hozAlign: "left"}, {field: "EDIT_TM", title: "수정 일자", width: "7%", formatter:"datetime", formatterParams:{ inputFormat:"yyyy-MM-dd", outputFormat:"yyyy.MM.dd", } }, {field: "EDITOR", title: "수정자", width: "7%"}, {field: "MAKE_TM", title: "등록 일자", width: "7%"}, {field: "MAKER", title: "등록자", width: "7%"}, ]; const commonFieldData = { headerSort: true, vertAlign: "middle", hozAlign: "center", resizable: "header", //Resize 는 헤더에서만 가능 headerHozAlign: "center", //헤더 정렬 headerSortTristate: true, //데이터 정렬 => 정/역/초기화 }; _this.tbList = new Tabulator(_this.table, { layout: "fitColumns", data: [], //기본 데이터 columns: fields, //컬럼 설정 columnDefaults: commonFieldData, headerSortElement: "", validationMode: "highlight" }); // 데이터 불러오기 _this.tbList.on("tableBuilt", () => { _this.getMainList(); }); /* * @Overview 유효성 검사메세지 띄우기 * @Parameter cell, 입력값, validators */ _this.tbList.on("validationFailed", (cell, value, validators)=>{ let errMsg = "" switch(validators[0].type){ case "alphanumeric": errMsg = " 필드는 한글과 특수문자를 입력할 수 없습니다."; break; case "numeric": errMsg = " 필드는 숫자만 입력할 수 있습니다."; break; default: errMsg = " 필드는 "+ validators[0].parameters; break; }; kuls_warning(cell.getColumn().getDefinition().title + errMsg ); }); // cell 클릭 시에 this.tbList.on("cellClick", (e,tgt) => { this.cellClick && this.cellClick(e,tgt); }); // cell 수정 시에 this.tbList.on("cellEdited", (e,tgt) => { this.cellEdited && this.cellEdited(e,tgt); }); // 추가 ["click", "keypress"].forEach((evt) => { this.addBtn.addEventListener(evt, () => { this.addRow(); }); }); // 삭제 ["click", "keypress"].forEach((evt) => { this.removeBtn.addEventListener(evt, () => { // 삭제 함수 kuls_confirm("삭제","하시겠습니까?", ()=>{ this.removeRow && this.removeRow(); }) }); }); // 조회 ["click", "keypress"].forEach((evt) => { const filterBtn = document.querySelector("#filter_btn"); filterBtn.addEventListener(evt, () => { // setFilter 또는 setData _this.getMainList(); }); }); // 저장 ["click", "keypress"].forEach((evt) => { const putBtn = document.querySelector("#put_btn"); putBtn.addEventListener(evt, () => { this.putOperation(); }); }); //엑셀연결 document.getElementById('excel_down').addEventListener('click', function (e) { getExcel(); }); document.getElementById('excel_up').addEventListener('click', function (e) { document.getElementById('fileInput').click(); }); document.getElementById('fileInput').addEventListener('change', function (e) { let file = e.target.files[0]; if (!file) { console.log('파일이 선택되지 않았습니다.'); return; } let reader = new FileReader(); reader.onload = (e) => { let data = new Uint8Array(e.target.result); let workbook = XLSX.read(data, { type: 'array' }); workbook.SheetNames.forEach((sheetName) => { let rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header:1 }); rows.slice(1).forEach((row,index) => { let rowToAdd = { OP_CD: row[0], OP_NM: row[1], REMK: row[2], USEFLAG: row[3], _STATUS_: "I" }; _this.tbList.addRow(rowToAdd, true); }); }); }; reader.readAsArrayBuffer(file) }); // 엑셀 데이터 다운로드 ["click", "keypress"].forEach((evt) => { const down = document.querySelector("#excel_data"); down.addEventListener(evt, () => { this.excelDataLoad(this.tbList,'공정 코드'); }); }) } } const Tb_operation = new Tb_operation_class("#operation_table"); Tb_operation.init();