HANYANG_MES/home_dir/www/ksvc_old/base/basecode/basecode.js

const VueBaseCode = createApp({
  data() {
    return {
      ajax_url: './basecode.ajax.php',
      Bran_Use: false, //지금은 안쓴다
      Bran_filter: '',
      CodeList: [],
      Ncode: {}, //현재선택코드
    }
  },
  mounted() {
    let _this = this;
    _this.getCodeList();
  },
  computed: {
    LCodeList() { //CodeList 정렬
      let _this = this;

      return _this.getSortCodeList();
    },
  },
  methods: {
    getCodeList() {
      let _this = this;
      let postdata = {};
      postdata.mode = 'getAllCodeList';
      ajax_json({
        url: _this.ajax_url,
        type: "POST",
        data: postdata,
        success: function (data) {
          if (data.code) {
            _this.CodeList = data.data;
          }
        },
        error: function (request, status, error) {
          kuls_alert(error.message);
        }
      });
    },
    getCode(code) {
      let _this = this;

      _this.Ncode = code;
      Tb_Basecode.getMainList(code);
    },
    getSortCodeList( Bran_Uid ) {
      let _this = this;

      return _this.CodeList.filter( v => !Bran_Uid || v.Bran_Uid == Bran_Uid )
      .sort((Fir, Sec) => (Fir.Bran_Idx > Sec.Bran_Idx) ? 1 : -1)
      .sort((Fir, Sec) => (Fir.Bran_Idx != Sec.Bran_Idx) ? 0 : ((Fir.Group_Idx > Sec.Group_Idx) ? 1 : -1))
      .sort((Fir, Sec) => (Fir.Bran_Idx != Sec.Bran_Idx || Fir.Group_Idx != Sec.Group_Idx) ? 0 : ((Fir.Code_Idx2 > Sec.Code_Idx2) ? 1 : -1));
    },
    getCodeLevels( Bran_Uid, Group_Uid, fld, ord ) { //부분 레벨 get 정렬포함
      let _this = this;
      let CodePartTemp = _this.CodeList.filter( v => {
        if( typeof(Bran_Uid) == 'undefined' || Bran_Uid === '' ) return v.Bran_Uid == v.Code_Uid;
        if( typeof(Group_Uid) == 'undefined' || Group_Uid === '' ) return v.Bran_Uid == Bran_Uid && v.Group_Uid == v.Code_Uid;
        return  v.Bran_Uid == Bran_Uid && v.Group_uid == Group_Uid;
      });

      let fld_b = 'Bran_Idx';
      let fld_g = 'Group_Idx';
      let fld_c = 'Code_Idx2';
      let sord = 1;

      if( fld ){
        fld_b = fld;
        fld_g = fld;
        fld_c = fld;
      }
      if( ord ){
        sord = ord;
      }

      return CodePartTemp
        .sort((Fir, Sec) => (Fir[fld_b] > Sec[fld_b]) ? 1 : -1)
        .sort((Fir, Sec) => (Fir[fld_b] != Sec[fld_b]) ? 0 : ((Fir[fld_g] > Sec[fld_g]) ? 1 : -1))
        .sort((Fir, Sec) => (Fir[fld_b] != Sec[fld_b] || Fir[fld_g] != Sec[fld_g]) ? 0 : ((Fir[fld_c] > Sec[fld_c]) ? 1 : -1));
    },
  }
}).mount('#frame_contents');


//Grid용 클래스. 블록 처리용
class Tb_class_Basecode {
  constructor(){
    let _this = this;
    _this.tblList = "";
    _this.Code = {};
    _this.ajax_url = "./basecode.ajax.php";
  }

  //리스트 로드
  getMainList (code) {
    let _this = this;

    let talert = window.setTimeout(function () { _this.tblList.alert("Loading ...") }, 1000); //1초 이상 지연되면 로딩 출력
    ajax_json({
      url: _this.ajax_url,
      data: {
        mode: 'getCodeList',
        Bran_Uid: code.Bran_Uid,
        Group_Uid: code.Bran_Uid !== code.Group_Uid ? code.Group_Uid : "",
      },
      success: function (data) {
        if (data.code) {
          let gnum = data.data.filter(v=>v.Bran_Uid !== v.Code_Uid && v.Group_Uid === v.Code_Uid).length; //gnum 이 0보다 크면 3단 코드
          if( gnum > 0 ){
            if( code.Bran_Uid === code.Group_Uid ){
              _this.Code = { Bran_Uid:code.Bran_Uid, Group_Uid:'', Code_Exp:code.Code_Exp, };
            }else{
              _this.Code = { Bran_Uid:code.Bran_Uid, Group_Uid:code.Group_Uid, Code_Exp:code.Code_Exp, };
            }
          }else{
            _this.Code = { Bran_Uid:code.Bran_Uid, Group_Uid:code.Bran_Uid, Code_Exp:code.Code_Exp, };
          }

          if( code.Bran_Uid === code.Group_Uid && data.data.filter(v=>v.Bran_Uid !== v.Group_Uid).length ){
            _this.tblList.setData(data.data.filter(v=>v.Bran_Uid !== v.Code_Uid && v.Group_Uid === v.Code_Uid));
          }else{
            _this.tblList.setData(data.data.filter(v=>v.Bran_Uid !== v.Code_Uid && v.Group_Uid !== v.Code_Uid));
          }
          //2단 사용시 위 제외하고 아래만 존재하면 된다.
          //_this.tblList.setData(data.data.filter(v=>v.Bran_Uid !== v.Code_Uid && v.Group_Uid !== v.Code_Uid));

          document.querySelector("#txtBaseTitle").innerHTML=`( ${_this.Code['Code_Exp']} )`;
          document.querySelector("#btnAddBcode").removeAttribute("disabled");
          document.querySelector("#btnPutBcode").removeAttribute("disabled");
        }else{
          kuls_alert(data.mesg);
        }
      },
      error: function (request, status, error) {
        kuls_alert(error.message);
      },
      complete: function () {
        window.clearTimeout(talert);
        _this.tblList.clearAlert();
      }
    });
    return true;
  };

  //Row 추가
  addRow(){
    let _this = this;
    _this.tblList.addRow({
      _STATUS_  : 'I',
      Bran_Uid  : _this.Code.Bran_Uid,
      Group_Uid : _this.Code.Group_Uid,
    });
  }

  // 아이템 등록
  putBcode (){
    let _this = this;

    let postdata = {
      'mode'    : 'putCode',
      'reqdata' : JSON.stringify(_this.tblList.getData().filter(row=> row._STATUS_ && (row._STATUS_ !== 'I' || row.Code_Active === 'Y')) ),
    };

    ajax_json({
      url     : _this.ajax_url,
      data    : postdata,
      success : function (data) {
        if (data.code) {
          kuls_success("저장되었습니다.");
          VueBaseCode.getCodeList();
        }else{
          kuls_alert(data.mesg);
        }
      },
      error: function (request, status, error) {
        kuls_alert(error.message);
      },
      complete: function () {
      }
    });
    return true;
  };

  //Cell 클릭 콜백
  cellClick (e, tgt) {
    switch( tgt.getField() ){
      case "Code_Active":
        tgt.setValue( tgt.getValue() == "Y"?"N":"Y" );
      break;
    }
  };

  //Cell 변경 콜백
  cellEdited (cell){
    let _this = this;
    cell.getData()._STATUS_ = cell.getData()._STATUS_||'U';
  };

  //시작 실행
  init () {
    let _this = this;

    const fields = [
      { formatter:"rownum",    title: "No",   width:'10%', minWidth: 50,  headerSort: false, hozAlign:'center', },
      { field: "Code_Uid",     title: "Code", width:'15%', minWidth: 100, editor:'input', editable:(cell)=>{ let val = cell.getData(); return val._STATUS_ === 'I' }, },
      { field: "Code_Val",     title: "Value", width:'30%', minWidth: 160, editor:'input', },
      { field: "Code_Exp",     title: "설명", width:'30%', minWidth: 160, editor:'input', },
      { field: "Code_Active",  title: "사용", width:'15%', minWidth: 60,  cssClass:'user-editable', formatter: tb_common_funtions.formatterToggleboxGreenIcon, formatterParams: {checkval:'Y'}, },
    ];

    _this.tblList = new Tabulator("#tblBaseList", {
      layout:"fitColumns",
      data: [], //기본 데이터
      height: "100%",
      columns: fields, //컬럼 설정
      columnDefaults: { //컬럼 공통 규칙
        vertAlign:"middle",
        hozAlign: "center",
        resizable: "header",//Resize 는 헤더에서만 가능
        headerHozAlign: "center", //헤더 정렬
        headerSortTristate:true, //정렬 => 정/역/초기화
      },
      movableRows: true,
      headerSortElement: "<i class='bi'></i>", //정렬 아이콘
    });

    _this.tblList.on("cellClick", (e,tgt) => { //Tabulator cell Click
      _this.cellClick && _this.cellClick(e,tgt);
    });
    _this.tblList.on("cellEdited", (e,tgt) => { //Tabulator cell Click
      _this.cellEdited && _this.cellEdited(e,tgt);
    });
    _this.tblList.on("tableBuilt", () => { //Tabulator 초기 데이터 불러오기 이벤트
      //_this.getMainList();
    });

    ['click','keypress'].forEach(evt => document.querySelector("#btnAddBcode").addEventListener(evt,()=>{_this.addRow()}));
    ['click','keypress'].forEach(evt => document.querySelector("#btnPutBcode").addEventListener(evt,()=>{_this.putBcode()}));
  };
}


const Tb_Basecode = new Tb_class_Basecode();
Tb_Basecode.init();