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 align-center">
<p class="main-title flex80">데이터 활용 목록</p>
<PageNavigation />
</div>
<div class="content-wrap">
<div class="content-box">
<div class="content pd10">
<div class="content-titleZone flex justify-between align-center">
<p class="box-title"></p>
<div class="search-bar flex justify-end align-center">
<select
name="searchItem"
id="searchItem"
class="square-select"
v-model="search_data.key"
>
<option value="ttl">제목</option>
<option value="cn">내용</option>
</select>
<div class="search-square">
<input
type="text"
class="square-input"
placeholder="Search"
v-model="search_data.value"
v-on:keyup.enter="customListAllSelect()"
/>
<button
class="square-button blue-btn"
@click="customListAllSelect()"
>
<svg-icon
type="mdi"
:path="searchPath"
class="square-icon"
></svg-icon>
</button>
</div>
</div>
</div>
<div class="table-zone">
<ul class="gall-list flex justify-start align-center">
<li
v-for="(item, index) in customList"
:key="index"
class="gall-list flex25"
@click="customUpdatePage(item.page_id)"
>
<div class="gall-img">
<img :src="item.preview_img_path" />
</div>
<div class="gall-info">
<p class="gall-title">{{ item.ttl }}</p>
<p class="gall-detail">{{ item.cn }}</p>
</div>
</li>
</ul>
<PaginationButton
v-model:currentPage="search.currentPage"
:perPage="search.perPage"
:totalCount="search.totalRows"
:maxRange="5"
:click="customListAllSelect"
/>
</div>
<div class="flex justify-end align-center">
<button class="blue-btn small-btn" @click="customInsertPage">
페이지 등록
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
// icon용 svg import
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
// 컴포넌트 import
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
export default {
data() {
return {
// svg
searchPath: mdiMagnify,
search: _.cloneDeep(this.$getDefaultSerchVO()),
search_data: _.cloneDeep(this.$getDefaultSerchItem("ttl", "String")),
inputValue: null,
customList: [],
};
},
methods: {
customInsertPage: function () {
this.$router.push({ path: "/insertDataAnalytics.page", query: {} });
},
customUpdatePage: function (pageId) {
this.$router.push({
path: "/customSelectOne.page",
query: { page_id: pageId },
});
},
customListAllSelect: function () {
const vm = this;
axios({
url: "/custom/customPageListAllSelect",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: JSON.stringify(vm.search),
})
.then(function (response) {
const res = response.data;
vm.customList = res.resultData.customPageList;
vm.search.totalRows = res.resultData.totalRow;
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
},
components: {
PageNavigation: PageNavigation,
PaginationButton: PaginationButton,
SvgIcon: SvgIcon,
},
mounted() {
this.search.searchObjectList.push(this.search_data);
this.customListAllSelect();
},
};
</script>