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 v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title">
<div class="flex justify-between align-center">
<h2>데이터 셋 선택</h2>
<button class="close-btn" @click="$emit('closePopup')">
<svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
</button>
</div>
</div>
<div class="content-wrap">
<div class="content-box flex justify-between">
<div class="flex20 content-box">
<div class="left-content flex100 content-box">
<CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
</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="true">공개</option>
<option :value="false">비공개</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="post_sj">제목</option>
<option value="post_dc">내용</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">
<div class="list-info flex justify-between align-center">
<div class="count-zone">
<p>총 <span>40</span>건 중 <span>01</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: 30%" />
<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.creat_id }}</td>
<td>{{ item.dept_code }}</td>
<td>{{ item.ctgry_id }}</td>
<td>{{ item.creat_dt }}</td>
</tr>
</template>
<template v-else>
<tr>
<td colspan="6">등록된 데이터가 없습니다.</td>
</tr>
</template>
</tbody>
</table>
<PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
</div>
<div>
<label :for="comId + 'forder'" style="padding-left: 255px">
<p class="width150 fl mt7" style="margin-bottom: 10px"> 데이터셋(ID) </p>
<input type="text" :name="comId + 'forder'" class="input_M width50p fl" v-model="selectedDatasetId" readonly />
</label>
</div>
<div class="flex5">
<div class="flex justify-end">
<button class="darkg-btn small-btn" @click="complite"> 완료 </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiClose } from "@mdi/js";
import axios from "axios";
import CodeList from "../../common/Component_CodeList.vue";
import PaginationButton from "../../PaginationButton.vue";
export default {
components: {
SvgIcon: SvgIcon,
CodeList: CodeList,
PaginationButton: PaginationButton,
},
props: {
openPopup: {
type: Boolean,
default: false,
},
jobItem: {
type: Boolean,
default: null,
},
},
data() {
return {
isModalOpen: this.openPopup,
closePath: mdiClose,
jobItm: this.jobItem,
activeTab: "tab1",
modalType: "tab-modal",
//차트 Box ID (랜덤값 필수)
categoryList: [],
pagination: {},
selectedDatasetId: null, // 선택한 데이터 셋 아이디
// 데이터셋 목록
datasetPostList: [],
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: this.$getDefaultSerchItem("creat_dt", "dates"),
categoryList: [],
};
},
mounted() {
this.init();
},
watch: {
openPopup(v) {
this.isModalOpen = v;
},
jobItem(v) {
this.jobItemInfo = v;
},
},
methods: {
async init() {
if (!this.jobItem) {
this.jobItm = Object.assign({}, this.$getDefaultJobGroup().node);
this.jobItm.itm = Object.assign(
{},
this.$getDefaultJobGroup().DatasetPost
);
} else {
this.selectedDatasetId = this.jobItm.itm.dataset_post_id;
}
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");
},
// 탭 변경
showTab(tabName) {
this.activeTab = tabName;
},
// 카테고리 선택
categorySelect(item) {
this.pagination.categoryId = item.categoryId;
this.searchDatasetPostList();
},
//데이터셋 검색
searchDatasetPostList() {
this.pagination.currentPage = 1;
this.getDatasetPostList();
},
//데이터셋 데이터 리스트 타이틀 가져오기
getDatasetTitle(info) {
if (info.isStandard == true) {
return info.title;
} else {
return info.title + " (표준화필요)";
}
},
selectCode(code) {
this.search_data2.value = code;
this.searchData();
},
// 완료버튼 클릭
complite() {
const vm = this;
axios({
url: "/dataset/getDataTableInfo.json",
method: "post",
headers: { "Content-Type": "application/json; charset=UTF-8" },
data: { datapost_id: vm.selectedDatasetId },
})
.then(function (response) {
vm.jobItm.dataTable = response.data.resultData.dataTable;
vm.$emit("saveNodeData", vm.jobItm);
})
.catch(function (error) {
vm.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
selectPost(item) {
this.jobItm.itm = item;
this.selectedDatasetId = item.dataset_post_id;
},
searchData() {
const vm = this;
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) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
},
computed: {
CodeList,
},
};
</script>