/* * @Overview 설비별 가동현황(현장작업자용) */ class Tb_main_class { constructor(container) { this.ajaxUrl = "./main.ajax.php"; this.container = document.querySelector(container); this.table = this.container.querySelector(".hy-table") } /* * @Overview 데이터 세팅 함수 * @Parameter 없음 */ getMainList() { // let talert = window.setTimeout(()=> { this.tbList.alert("Loading ...") }, 1000); // ajax_json({ // url: this.ajaxUrl, // data: { mode: "" }, // success: (data) => {}, // error: (req, status, err) => { // kuls_alert(err.message); // }, // complete: () => { // // window.clearTimeout(talert); // // this.tbList.clearAlert(); // // this.setFilter(); // }, // }); } /* * @Overview 데이터 필터 함수 * @Parameter 없음 */ setFilter() {} /* * @Overview 테이블 행 추가 함수 * @Parameter 없음 * @function 기본키, _STATUS_:I 값을 넣은 행 추가 */ addRow() { console.log("행 추가!"); this.tbList.addRow({ _STATUS_: "I" }); } /* * @Overview 테이블 행 삭제 함수 * @Parameter 없음 * @function 선택된 모든 행 삭제 */ removeRow() { const selectedRows = this.tbList.getSelectedRows(); // 선택된 모든 행 가져오기 console.log(selectedRows); // 선택된 각 행 삭제 selectedRows.forEach((row)=>{ row.delete(); }); } /* * @Overview 테이블 행 클릭 함수 * @Parameter 셀 * @function 클릭한 테이블 행 선택 */ rowClick(e, tgt) { // 삭제가 가능하도록 ROW SELECT } /* * @Overview 테이블 셀 클릭 함수 * @Parameter 이벤트, 타겟 * @function 클릭한 셀에 따라 각각 다른 이벤트 설정 * @function 팝업, 체크박스 등 */ cellClick(e, tgt) { // // 체크박스 클릭 // switch (tgt.getField()) { // case "현장직 필드명": // tgt.setValue(tgt.getValue() == "Y" ? null : "Y"); // break; // case "외주 필드명": // tgt.setValue(tgt.getValue() == "Y" ? null : "Y"); // break; // case "외주처 필드명": // // 팝업 열기(common이나 다른 파일에 팝업 함수 정의하고, html(popup.inc.php)만들기?) // break; // } } /* * @Overview 테이블 셀 수정 함수 * @Parameter 셀 * @function 셀 편집이 이후 저장될수 있도록 _STATUS_:U로 데이터 업데이트 */ cellEdited(cell) { cell.getData()._STATUS_ = cell.getData()._STATUS_ || "U"; } /* * @Overview 데이터 편집 함수 * @Parameter 없음 * @function _STATUS_ 값이 있는 데이터만 추려서 없으면 생성, 있으면 수정하기 */ putData() { // 기본키 중복 확인 및 방지 // _STATUS_ 있는 데이터만 들고와서 PUT하기 } /* * @Overview 최초 실행 함수 * @Parameter 없음 */ init() { console.log(this.container) // field 정의 const fields = [ {field:"", title:"설비", width:150}, {field:"", title:"상태", width:100}, {field:"", title:"가동", width:100}, //가동은 초록 비가동은 빨강 {field:"", title:"비가동사유", width:100}, //작업완료는 그대로 설비고장은 빨강 {field:"", title:"시작시간", width:100}, {field:"", title:"진행시간(분)", width:100}, {field:"", title:"생산오더", width:100}, {field:"", title:"품목", width:100}, {field:"", title:"도면번호", width:100}, {field:"", title:"작업자", width:100}, {field:"", title:"오더수량", width:100}, {field:"", title:"작업가능 수량", width:100}, {field:"", title:"작업수량", width:100}, ]; const commonFieldData = { headerSort: false, vertAlign: "middle", hozAlign: "center", resizable: "header", //Resize 는 헤더에서만 가능 headerHozAlign: "center", //헤더 정렬 headerSortTristate: true, //데이터 정렬 => 정/역/초기화 }; this.tbList = new Tabulator(this.table, { layout: "fitColumns", selectableRows: true, data: [], //기본 데이터 columns: fields, //컬럼 설정 columnDefaults: commonFieldData, }); // 데이터 불러오기 this.tbList.on("tableBuilt", () => { this.getMainList(); }); // row 클릭 시에 this.tbList.on("rowClick", (e, tgt) => { this.rowClick && Tb_main.rowClick(e, tgt); }); // cell 클릭 시에 this.tbList.on("cellClick", (e, tgt) => { this.cellClick && Tb_main.cellClick(e, tgt); }); // cell 수정 시에 this.tbList.on("cellEdited", (cell) => { this.cellEdited && Tb_main.cellEdited(cell); }); }; }; const Tb_main = new Tb_main_class("#main_table"); Tb_main.init();