<template> <div class="content-zone sch-full"> <div class="content"> <div class="setting-box h_100"> <div class="node-zone"> <div class="tree"> <draggable tag="ul" class="tree-node" :list="codeList" :group="{ name: 'menu' }" item-key="id" handle=".handle" ghost-class="ghost"> <template #item="{ element }"> <Hierachy :tasks="element" :icon="iconPath" :selectedNode="selectedCd" @changeSelected="fnViewDetail" /> </template> </draggable> </div> <div class="btn-zone"> <template v-if="pageAuth.mdfcnAuthrt == 'Y'"> <button class="btn top sm secondary" @click="topAdd"> TOP+ </button> <button class="btn sub sm secondary" @click="subAdd"> SUB+ </button> <button class="btn save sm" @click="fnListUpdate"> 메뉴 저장 </button> </template> </div> </div> <div class="setting-zone"> <div class="form-box"> <div class="form-box-title"> <p>공통코드정보</p> </div> <div class="form-content"> <div> <label for="" class="form-title">상위코드</label> <input type="text" class="form-control sm" disabled v-model="viewCode.upCd" /> </div> <div> <label for="" class="form-title">상위코드명</label> <input type="text" class="form-control sm" disabled v-model="viewCode.upCdNm" /> </div> <div> <label for="" class="form-title">코드</label> <input type="text" class="form-control sm" :disabled="isFormDisabled || !submitStts" v-model="viewCode.cd" /> </div> <div> <label for="" class="form-title">코드명</label> <input type="text" class="form-control sm" :disabled="isFormDisabled" v-model="viewCode.cdNm" /> </div> <div> <label for="" class="form-title">코드값</label> <input type="text" class="form-control sm" :disabled="isFormDisabled" v-model="viewCode.cdVl" /> </div> <div class="border-bottom"> <label for="" class="form-title">사용여부</label> <div class="check-area"> <div class="form-check"> <input type="radio" name="code" id="y" value="Y" :disabled="isFormDisabled" v-model="viewCode.useYn" /> <label for="y">사용</label> </div> <div class="form-check"> <input type="radio" name="code" id="n" value="N" :disabled="isFormDisabled" v-model="viewCode.useYn" /> <label for="n">미사용</label> </div> </div> </div> <div class="grid-column"> <label for="textarea" class="form-title">코드설명</label> <textarea class="form-control" id="textarea" :disabled="isFormDisabled" v-model="viewCode.cdExpln"></textarea> </div> </div> </div> </div> </div> </div> </div> <div class="btn-wrap"> <button class="btn sm main" :disabled="isFormDisabled" @click="fnSave" v-if="pageAuth.regAuthrt == 'Y'"> <span v-if="submitStts">등록</span> <span v-else>수정</span> </button> <button :class="{ 'btn sm': true, 'red': !isFormDisabled, }" :disabled="isFormDisabled" @click="fnDel" v-if="pageAuth.delAuthrt == 'Y'"> 삭제 </button> </div> </template> <script> import draggable from "vuedraggable"; import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue"; import { findAll, findByCd, save, update, del, updateListProc, } from "../../../../../resources/api/codeManage"; import { mdiFileCode } from "@mdi/js"; export default { components: { draggable: draggable, Hierachy: Hierachy, }, data() { return { // 페이지 권한 객체 pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth, codeList: [], // 코드 목록 iconPath: mdiFileCode, selectedCd: null, // 선택된 코드 newCode: {}, // 신규 코드 등록 viewCode: {}, // 사용자에게 보여질 코드 originCode: null, // 변경전 코드 submitStts: true, }; }, created() { this.findAll(); }, methods: { // 목록 조회 async findAll() { try { const res = await findAll(); if (res.status == 200) { this.codeList = res.data.data.hierachyList; this.newCode = res.data.data.newCode; this.newCode.useYn = "Y"; } } catch (error) { alert(error.response.data.message); } }, fnViewDetail(cd) { this.selectedCd = cd; this.findByCd(); }, // 상세 조회 async findByCd() { if (this.selectedCd == null) return; try { const params = { cd: this.selectedCd }; const res = await findByCd(params); if (res.status == 200) { this.viewCode = res.data.data.code; this.originCode = this.viewCode.cd; this.submitStts = false; } } catch (error) { alert(error.response.data.message); } }, // 저장 async fnSave() { // 유효성 검사 if (this.validation() == false) { return false; } this.viewCode.originCd = this.originCode; // 신규 등록 및 수정 설정 const action = this.viewCode.originCd ? update : save; try { const res = await action(this.viewCode); alert(res.data.message); if (res.status == 200) { this.findAll(); } } catch (error) { alert(error.response.data.message); } }, // 삭제 async fnDel() { if (Object.keys(this.viewCode).length === 0) { alert("삭제 대상을 지정해주세요."); return false; } if ( !confirm( "해당 코드를 삭제하시겠습니까?\n삭제시 하위코드도 모두 삭제됩니다." ) ) return false; try { const res = await del(this.viewCode); if (res.status == 200) { alert(res.data.message); this.viewCode = {}; this.findAll(); } } catch (error) { alert(error.response.data.message); } }, // 최상위 신규 객체 생성 topAdd() { this.viewCode = JSON.parse(JSON.stringify(this.newCode)); this.originCode = this.viewCode.cd; this.submitStts = true; }, // 하위 신규 객체 생성 subAdd() { if (Object.keys(this.viewCode).length === 0) { alert("상위 코드를 지정해주세요."); return; } const upCd = this.viewCode.cd; const upCdNm = this.viewCode.cdNm; this.viewCode = JSON.parse(JSON.stringify(this.newCode)); this.viewCode.upCd = upCd; this.viewCode.upCdNm = upCdNm; this.originCode = null; this.submitStts = true; }, validation() { if ( this.viewCode.cd == null || this.viewCode.cd == "" || this.viewCode.cd == undefined ) { alert("코드를 입력해주세요."); return false; } const alpha = /^[A-Z_]*$/; if (!alpha.test(this.viewCode.cd)) { alert("코드는 영문(대문자)과 언더바(_)만 사용하여 작성해주세요."); return false; } if ( this.viewCode.cdNm == null || this.viewCode.cdNm == "" || this.viewCode.cdNm == undefined ) { alert("코드명을 입력해주세요."); return false; } return true; }, // 드래그앤드롭 // axios: 목록 수정 async fnListUpdate() { try { const res = await updateListProc(this.codeList); alert(res.data.message); if (res.status == 200) { this.findAll(); } } catch (error) { alert(error.res.data.message); } }, }, watch: {}, computed: { isFormDisabled() { if (!this.viewCode) return true; return Object.keys(this.viewCode).length === 0; }, }, mounted() { }, }; </script> <style scoped> .ghost { height: 15px; color: transparent; border: 1px dashed var(--blue); } .ghost * { display: none; } </style>