pdf 출력 설정 화면 수정

main
이범준 12 months ago
parent f4f5028729
commit d439aed236

@ -116,7 +116,7 @@
<th style="width:140px">텍스트정렬</th> <th style="width:140px">텍스트정렬</th>
<th style="width:110px">글꼴</th> <th style="width:110px">글꼴</th>
<th style="width:110px">글꼴크기</th> <th style="width:110px">글꼴크기</th>
<th style="width:140px">글꼴색</th> <th style="width:80px">글꼴색</th>
<th style="width:110px">글꼴스타일</th> <th style="width:110px">글꼴스타일</th>
<th class="dummy-th"></th> <th class="dummy-th"></th>
</tr> </tr>
@ -172,22 +172,22 @@
<input type="number" class="form-control w-px-90" min="8" max="25" /> <input type="number" class="form-control w-px-90" min="8" max="25" />
</td> </td>
<td data-col="fontColor" class="text-center"> <td data-col="fontColor" class="text-center">
<select class="form-select no-bgi"> <select class="form-select no-bgi w-automin">
<option value="BLACK">검정</option> <option value="BLACK"></option>
<option value="RED">빨강</option> <option value="RED"></option>
<option value="ORANGE">주황</option> <option value="ORANGE"></option>
<option value="YELLOW">노랑</option> <option value="YELLOW"></option>
<option value="YELLOW_GREEN">연두</option> <option value="YELLOW_GREEN"></option>
<option value="GREEN">초록</option> <option value="GREEN"></option>
<option value="CYAN">청록</option> <option value="CYAN"></option>
<option value="BLUE">파랑</option> <option value="BLUE"></option>
<option value="VIOLET">보라</option> <option value="VIOLET"></option>
<option value="MAGENTA">마젠타</option> <option value="MAGENTA"></option>
<option value="DEEP_PINK">짙은분홍</option> <option value="DEEP_PINK"></option>
<option value="LIGHT_GREY">밝은회색</option> <option value="DARK_GREY"></option>
<option value="GREY">회색</option> <option value="GREY"></option>
<option value="DARK_GREY">어두운회색</option> <option value="LIGHT_GREY"></option>
<option value="WHITE">하양</option> <option value="WHITE"></option>
</select> </select>
</td> </td>
<td data-col="fontStyle" class="text-center"> <td data-col="fontStyle" class="text-center">
@ -276,28 +276,33 @@ $(document).ready(function(){
$("#"+tbodyId).append(found); $("#"+tbodyId).append(found);
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,"componentType")).val(data.COMPONENT_TYPE); fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontNm"));
fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontColor"));
fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontStyle"));
$($P.fnGetElement(lastTr,"otptNm")).set(data.OTPT_NM);
$($P.fnGetElement(lastTr,"componentType")).set(data.COMPONENT_TYPE);
$($P.fnGetElement(lastTr,"leftPstn")) $($P.fnGetElement(lastTr,"leftPstn"))
.val(!isEmpty(data.LEFT_PSTN) ? data.LEFT_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "leftPstn")); .set(!isEmpty(data.LEFT_PSTN) ? data.LEFT_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "leftPstn"));
$($P.fnGetElement(lastTr,"topPstn")) $($P.fnGetElement(lastTr,"topPstn"))
.val(!isEmpty(data.TOP_PSTN) ? data.TOP_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "topPstn")); .set(!isEmpty(data.TOP_PSTN) ? data.TOP_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "topPstn"));
$($P.fnGetElement(lastTr,"widthSz")) $($P.fnGetElement(lastTr,"widthSz"))
.val(!isEmpty(data.WIDTH_SZ) ? data.WIDTH_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "widthSz")); .set(!isEmpty(data.WIDTH_SZ) ? data.WIDTH_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "widthSz"));
$($P.fnGetElement(lastTr,"heightSz")) $($P.fnGetElement(lastTr,"heightSz"))
.val(!isEmpty(data.HEIGHT_SZ) ? data.HEIGHT_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "heightSz")); .set(!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.OTPT_NM, "textSort")); .set(!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.OTPT_NM, "fontNm")); .set(!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.OTPT_NM, "fontSz")); .set(!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.OTPT_NM, "fontColor")); .set(!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.OTPT_NM, "fontStyle")); .set(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontStyle"));
} }
$("#"+tbodyId).find("tr").each(function(){ $("#"+tbodyId).find("tr").each(function(){
@ -373,6 +378,7 @@ $(document).ready(function(){
} }
} }
//행 추가
$P.addRow = (otptNm) => { $P.addRow = (otptNm) => {
var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val(); var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val();
var prototypeList; var prototypeList;
@ -397,34 +403,37 @@ $(document).ready(function(){
$("#"+tbodyId).append(template); $("#"+tbodyId).append(template);
var lastTr = $("#"+tbodyId).find("tr").last()[0]; var lastTr = $("#"+tbodyId).find("tr").last()[0];
fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontNm"));
fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontColor"));
fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontStyle"));
if(otptNm != null && otptNm != ""){ if(otptNm != null && otptNm != ""){
$($P.fnGetElement(lastTr,"otptNm")).val(otptNm); $($P.fnGetElement(lastTr,"otptNm")).set(otptNm);
$($P.fnGetElement(lastTr,"componentType")) $($P.fnGetElement(lastTr,"componentType"))
.val($P.fnGetProto(prototypeList, otptNm, "componentType")); .set($P.fnGetProto(prototypeList, otptNm, "componentType"));
$($P.fnGetElement(lastTr,"leftPstn")) $($P.fnGetElement(lastTr,"leftPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "leftPstn")); .set($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
$($P.fnGetElement(lastTr,"topPstn")) $($P.fnGetElement(lastTr,"topPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "topPstn")); .set($P.fnGetProto(prototypeList, otptNm, "topPstn"));
$($P.fnGetElement(lastTr,"widthSz")) $($P.fnGetElement(lastTr,"widthSz"))
.val($P.fnGetProto(prototypeList, otptNm, "widthSz")); .set($P.fnGetProto(prototypeList, otptNm, "widthSz"));
$($P.fnGetElement(lastTr,"heightSz")) $($P.fnGetElement(lastTr,"heightSz"))
.val($P.fnGetProto(prototypeList, otptNm, "heightSz")); .set($P.fnGetProto(prototypeList, otptNm, "heightSz"));
$($P.fnGetElement(lastTr,"textSort")) $($P.fnGetElement(lastTr,"textSort"))
.val($P.fnGetProto(prototypeList, otptNm, "textSort")); .set($P.fnGetProto(prototypeList, otptNm, "textSort"));
$($P.fnGetElement(lastTr,"fontNm")) $($P.fnGetElement(lastTr,"fontNm"))
.val($P.fnGetProto(prototypeList, otptNm, "fontNm")); .set($P.fnGetProto(prototypeList, otptNm, "fontNm"));
$($P.fnGetElement(lastTr,"fontSz")) $($P.fnGetElement(lastTr,"fontSz"))
.val($P.fnGetProto(prototypeList, otptNm, "fontSz")); .set($P.fnGetProto(prototypeList, otptNm, "fontSz"));
$($P.fnGetElement(lastTr,"fontColor")) $($P.fnGetElement(lastTr,"fontColor"))
.val($P.fnGetProto(prototypeList, otptNm, "fontColor")); .set($P.fnGetProto(prototypeList, otptNm, "fontColor"));
$($P.fnGetElement(lastTr,"fontStyle")) $($P.fnGetElement(lastTr,"fontStyle"))
.val($P.fnGetProto(prototypeList, otptNm, "fontStyle")); .set($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
} }
if(tbodyId == "tbodyUnique--${pageName}"){ if(tbodyId == "tbodyUnique--${pageName}"){
@ -440,6 +449,7 @@ $(document).ready(function(){
fnMakeSpinnerSelect(sel, toPrev, toNext); fnMakeSpinnerSelect(sel, toPrev, toNext);
} }
//행 삭제
$P.delRow = (tbodyId) => { $P.delRow = (tbodyId) => {
if($("#"+tbodyId).find("tr").length <= 0){ if($("#"+tbodyId).find("tr").length <= 0){

@ -1,3 +1,24 @@
select {
--pdf-red : rgb(255,0,0);
--pdf-green : rgb(0,255,0);
--pdf-blue : rgb(0,0,255);
--pdf-yellow : rgb(255,255,0);
--pdf-orange : rgb(255,128,0);
--pdf-yellow-green : rgb(128,255,0);
--pdf-cyan : rgb(0,255,255);
--pdf-green-cyan : rgb(0,255,128);
--pdf-cyan-blue : rgb(0,128,255);
--pdf-magenta : rgb(255,0,255);
--pdf-violet : rgb(128,0,255);
--pdf-deep-pink : rgb(255,0,128);
--pdf-white : rgb(255,255,255);
--pdf-light-grey : rgb(192,192,192);
--pdf-grey : rgb(160,160,160);
--pdf-dark-grey : rgb(96,96,96);
--pdf-black : rgb(0,0,0);
}
.doc-example .doc-example-content::before { .doc-example .doc-example-content::before {
font-size : 15px!important; font-size : 15px!important;
} }
@ -611,4 +632,63 @@ span.skeleton {
.modal-header-noheader > .btn-close { .modal-header-noheader > .btn-close {
margin-top: 2rem !important; margin-top: 2rem !important;
} }
/* pdf출력 설정 */
select.option-style-select[data-option-style='FILL_STROKE']{ font-weight: bold; }
select.option-style-select > option[value='FILL_STROKE']{ font-weight: bold; }
select.option-style-select[data-option-style='gulimche']{ font-family: gulimche; }
select.option-style-select[data-option-style='gulim']{ font-family: gulim; }
select.option-style-select[data-option-style='batangche']{ font-family: batangche; }
select.option-style-select[data-option-style='batang']{ font-family: batang; }
select.option-style-select[data-option-style='dotumche']{ font-family: dotumche; }
select.option-style-select[data-option-style='dotum']{ font-family: dotum; }
select.option-style-select[data-option-style='gungsuhche']{ font-family: gungsuhche; }
select.option-style-select[data-option-style='gungsuh']{ font-family: gungsuh; }
select.option-style-select > option[value='gulimche']{ font-family: gulimche; }
select.option-style-select > option[value='gulim']{ font-family: gulim; }
select.option-style-select > option[value='batangche']{ font-family: batangche; }
select.option-style-select > option[value='batang']{ font-family: batang; }
select.option-style-select > option[value='dotumche']{ font-family: dotumche; }
select.option-style-select > option[value='dotum']{ font-family: dotum; }
select.option-style-select > option[value='gungsuhche']{ font-family: gungsuhche; }
select.option-style-select > option[value='gungsuh']{ font-family: gungsuh; }
select.option-style-select[data-option-style='RED']{ color: var(--pdf-red);background-color: var(--pdf-red); }
select.option-style-select[data-option-style='GREEN']{ color: var(--pdf-green);background-color: var(--pdf-green); }
select.option-style-select[data-option-style='BLUE']{ color: var(--pdf-blue);background-color: var(--pdf-blue); }
select.option-style-select[data-option-style='YELLOW']{ color: var(--pdf-yellow);background-color: var(--pdf-yellow); }
select.option-style-select[data-option-style='ORANGE']{ color: var(--pdf-orange);background-color: var(--pdf-orange); }
select.option-style-select[data-option-style='YELLOW_GREEN']{ color: var(--pdf-yellow-green);background-color: var(--pdf-yellow-green); }
select.option-style-select[data-option-style='CYAN']{ color: var(--pdf-cyan);background-color: var(--pdf-cyan); }
select.option-style-select[data-option-style='GREEN_CYAN']{ color: var(--pdf-green-cyan);background-color: var(--pdf-green-cyan); }
select.option-style-select[data-option-style='CYAN_BLUE']{ color: var(--pdf-cyan-blue);background-color: var(--pdf-cyan-blue); }
select.option-style-select[data-option-style='MAGENTA']{ color: var(--pdf-magenta);background-color: var(--pdf-magenta); }
select.option-style-select[data-option-style='VIOLET']{ color: var(--pdf-violet);background-color: var(--pdf-violet); }
select.option-style-select[data-option-style='DEEP_PINK']{ color: var(--pdf-deep-pink);background-color: var(--pdf-deep-pink); }
select.option-style-select[data-option-style='WHITE']{ color: var(--pdf-white);background-color: var(--pdf-white); }
select.option-style-select[data-option-style='LIGHT_GREY']{ color: var(--pdf-light-grey);background-color: var(--pdf-light-grey); }
select.option-style-select[data-option-style='GREY']{ color: var(--pdf-grey);background-color: var(--pdf-grey); }
select.option-style-select[data-option-style='DARK_GREY']{ color: var(--pdf-dark-grey);background-color: var(--pdf-dark-grey); }
select.option-style-select[data-option-style='BLACK']{ color: var(--pdf-black);background-color: var(--pdf-black); }
select.option-style-select > option[value='RED']{ color: var(--pdf-red);background-color: var(--pdf-red); }
select.option-style-select > option[value='GREEN']{ color: var(--pdf-green);background-color: var(--pdf-green); }
select.option-style-select > option[value='BLUE']{ color: var(--pdf-blue);background-color: var(--pdf-blue); }
select.option-style-select > option[value='YELLOW']{ color: var(--pdf-yellow);background-color: var(--pdf-yellow); }
select.option-style-select > option[value='ORANGE']{ color: var(--pdf-orange);background-color: var(--pdf-orange); }
select.option-style-select > option[value='YELLOW_GREEN']{ color: var(--pdf-yellow-green);background-color: var(--pdf-yellow-green); }
select.option-style-select > option[value='CYAN']{ color: var(--pdf-cyan);background-color: var(--pdf-cyan); }
select.option-style-select > option[value='GREEN_CYAN']{ color: var(--pdf-green-cyan);background-color: var(--pdf-green-cyan); }
select.option-style-select > option[value='CYAN_BLUE']{ color: var(--pdf-cyan-blue);background-color: var(--pdf-cyan-blue); }
select.option-style-select > option[value='MAGENTA']{ color: var(--pdf-magenta);background-color: var(--pdf-magenta); }
select.option-style-select > option[value='VIOLET']{ color: var(--pdf-violet);background-color: var(--pdf-violet); }
select.option-style-select > option[value='DEEP_PINK']{ color: var(--pdf-deep-pink);background-color: var(--pdf-deep-pink); }
select.option-style-select > option[value='WHITE']{ color: var(--pdf-white);background-color: var(--pdf-white); }
select.option-style-select > option[value='LIGHT_GREY']{ color: var(--pdf-light-grey);background-color: var(--pdf-light-grey); }
select.option-style-select > option[value='GREY']{ color: var(--pdf-grey);background-color: var(--pdf-grey); }
select.option-style-select > option[value='DARK_GREY']{ color: var(--pdf-dark-grey);background-color: var(--pdf-dark-grey); }
select.option-style-select > option[value='BLACK']{ color: var(--pdf-black);background-color: var(--pdf-black); }

@ -1,3 +1,23 @@
/**************************************************************************
* UI요소 세팅
**************************************************************************/
$.fn.set = function(value) {
return this.each(function(){
if($(this).hasClass('hasDatepicker') && $(this).hasClass('form-date')){
if(value != null && value.length == 8 && value.indexOf("-") == -1){
value = value.substring(0,4) + "-" + value.substring(4,6) + "-" + value.substring(6,8);
}
$(this).datepicker("setDate", value);
} else if($(this).hasClass('option-style-select')){
$(this).val(value);
this.changeUI();
} else {
$(this).val(value);
}
});
}
class FimsFormFields extends FormFields { class FimsFormFields extends FormFields {
/** /**

@ -1,4 +1,6 @@
//지연 /**************************************************************************
* 지연
**************************************************************************/
function sleep(ms) { function sleep(ms) {
return new Promise((r) => setTimeout(r, ms)); return new Promise((r) => setTimeout(r, ms));
} }

@ -1,3 +1,6 @@
/**************************************************************************
* 버튼으로 조작가능한 셀렉트박스
**************************************************************************/
function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){ function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
$(prevBtnEl).on("click", function(){ $(prevBtnEl).on("click", function(){
var selected = $(selectEl).find("option:selected"); var selected = $(selectEl).find("option:selected");
@ -17,4 +20,29 @@ function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
$(selectEl).effect("highlight"); $(selectEl).effect("highlight");
} }
}); });
}
/**************************************************************************
* 선택된 옵션의 스타일이 적용된 셀렉트박스
**************************************************************************/
function fnMakeOptionStyleSelect(selectEl){
$(selectEl).addClass("option-style-select");
selectEl.changeUI = function(){
var selected = $(this).find("option:selected");
if(selected.length <= 0){
selectEl.dataset.optionStyle = "";
return;
}
selectEl.dataset.optionStyle = selected.val();
};
$(selectEl).on("change", function(){
selectEl.changeUI();
});
$(selectEl).changeUI();
} }
Loading…
Cancel
Save