과태료통합관리시스템 자바스크립트 파일 추가
parent
aa53a88e9e
commit
5fccfec59d
@ -0,0 +1,113 @@
|
|||||||
|
class FimsFormFields extends FormFields {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* form 에 json data set
|
||||||
|
* element tag에 data-fmt-type 으로 데이타 format이 지정된 경우 해당 포맷으로 출력
|
||||||
|
* @param {object} formObj document.querySelector('form')
|
||||||
|
* @param {object} jsonData json type data
|
||||||
|
*/
|
||||||
|
set(obj){
|
||||||
|
|
||||||
|
document.querySelectorAll(this.children).forEach(input => {
|
||||||
|
|
||||||
|
let prop = input.getAttribute("data-map")
|
||||||
|
|| input.name
|
||||||
|
|| input.id;
|
||||||
|
if (!prop) return;
|
||||||
|
|
||||||
|
let dataItem = obj instanceof DataItem,
|
||||||
|
value = dataItem ? obj.getValue(prop) : obj[prop];
|
||||||
|
|
||||||
|
if ("radio" == input.type) {
|
||||||
|
if (value && value == input.value)
|
||||||
|
input.checked = true;
|
||||||
|
} else if("checkbox" == input.type) {
|
||||||
|
if (value && value == input.value)
|
||||||
|
input.checked = ("Y" === value);
|
||||||
|
} else if(input.tagName == "SELECT") {
|
||||||
|
for(let option of input.options) {
|
||||||
|
if(option.value == value){
|
||||||
|
option.selected = true;
|
||||||
|
} else {
|
||||||
|
option.selected = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(value == null){
|
||||||
|
value = "";
|
||||||
|
}
|
||||||
|
// element data-fmt-type에 정의된 format 적용
|
||||||
|
// dt - yyyy-mm-dd HH:mm:ss, day - yyyy-mm-dd, time - HH:mm:ss, number - #,###
|
||||||
|
if(input.dataset.fmtType){
|
||||||
|
const fmtType = input.dataset.fmtType;
|
||||||
|
switch (fmtType) {
|
||||||
|
case 'dt' :
|
||||||
|
value = StrDateTimeFormat.format(value);
|
||||||
|
break;
|
||||||
|
case 'day' :
|
||||||
|
value = StrDateFormat.format(value);
|
||||||
|
break;
|
||||||
|
case 'time' :
|
||||||
|
value = StrTimeFormat.format(value);
|
||||||
|
break;
|
||||||
|
case 'number' :
|
||||||
|
value = CommaNumberFormat.format(value);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(input.name){
|
||||||
|
|
||||||
|
input.value = value;
|
||||||
|
|
||||||
|
//보안모드 마스킹 항목
|
||||||
|
if(input.tagName === 'INPUT' && input.id && input.classList.contains("privacy")){
|
||||||
|
let maskVal = value.replace(/[0-9a-zA-Z]/g, "*");
|
||||||
|
document.getElementById(input.id+"$mask").value = maskVal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
get() {
|
||||||
|
let obj = {};
|
||||||
|
document.querySelectorAll(this.children).forEach(input => {
|
||||||
|
let property = input.name || input.id;
|
||||||
|
let value = input.value;
|
||||||
|
if ("radio" == input.type) {
|
||||||
|
if (input.checked)
|
||||||
|
obj[property] = value;
|
||||||
|
} else {
|
||||||
|
if(input.dataset.fmtType){
|
||||||
|
const fmtType = input.dataset.fmtType;
|
||||||
|
switch (fmtType) {
|
||||||
|
case 'dt' :
|
||||||
|
value = value.replaceAll("-","").replaceAll(":","").replaceAll(" ","");
|
||||||
|
break;
|
||||||
|
case 'day' :
|
||||||
|
value = value.replaceAll("-","");
|
||||||
|
break;
|
||||||
|
case 'time' :
|
||||||
|
value = value.replaceAll(":","");
|
||||||
|
break;
|
||||||
|
case 'number' :
|
||||||
|
value = value.replaceAll(",","");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
obj[property] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
/**
|
||||||
|
* 숫자를 콤마 포멧으로 변환
|
||||||
|
**/
|
||||||
|
const CommaNumberFormat = {
|
||||||
|
format(value){
|
||||||
|
var reg = /(^[+-]?\d+)(\d{3})/;
|
||||||
|
value += '';
|
||||||
|
while (reg.test(value))
|
||||||
|
value = value.replace(reg, '$1' + ',' + '$2');
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* yyyyMMddHH24miss
|
||||||
|
* yyyy-MM-ddTHH24:mi:ss.xxxxxxZ
|
||||||
|
* @param {string} srcDateStr
|
||||||
|
* @param {string} delimiter
|
||||||
|
* @returns {string|*}
|
||||||
|
*/
|
||||||
|
const StrDateTimeFormat = {
|
||||||
|
format(value){
|
||||||
|
if(value == null || value.isBlank()) return value;
|
||||||
|
|
||||||
|
let srcDate = value.replace(/\-|\s|\:|\.|T|Z/g,'');
|
||||||
|
if(srcDate.length == 8) {
|
||||||
|
return srcDate.substring(0, 4)+"-"+srcDate.substring(4, 6)+"-"+srcDate.substring(6, 8);
|
||||||
|
}else if(srcDate.length >= 14){
|
||||||
|
return srcDate.substring(0, 4)+"-"+srcDate.substring(4, 6)+"-"+srcDate.substring(6, 8)
|
||||||
|
+ ' ' + srcDate.substring(8, 10) + ':' + srcDate.substring(10, 12) + ':' + srcDate.substring(12, 14);
|
||||||
|
}else{
|
||||||
|
return srcDate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const StrDateFormat = {
|
||||||
|
format(value){
|
||||||
|
if(value == null || value.isBlank()) return value;
|
||||||
|
|
||||||
|
let srcDate = value.replace(/\-|\s|\:|\./g,'');
|
||||||
|
if(srcDate.length >= 8) {
|
||||||
|
return srcDate.substring(0, 4)+"-"+srcDate.substring(4, 6)+"-"+srcDate.substring(6, 8);
|
||||||
|
}else{
|
||||||
|
return srcDate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const StrTimeFormat= {
|
||||||
|
format(value){
|
||||||
|
if(value == null || value.isBlank()) return value;
|
||||||
|
|
||||||
|
let srcDate = value.replace(/\-|\s|\:|\./g,'');
|
||||||
|
if(srcDate.length >= 6) {
|
||||||
|
return srcDate.substring(0, 2)+":"+srcDate.substring(2, 4)+":"+srcDate.substring(4, 6);
|
||||||
|
}else{
|
||||||
|
return srcDate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class CodeFormat {
|
||||||
|
_codeList;
|
||||||
|
constructor(codeList) {
|
||||||
|
this._codeList = codeList;
|
||||||
|
}
|
||||||
|
|
||||||
|
format(value) {
|
||||||
|
let txt = "";
|
||||||
|
for (let i=0; i<this._codeList.length; i++){
|
||||||
|
if(value == this._codeList[i].value){
|
||||||
|
txt = this._codeList[i].text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return txt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class FimsDatasetControl extends DatasetControl {
|
||||||
|
constructor(conf) {
|
||||||
|
super(conf);
|
||||||
|
this.dataset = new FimsDataset(conf);
|
||||||
|
|
||||||
|
this.infoSizes = conf.infoSizes || {};
|
||||||
|
this.titles = conf.titles || {};
|
||||||
|
}
|
||||||
|
|
||||||
|
_paginationInfo = {
|
||||||
|
paging : true,
|
||||||
|
pagingType : "nav",
|
||||||
|
pageNum : 1,
|
||||||
|
fetchSize : 15,
|
||||||
|
scrollFuncName : null
|
||||||
|
}
|
||||||
|
|
||||||
|
totalCountSetting(obj){
|
||||||
|
if(document.getElementById('totCnt')){
|
||||||
|
if(obj.data.pagination){ // 부분 조회
|
||||||
|
$('#totCnt span').text(obj.data.pagination.totalSize);
|
||||||
|
}else{ // 전체
|
||||||
|
$('#totCnt span').text(obj.count)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
load(pageNum,flag) {
|
||||||
|
if(this._paginationInfo.paging){
|
||||||
|
this.query.pageNum = pageNum;
|
||||||
|
this.query.fetchSize = this._paginationInfo.fetchSize;
|
||||||
|
} else {
|
||||||
|
this.query.pageNum = 0;
|
||||||
|
this.query.fetchSize = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._load(flag);
|
||||||
|
}
|
||||||
|
|
||||||
|
_load(flag) {
|
||||||
|
if (!this.query.pageNum)
|
||||||
|
this.query.pageNum = 1;
|
||||||
|
json.get({
|
||||||
|
url:this.urls.load,
|
||||||
|
data:this.query,
|
||||||
|
success:resp => this.setData(resp,flag)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setData(obj, flag) {
|
||||||
|
this.dataset.setData(obj,flag);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
class FimsDataset extends Dataset {
|
||||||
|
setData(obj, flag) {
|
||||||
|
let state = this.state;
|
||||||
|
this._byKeys = {};
|
||||||
|
this._current = null;
|
||||||
|
|
||||||
|
obj = obj || {};
|
||||||
|
let array = Array.isArray(obj) ? obj : this.conf.dataGetter(obj) || [];
|
||||||
|
if (!Array.isArray(array))
|
||||||
|
throw new Error("The data must be an array");
|
||||||
|
|
||||||
|
let oldItems = [];
|
||||||
|
if(flag != null && flag == "more"){
|
||||||
|
oldItems = this._items;
|
||||||
|
}
|
||||||
|
|
||||||
|
let newitems = [];
|
||||||
|
newitems = array.map(e => new DataItem(e, this._formats));
|
||||||
|
newitems.forEach(item => {
|
||||||
|
let key = "key-" + this.getKey(item.data);
|
||||||
|
this._byKeys[key] = item;
|
||||||
|
});
|
||||||
|
|
||||||
|
if(flag != null && flag == "more"){
|
||||||
|
this._items = oldItems.concat(newitems);
|
||||||
|
} else {
|
||||||
|
this._items = newitems;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onDatasetChange(obj);
|
||||||
|
this.setState(!Array.isArray(obj) ? obj.state : state);
|
||||||
|
this.onDirtiesChange(this.dirty);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
/**메뉴의 생성과 선택 시 동작을 지원한다.
|
||||||
|
*/
|
||||||
|
class FimsMenuSupport extends MenuSupport {
|
||||||
|
|
||||||
|
constructor(selector) {
|
||||||
|
super(selector);
|
||||||
|
|
||||||
|
this._menuItem = '<li data-key="{menuID}" class="menu-item">'
|
||||||
|
+'<a data-url="{url}" onclick="openMenu(this)" class="menu-link{toggle}">'
|
||||||
|
+'<i class="menu-icon tf-icons bx bx-layout"></i>'
|
||||||
|
+'<div data-i18n="{menuName}">{menuName}</div>'
|
||||||
|
+'</a>'
|
||||||
|
+'{menuSub}'
|
||||||
|
+'</li>';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* Global Variable
|
||||||
|
***************************************************************************/
|
||||||
|
const innerPageMap = {},
|
||||||
|
openMax = 8;
|
||||||
|
|
||||||
|
function openMenu(obj, params) {
|
||||||
|
|
||||||
|
let menuUrl = $(obj)[0].dataset.url;
|
||||||
|
if(menuUrl == "javascript:void(0);"){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let menuNm = $(obj).find("div")[0].dataset.i18n;
|
||||||
|
|
||||||
|
let dataKey = $(obj).parent()[0].dataset.key;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const OPEN_TAB_CNT = $('div#tabsForInnerPage > ul > li').length;
|
||||||
|
|
||||||
|
if(innerPageMap[dataKey]){
|
||||||
|
// 해당 tab 활성화
|
||||||
|
$("#tabsForInnerPage").find("ul li button.nav-link").each((idx, data) => {
|
||||||
|
if(data.dataset.bsTarget == ("#tab-"+dataKey)) {
|
||||||
|
$(data).trigger("click");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let innerPageObj = document.getElementById("div"+dataKey);
|
||||||
|
return innerPageObj;
|
||||||
|
}
|
||||||
|
if(OPEN_TAB_CNT === openMax){
|
||||||
|
alert(`메뉴는 최대 ${openMax -1}까지만 열 수 있습니다.`)
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const num_tabs = OPEN_TAB_CNT + 1;
|
||||||
|
|
||||||
|
|
||||||
|
let liEl = '<li id="li-'+ dataKey +'" class="nav-item">';
|
||||||
|
let linkClass = 'nav-link';
|
||||||
|
if(dataKey != "main"){
|
||||||
|
linkClass += ' nav-link-closeable';
|
||||||
|
}
|
||||||
|
liEl +='<button type="button" data-bs-toggle="tab" data-bs-target="#tab-'+ dataKey + '" class="' + linkClass + '">' + menuNm + '</button>';
|
||||||
|
if(dataKey != "main"){
|
||||||
|
liEl += '<button type="button" title="닫기" class="btn btn-close" onclick="closeTab('+ dataKey + ')"></button>'
|
||||||
|
}
|
||||||
|
liEl += '</li>';
|
||||||
|
$('div#tabsForInnerPage ul').append(liEl);
|
||||||
|
|
||||||
|
$('div#innerPageTabContents').append('<div id="tab-' + dataKey + '" class="tab-pane"></div>');
|
||||||
|
|
||||||
|
|
||||||
|
if(params != null){
|
||||||
|
menuUrl = menuUrl + params;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dynamicPage = document.createElement("div");
|
||||||
|
dynamicPage.setAttribute("id","div"+dataKey);
|
||||||
|
dynamicPage.setAttribute("name","div"+dataKey);
|
||||||
|
dynamicPage.setAttribute("title",menuNm);
|
||||||
|
|
||||||
|
// .attr("frameborder" , "0")
|
||||||
|
// .attr("scrolling" , "no")
|
||||||
|
// .attr("width" , "100%")
|
||||||
|
// .css("border" , "0")
|
||||||
|
// .css("height" , "100%")
|
||||||
|
// .css("min-height" , "800px")
|
||||||
|
// .css("overflow" , "auto")
|
||||||
|
// .css("overflow-x" , "no")
|
||||||
|
;
|
||||||
|
|
||||||
|
$("#formForInnerPage").remove();
|
||||||
|
|
||||||
|
|
||||||
|
$("#tab-" + dataKey)[0].appendChild(dynamicPage);
|
||||||
|
|
||||||
|
|
||||||
|
innerPageMap[dataKey] = dynamicPage;
|
||||||
|
|
||||||
|
|
||||||
|
ajax.request({
|
||||||
|
type:"POST",
|
||||||
|
url:menuUrl,
|
||||||
|
data:{},
|
||||||
|
success:resp => {
|
||||||
|
$("#div"+dataKey).html(resp);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$("div#tabsForInnerPage ul li button.nav-link").last().trigger("click");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeTab(menuId) {
|
||||||
|
if(menuId === 'main' || menuId?.id === 'main') return;
|
||||||
|
const num_tabs = $('div#tabsForInnerPage ul li').length;
|
||||||
|
|
||||||
|
// click한 tab
|
||||||
|
const selIdx = id2Index("div#tabsForInnerPage","tab-"+menuId);
|
||||||
|
|
||||||
|
// active tab
|
||||||
|
let activeTab = $('div#tabsForInnerPage ul li button.nav-link').filter(".active");
|
||||||
|
|
||||||
|
let activeIdx = $('div#tabsForInnerPage ul li button.nav-link').index(activeTab);
|
||||||
|
|
||||||
|
if(selIdx === activeIdx) {
|
||||||
|
if (num_tabs - 1 > activeIdx) {
|
||||||
|
$('div#tabsForInnerPage ul li button.nav-link').eq(activeIdx + 1).trigger("click");
|
||||||
|
} else {
|
||||||
|
$('div#tabsForInnerPage ul li button.nav-link').eq(activeIdx - 1).trigger("click");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("div"+menuId).remove();
|
||||||
|
delete innerPageMap[menuId];
|
||||||
|
|
||||||
|
$("#tab-" + activeIdx).remove();
|
||||||
|
$('#tabsForInnerPage').find('#li-'+menuId).remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function id2Index(tabsId, srcId) {
|
||||||
|
let index = -1;
|
||||||
|
const nls = $(tabsId).find("li > button.nav-link");
|
||||||
|
if(nls.length > 0) {
|
||||||
|
|
||||||
|
nls.each((idx, nl) => {
|
||||||
|
if (nl.dataset.bsTarget.search(srcId) > 0) {
|
||||||
|
index = idx;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return index;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue