From 45f069e0aab828bb25d800656d44ae9c3d0cc7ca Mon Sep 17 00:00:00 2001 From: sychoi Date: Mon, 5 Aug 2024 14:05:18 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=80=EC=82=AC=ED=95=AD=EB=AA=A9=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=97=A4=EB=8D=94=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- www/ksvc/base/insp/insp.js | 465 +---------------------------------- www/ksvc/base/insp/insp.php | 35 +-- www/ksvc/component/Header.js | 28 +++ 3 files changed, 39 insertions(+), 489 deletions(-) create mode 100644 www/ksvc/component/Header.js diff --git a/www/ksvc/base/insp/insp.js b/www/ksvc/base/insp/insp.js index 5e320e1..bd97679 100644 --- a/www/ksvc/base/insp/insp.js +++ b/www/ksvc/base/insp/insp.js @@ -1,460 +1,7 @@ -/* - * @Overview 검사항목 관리 - */ +const App = () => ( + <> +
+ +); -class Tb_insp_class { - constructor(container) { - this.ajaxUrl = "./insp.ajax.php"; - - this.container = document.querySelector(container); - this.table = this.container.querySelector(".hy-table#insp_table"); - this.addBtn = this.container.querySelector(".add-btn"); - this.removeBtn = this.container.querySelector(".remove-btn"); - } - - /* - * @Overview 데이터 세팅 함수 - * @Parameter 없음 - */ - getMainList() { - let _this = this; - const INSP_ITEM = document.querySelector("#INSP_ITEM").value; - const talert = window.setTimeout(() => { - this.tbList.alert("Loading ..."); - }, 1000); - - ajax_json({ - url: this.ajaxUrl, - data: { mode: "getInspList", INSP_ITEM:INSP_ITEM }, - success: (data) => { - if(data.code){ - this.tbList.setData(data.data); - }else{ - kuls_alert(err.message); - } - }, - error: (req, status, err) => { - kuls_alert(err.message); - }, - complete: () => { - window.clearTimeout(talert); - this.tbList.clearAlert(); - }, - }); - - return true; - } - - /* - * @Overview 데이터 필터 함수 - * @Parameter 없음 - * @ 수정 필수 필수!! - */ - setFilter() { - } - - 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_:I 값을 넣은 행 추가 - */ - addRow() { - this.tbList.addRow({ _STATUS_: "I", USEFLAG: "Y" }, true); - } - - /* - * @Overview 테이블 행 선택 함수 - * @Parameter 없음 - * @function 선택된 모든 행 색 변경 - */ - rowClick(e, tgt) { - if (tgt.isSelected()) { - tgt.deselect(); - this.clearRemove(tgt); - } else { - tgt.select(); - } - } - - /* - * @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"){ - // console.log(); - tgt._row.data._STATUS_ = ""; - tgt._row.getElement().classList.remove("remove-row") - // const selectedRows = this.tbList.getSelectedRows(); // 선택된 모든 행 가져오기 - } - } - - /* - * @Overview cell 클릭 함수 - * @Parameter 클릭한 cell - * @Function 클릭한 cell의 filed 값에 따라 토글 상태 변경 또는 팝업 - */ - cellClick(e, tgt) { - // var editor = tgt.getColumn().getDefinition().editor; - - switch (tgt.getField()) { - case "USEFLAG": - tgt.setValue(tgt.getValue() == "Y" ? "N" : "Y"); - tgt.getElement().classList.add("tabulator-editable"); - break; - case "OKNG_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인 데이터베이스 가져와서 처리. - */ - putData() { - } - - /* - * @Overview 추가, 수정 및 삭제 데이터 저장 - * @Parameter 없음 - * @Function _STATUS_ : U, I, D Row 인 것 php 처리. - */ - putData() { - // let _this = this; - - // 저장 시 상태 변화 없는 row 요청 X - if(this.tbList.getData().filter(row=> row._STATUS_).length == 0){ - this.getMainList(); - return false; - } - - - const blankObj = []; - const reqData = []; - - this.tbList.getRows().forEach(row => { - - if(row.getData()['_STATUS_']){ - if(Object.keys(row._row.data).filter(key => key !== '_STATUS_' && key !== 'USEFLAG' ).every(key => { - - const value = row._row.data[key]; - return (value === undefined || value === ''); - })){ - blankObj.push(row); - }else{ - reqData.push(row.getData()); - } - } - }) - - - const postdata = reqData.length == 0 ? false : { - 'mode': 'putInsp', - 'reqdata': JSON.stringify(reqData), - }; - - if(!postdata){ - this.getMainList(); - return false; - }; - - if(blankObj.length !== 0){ - kuls_confirm("비어있는 행을 무시하고 진행하시겠습니까?","",()=>{ - ajax_json({ - url: this.ajaxUrl, - data: postdata, - success: (data)=>{ - if (data.code) { - kuls_success("저장되었습니다."); - this.getMainList(); - }else{ - kuls_alert(data.mesg); - } - }, - error: function (request, status, error) { - kuls_alert(error.message); - }, - complete: function () { - } - }); - - },()=>{ - blankObj.forEach(row=>{ - row.getElement().classList.add("blank-row") - }) - }) - }else{ - ajax_json({ - url: this.ajaxUrl, - data: postdata, - success: (data)=>{ - if (data.code) { - kuls_success("저장되었습니다."); - this.getMainList(); - }else{ - kuls_alert(data.mesg); - } - }, - error: function (request, status, error) { - kuls_alert(error.message); - }, - complete: function () { - } - }); - - - } - -} - - /* - * @Overview 최초 실행 함수 - * @Parameter 없음 - */ - init() { - - // field 정의 - const fields = [ - { field:"check", title: "삭제", width: "3%", headerSort: false, - formatter: tb_common_funtions.formatterCheckboxIcon, - formatterParams: { checkval: "Y" }, - }, - //{ formatter: "rownum", title: "No", width: "3%" }, - { field: "INSP_ITEM", title: "검사항목번호", width: '8%' }, - { field: "INSP_NAME", title: "검사항목", width: "8%", editor: "input", hozAlign:"left", cssClass:"editable-cell" }, - { field: "INSP_TOOL", title: "측정기", width: "10%", cssClass: "user-list", editor: "list", hozAlign: 'left', - editorParams: { values: varsINSP_TOOL },formatter: tb_common_funtions.formatterSelect, formatterParams: {values: varsINSP_TOOL}}, - { field: "INSP_METH", title: "검사유형",hozAlign:"left", width: "10%", cssClass: "user-list editable-cell", - editor: "list", - editorParams: { values: varsINSP_METH },formatter: tb_common_funtions.formatterSelect, formatterParams: {values: varsINSP_METH}}, - { field: "OKNG_FLG", title: "OK/NG", width: "5%", cssClass: "tabulator-editable", formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: { checkval: "Y" }, }, - { field: "USEFLAG", title: "사용", width: "5%", cssClass: "tabulator-editable", formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: { checkval: "Y" }, }, - { field: "MAKE_TM", title: "등록일시", width: "11%", formatter:"datetime", formatterParams:{ - inputFormat:"yyyy-MM-dd", - outputFormat:"yyyy.MM.dd", - } - }, - { field: "MAKER", title: "등록자", width: "8%" }, - { field: "EDIT_TM", title: "수정일시", width: "10%", formatter:"datetime", formatterParams:{ - inputFormat:"yy-MM-dd", - outputFormat:"20"+"yy.MM.dd", - } - }, - { field: "EDITOR", title: "수정자", width: "8%" } - ]; - - // field 공통 요소 - const commonFieldData = { - headerSort: true, - vertAlign: "middle", - hozAlign: "center", - resizable: "header", //Resize 는 헤더에서만 가능 - headerHozAlign: "center", //헤더 정렬 - headerSortTristate: true, //데이터 정렬 => 정/역/초기화 - }; - - /* - * @Overview tabulator 객체 생성 - * @Parameter 생성 위치(html class값) - */ - this.tbList = new Tabulator(this.table, { - layout: "fitColumns", - data: [], //기본 데이터 - columns: fields, //컬럼 설정 - columnDefaults: commonFieldData, - headerSortElement: "", //정렬 아이콘 - validationMode:"highlight" - }); - - /* - * @Overview 테이블 만들어지면 데이터 불러오기 - * @Parameter 없음 - */ - this.tbList.on("tableBuilt", () => { - this.getMainList && this.getMainList(); - }); - - /* - * @Overview 유효성 검사메세지 띄우기 - * @Parameter cell, 입력값, validators - */ - this.tbList.on("validationFailed", (cell, value, validators)=>{ - cell.setValue(""); - 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 ); - }); - - /* - * @Overview cell 클릭시 체크 또는 팝업 - * @Parameter 이벤트, 셀 - */ - this.tbList.on("cellClick", (e, tgt) => { - this.cellClick && this.cellClick(e, tgt); - }); - - /* - * @Overview cell 수정 함수 - * @Parameter cell - * @Function status u로 바꿀것 - */ - this.tbList.on("cellEdited", (cell) => { - this.cellEdited && this.cellEdited(cell); - }); - - // 엑셀 데이터 다운로드 - ["click", "keypress"].forEach((evt) => { - const down = document.querySelector("#excel_data"); - down.addEventListener(evt, () => { - console.log('asdf'); - this.excelDataLoad(this.tbList,'검사항목등록'); - }); - }) - - //엑셀연결 - document.getElementById('excel_down').addEventListener('click', function (e) { - getExcel2(); - }); - - document.getElementById('excel_up').addEventListener('click', function (e) { - document.getElementById('fileInput').click(); - }); - - document.getElementById('fileInput').addEventListener('change', (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 }); - console.log(rows); - rows.slice(1).forEach((row,index) => { - let rowToAdd = { - INSP_ITEM: row[0], - INSP_NAME: row[1], - INSP_METH: row[2], - INSP_TOOL: row[3], - OKNG_FLG: row[4], - USEFLAG: row[5], - _STATUS_: "I" - }; - this.tbList.addRow(rowToAdd,true); - }); - }); - }; - reader.readAsArrayBuffer(file) - }); - - - - // 추가 - ["click", "keypress"].forEach((evt) => { - this.addBtn.addEventListener(evt, () => { - this.addRow && this.addRow(); - }); - }); - // 삭제 - ["click", "keypress"].forEach((evt) => { - this.removeBtn.addEventListener(evt, () => { - // 삭제 함수 - this.removeRow && this.removeRow(); - }); - }); - // 조회 - ["click", "keypress"].forEach((evt) => { - const filterBtn = document.querySelector("#filter_btn"); - filterBtn.addEventListener(evt, () => { - // setFilter 또는 setData - this.getMainList && this.getMainList(); - }); - }); - // 저장 - ["click", "keypress"].forEach((evt) => { - const putBtn = document.querySelector("#put_btn"); - putBtn.addEventListener(evt, () => { - this.putData && this.putData(); - }); - }); - - - } -} - -const Tb_insp = new Tb_insp_class("#main_container"); -Tb_insp.init(); +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/www/ksvc/base/insp/insp.php b/www/ksvc/base/insp/insp.php index c9e19de..a6f1a0d 100644 --- a/www/ksvc/base/insp/insp.php +++ b/www/ksvc/base/insp/insp.php @@ -9,41 +9,15 @@ include_once _SVC_INC_PATH_ . "/header.php"; ?> + +
-
-
- - -
- -
-
- -
-
- -
- - - -
-
- - - - - - -
-
- - -
+
@@ -98,7 +72,8 @@ include_once _SVC_INC_PATH_ . "/header.php"; - + + { + return ( +
+ +
+ +
+
+ +
+
+ +
+ +
+
+ + + + + + +
+
+ +
+ ); +}; \ No newline at end of file