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-box flex justify-between">
<div class="flex20 content-box">
<div class="left-content flex100 content-box">
<div class="content-titleZone">
<p class="box-title">카테고리 리스트</p>
</div>
<div class="content-zone">
<CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
</div>
</div>
</div>
<div class="flex80 content-box">
<div class="right-content content-box">
<div class="flex-column justify-between">
<div class="flex justify-end align-center flex5 no-gutter">
<div class="flex justify-end flex100">
<div class="flex justify-end align-center">
<input type="date" name="start-date" id="start-date" class="square-date" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
<span class="coupler">~</span>
<input type="date" name="end-date" id="end-date" class="square-date ml5" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
<select class="square-select ml5" v-model="search_data1.value">
<option :value="null">공개여부</option>
<option :value="1">공개</option>
<option :value="0">비공개</option>
</select>
<select class="square-select ml5" v-model="search_data2.value">
<option :value="null">카테고리</option>
<option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm }} </option>
</select>
<select name="" id="searchItm1" class="square-select ml5" v-model="search_data3.key">
<option :value="null">검색조건</option>
<option value="gis_title">제목</option>
<option value="memo">내용</option>
</select>
<div class="search-square ml5">
<input type="text" class="square-input" placeholder="Search" v-model="search_data3.value" v-on:keyup.enter="searchData()" />
<button class="square-button blue-btn" @click="searchData()">
<svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
</button>
</div>
</div>
</div>
</div>
<div class="table-zone flex85">
<table class="list-table">
<colgroup>
<col style="width: 5%" />
<col style="width: 15%" />
<col style="width: 40%" />
<col style="width: 15%" />
<col style="width: 15%" />
<col style="width: 10%" />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>카테고리</th>
<th>제목</th>
<th>생성자</th>
<th>등록일시</th>
<th>공개여부</th>
</tr>
</thead>
<tbody>
<template v-if="gisInfoList.length > 0">
<tr v-for="(item, indx) in gisInfoList" :key="indx" @click="selectGis(item)">
<td> {{ search.totalRows - indx - (search.currentPage - 1) * search.perPage }} </td>
<td>{{ item.category_id }}</td>
<td>{{ item.gis_title }}</td>
<td>{{ item.gis_creat_id }}</td>
<td>{{ item.gis_creat_dt }}</td>
<td>{{ item.use_at == 1 ? '공개' : '비공개' }}</td>
</tr>
</template>
<template v-else>
<tr>
<td colspan="10">등록된 데이터가 없습니다.</td>
</tr>
</template>
</tbody>
</table>
<PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
</div>
<div class="flex5">
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="createDataPost">데이터 등록</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CodeList from "../../component/common/Component_CodeList.vue";
import axios from "axios";
import PageNavigation from "../../component/PageNavigation.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import PaginationButton from "../../component/PaginationButton.vue";
export default {
data() {
return {
dataPostList: [],
search: this.$getDefaultSerchVO(),
// 공개여부
search_data1: this.$getDefaultSerchItem("use_at", "int"),
// 카테고리
search_data2: this.$getDefaultSerchItem("category_id", "string"),
// 선택
search_data3: this.$getDefaultSerchItem("gis_title", "string"),
// 날짜
search_date: this.$getDefaultSerchItem("gis_creat_dt", "dates"),
categoryList: [],
gisInfoList: [],
};
},
methods: {
createDataPost: function () {
this.$router.push("/gisInfoInsert.page");
},
selectCode: function (code) {
this.search_data2.value = code;
if (code == null) {
this.search_data2.value = null;
this.search_data3.value = null;
}
this.searchData();
},
selectGis: function (item) {
this.$router.push({
path: "/gisInfoListOne.page",
query: { gis_id: item.gis_id },
});
},
searchData: function () {
const vm = this;
axios({
url: "/export/getGisInfoList",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: JSON.stringify(vm.search),
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.gisInfoList = response.data.resultData.gisList;
vm.search.totalRows = response.data.resultData.gisListCount;
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 초기화
init: async function () {
this.search.searchObjectList.push(this.search_date);
this.search.searchObjectList.push(this.search_data1);
this.search.searchObjectList.push(this.search_data2);
this.search.searchObjectList.push(this.search_data3);
this.categoryList = await this.$getCommonCode("DATA_CTGRY");
},
},
computed: {
CodeList,
},
components: {
CodeList: CodeList,
PageNavigation: PageNavigation,
PaginationButton: PaginationButton,
SvgIcon: SvgIcon,
},
mounted() {
this.init();
this.searchData();
},
};
</script>
<style scoped>
.allTitle {
font-size: 15px;
font-weight: bold;
}
</style>