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="container">
<div class="page-titleZone flex justify-between align-center">
<p class="main-title flex80">GIS 기능 등록</p>
<PageNavigation />
</div>
<div class="content-wrap">
<div class="content content-box flex-column no-gutter">
<div class="row flex50">
<div class="flex100">
<div class="content-titleZone">
<p class="box-title">1. MarketDB에 등록된 데이터셋만 사용할 수 있습니다.</p>
<p class="box-title">2. WGS84 좌표로 표현된 x좌표와 y좌표를 보유한 데이터셋만 사용할 수 있습니다.</p>
<p class="box-title">3. 사용할 데이터셋의 컬럼명(한글)을 아래와 같이 변경해야 제대로 된 시각화 화면을 조회할 수 있습니다.</p>
<p class="box-title pl10">컬럼: 이름(name), x좌표(x), y좌표(y), 주소(address)</p>
<p class="box-title mt10">
<span class="redfont">*</span>필수 입력 값입니다.
</p>
</div>
<div class="table-zone">
<table class="form-table">
<colgroup>
<col style="width: 10%" />
<col style="width: 40%" />
<col style="width: 10%" />
<col style="width: 40%" />
</colgroup>
<tbody>
<tr>
<th><span class="redfont">*</span>제목</th>
<td>
<input type="text" class="full-input" v-model="gisInfo.gis_title" />
</td>
<th><span class="redfont">*</span>데이터셋</th>
<td>
<button @click="fnTargetDataRead" class="blue-border-btn small-btn">데이터셋 선택</button> {{
gisInfo.dataset_id }}
</td>
</tr>
<tr>
<th><span class="redfont">*</span>카테고리</th>
<td>
<select class="full-input" v-model="gisInfo.category_id">
<option value="null">카테고리 없음</option>
<option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm
}} </option>
</select>
</td>
<th><span class="redfont">*</span>GIS 사용 유무</th>
<td>
<div style="display: flex">
<input id="publicPortalIsUseTrue" name="publicPortalIsUse" type="radio" value="1" class="radio"
v-model="gisInfo.use_at" />
<label for="publicPortalIsUseTrue" class="mr20">사용</label>
<input id="publicPortalIsUseFalse" name="publicPortalIsUse" type="radio" value="0" class="radio"
v-model="gisInfo.use_at" />
<label for="publicPortalIsUseFalse">미사용</label>
</div>
</td>
</tr>
<tr>
<th>내용</th>
<td colspan="3"><textarea name="" id="" v-model="gisInfo.memo"></textarea></td>
</tr>
</tbody>
</table>
</div>
<div class="flex5">
<div class="flex justify-end">
<button v-if="gisInfo.gis_id === null || gisInfo.gis_id === 0" class="blue-btn small-btn"
@click="dataValid">등록</button>
<button v-else class="blue-btn small-btn" @click="dataValid2">수정</button>
<button class="blue-border-btn small-btn" @click="moveList()">취소</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 모달 -->
<NodeSetupModal v-if="isSelectModalOpen" jobItmType="DATASET_READ" @onSave="fnUpdateDatasetSelect"
@onClose="fnCloseDatasetSelectModal" />
</div>
</template>
<script>
import CodeList from "../../component/common/Component_CodeList.vue";
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import store from "../AppStore";
import NodeSetupModal from "../../component/modal/NodeSetupModal.vue";
import axios from "axios";
export default {
data() {
return {
/** openAPI 등록 페이지 설정 */
// 선택한 데이터 셋 리스트
gisInfo: {},
// 데이터셋 선택
isSelectModalOpen: false,
datasetCheckData: 0,
datapostId: null,
inputKeyword: "",
};
},
methods: {
// 타겟 데이터 조회
fnTargetDataRead() {
this.isSelectModalOpen = true;
},
// 타겟 데이터 조회 저장 후 모달 닫기
fnUpdateDatasetSelect(jobItem) {
this.datapostId = jobItem.dataTable.datasetId;
this.gisInfo.dataset_id = this.datapostId
this.fnCloseDatasetSelectModal(); // 타겟 데이터 조회 모달 닫기
},
// 타겟 데이터 조회 모달 닫기
fnCloseDatasetSelectModal() {
this.isSelectModalOpen = false;
},
searchData: function () {
const vm = this;
let idx = this.categoryList.findIndex(
(x) => x.cmmnCode === this.selectedCategory
);
axios({
url: "/dataset/selectDataPostList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: JSON.stringify(vm.search),
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.dataPostList = response.data.resultData.dataPostList;
vm.search.totalRows = response.data.resultData.totalRow;
vm.categoryIdx = idx;
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 초기화
init: async function () {
this.categoryList = await this.$getCommonCode("DATA_CTGRY");
this.gisInfo.gis_id = this.$route.query.gis_id;
let vm = this;
axios({
url: "/export/gisInfoOneSelect",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
gis_id: vm.gisInfo.gis_id
},
})
.then(function (response) {
vm.gisInfo = response.data;
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
/** 페이지 내 기능 설정 */
moveList: function () {
this.$router.push({ path: "/gisInfoList.page", query: {} });
},
datasetCheck: function () {
let vm = this;
axios({
url: "/export/datasetCheck",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
datapostId: vm.gisInfo.dataset_id
},
})
.then(function (response) {
vm.datasetCheckData = response.data;
if (vm.datasetCheckData == 0) {
vm.$showAlert("메세지", "상주마켓 데이터셋을 선택해주세요.");
} else if (vm.datasetCheckData == 1) {
if (!(vm.gisInfo.gis_id === 0)) {
vm.gisInfoUpdate();
} else {
vm.gisInfoInsert();
}
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
datasetCheck2: function () {
let vm = this;
axios({
url: "/export/datasetCheck",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
datapostId: vm.gisInfo.dataset_id
},
})
.then(function (response) {
vm.datasetCheckData = response.data;
if (vm.datasetCheckData == 0) {
vm.$showAlert("메세지", "상주마켓 데이터셋을 선택해주세요.");
} else if (vm.datasetCheckData == 1) {
if (!(vm.gisInfo.gis_id === 0)) {
vm.gisInfoUpdate();
} else {
vm.gisInfoInsert();
}
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
selectGis: function () {
this.$router.push({
path: "/gisInfoListOne.page",
query: { gis_id: this.gisInfo.gis_id },
});
},
// 유효성 검사
dataValid: function () {
let vm = this;
if (
vm.gisInfo.gis_title === null ||
vm.gisInfo.gis_title.trim() === ""
) {
vm.$showAlert("메세지", "제목을 입력해주세요.");
return;
}
if (
vm.gisInfo.category_id === null ||
vm.gisInfo.category_id.trim() === ""
) {
vm.$showAlert("메세지", "카테고리를 선택해주세요.");
return;
}
vm.datasetCheck();
},
dataValid2: function () {
let vm = this;
if (
vm.gisInfo.gis_title === null ||
vm.gisInfo.gis_title.trim() === ""
) {
vm.$showAlert("메세지", "제목을 입력해주세요.");
return;
}
if (
vm.gisInfo.category_id === null ||
vm.gisInfo.category_id.trim() === ""
) {
vm.$showAlert("메세지", "카테고리를 선택해주세요.");
return;
}
vm.datasetCheck2();
},
gisInfoInsert: function () {
let vm = this;
vm.datasetCheckData = 0
vm.gisInfo.gis_creat_id = store.state.loginUser.user_id;
axios({
url: "/export/gisInfoInsert",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.gisInfo,
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.$showAlert("메세지", "Gis 등록에 성공하였습니다.");
vm.$router.push({ path: "/gisInfoList.page" });
} else {
vm.$showAlert("메세지", "등록에 실패하였습니다.");
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
gisInfoUpdate: function () {
let vm = this;
vm.datasetCheckData = 0
vm.gisInfo.gis_creat_id = store.state.loginUser.user_id;
axios({
url: "/export/gisInfoUpdate",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.gisInfo,
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.$showAlert("메세지", "Gis 수정에 성공하였습니다.");
vm.selectGis();
} else {
vm.$showAlert("메세지", "수정에 실패하였습니다.");
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
},
components: {
CodeList: CodeList,
PageNavigation: PageNavigation,
PaginationButton: PaginationButton,
SvgIcon: SvgIcon,
NodeSetupModal: NodeSetupModal,
},
mounted() {
this.init();
}
}
</script>
<style scoped>
.redfont {
color: #eb3939;
}
.del-btn {
width: 20px;
height: 20px;
cursor: pointer;
}
</style>