File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content-zone">
<div class="content">
<div class="title-zone">
<div class="section-title">
<p>공통코드관리</p>
</div>
<PagiNavigationBar />
</div>
<div class="setting-box">
<div class="node-zone">
<div class="tree">
<div class="content overflow-y">
<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>
<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-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>
<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>
<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 class="btn-wrap">
<button class="btn sm primary" :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 PagiNavigationBar from "../../../../component/paginavigationbar/PagiNavigationBar.vue";
import {
findAll,
findByCd,
save,
update,
del,
updateListProc,
} from "../../../../../resources/api/codeManage";
import { mdiFileCode } from "@mdi/js";
export default {
components: {
draggable: draggable,
Hierachy: Hierachy,
PagiNavigationBar: PagiNavigationBar,
},
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-zA-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>