출력요소 추가,삭제 화면 수정

main
이범준 12 months ago
parent d6348037d9
commit 4e96b0dbc6

@ -42,8 +42,11 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="float-start"> <div class="float-start">
<strong>단일 출력 항목</strong> <strong>단일 출력 항목</strong>
<button type="button" id="btnUniqueAdd--${pageName}" class="btn btn-info">+ 추가</button> <button type="button" id="btnUniqueAdd--${pageName}"
<button type="button" id="btnUniqueDel--${pageName}" class="btn btn-info">- 삭제</button> class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">추가</button>
<ul id="dropdownUniqueAdd--${pageName}" class="dropdown-menu" style="overflow-y: scroll;max-height: 250px">
</ul>
<button type="button" id="btnUniqueDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
</div> </div>
</div> </div>
</div> </div>
@ -68,7 +71,7 @@
<div class="float-start"> <div class="float-start">
<strong>복수 출력 가능 항목</strong> <strong>복수 출력 가능 항목</strong>
<button type="button" id="btnMultipleAdd--${pageName}" class="btn btn-info">+ 추가</button> <button type="button" id="btnMultipleAdd--${pageName}" class="btn btn-info">+ 추가</button>
<button type="button" id="btnMultipleDel--${pageName}" class="btn btn-info">- 삭제</button> <button type="button" id="btnMultipleDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
</div> </div>
</div> </div>
</div> </div>
@ -197,6 +200,10 @@
</tr> </tr>
</template> </template>
<template id="dropdownTemplate--${pageNmae}">
<li><a class="dropdown-item" onclick="{onclick}">{DSCRP}</a></li>
</template>
<script> <script>
var FIM054 = new CommonCodes(${FIM054}); var FIM054 = new CommonCodes(${FIM054});
var FIM047 = new CommonCodes(${FIM047}); var FIM047 = new CommonCodes(${FIM047});
@ -257,7 +264,7 @@ $(document).ready(function(){
for(var i=0; i < prototypeList.length; i++){ for(var i=0; i < prototypeList.length; i++){
var p = prototypeList[i]; var p = prototypeList[i];
components += "<option value='"+p.otptNm+"' data-component-type='"+p.componentType+"'>"+p.dscrp+"</option>"; components += "<option value='"+p.otptNm+"' >"+p.dscrp+"</option>";
} }
for(var i=0; i < dataList.length; i++){ for(var i=0; i < dataList.length; i++){
@ -271,21 +278,26 @@ $(document).ready(function(){
var lastTr = $("#"+tbodyId).find("tr").last()[0]; var lastTr = $("#"+tbodyId).find("tr").last()[0];
$($P.fnGetElement(lastTr,"otptNm")).val(data.OTPT_NM); $($P.fnGetElement(lastTr,"otptNm")).val(data.OTPT_NM);
$($P.fnGetElement(lastTr,"componentType")).val(data.COMPONENT_TYPE); $($P.fnGetElement(lastTr,"componentType")).val(data.COMPONENT_TYPE);
$($P.fnGetElement(lastTr,"leftPstn")).val(data.LEFT_PSTN);
$($P.fnGetElement(lastTr,"topPstn")).val(data.TOP_PSTN); $($P.fnGetElement(lastTr,"leftPstn"))
$($P.fnGetElement(lastTr,"widthSz")).val(data.WIDTH_SZ); .val(!isEmpty(data.LEFT_PSTN) ? data.LEFT_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "leftPstn"));
$($P.fnGetElement(lastTr,"heightSz")).val(data.HEIGHT_SZ); $($P.fnGetElement(lastTr,"topPstn"))
.val(!isEmpty(data.TOP_PSTN) ? data.TOP_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "topPstn"));
$($P.fnGetElement(lastTr,"widthSz"))
.val(!isEmpty(data.WIDTH_SZ) ? data.WIDTH_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "widthSz"));
$($P.fnGetElement(lastTr,"heightSz"))
.val(!isEmpty(data.HEIGHT_SZ) ? data.HEIGHT_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "heightSz"));
$($P.fnGetElement(lastTr,"textSort")) $($P.fnGetElement(lastTr,"textSort"))
.val(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : $P.fnGetProto(prototypeList, data, "textSort")); .val(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : $P.fnGetProto(prototypeList, data.OTPT_NM, "textSort"));
$($P.fnGetElement(lastTr,"fontNm")) $($P.fnGetElement(lastTr,"fontNm"))
.val(!isEmpty(data.FONT_NM) ? data.FONT_NM : $P.fnGetProto(prototypeList, data, "fontNm")); .val(!isEmpty(data.FONT_NM) ? data.FONT_NM : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontNm"));
$($P.fnGetElement(lastTr,"fontSz")) $($P.fnGetElement(lastTr,"fontSz"))
.val(!isEmpty(data.FONT_SZ) ? data.FONT_SZ : $P.fnGetProto(prototypeList, data, "fontSz")); .val(!isEmpty(data.FONT_SZ) ? data.FONT_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontSz"));
$($P.fnGetElement(lastTr,"fontColor")) $($P.fnGetElement(lastTr,"fontColor"))
.val(!isEmpty(data.FONT_COLOR) ? data.FONT_COLOR : $P.fnGetProto(prototypeList, data, "fontColor")); .val(!isEmpty(data.FONT_COLOR) ? data.FONT_COLOR : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontColor"));
$($P.fnGetElement(lastTr,"fontStyle")) $($P.fnGetElement(lastTr,"fontStyle"))
.val(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data, "fontStyle")); .val(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontStyle"));
} }
$("#"+tbodyId).find("tr").each(function(){ $("#"+tbodyId).find("tr").each(function(){
@ -307,17 +319,179 @@ $(document).ready(function(){
return $(tableRow).find("td[data-col='"+colName+"']").children("input, select").first()[0]; return $(tableRow).find("td[data-col='"+colName+"']").children("input, select").first()[0];
} }
$P.fnGetProto = (prototypeList, sggData, colName) => { $P.fnGetProto = (prototypeList, otptNm, stngItemAttrNm) => {
return prototypeList.find((item) => item.otptNm == sggData.OTPT_NM)[colName]; if(stngItemAttrNm == "leftPstn" || stngItemAttrNm == "topPstn"){
var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val();
var paperNm = "";
if(paperSeCd == "01"){
paperNm = "a4";
} else if(paperSeCd == "02"){
paperNm = "letter";
}
var paperObj = prototypeList.find((item) => item.otptNm == otptNm)[paperNm];
if(paperObj == null){
return 0;
}
if(stngItemAttrNm == "leftPstn"){
return paperObj["left"];
}
if(stngItemAttrNm == "topPstn"){
return paperObj["top"];
}
} else {
return prototypeList.find((item) => item.otptNm == otptNm)[stngItemAttrNm];
}
}
$P.choiceOtptNm = () => {
$("#dropdownUniqueAdd--${pageName}").html("");
var prototypeList = $P.otptStngMap.unique.prototypeList;
var existArr = [];
$("#tbodyUnique--sprt01200-main tr").each(function(){
var el = $P.fnGetElement(this,"otptNm");
existArr.push($(el).val());
});
var selectableArr = prototypeList.filter(item => existArr.indexOf(item.otptNm) == -1);
var template = document.getElementById("dropdownTemplate--${pageNmae}");
if(selectableArr.length < 1){
var li = template.innerHTML;
li = li.replace(/{onclick}/gi, "");
li = li.replace(/{DSCRP}/gi, "추가할 수 있는 항목이 없습니다.");
$("#dropdownUniqueAdd--${pageName}").append(li);
} else {
for(var i=0; i < selectableArr.length; i++){
var li = template.innerHTML;
li = li.replace(/{onclick}/gi, "pageObject['${pageName}'].addRow('" + selectableArr[i].otptNm + "')");
li = li.replace(/{DSCRP}/gi, selectableArr[i].dscrp);
$("#dropdownUniqueAdd--${pageName}").append(li);
}
}
}
$P.addRow = (otptNm) => {
var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val();
var prototypeList;
var tbodyId;
if(otptNm == null || otptNm == ""){
prototypeList = $P.otptStngMap.multiple.prototypeList;
tbodyId = "tbodyMultiple--${pageName}";
} else {
prototypeList = $P.otptStngMap.unique.prototypeList;
tbodyId = "tbodyUnique--${pageName}";
}
var components = "<option value='' data-component-type=''>선택</option>";
for(var i=0; i < prototypeList.length; i++){
var p = prototypeList[i];
components += "<option value='"+p.otptNm+"' data-component-type='"+p.componentType+"'>"+p.dscrp+"</option>";
}
var template = document.getElementById("found--${pageName}").innerHTML;
template = template.replace(/{OTPT_FORM_ID}/gi, "");
template = template.replace(/{COMPONENTS}/gi, components);
$("#"+tbodyId).append(template);
var lastTr = $("#"+tbodyId).find("tr").last()[0];
if(otptNm != null && otptNm != ""){
$($P.fnGetElement(lastTr,"otptNm")).val(otptNm);
$($P.fnGetElement(lastTr,"componentType"))
.val($P.fnGetProto(prototypeList, otptNm, "componentType"));
$($P.fnGetElement(lastTr,"leftPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
$($P.fnGetElement(lastTr,"topPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "topPstn"));
$($P.fnGetElement(lastTr,"widthSz"))
.val($P.fnGetProto(prototypeList, otptNm, "widthSz"));
$($P.fnGetElement(lastTr,"heightSz"))
.val($P.fnGetProto(prototypeList, otptNm, "heightSz"));
$($P.fnGetElement(lastTr,"textSort"))
.val($P.fnGetProto(prototypeList, otptNm, "textSort"));
$($P.fnGetElement(lastTr,"fontNm"))
.val($P.fnGetProto(prototypeList, otptNm, "fontNm"));
$($P.fnGetElement(lastTr,"fontSz"))
.val($P.fnGetProto(prototypeList, otptNm, "fontSz"));
$($P.fnGetElement(lastTr,"fontColor"))
.val($P.fnGetProto(prototypeList, otptNm, "fontColor"));
$($P.fnGetElement(lastTr,"fontStyle"))
.val($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
}
if(tbodyId == "tbodyUnique--${pageName}"){
var el = $P.fnGetElement(lastTr,"otptNm");
$(el).attr("disabled","disabled");
$(el).addClass("no-bgi");
}
//셀렉트 스피너
var sel = $P.fnGetElement(lastTr,"textSort");
var toPrev = $(sel).siblings()[0];
var toNext = $(sel).siblings()[1];
fnMakeSpinnerSelect(sel, toPrev, toNext);
}
$P.delRow = (tbodyId) => {
if($("#"+tbodyId).find("tr").length <= 0){
alert('삭제할 항목이 없습니다.');
return;
}
if($("#"+tbodyId).find("input[type='checkbox']:checked").length <= 0){
alert('체크된 항목이 없습니다.');
return;
}
$("#"+tbodyId).find("tr").filter(function(index, selector){
if($(selector).find(":checkbox").is(":checked")){
$(selector).remove();
}
});
} }
$P.fnChangeComponent = (selectElement) => { $P.fnChangeComponent = (selectElement) => {
var tr = $(selectElement).parent().parent()[0]; if($("#tbodyMultiple--${pageName}").find(selectElement).length <= 0){
var componentTypeEl = $P.fnGetElement(tr,"componentType"); return;
}
var selectedOption = $(selectElement).find("option:selected")[0]; var otptNm = $(selectElement).val();
var tr = $(selectElement).parent().parent()[0];
var prototypeList = $P.otptStngMap.multiple.prototypeList;
$($P.fnGetElement(tr,"componentType"))
.val($P.fnGetProto(prototypeList, otptNm, "componentType"));
$($P.fnGetElement(tr,"leftPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
$($P.fnGetElement(tr,"topPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "topPstn"));
$($P.fnGetElement(tr,"widthSz"))
.val($P.fnGetProto(prototypeList, otptNm, "widthSz"));
$($P.fnGetElement(tr,"heightSz"))
.val($P.fnGetProto(prototypeList, otptNm, "heightSz"));
$($P.fnGetElement(tr,"textSort"))
.val($P.fnGetProto(prototypeList, otptNm, "textSort"));
$($P.fnGetElement(tr,"fontNm"))
.val($P.fnGetProto(prototypeList, otptNm, "fontNm"));
$($P.fnGetElement(tr,"fontSz"))
.val($P.fnGetProto(prototypeList, otptNm, "fontSz"));
$($P.fnGetElement(tr,"fontColor"))
.val($P.fnGetProto(prototypeList, otptNm, "fontColor"));
$($P.fnGetElement(tr,"fontStyle"))
.val($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
$(componentTypeEl).val(selectedOption.dataset.componentType);
} }
$P.fnSave = () => { $P.fnSave = () => {
@ -328,6 +502,13 @@ $(document).ready(function(){
$("#theadMultiple--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML); $("#theadMultiple--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() ); $("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
$("#btnUniqueAdd--${pageName}").on("click", () => $P.choiceOtptNm() );
$("#btnMultipleAdd--${pageName}").on("click", () => $P.addRow() );
$("#btnUniqueDel--${pageName}").on("click", () => $P.delRow('tbodyUnique--${pageName}') );
$("#btnMultipleDel--${pageName}").on("click", () => $P.delRow('tbodyMultiple--${pageName}') );
$("#btnSave--${pageName}").on("click", () => $P.fnSave() ); $("#btnSave--${pageName}").on("click", () => $P.fnSave() );
}); });

Loading…
Cancel
Save