forked from HANYANG/HANYANG_MES
390 lines
11 KiB
JavaScript
390 lines
11 KiB
JavaScript
/*
|
|
* @Overview 생산오더 검사 이력 관리
|
|
*/
|
|
|
|
class Tb_main_class {
|
|
constructor(container) {
|
|
this.ajaxUrl = "./main2.ajax.php";
|
|
this.tbList = "";
|
|
this.lastGroupId = 1;
|
|
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 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 없음
|
|
* @function 현재 날짜 부터 일주일간 리스트화 하기
|
|
*/
|
|
getProcess() {
|
|
const columns = [];
|
|
|
|
for (let i = 1; i < 11; i++) {
|
|
const processTitle = '공정 '+i;
|
|
|
|
columns.push({
|
|
title: processTitle,
|
|
columns: [
|
|
{ field: "first", title: "", hozAlign: "center", width: 100, cssClass:"display-none" },
|
|
{ field: "second", title: "", hozAlign: "center", width: 100, cssClass:"display-none" },
|
|
],
|
|
width: 200,
|
|
});
|
|
}
|
|
|
|
return columns;
|
|
}
|
|
/*
|
|
* @Overview 최초 실행 함수
|
|
* @Parameter 없음
|
|
*/
|
|
init() {
|
|
// field 정의
|
|
const fields = [
|
|
{ field: "id", title: "id", width: 100, visible: false },
|
|
{ field: "a", title: "생산오더 등록일", width: 100, },
|
|
{ field: "b", title: "품목 도면 번호 업체명", width: 100 },
|
|
{ field: "c", title: "판매오더수량 납기일", width: 100 },
|
|
{ field: "d", title: "작업순서", width: 100 },
|
|
{ field: "e", title: "완료", width: 100 },
|
|
...this.getProcess(),
|
|
];
|
|
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: [
|
|
{first1:"소재", cssClass:"po-absolute"},
|
|
{first:20, second:20,},
|
|
{a:"P159898", b:"PT0101010", c:"(20)2024.01.27", d:1, first:"01.27 15:00", second:"01.27 18:00",},
|
|
{first:"01.27 18:00", cssClass:"po-absolute"},
|
|
{first:"L5", second:"최창희",},
|
|
{first:"소재", cssClass:"po-absolute"},
|
|
{first:20, second:20,},
|
|
{a:"P159898", b:"PT0101010", c:"(20)2024.01.27", d:1, first:"01.27 15:00", second:"01.27 18:00",},
|
|
{first:"01.27 18:00", cssClass:"po-absolute"},
|
|
{first:"L5", second:"최창희",},
|
|
], //기본 데이터
|
|
columns: fields, //컬럼 설정
|
|
columnDefaults: commonFieldData,
|
|
groupStartOpen: true,
|
|
});
|
|
|
|
// 데이터 불러오기
|
|
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);
|
|
});
|
|
|
|
// 조회
|
|
["click", "keypress"].forEach((evt) => {
|
|
const filterBtn = document.querySelector("#filter_btn");
|
|
filterBtn.addEventListener(evt, () => {
|
|
// setFilter 또는 setData
|
|
});
|
|
});
|
|
// 저장
|
|
["click", "keypress"].forEach((evt) => {
|
|
const putBtn = document.querySelector("#put_btn");
|
|
putBtn.addEventListener(evt, () => {
|
|
this.putData();
|
|
});
|
|
});
|
|
|
|
};
|
|
};
|
|
|
|
class Tb_sub_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:100},
|
|
{field:"", title:"도면번호", width:200},
|
|
{field:"", title:"납기일", width:80},
|
|
{field:"", title:"등록일", width:80},
|
|
{field:"", title:"상태", width:80},
|
|
{field:"", title:"작업순서", width:80},
|
|
{field:"", title:"준비시간", width:80},
|
|
{field:"", title:"가공시간", width:80},
|
|
{field:"", title:"설비", width:80},
|
|
{field:"", title:"작업자", width:80}, // formatter 단위 EA
|
|
{field:"", title:"오더수량", width:80},
|
|
{field:"", title:"시작시간", width: 80},
|
|
{field:"", title:"완료예상시간", width: 200},
|
|
];
|
|
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_sub.rowClick(e, tgt);
|
|
});
|
|
// cell 클릭 시에
|
|
this.tbList.on("cellClick", (e, tgt) => {
|
|
this.cellClick && Tb_sub.cellClick(e, tgt);
|
|
});
|
|
// cell 수정 시에
|
|
this.tbList.on("cellEdited", (cell) => {
|
|
this.cellEdited && Tb_sub.cellEdited(cell);
|
|
});
|
|
|
|
};
|
|
};
|
|
|
|
const Tb_main = new Tb_main_class("#main_table");
|
|
Tb_main.init();
|
|
const Tb_sub = new Tb_sub_class("#sub_table");
|
|
Tb_sub.init(); |