HANYANG_REACT/www/ksvc/inc/js/customTb.js

889 lines
26 KiB
JavaScript

const tb_custom_editor = {
// 기초 코드용 에디터: 새로추가한(STATUS = I) ROW의 기초코드만 수정가능
pkCode: function (cell, onRendered, success, cancel, editorParams) {
const input = document.createElement("input");
const format = editorParams.format ? editorParams.format : "text";
if (cell.getData()._STATUS_ == "I") {
input.setAttribute("type", format);
input.style.width = "100%";
input.value = cell.getValue() ? cell.getValue() : "";
if (editorParams.type === "upper") {
// 입력값이 변경될 때 대문자로 변환
input.addEventListener("input", function () {
this.value = this.value.toUpperCase();
});
}
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function successFunc() {
success(input.value);
}
input.addEventListener("change", successFunc);
input.addEventListener("blur", successFunc);
return input;
} else {
return false;
}
},
// 팝업이 열리는 셀의 에디터: 수정되지 않는다(READONLY)
pop: function(cell,onRendered,success,cancel,editorParams){
const input = document.createElement("input");
const format = editorParams.format ? editorParams.format : "text";
input.setAttribute("type", format);
input.setAttribute("readonly", true);
input.style.width = "100%";
input.value = cell.getValue() ? cell.getValue() : "";
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function successFunc() {
success(input.value);
}
input.addEventListener("change", successFunc);
input.addEventListener("blur", successFunc);
return input;
},
// item 에서 없애고 pop으로 대체하기
clickShow: function(cell,onRendered,success,cancel,editorParams){
const input = document.createElement("input");
const format = editorParams.format ? editorParams.format : "text";
input.setAttribute("type", format);
input.setAttribute("readonly", true);
input.style.width = "100%";
input.value = cell.getValue() ? cell.getValue() : "";
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function successFunc() {
success(input.value);
}
input.addEventListener("change", successFunc);
input.addEventListener("blur", successFunc);
return input;
},
// select 박스 에디터
editorSelect: function(cell, onRendered, success, cancel, editorParams){
let edSelect = document.createElement("select");
let params = editorParams.values;
params = params || {};
Object.keys(params).forEach(key => {
let edOption = document.createElement("option");
edOption.value = key;
edOption.text = params[key];
edSelect.append(edOption);
});
edSelect.className = 'form-select form-select-sm';
edSelect.value = cell._cell.value;
onRendered(function() {
edSelect.focus();
});
let cback = function(){
success( edSelect.value);
}
edSelect.addEventListener("change", cback);
edSelect.addEventListener("blur", cback);
return edSelect;
},
// 다른 셀의 체크 상태에 따라 input / select 에디터
inputOrSelect: function (cell, onRendered, success, cancel, editorParams) {
const rowData = cell.getData();
const checkPoint = rowData[editorParams.checkPoint];
const cellValue = cell.getValue() ? cell.getValue() : ""; // 현재 셀의 값을 가져옵니다.
let input; // 조건에 따라 생성될 입력 요소
if (checkPoint === "Y") {
let options = [{ idx:1, val: "OK" }, { idx:0, val: "NG" }, { idx: "", val: "없음" } ];
input = document.createElement("select");
input.style.width = "100%";
options.forEach((temp)=>{
var optionElement = document.createElement("option");
optionElement.value = temp.idx;
optionElement.text = temp.val;
input.appendChild(optionElement);
})
} else {
input = document.createElement("input");
input.setAttribute("type", "text");
input.value = cellValue;
input.style.width = "100%";
// input.className = 'form-control form-control-sm'; // 부트스트랩 클래스 적용
}
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function successFunc() {
success(input.value); // 성공 콜백에 값을 전달하여 셀을 업데이트합니다.
}
input?.addEventListener("change", successFunc);
input?.addEventListener("blur", successFunc);
return input;
},
// inputOrSelect: function (cell, onRendered, success, cancel, editorParams) {
// const rowData = cell.getData();
// const checkPoint = rowData[editorParams.checkPoint];
// const cellValue = cell.getValue() ? cell.getValue() : ""; // 현재 셀의 값을 가져옵니다.
// let input; // 조건에 따라 생성될 입력 요소
// if (checkPoint === "Y") {
// input = document.createElement("select");
// const options = ["OK", "NG"];
// options.forEach(function (option, idx) {
// const optionElement = document.createElement("option");
// optionElement.value = idx;
// optionElement.textContent = option;
// if (option === cellValue) {
// optionElement.selected = true;
// input.value = idx;
// console.log(input.value)
// }
// input.append(optionElement);
// });
// console.log(cell._cell.value)
// input.value = cell._cell.value;
// input.style.width = "100%";
// } else {
// input = document.createElement("input");
// input.setAttribute("type", "text");
// input.value = cellValue;
// input.style.width = "100%";
// }
// onRendered(function () {
// input.focus();
// input.style.height = "100%";
// });
// function successFunc() {
// if (checkPoint === "Y") {
// success(input.value);
// } else {
// success(input.value);
// }
// }
// input.addEventListener("change", successFunc);
// input.addEventListener("blur", successFunc);
// return input;
// },
// 생산계획: 다른 셀의 값에 따라 input[type=num] / select
regPlan: function (cell, onRendered, success, cancel, editorParams) {
const rowData = cell.getData();
const checkPoint = rowData[editorParams.checkPoint];
let cellValue = cell.getValue() ? cell.getValue() : ""; // 현재 셀의 값을 가져옵니다.
let input; // 조건에 따라 생성될 입력 요소
if (checkPoint === "그룹") {
// div
// let options = editorParams.values
// input = document.createElement("select");
// input.style.width = "100%";
let options = editorParams.values;
input = document.createElement("input");
input.style.width = "100%";
input.style.height = "100%";
// Autocomplete 기능 추가
$(input).autocomplete({
source: Object.values(options),
select: function(event, ui) {
success(ui.item.value); // 선택된 값을 성공 콜백에 전달
},
});
input.value = cellValue;
for(let temp in options){
var optionElement = document.createElement("option");
optionElement.value = temp;
optionElement.text = options[temp];
if(temp === cellValue){
optionElement.selected = true;
}
input.appendChild(optionElement);
}
input.addEventListener("keydown", function(e) {
if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
e.stopPropagation();
}
});
// let options = editorParams.values
// input = document.createElement("select");
// input.style.width = "100%";
// for(let temp in options){
// var optionElement = document.createElement("option");
// optionElement.value = temp;
// optionElement.text = options[temp];
// if(temp === cellValue){
// optionElement.selected = true;
// }
// input.appendChild(optionElement);
// }
}else{
input = document.createElement("input");
input.setAttribute("type", "number");
input.setAttribute("min", 0);
input.value = cellValue;
input.style.width = "100%";
input.addEventListener("input", function () {
this.value = this.value < 0 ? 0 : this.value;
});
}
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function successFunc() {
success(input.value);
// if (checkPoint === "Y") {
// } else {
// success(input.value);
// }
}
input.addEventListener("change", successFunc);
input.addEventListener("blur", successFunc);
return input;
},
// 현장작업자 팝업: 이전양품수량 초과 안되게 리미트
limitQty: function (cell, onRendered, success, cancel, editorParams) {
const input = document.createElement("input");
const curSum = cell.getTable().getCalcResults().bottom[editorParams.qty];
const vsNum = editorParams.vsNum.formData[editorParams.formQty];
input.setAttribute("type", "number");
input.setAttribute("min", 0);
input.style.width = "100%";
input.value = cell.getValue() ? parseInt(cell.getValue()) : "";
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function successFunc() {
if (parseInt(vsNum) < parseInt(curSum) + parseInt(input.value)) {
input.value = parseInt(vsNum) - parseInt(curSum);
kuls_alert("이전양품수량을 초과할 수 없습니다.");
}
success(input.value);
}
input.addEventListener("change", successFunc);
input.addEventListener("input", function () {
this.value = this.value < 0 ? 0 : this.value;
});
// input.addEventListener("blur", successFunc);
return input;
},
// 양수만 입력가능한 number 에디터
minNumber: function (cell, onRendered, success, cancel, editorParams) {
const input = document.createElement("input");
const minVal = editorParams.min;
input.setAttribute("type", "number");
input.setAttribute("min", 0);
input.style.width = "100%";
input.value = cell.getValue() ? parseInt(cell.getValue()) : "";
onRendered(function () {
input.focus();
input.style.height = "100%";
});
input.addEventListener("input", function () {
this.value = this.value < minVal ? minVal : this.value;
});
// 값 변경 완료 시
function onChange() {
if (input.value != cell.getValue()) {
success(input.value);
} else {
cancel();
}
}
// 이벤트 리스너 등록
input.addEventListener("blur", onChange);
input.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
onChange(); // 엔터 키를 누를 때
}
if (e.keyCode == 27) {
cancel(); // ESC 키를 누를 때
}
});
return input;
},
// 대문자로 변경되는 에디터
upper: function (cell, onRendered, success, cancel) {
// input 요소 생성
const input = document.createElement("input");
input.setAttribute("type", "text");
input.style.width = "100%";
input.value = cell.getValue() ? cell.getValue() : "";
// 입력값이 변경될 때 대문자로 변환
input.addEventListener("input", function () {
this.value = this.value.toUpperCase();
});
// 에디터가 렌더링된 후 실행될 콜백
onRendered(function () {
input.focus();
input.style.height = "100%";
input.select();
});
// 값 변경 완료 시
function onChange() {
if (input.value != cell.getValue()) {
success(input.value);
} else {
cancel();
}
}
// 이벤트 리스너 등록
input.addEventListener("blur", onChange);
input.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
onChange(); // 엔터 키를 누를 때
}
if (e.keyCode == 27) {
cancel(); // ESC 키를 누를 때
}
});
return input;
},
// 숫자만 입력 가능한 에디터
onlyNumber: function (cell, onRendered, success, cancel) {
// 입력 요소 생성
const input = document.createElement("input");
input.setAttribute("type", "text");
input.style.width = "100%";
input.value = cell.getValue() ? cell.getValue() : "";
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function onChange() {
if (input.value.match(/^\d*$/)) {
// 숫자만 허용
success(input.value);
} else {
input.value = input.value.replace(/[^0-9]/g, "");
}
}
input.addEventListener("blur", onChange);
input.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
onChange();
}
if (e.keyCode == 27) {
cancel();
}
});
return input;
},
// 숫자 최대 4자리(문자x) -> 00:00
time: function (cell, onRendered, success, cancel) {
// 입력 요소 생성
const input = document.createElement("input");
input.setAttribute("type", "text");
input.style.width = "100%";
input.value = cell.getValue() ? cell.getValue() : "";
onRendered(function () {
input.focus();
input.select();
input.style.height = "100%";
});
// 변경사항이 완료되면 호출될 함수
function onChange() {
if (input.value.length === 5) {
// 'HH:mm' 형식 확인
success(input.value);
console.log(cell.getValue());
} else {
cancel();
}
}
// 입력 이벤트 처리
input.addEventListener("input", function () {
var value = input.value.replace(/[^0-9]/g, ""); // 숫자만 입력 받음
if (value.length > 2) {
value = value.substring(0, 4); // 최대 4자리
input.value = value.replace(/(\d{2})(\d{1})/, "$1:$2");
}
});
input.addEventListener("blur", onChange);
input.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
onChange();
}
if (e.keyCode == 27) {
cancel();
}
});
return input;
},
};
// 키-값 저장 클래스
const rowClickeventMap = new WeakMap();
const tb_custom_formatter = {
// 기초코드 셀에 조건에 따라 클래스 추가
pkCode: function (tgt, params) {
if (tgt.getData()._STATUS_ == "I") {
tgt.getElement().classList.add("editable-cell");
} else {
tgt.getElement().classList.remove("tabulator-editable");
let rowClickevent = rowClickeventMap.get(tgt.getElement());
if (!rowClickevent) {
rowClickevent = function (e) {
params.tableClass.rowClick(e, tgt.getRow());
};
rowClickeventMap.set(tgt.getElement(), rowClickevent);
tgt.getElement().addEventListener("click", rowClickevent);
}
}
return tgt.getValue();
},
// 재사용x 생산계획 구분선
rowspan_3: function (tgt, params) {
if (tgt.getData().SEPER === "계획") {
return tgt.getValue();
} else if(tgt.getData().SEPER === "실적"){
tgt.getElement().classList.add("border-bottom")
return "";
}else{
return "";
}
},
// 값에 따라 배경색 바꾸기(클래스 추가)
status: function (cell, formatterParams, onRendered) {
const cellStats = cell.getValue()?.split(" / ")[1];
const cellVar = cell.getValue()?.split(" / ")[0];
if (
formatterParams["selectValue"] === cellVar &&
formatterParams["selectValue"]
) {
cell.getElement().classList.add("red-font");
}
switch (cellStats) {
case "R":
cell.getElement().classList.add("yellow-back");
break;
case "F":
cell.getElement().classList.add("blue-back");
break;
case "D":
cell.getElement().classList.add("orange-back");
break;
case "P":
cell.getElement().classList.add("gray-back");
cell.getElement().classList.add("white-font");
break;
case "S":
cell.getElement().classList.add("red-back");
break;
}
return cellVar;
},
// 값에 따라 붉은 글씨
stopStatus: function (tgt, formatterParams) {
var cell = tgt._cell;
let div = document.createElement("div");
// const cellStats = tgt.getValue()?.split(" / ")[1];
const cellVar = tgt.getValue();
if(formatterParams.class) div.className = formatterParams.class;
let nval = cell.value || formatterParams.default;
div.innerHTML = formatterParams.values[nval] || (formatterParams.defaultValue || '');
if (cellVar === 'S') {
tgt.getElement().classList.add("red-font");
}
return div;
},
//토글버튼 출력 red
formatterToggleboxRedIcon: function (tgt, params) {
let cell = tgt._cell;
let span = document.createElement("span");
if(tgt.getData()[params.field] !== params.value){
tgt.getElement().classList.add('tabulator-editable');
}
if ( params.checkval && cell.value == params.checkval || !params.checkval && cell.value == true) {
span.className = "bi bi-toggle-on tb_toggle red";
} else {
span.className = "bi bi-toggle-off tb_toggle red";
}
return span;
},
selectOrNum: function (cell, formatterParams) {
const rowData = cell.getData();
const checkPoint = rowData[formatterParams.checkPoint];
const value = cell.getValue() || "";
const field = cell.getField();
if (checkPoint === "그룹") {
return value;
}
else if(checkPoint === "계획"){
const nextRow = cell.getRow().getNextRow();
const nextRowData = nextRow.getData();
const nextValue = nextRowData[field] || 0
const valueFormat = value === "" ? 0 : value;
if(parseInt(valueFormat)>parseInt(nextValue)){
const rsltCell = nextRow.getCell(field);
rsltCell.getElement().classList.add("red-back");
}else{
const rsltCell = nextRow.getCell(field);
rsltCell.getElement().classList.remove("red-back")
}
return value;
}
else if(checkPoint === "실적"){
const prevRow = cell.getRow().getPrevRow();
const prevRowData = prevRow.getData();
const prevValue = prevRowData[field] || 0
const valueFormat = value === "" ? 0 : value;
if(parseInt(prevValue)>parseInt(valueFormat)){
cell.getElement().classList.add("red-back");
}else{
cell.getElement().classList.remove("red-back")
}
return value;
}
},
// 0000 -> 00:00
time: function (cell, formatterParams, onRendered) {
return cell
.getValue()
.padStart(4, "0")
.replace(/(\d{2})(\d{2})/, "$1:$2");
},
datetime: function (cell, formatterParams) {
const datetime = cell.getValue();
return (
(datetime.getHours() < 10
? "0" + datetime.getHours()
: datetime.getHours()) +
":" +
(datetime.getMinutes() < 10
? "0" + datetime.getMinutes()
: datetime.getMinutes()) +
":" +
(datetime.getSeconds() < 10
? "0" + datetime.getSeconds()
: datetime.getSeconds())
);
},
// 시간 차 계산
diffTitme: function (cell, formatterParams, onRendered) {
let startTime = cell.getRow().getCell("OPER_ST_TM").getValue();
let endTime = cell.getRow().getCell("OPER_ED_TM").getValue();
if (startTime && endTime) {
let start = luxon.DateTime.fromFormat(startTime, "HH:mm");
let end = luxon.DateTime.fromFormat(endTime, "HH:mm");
// 날짜가 반전되는 경우를 처리 (예: 밤샘)
if (end < start) {
end = end.plus({ days: 1 });
}
// 시간 차이 계산
let duration = end.diff(start, "minutes");
return duration.minutes; // 분 단위로 반환
} else {
return ""; // Return empty string if either time is missing
}
},
deleteIcon: function (cell, formatterParams) {
const tgt = cell.getElement();
const isExit = cell.getData()["_STATUS_"];
if(!formatterParams['icon']){
if (isExit !== "I") {
let span = document.createElement("span");
span.className = "bi bi-x-square";
tgt.addEventListener("mouseenter", () => {
span.className = "bi bi-x-square-fill";
});
tgt.addEventListener("mouseleave", () => {
span.className = "bi bi-x-square";
});
return span;
}
return "";
}else{
let span = document.createElement("span");
span.className = "bi bi-x-square";
tgt.addEventListener("mouseenter", () => {
span.className = "bi bi-x-square-fill";
});
tgt.addEventListener("mouseleave", () => {
span.className = "bi bi-x-square";
});
return span;
}
},
checkInspValue: function (cell, formatterParams) {
const rowData = cell.getData();
const checkPoint = formatterParams["checkPoint"];
const upValue = parseFloat(rowData.TOL_UPPER);
const lowValue = parseFloat(rowData.TOL_LOWER);
const value = cell.getValue();
// 셀 DOM 요소 가져오기
// let cell = tgt._cell;
// if ( params.checkval && cell.value == params.checkval || !params.checkval && cell.value == true) {
// } else {
// }
const cellElement = cell.getElement();
// 클래스 추가/제거
if (rowData[checkPoint] === "Y") {
// let span = document.createElement("span");
switch (parseInt(value)) {
case 1:
cellElement.classList.add("green-back");
cellElement.classList.remove("red-back");
return "OK";
case 0:
cellElement.classList.add("red-back");
cellElement.classList.remove("green-back");
return "NG";
default:
cellElement.classList.remove("green-back");
cellElement.classList.remove("red-back");
return "";
}
} else {
if (value) {
const valueNum = parseFloat(value) ? parseFloat(value) : "";
if (valueNum > upValue || valueNum < lowValue) {
cellElement.classList.add("red-back");
cellElement.classList.remove("green-back");
} else {
cellElement.classList.add("green-back");
cellElement.classList.remove("red-back");
}
// 소수점 3자리까지 표시
return valueNum ? valueNum.toFixed(0) : 0;
} else {
return value;
}
}
},
limitValue: function (cell, formatterParams) {
const rowData = cell.getData();
const checkPoint = formatterParams["checkPoint"];
const decimal = formatterParams["decimal"] ? formatterParams["decimal"] : 0;
const value = cell.getValue() ? cell.getValue() : 0;
// 클래스 추가/제거
if (rowData[checkPoint] === "Y") {
if (value !== "") {
// cell.setValue(""); // 셀 값을 빈 문자열로 설정
}
return "";
} else {
if(value !== "" ){
return parseFloat(value).toFixed(decimal);
}
// if(decimal){
// const valuesFormat = parseFloat(value).toFixed(decimal);
// console.log(cell)
// // cell.setValue(`${valuesFormat}`);
// }else{
// return value;
// }
}
},
};
const tb_custom_validator = {
onlyString: function (cell, value, parameters) {
const regex = /^[가-힣A-Za-z\s]+$/;
return regex.test(value);
},
onlyEnglish: function (cell, value, parameters) {
const regex = /^[A-Za-z\s]+$/;
return regex.test(value);
},
stringNumeric: function (cell, value, parameters) {
const regex = /^[가-힣ㄱ-ㅎㅏ-ㅣA-Za-z0-9\/\-\_\s]+$/;
return regex.test(value);
},
};
const tb_custom_edited = {
// checkInspValue: function(cell){
// // 셀 값 가져오기
// const rowData = cell.getData();
// const upValue = parseFloat(rowData.SPEC_VAL) + parseFloat(rowData.TOL_UPPER) * 0.001;
// const lowValue = parseFloat(rowData.SPEC_VAL) - parseFloat(rowData.TOL_LOWER) * 0.001;
// const value = parseFloat(cell.getValue());
// // 셀 DOM 요소 가져오기
// const cellElement = cell.getElement();
// // 클래스 추가/제거
// if(value > upValue || value < lowValue){
// cellElement.classList.add("red-back");
// cellElement.classList.remove("green-back");
// } else {
// cellElement.classList.remove("red-back");
// cellElement.classList.add("green-back");
// }
// }
};
const formFormat = {
telInput: function (input) {
let formattedNumber = input.value.replace(/[^0-9]/g, ""); // 숫자만 추출
// 자동 포맷팅 로직 구현 예시: "123-456-7890" 형식
if (formattedNumber.length > 10) {
formattedNumber =
formattedNumber.slice(0, 3) +
"-" +
formattedNumber.slice(3, 7) +
"-" +
formattedNumber.slice(7);
} else {
formattedNumber =
formattedNumber.slice(0, 3) +
"-" +
formattedNumber.slice(3, 6) +
"-" +
formattedNumber.slice(6);
}
input.value = formattedNumber; // 포맷팅된 번호를 입력 필드에 다시 설정
},
inNumInput: function (input) {
let formattedNumber = input.value.replace(/[^0-9]/g, ""); // 숫자만 추출
// 자동 포맷팅 로직 구현 예시: "123-456-7890" 형식
formattedNumber =
formattedNumber.slice(0, 6) + "-" + formattedNumber.slice(6, 13);
input.value = formattedNumber; // 포맷팅된 번호를 입력 필드에 다시 설정
},
alphanumeric: function (input) {
input.value = input.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
},
submitValidate: function () {
let isValid = true;
return isValid;
},
};