HANYANG_MES/show_dir/www/kadm/basecode/basecode_manage.php

<?php
$cate_id = "mnu_basecode"; //현재 메뉴 ID 필수!!!
include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _ADM_INC_PATH_ ."/auth_check.php";

include _ADM_INC_PATH_ ."/header.html";
?>

        <div id="cmd_bar" class="mb-2">
          <div class="h4"><i class="bi bi-files-alt"></i> 기준정보 관리</div>
          <div class="text-right">
          </div>
        </div>

        <div id="base_info_body" class="container-fluid mt-3">
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> 기준정보 리스트</span>

                <select class="form-control-sm form-select-sm inline" v-model="Bran_filter">
                  <option value="">- 전체 -</option>
                  <option :value="code.Code_Uid" v-for="code in OptGroups('','','Code_Exp')">{{code.Code_Exp}} ({{code.Code_Uid}})</option>
                </select>
              </h5>
              <div class="mt-3 cont_hfix">
                <table class="table">
                  <colgroup>
                    <col width="5%"/>
                    <col width="12%"/>
                    <col width="12%"/>
                    <col width="12%"/>
                    <col width="*"/>
                    <col width="10%"/>
                    <col width="10%"/>
                  </colgroup>
                  <thead class="text-center bg-dark text-light top_sticky">
                    <tr>
                      <th>NO</th>
                      <th>Bran Id</th>
                      <th>Group Id</th>
                      <th>Code Id</th>
                      <th>Code Val</th>
                      <th>Code Exp</th>
                      <th>Code Idx</th>
                      <th>Code Use</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-for="(code, idx) in getSortCodeList(Bran_filter)">

                      <tr
                        :class="{'text-center':1,'bg-lightgrey code-start':code.Group_Uid==code.Code_Uid,'bg-warning':code.Group_Uid==forms.Group_Uid && code.Code_Uid==forms.Code_Uid}"
                        @click="putForm(code)">
                      <td style="background:#F4F5F7;" class="text-right">{{idx+1}}</td>
                      <td v-if="code.Bran_Uid==code.Code_Uid"
                          :colSpan="LCodeList.filter(v=>(v.Bran_Uid == code.Bran_Uid && v.Bran_Uid != v.Group_Uid && v.Group_Uid == v.Code_Uid)).length == 0 ? 2 : 1"
                          :rowSpan="LCodeList.filter(v=>v.Bran_Uid == code.Code_Uid).length">
                        <div>{{code.Code_Uid}}<div>({{code.Code_Exp}})</div></div>
                      </td>
                      <td v-if="code.Bran_Uid != code.Group_Uid && code.Group_Uid==code.Code_Uid && LCodeList.filter(v=>(v.Bran_Uid == code.Bran_Uid && v.Group_Uid != v.Bran_Uid && v.Group_Uid == v.Code_Uid)).length > 0"
                          :rowSpan="LCodeList.filter(v=>(v.Bran_Uid == code.Bran_Uid && v.Group_Uid == code.Code_Uid)).length">
                        <div>{{code.Group_Uid}}<div>({{code.Code_Exp}})</div></div>
                      </td>
                      <td v-else-if="code.Bran_Uid==code.Code_Uid && LCodeList.filter(v=>v.Bran_Uid==code.Bran_Uid && v.Group_Uid != code.Bran_Uid).length > 0"></td>
                      <td>{{code.Code_Uid}}</td>
                      <td>{{code.Code_Val}}</td>
                      <td>{{code.Code_Exp}}</td>
                      <td>{{code.Code_Idx}}</td>
                      <td>{{code.Code_Active}}</td>
                    </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col">
              <h5><i class="bi bi-subtract"></i> 기준정보 내용</h5>
              <form method="post" name="codeform" class="mt-3 fadmin" action="###" onsubmit="return false">
                <div class="fld-block">
                  <label for="Bran_Uid" class="form-label">Bran ID</label>
                  <div>
                    <select class="form-select inline" id="Bran_Uid" name="Bran_Uid" v-model="forms.Bran_Uid" :disabled="forms.Bran_Uid != '' && forms.Bran_Uid == forms.Bran_Uid">
                      <option value="">- 상위분류 -</option>
                      <option :value="code.Code_Uid" v-for="code in OptGroups('','','Code_Exp')">{{code.Code_Exp}} ({{code.Code_Uid}})</option>
                    </select>
                  </div>
                </div>
                <div class="fld-block">
                  <label for="Group_Uid" class="form-label">Group ID</label>
                  <div>
                    <select class="form-select inline" id="Group_Uid" name="Group_Uid" v-model="forms.Group_Uid" :disabled="forms.Group_Uid != '' && forms.Group_Uid == forms.Ori_Group_Uid">
                      <option value="">- 상위분류 -</option>
                      <option :value="code.Code_Uid" v-for="code in OptGroups(forms.Bran_Uid||'|','','')">{{code.Code_Exp}} ({{code.Code_Uid}})</option>
                    </select>
                  </div>
                </div>
                <div class="fld-block">
                  <label for="Code_Uid" class="form-label">Code ID</label>
                  <div>
                    <input type="text" class="form-control inline" id="Code_Uid" name="Code_Uid" v-model="forms.Code_Uid" placeholder="Code Id">
                    <small class="text-info">※ ID는 분류내에서 유일한(Unique)한 값이어야 합니다.</small>
                  </div>
                </div>
                <div class="fld-block">
                  <label for="Code_Val" class="form-label">Code Value</label>
                  <div>
                    <input type="text" class="form-control inline" id="Code_Val" name="Code_Val" v-model="forms.Code_Val" placeholder="Code Value">
                  </div>
                </div>
                <div class="fld-block">
                  <label for="Code_Val" class="form-label">Code Explain</label>
                  <div>
                    <input type="text" class="form-control inline" id="Code_Exp" name="Code_Exp" v-model="forms.Code_Exp" placeholder="Code Explain">
                  </div>
                </div>
                <div class="fld-block">
                  <label for="Code_Idx" class="form-label">Code Index</label>
                  <div>
                    <input type="text" class="form-control inline" id="Code_Idx" name="Code_Idx" v-model="forms.Code_Idx" placeholder="Code Index">
                    <small class="text-info">※ 출력순서를 지정합니다. 입력한 index의 후순위 코드들은 자동으로 순위가 변경 적용됩니다.</small>
                  </div>
                </div>
                <div class="fld-block">
                  <label for="Active" class="form-label">Active</label>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="Active" name="Active" true-value="Y" false-value="N" v-model="forms.Code_Active">
                    <small class="text-info">※ 사용하지 않을경우 체크해제 합니다.</small>
                  </div>
                </div>
                <div class="mt-4 text-center">
                  <button type="button" class="btn btn-sm btn-warning px-5" @click="resetForm()">Reset</button> <button type="button" class="btn btn-sm btn-primary px-5" @click="execCode('putCode')">Submit</button> <button type="button" class="btn btn-sm btn-danger px-5" @click="execCode('delCode')">Delete</button>
                </div>
              </form>
            </div>
          </div>
        </div>
<?php

include _ADM_INC_PATH_ ."/footer.html";
?>
<!--
<script type="importmap">
{"imports": {
    "vue": "https://cdn.jsdelivr.net/npm/vue@3.2.39/dist/vue.esm-browser.js"
  }
}
</script>
<script type="module">
  import { createApp } from 'vue'
-->
<script>
const VueBaseCode = createApp({
  data() {
    return {
      ajax_url: './basecode.ajax.php',
      Bran_Use: false, //지금은 안쓴다
      Bran_filter: '',
      CodeList: [],
      forms: {
        Ori_Bran_Uid: '',
        Ori_Group_Uid: '',
        Ori_Code_Uid: '',
        Bran_Uid: '',
        Bran_Active: '',
        Group_Uid: '',
        Group_Active: '',
        Code_Uid: '',
        Code_Active: 'Y',
        Code_Val: '',
        Code_Exp: '',
        Code_Idx: '',
      }
    }
  },
  mounted() {
    let _this = this;
    _this.getCodeList();
  },
  watch: {
    'forms.Bran_Uid': function(val){
      let _this = this;
      if( !_this.forms.Group_Uid ){
        _this.forms.Group_Uid = _this.forms.Bran_Uid;
      }
    }
  },
  computed: {
    Codes() { //Code를 레벨 Object로 변경
      let _this = this;
      let CodeTemp = {};
      _this.LCodeList.forEach(code => {
        CodeTemp[code.Bran_Uid] = CodeTemp[code.Bran_Uid] || {};
        CodeTemp[code.Bran_Uid][code.Group_Uid] = CodeTemp[code.Bran_Uid][code.Group_Uid] || {}
        CodeTemp[code.Bran_Uid][code.Group_Uid][code.Code_Uid] = code;
      });

      return CodeTemp;
    },
    LCodeList() { //CodeList 정렬
      let _this = this;

      return _this.getSortCodeList();
    },
    OptGroups(){
      let _this = this;
      return function(Bran_Uid, Group_Uid, fld, ord){
        return _this.getCodeLevels(Bran_Uid,Group_Uid,fld,ord);
      }
    }
  },
  methods: {
    getCodeList() {
      let _this = this;
      let postdata = {};
      postdata.mode = 'getCodeList';
      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);
        }
      });
    },
    execCode(mode) {
      let _this = this;
      let postdata = Object.assign(_this.forms);
      switch( mode ){
        case "putCode":
        case "setCode":
          postdata.mode = "putCode";
        break;
        case "delCode":
          if( !confirm("관련 Code가 삭제됩니다. 정말 삭제하시겠습니까?") ){
            return false;
          }
          postdata.mode = "delCode";
        break;
      }

      ajax_json({
        url: _this.ajax_url,
        type: "POST",
        data: postdata,
        success: function (data) {
          if (!data.code) {
            kuls_alert(data.mesg); return false;
          }
          _this.getCodeList();
          if( mode == "delCode" ){
            _this.resetForm();
          }else{ //변경내용 적용
            if( _this.forms.Ori_Bran_Uid && _this.forms.Ori_Bran_Uid == _this.forms.Ori_Code_Uid ){
              _this.forms.Ori_Bran_Uid = postdata.Code_Uid;
            }
            if( _this.forms.Bran_Uid && _this.forms.Bran_Uid == _this.forms.Ori_Code_Uid ){
              _this.forms.Bran_Uid = postdata.Code_Uid;
            }
            if( _this.forms.Ori_Group_Uid && _this.forms.Ori_Group_Uid == _this.forms.Ori_Code_Uid ){
              _this.forms.Ori_Group_Uid = postdata.Code_Uid;
            }
            if( _this.forms.Group_Uid && _this.forms.Group_Uid == _this.forms.Ori_Code_Uid ){
              _this.forms.Group_Uid = postdata.Code_Uid;
            }
            if( _this.forms.Ori_Code_Uid ){
              _this.forms.Ori_Code_Uid = postdata.Code_Uid;
            }else{
              let Guid = _this.forms.Group_Uid;
              _this.resetForm();
              _this.forms.Group_Uid = Guid;
            }
          }
        },
        error: function (request, status, error) {
          kuls_alert(error.message);
        }
      });
    },
    resetForm() {
      let _this = this;
      _this.forms = {
        Ori_Bran_Uid: '',
        Ori_Group_Uid: '',
        Ori_Code_Uid: '',
        Bran_Uid: '',
        Group_Uid: '',
        Code_Uid: '',
        Code_Val: '',
        Code_Exp: '',
        Code_Idx: '',
        Gran_Active: '',
        Group_Active: '',
        Code_Active: 'Y',
      };
    },
    putForm( code ) {
      let _this = this;
      _this.forms = {
        Ori_Bran_Uid: code.Bran_Uid,
        Ori_Group_Uid: code.Group_Uid,
        Ori_Code_Uid: code.Code_Uid,
        Bran_Uid: code.Bran_Uid,
        Group_Uid: code.Group_Uid,
        Code_Uid: code.Code_Uid,
        Code_Val: code.Code_Val,
        Code_Exp: code.Code_Exp,
        Code_Idx: code.Code_Idx,
        Gran_Active: code.Gran_Active,
        Group_Active: code.Group_Active,
        Code_Active: code.Code_Active,
      };
    },
    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('#base_info_body');
</script>