File name
Commit message
Commit date
File name
Commit message
Commit date
2022-11-06
File name
Commit message
Commit date
<template>
<div class="flex-between m-b" id="siDoHiddenCk">
<label for="">시/도</label>
<select name="siDoSelectList" id="siDoSelectList" v-model="address['siDo_dong_cd']" @change="siDoGunGuSelectF($event)">
<option :value=null disabled> 시/도</option>
<option v-for="(item, key) in siDoList" :key="key" :value="item['dong_cd']">
{{ item['dong_nm'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="gunGuHiddenCk">
<label for="">시/군/구</label>
<select name="gunGuSelectList" id="gunGuSelectList" v-model="address['guGun_dong_cd']" @change="siDoGunGuSelectF($event)">
<option :value=null disabled> 시/군/구 </option>
<option v-for="(item, key) in gunGuList" :key="key" :value="item['dong_cd']">
{{ item['dong_nm'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="dongHiddenCk">
<label for="">행정동</label>
<select name="dongSelectList" id="dongSelectList" v-model="address['dong_dong_cd']" @change="dongSelectF($event)">
<option :value=null disabled> 행정동 </option>
<option v-for="(item, key) in dongList" :key="key" :value="item['dong_cd']">
{{ item['dong_nm'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="nodeHiddenCk">
<label for="">교차로</label>
<select name="nodeSelectList" id="nodeSelectList" v-model="address['node_id']" @change="nodeSelectF($event)">
<option :value=null disabled> 교차로 </option>
<option v-for="(item, key) in nodeList" :key="key" :value="item['node_id']">
{{ item['node_name'] }}
</option>
</select>
</div>
<div class="flex-between m-b" id="crslk_azHiddenCk">
<label for="">방위각</label>
<select name="crslk_azSelectList" id="crslk_azSelectList" v-model="address['crslk_az']">
<option :value="0" disabled> 방위각 </option>
<option :value="10">북</option>
<option :value="50">북동</option>
<option :value="20">동</option>
<option :value="60">남동</option>
<option :value="30">남</option>
<option :value="70">남서</option>
<option :value="40">서</option>
<option :value="80">북서</option>
</select>
</div>
</template>
<script>
import axios from 'axios';
export default {
props:{
siDoHiddenCk:Boolean,
gunGuHiddenCk:Boolean,
dongHiddenCk:Boolean,
nodeHiddenCk:Boolean,
crslk_azHiddenCk:Boolean,
},
data() {
return {
address: {
//지역 설정
dong_cd : "22030",
siDo_dong_cd : "22",
guGun_dong_cd : "22030",
dong_dong_cd : null,
node_id : null,
zoomLevel : null,
crslk_az : null,
},
siDoList: [],
gunGuList: [],
dongList: [],
nodeList:[],
};
},
components: {
},
watch: {
'address.siDo_dong_cd': function (newValue, oldValue) {
console.log("newValue : ", newValue);
console.log("oldValue : ", oldValue);
this.address.dong_cd = newValue;
this.onEmit();
this.address.zoomLevel=11.5;
// this.address.guGun_dong_cd = null;
// this.address.dong_dong_cd = null;
this.gunGuList = null;
this.dongList = null;
this.gunGuSelect(newValue);
},
'address.guGun_dong_cd': function (newValue, oldValue) {
console.log("guGun_dong_cd newValue : ", newValue);
console.log("guGun_dong_cd oldValue : ", oldValue);
this.address.dong_cd = newValue;
this.address.zoomLevel=14;
this.onEmit();
// this.address.dong_dong_cd = null;
this.dongList = null;
if (newValue != null) {
this.dongSelectList(newValue);
}
},
'address.dong_dong_cd': function (newValue, oldValue) {
console.log("dong_dong_cd newValue : ", newValue);
console.log("dong_dong_cd oldValue : ", oldValue);
this.address.dong_cd = newValue;
this.address.zoomLevel=15;
this.findNodeUsingDongSelectList(newValue);
this.onEmit();
},
'address.node_id': function (newValue, oldValue) {
console.log("node_id newValue : ", newValue);
console.log("node_id oldValue : ", oldValue);
this.address.node_id = newValue;
this.address.zoomLevel=19;
this.onEmit();
},
},
methods: {
//시/도 받아오기
siDoSelectList: function () {
const vm = this;
axios({
url: '/dong/siDoSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {}
}).then(function (response) {
console.log("siDoSelectList - response : ", response.data);
vm.siDoList = response.data;
}).catch(function (error) {
console.log("siDoSelectList - error : ", error);
});
},
//군/구 받아오기
gunGuSelect: function (dong_cd) {
const vm = this;
axios({
url: '/dong/gunGuSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'dong_cd': dong_cd }
}).then(function (response) {
console.log("gunGuSelect - response : ", response.data);
vm.gunGuList = response.data;
}).catch(function (error) {
console.log("gunGuSelect - error : ", error);
});
},
//행정동 받아오기
dongSelectList: function (dong_cd) {
const vm = this;
axios({
url: '/dong/dongSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'dong_cd': dong_cd }
}).then(function (response) {
console.log("dongSelectList - response : ", response.data);
vm.dongList = response.data;
}).catch(function (error) {
console.log("dongSelectList - error : ", error);
});
},
//노드(교차로) 받아오기
findNodeUsingDongSelectList: function (dong_cd) {
const vm = this;
axios({
url: '/node/findNodeUsingDongSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'dong_cd': dong_cd }
}).then(function (response) {
console.log("findNodeUsingDongSelectList - response : ", response.data);
vm.nodeList = response.data;
}).catch(function (error) {
console.log("findNodeUsingDongSelectList - error : ", error);
});
},
siDoGunGuSelectF(event){
this.$parent.siDoGunGuSelectF(event)
},
dongSelectF(event){
this.$parent.dongSelectF(event)
},
nodeSelectF(event){
this.$parent.nodeSelectF(event)
},
onEmit() {
console.log("child this.address.dong_cd : ", this.address);
this.$emit("setDongCd", this.address);
},
},
mounted() {
console.log("dongSelectList mounted : ");
this.siDoSelectList();
this.gunGuSelect(this.address.siDo_dong_cd);
this.dongSelectList(this.address.guGun_dong_cd);
this.onEmit();
if(this.siDoHiddenCk){
document.getElementById("siDoHiddenCk").style.display ='none';
}
if(this.gunGuHiddenCk){
document.getElementById("gunGuHiddenCk").style.display ='none';
}
if(this.dongHiddenCk){
document.getElementById("dongHiddenCk").style.display ='none';
}
if(this.nodeHiddenCk){
document.getElementById("nodeHiddenCk").style.display ='none';
}
if(this.crslk_azHiddenCk){
document.getElementById("crslk_azHiddenCk").style.display ='none';
}
},
};
</script>