pdf 출력 설정 화면 수정

main
이범준 12 months ago
parent f4f5028729
commit d439aed236

@ -116,7 +116,7 @@
<th style="width:140px">텍스트정렬</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 class="dummy-th"></th>
</tr>
@ -172,22 +172,22 @@
<input type="number" class="form-control w-px-90" min="8" max="25" />
</td>
<td data-col="fontColor" class="text-center">
<select class="form-select no-bgi">
<option value="BLACK">검정</option>
<option value="RED">빨강</option>
<option value="ORANGE">주황</option>
<option value="YELLOW">노랑</option>
<option value="YELLOW_GREEN">연두</option>
<option value="GREEN">초록</option>
<option value="CYAN">청록</option>
<option value="BLUE">파랑</option>
<option value="VIOLET">보라</option>
<option value="MAGENTA">마젠타</option>
<option value="DEEP_PINK">짙은분홍</option>
<option value="LIGHT_GREY">밝은회색</option>
<option value="GREY">회색</option>
<option value="DARK_GREY">어두운회색</option>
<option value="WHITE">하양</option>
<select class="form-select no-bgi w-automin">
<option value="BLACK"></option>
<option value="RED"></option>
<option value="ORANGE"></option>
<option value="YELLOW"></option>
<option value="YELLOW_GREEN"></option>
<option value="GREEN"></option>
<option value="CYAN"></option>
<option value="BLUE"></option>
<option value="VIOLET"></option>
<option value="MAGENTA"></option>
<option value="DEEP_PINK"></option>
<option value="DARK_GREY"></option>
<option value="GREY"></option>
<option value="LIGHT_GREY"></option>
<option value="WHITE"></option>
</select>
</td>
<td data-col="fontStyle" class="text-center">
@ -276,28 +276,33 @@ $(document).ready(function(){
$("#"+tbodyId).append(found);
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"))
.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"))
.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"))
.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"))
.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"))
.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"))
.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"))
.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"))
.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"))
.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(){
@ -373,6 +378,7 @@ $(document).ready(function(){
}
}
//행 추가
$P.addRow = (otptNm) => {
var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val();
var prototypeList;
@ -398,33 +404,36 @@ $(document).ready(function(){
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 != ""){
$($P.fnGetElement(lastTr,"otptNm")).val(otptNm);
$($P.fnGetElement(lastTr,"otptNm")).set(otptNm);
$($P.fnGetElement(lastTr,"componentType"))
.val($P.fnGetProto(prototypeList, otptNm, "componentType"));
.set($P.fnGetProto(prototypeList, otptNm, "componentType"));
$($P.fnGetElement(lastTr,"leftPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
.set($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
$($P.fnGetElement(lastTr,"topPstn"))
.val($P.fnGetProto(prototypeList, otptNm, "topPstn"));
.set($P.fnGetProto(prototypeList, otptNm, "topPstn"));
$($P.fnGetElement(lastTr,"widthSz"))
.val($P.fnGetProto(prototypeList, otptNm, "widthSz"));
.set($P.fnGetProto(prototypeList, otptNm, "widthSz"));
$($P.fnGetElement(lastTr,"heightSz"))
.val($P.fnGetProto(prototypeList, otptNm, "heightSz"));
.set($P.fnGetProto(prototypeList, otptNm, "heightSz"));
$($P.fnGetElement(lastTr,"textSort"))
.val($P.fnGetProto(prototypeList, otptNm, "textSort"));
.set($P.fnGetProto(prototypeList, otptNm, "textSort"));
$($P.fnGetElement(lastTr,"fontNm"))
.val($P.fnGetProto(prototypeList, otptNm, "fontNm"));
.set($P.fnGetProto(prototypeList, otptNm, "fontNm"));
$($P.fnGetElement(lastTr,"fontSz"))
.val($P.fnGetProto(prototypeList, otptNm, "fontSz"));
.set($P.fnGetProto(prototypeList, otptNm, "fontSz"));
$($P.fnGetElement(lastTr,"fontColor"))
.val($P.fnGetProto(prototypeList, otptNm, "fontColor"));
.set($P.fnGetProto(prototypeList, otptNm, "fontColor"));
$($P.fnGetElement(lastTr,"fontStyle"))
.val($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
.set($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
}
if(tbodyId == "tbodyUnique--${pageName}"){
@ -440,6 +449,7 @@ $(document).ready(function(){
fnMakeSpinnerSelect(sel, toPrev, toNext);
}
//행 삭제
$P.delRow = (tbodyId) => {
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 {
font-size : 15px!important;
}
@ -612,3 +633,62 @@ span.skeleton {
.modal-header-noheader > .btn-close {
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 {
/**

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

@ -1,3 +1,6 @@
/**************************************************************************
* 버튼으로 조작가능한 셀렉트박스
**************************************************************************/
function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
$(prevBtnEl).on("click", function(){
var selected = $(selectEl).find("option:selected");
@ -18,3 +21,28 @@ function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
}
});
}
/**************************************************************************
* 선택된 옵션의 스타일이 적용된 셀렉트박스
**************************************************************************/
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