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-box flex justify-between">
<div class="flex20 content-box">
<div class="left-content flex100 content-box">
<div class="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>
<div class="flex80 content-box">
<div class="right-content flex100">
<div class="flex-column justify-between">
<div class="flex justify-end">
<div class="search-bar">
<div class="flex justify-end align-center" style="gap: 5px">
<input type="date" name="start-date" id="start-date" class="square-date"
:class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
<span>~</span>
<input type="date" name="end-date" id="end-date" class="square-date"
:class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
<select class="square-select" v-model="search_data1.value">
<option :value="null">공개여부</option>
<option :value="true">공개</option>
<option :value="false">비공개</option>
</select>
<select class="square-select" 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" v-model="search_data3.key">
<option :value="null">검색조건</option>
<option value="post_sj">제목</option>
<option value="post_dc">내용</option>
</select>
<div class="flex justify-end align-center no-gutter">
<input type="text" class="square-input flex90" placeholder="Search" v-model="search_data3.value"
v-on:keyup.enter="searchData()" />
<button class="square-button blue-btn flex10" @click="searchData()">
<svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
</button>
</div>
</div>
</div>
</div>
<div class="content-zone" style="overflow: auto">
<div class="table-zone">
<div class="list-info flex justify-between align-center">
<div class="count-zone">
<p>
총<span>{{ search.totalRows }}</span>건
</p>
</div>
<div class="cunt-selectZone">
<select name="" id="">
<option value="">10개 보기</option>
<option value="">20개 보기</option>
</select>
</div>
</div>
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%" />
<col style="width: 40%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 30%" />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>제목</th>
<th>생성자</th>
<th>부서</th>
<th>카테고리</th>
<th>등록일시</th>
</tr>
</thead>
<tbody>
<template v-if="dataPostList.length > 0">
<tr v-for="(item, indx) in dataPostList" :key="indx" @click="selectPost(item)">
<td>
{{
search.totalRows -
indx -
(search.currentPage - 1) * search.perPage
}}
</td>
<td>{{ item.post_sj }}</td>
<td>{{ item.user_nm }}</td>
<td>{{ item.dept_nm }}</td>
<td>{{ item.ctgry_id }}</td>
<td>{{ $getFullTime(item.creat_dt) }}</td>
</tr>
</template>
<tr v-else>
<td colspan="6">등록된 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
:totalCount="search.totalRows" :maxRange="5" :click="searchData" />
</div>
</div>
<div class="flex justify-end">
<button class="blue-btn small-btn" v-if="type != 'modal'" @click="createDataPost">
데이터 등록
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CodeList from "../../../component/common/Component_CodeList.vue";
import axios from '../../../common/defaultAxios.js';
import PageNavigation from "../../../component/PageNavigation.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import PaginationButton from "../../../component/PaginationButton.vue";
import moment from "moment";
export default {
props: {
type: String,
},
data() {
return {
dataPostList: [],
search: this.$getDefaultSerchVO(),
// 공개여부
search_data1: this.$getDefaultSerchItem("public_at", "bool"),
// 카테고리
search_data2: this.$getDefaultSerchItem("ctgry_id", "string"),
// 선택
search_data3: this.$getDefaultSerchItem("post_sj", "string"),
// 날짜
search_date: {
key: "creat_dt",
value: null,
key2: "creat_dt",
value2: null,
type: "dates",
},
// search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
categoryList: [],
};
},
methods: {
createDataPost: function () {
this.$router.push("/insertDataPost.page");
},
selectCode: function (code) {
this.search_data2.value = code;
this.searchData();
},
selectPost: function (item) {
if (this.type == "modal") {
this.$emit("onSelected", item.dataset_post_id);
return;
}
this.$router.push({
name: "DataPostDetail",
query: { datapost: item.dataset_post_id },
});
},
searchData: function () {
const vm = this;
let check = false;
let authList = vm.$store.state.loginUser.user_auth;
for (let auth of authList) {
if (auth == "ROLE_ADMIN") {
check = true;
break;
}
}
if (!check) {
vm.search.searchObjectList.push({
key: "id",
key2: "dept_code",
type: "string",
value: check + "/" + vm.$store.state.loginUser.user_id,
value2: vm.$store.state.loginUser.dept_code,
});
}
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;
}
})
.catch(function (error) {
vm.$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>