HANYANG_MES/home_dir/www/ksvc/inc/js/popItemOper.js

const createOpt2 = function(optValue, optText){
    const opt = document.createElement('option');
    opt.value = optValue;
    opt.text = optText;

    return opt;
}

class CreatePopup2 {
    constructor(options) {
        const {
            container,
            fields,
            columns,
            selectKey,
            mode,
            tabrow,
            dbClickable,
            setFilter,
        } = options;

        this.container = container;
        this.fields = fields;
        this.columns = columns;
        this.selectKey = selectKey;
        this.mode = mode;
        this.tabrow = tabrow;
        this.dbClickable = dbClickable;


        // 콜백 함수
        this.setFilter = setFilter;
    }

    init() {
        vnLoad('', '/ksvc/inc/popup.php', this.container, (loadHtml) => {
            this.modal = kuls_modal(loadHtml);
            this.setSelectOption();

            //컬럼 공통 규칙
            const commonFieldData = {
                vertAlign: "middle",
                hozAlign: "center",
                resizable: "header",
                headerHozAlign: "center",
                headerSortTristate: true,
            };

            // 테이블 생성
            this.tbModal = new Tabulator(".awn-popup-confirm .hy-table", {
                layout: "fitColumns",
                columns: this.fields, //컬럼 설정
                columnDefaults: commonFieldData,
                headerSortElement: "<i class='bi'></i>", //정렬 아이콘
            });


            const addBtn = document.querySelector("#awn-popup-wrapper .add-btn") || "";
            const removeBtn = document.querySelector("#awn-popup-wrapper .remove-btn") || "";

            const ptResetBtn = document.querySelector("#awn-popup-wrapper #ptReset") || false;
            const textSearch = document.querySelector("#awn-popup-wrapper [name=stxt]") || false;
            const selectSearch = document.querySelector("#awn-popup-wrapper [name=sgrp]") || false;

            if (ptResetBtn) {
                ptResetBtn.addEventListener("click", () => {
                    this.initData();
                    this.modal.delete();
                });
            }

            if (textSearch) {
                textSearch.addEventListener("keyup", () => { //검색어 입력 이벤트
                    this.setFilter(this.tbModal);
                });
            }

            if (this.selectKey) {
                selectSearch.addEventListener("change", () => { //영업분류 변경 이벤트
                    this.setFilter(this.tbModal);
                });
            }

            this.tbModal.on("rowDblClick", (e, tgt) => {
                this.dbClickable && this.dbClick(e, tgt);

            });
            // 테이블 리스트 렌더링
            this.tbModal.on("tableBuilt", () => { //초기 데이터 불러오기 이벤트
                this.getPopList();
            });

            /*
             * @Overview cell 클릭시 체크 또는 팝업
             * @Parameter 이벤트, 셀
             */
            this.tbModal.on("cellClick", (e, tgt) => {
                this.cellClick && this.cellClick(e, tgt);
            });

            // 추가
            ["click", "keypress"].forEach((evt) => {
                addBtn.addEventListener && addBtn.addEventListener(evt, () => {
                    this.addRow && this.addRow();
                });
            });
            // 삭제
            ["click", "keypress"].forEach((evt) => {
                removeBtn.addEventListener && removeBtn.addEventListener(evt, () => {
                    // 삭제 함수
                    this.removeRow && this.removeRow();
                });
            });

        })
        // vnload 끝

    }
    // 선택태그 옵션 생성
    setSelectOption(){
        // 선택태그 있으면
        if(this.selectKey){
            const selectTag = document.querySelector('#sgrp');
            selectTag.options.length = 0;
            const opt = createOpt('','- 전 체 -')
            selectTag.add(opt);

            Object.keys(this.selectKey).forEach(key => {
                selectTag.add(createOpt(key, this.selectKey[key]));
            });
        }
    }
    // 데이터 렌더링
    getPopList(){
        console.log(this.columns);
        ajax_json({
            url: "/ksvc/inc/common.ajax.php",
            data: {mode: this.mode, ITEM_CD : this.columns['ITEM_CD'], },
            success:( data ) => {
                if( data.code ){
                    // console.log(data.data)
                    this.tbModal.setData(data.data);
                    if( this.columns.tgt_filter && this.columns.txt_filter ){
                        document.querySelector(this.columns.tgt_filter).value = this.columns.txt_filter;
                        this.setFilter();
                    }
                }
            },
            error: (request, status, error)=>{
                kuls_alert(error.message);
            },
        });
    };

    setData(e,tgt){
        let row = tgt._row;
        if( this.tabrow ){
            let uptjson = {_STATUS_:this.tabrow.getData()['_STATUS_']||'U'};
            Object.keys(this.columns).forEach( key => {
                // if(!row.data[this.columns[key]]){
                //   row.data[this.columns[key]] = row.data[this.columns[key].replace(/[A-Z]+_/, "")]
                // }
                // uptjson[this.columns[key]] = row.data[this.columns[key]]; // 직접 할당
                uptjson[key] = row.data[this.columns[key]]; // 직접 할당
                // console.log(key)
            } );
            this.tabrow.update(uptjson);
        }else{
            Object.keys(this.columns).forEach( key => {
                document.querySelector("#"+this.columns[key]).value = row.data[key];
            })
        }
    };
    /*
 * @Overview 테이블 행 선택 함수
 * @Parameter 이벤트, 타겟 행
 */
    dbClick(e, tgt) {
        let rowData = tgt._row.data
        this.setData(e, tgt);
        console.log(tgt);
        this.modal.delete();
        // this.tabrow.updateData({[this.columns.tgt_name]:row.data['BIZ_AREA_NM']});
        // tabrow.updateData({[tgt_id]:row.data['BIZ_AREA_CD'],[tgt_name]:row.data['BIZ_AREA_NM'],_STATUS_:tabrow.getData()['_STATUS_']||'U'});
    }
}


const popItemOper = function( columns, tabrow ){

    const fields = [
        { formatter:"rownum", title: "No",           width: 50,  headerSort: false, hozAlign:'center', },
        { field: "OP_CD",     title: "공정코드",     width: 100, },
        { field: "OP_NM",     title: "공정명",       width: 100, },
        { field: "OP_GRP",    title: "공정그룹",     width: 100, },
        { field: "REMK",      title: "비고",         width: 200, },
    ];

    const setTableFilter = function(modal){ //검색어 필터 적용
        let stxt = trim(document.querySelector("#awn-popup-wrapper input[name=stxt]").value);
        modal.setFilter(function(data){
            return (!stxt || data['OP_CD'].search(RegExp(stxt,"is")) !== -1  || data['OP_NM'].search(RegExp(stxt,"is")) !== -1)
        }, '=', true);
    };
    const Tb_modal = new CreatePopup2({
        container: '#popup_oper_container',
        fields: fields,
        columns: columns,
        selectKey: false,
        mode: "getItemOperList",
        tabrow: tabrow,
        dbClickable: true,
        setFilter: setTableFilter,
    });

    Tb_modal.init();
}