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="scroll">
<div class="title-zone">
<div class="page-title">
<p>IP접근제어</p>
</div>
</div>
<div class="form-box">
<div class="form-box-title">
<p>기본정보</p>
<p><span>*</span>필수입력</p>
</div>
<div class="form-content">
<div>
<label for="" class="form-title"><span>*</span> 제어 유형</label>
<select name="selectType" id="selectType" class="form-select sm"
v-model="accesCtrl.cntrlType">
<option value="">전체</option>
<option v-for="(item, idx) in codeList" :key="idx" :value="item.cd">{{ item.cdNm }}
</option>
</select>
</div>
<div>
<label for="" class="form-title"><span>*</span> 제어 IP</label>
<div class="form-group">
<input type="text" class="form-control sm" v-model="accesCtrl.cntrlIp" placeholder="1~255 범위의 숫자로 구성하여 형식에 맞게 작성해주세요." />
<span>ex) 192.168.0.1 / 192.168.0.*</span>
</div>
</div>
<div>
<label for="" class="form-title"><span>*</span> 제어 경로</label>
<input type="text" class="form-control sm" v-model="accesCtrl.cntrlCrs" placeholder="제어할 경로 URL을 입력하세요."/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<button class="btn sm primary" @click="fnInsert">{{ accesCtrl.acsCntrlId == 0 ? '등록' :
'수정'}}</button>
<button class="btn sm tertiary" @click="fnCancel">취소</button>
</div>
</template>
<script>
import { findByAcces, save, update } from '../../../../../resources/api/accesCtrl'
export default {
components: {
},
data() {
return {
codeList: [], // 유형
accesCtrl: {} // 접근제어 객체
}
},
created() {
this.fnSelectOne();
},
methods: {
// 목록으로 이동
fnCancel() {
if (!confirm('등록을 취소하시겠습니까?')) {
return;
}
if (this.accesCtrl.acsCntrlId == null || this.accesCtrl.acsCntrlId == 0) {
this.$router.push({
name: 'admNetworkAccessControlSelectList',
});
} else {
this.$router.push({
name: 'admNetworkAccessControlSelectListOne',
query: {
pageId: this.accesCtrl.acsCntrlId
},
});
}
},
// 조회
async fnSelectOne() {
try {
const params = {
'acsCntrlId': this.$route.query.pageId
}
const res = await findByAcces(params);
this.accesCtrl = res.data.data.accesCtrl; // 접근제어 객체
if (this.accesCtrl.acsCntrlId == 0) {
this.accesCtrl.cntrlType = ''; // 공백으로 초기화
}
this.codeList = res.data.data.codeList; // 유형
} catch (error) {
alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
}
},
fnInsert() {
if (this.accesCtrl.acsCntrlId == null || this.accesCtrl.acsCntrlId == 0) {
this.fnSave();
} else {
this.fnUpdate();
}
},
// 등록
async fnSave() {
if (!this.Validation()) {
return;
}
try {
const res = await save(this.accesCtrl);
alert(res.data.message);
const acsCntrlId = res.data.data.acsCntrlId;
if (res.status == 200) {
this.$router.push({
name: 'admNetworkAccessControlSelectListOne',
query: {
pageId: acsCntrlId
},
});
}
} catch (error) {
alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
}
},
// 수정
async fnUpdate() {
if (!this.Validation()) {
return;
}
try {
const res = await update(this.accesCtrl);
alert(res.data.message);
if (res.status == 200) {
this.$router.push({
name: 'admNetworkAccessControlSelectListOne',
query: {
pageId: this.accesCtrl.acsCntrlId
},
});
}
} catch (error) {
alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
}
},
// 유효성 검사
Validation() {
// const ipFilter = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
const ipFilter = /^(\*|[1-9]?[0-9]|1\d\d|2[0-4]\d|25[0-5])(\.(\*|[1-9]?[0-9]|1\d\d|2[0-4]\d|25[0-5])){3}$/;
if (this.accesCtrl.cntrlType == null || this.accesCtrl.cntrlType == '') {
alert('제어 유형을 지정해주세요.');
return false;
}
if (this.accesCtrl.cntrlIp == null || this.accesCtrl.cntrlIp == '') {
alert('제어 IP를 입력해주세요.');
return false;
} else if (!ipFilter.test(this.accesCtrl.cntrlIp)) {
alert('ip 형식이 다릅니다.');
return false;
}
if (this.accesCtrl.cntrlCrs == null || this.accesCtrl.cntrlCrs == '') {
alert('제어 경로를 입력해주세요.');
return false;
}
return true;
}
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>