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="row">
<div class="table-zone pd0">
<table class="form-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 15%" />
<col style="width: 85%" />
</colgroup>
<tbody>
<tr>
<th>데이터 선택</th>
<td>
<button v-if="!dataEdit" class="blue-border-btn small-btn" @click="itmSelectModal = true">아이템 추가</button>
<button class="blue-btn small-btn" @click="execModel">데이터 적용</button>
</td>
</tr>
<tr>
<td colspan="2">
<div class="data-list" :style="'height:' + componentHright + 'px;'">
<ul class="flex">
<li v-for="(itm, indx) in crrentJobGroup.jobItms" :key="indx" class="flex50">
<div class="item flex justify-between align-center">
<p>{{ indx + 1 + ". " + itm.type }}</p>
<div>
<button class="blue-border-btn set-btn" @click="showPopup(indx)">설정</button>
<button v-if="!dataEdit" class="red-border-btn set-btn" @click="deleteConnect(indx)">삭제</button>
</div>
<FileSelect :openPopup="popupToggls[indx]" :jobItem="itm" :mode="itm.type" @closePopup="closePopup(indx)" v-if="itm.type == 'FILE_READ' || itm.type == 'FILE_WRITE'" />
<DatabaseConnection :openPopup="popupToggls[indx]" :jobItem="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'DB_READ'" />
<DataCheck :openPopup="popupToggls[indx]" :jobItem="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'DATA_CHECK'" />
<DataSort :openPopup="popupToggls[indx]" :item="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'DATA_SORT'" />
<DataFilter :openPopup="popupToggls[indx]" :item="itm" @closePopup="closePopup(indx)" v-if="itm.type == 'DATA_FILTER'" />
</div>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-show="itmSelectModal" class="modal-wrapper">
<div class="modal-container small-modal">
<div class="modal-title">
<div class="flex justify-between align-center">
<h2>아이템 선택</h2>
<button class="close-btn" @click="itmSelectModal = false">X</button>
</div>
</div>
<div class="modal-content-monthly">
<div class="justify-center aling-center" style="text-align: center">
<select class="square-select half-input" v-model="selectItm">
<option v-show="crrentJobGroup.datasetPost_id == null" value=""> 데이터셋 읽기 </option>
<option v-show="crrentJobGroup.datasetPost_id == null" value="FILE_READ"> 파일 읽기 </option>
<option v-show="crrentJobGroup.datasetPost_id == null" value="DB_READ"> DB 수집 </option>
<option v-show="crrentJobGroup.datasetPost_id == null" value=""> API 수집 </option>
<option v-show="crrentJobGroup.datasetPost_id == null" value="DATA_SORT"> 데이터검증 </option>
<option v-show="crrentJobGroup.datasetPost_id == null" value="FILE_WRITE"> 파일 쓰기 </option>
<option value="DATA_FILTER">필터 모듈</option>
<option value="DATA_SORT">정렬 모듈</option>
</select>
</div>
</div>
<div class="modal-end flex justify-end">
<button class="darkg-border-btn small-btn" @click="addItm">확인</button>
</div>
</div>
</div>
</template>
<script>
import FileSelect from "./itm/fileSelect.vue";
import DatabaseConnection from "./itm/databaseConnection.vue";
import DataCheck from "./itm/dataCheck.vue";
import DataSort from "./itm/dataSort.vue";
import DataFilter from "./itm/dataFilter.vue";
import axios from "axios";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiTrashCan, mdiCog } from "@mdi/js";
export default {
name: "job-container",
props: {
jobGroup: {
type: Object,
default: null,
},
height: {
type: Number,
default: 100,
},
dataEdit: {
type: Boolean,
default: false,
}
},
data() {
return {
popupToggls: [],
itmSelectModal: false,
// jobGroups: this.jobGroup,
crrentJobGroup: this.jobGroup,
componentHright: this.height,
defaultJobGroup: Object, //JSON.parse(JSON.stringify(this.$getDefaultJobGroup().jobGroup))
defaultJobItm: Object, //JSON.parse(JSON.stringify(this.$getDefaultJobGroup().jobItms))
delPath: mdiTrashCan,
setPath: mdiCog,
selectItm: "DB_READ",
};
},
methods: {
// 팝업 호출
showPopup: function (indx) {
if (
this.crrentJobGroup.jobItms[indx - 1] != null &&
this.crrentJobGroup.datasetPost_id == null
) {
this.crrentJobGroup.jobItms[indx].front_dataTable =
this.crrentJobGroup.jobItms[indx - 1].dataTable;
}
this.popupToggls[indx] = true;
},
closePopup: function (indx) {
this.popupToggls[indx] = false;
},
// 기본 job 데이터
getDefaultJobGroup: function () {
var vm = this;
vm.defaultJobGroup = JSON.parse(
JSON.stringify(vm.$getDefaultJobGroup().jobGroup)
);
vm.defaultJobItm = JSON.parse(
JSON.stringify(vm.$getDefaultJobGroup().jobItem)
);
if (vm.crrentJobGroup == null) {
vm.crrentJobGroup = JSON.parse(JSON.stringify(vm.defaultJobGroup));
}
if (vm.crrentJobGroup.jobItms.length > 0) {
vm.popupToggls = [];
for (let i = 0; i < vm.crrentJobGroup.jobItms; i++) {
vm.popupToggls.push(false);
}
}
console.log("test: ", vm.popupToggls);
},
// 아이템 선택
addItm: function () {
var type = this.selectItm;
this.itmSelectModal = false;
let newItm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().jobItem)
);
newItm.type = type;
newItm.indx = this.crrentJobGroup.jobItms.length + 1;
// 파일 읽기 모듈
if (type == "FILE_READ") {
newItm.itm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().fileRead)
);
}
// 데이터 베이스 연계 모듈
else if (type == "DB_READ") {
newItm.itm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().connectionDb)
);
}
// 데이터 체크모듈 (안씀)
else if (type == "DATA_CHECK") {
newItm.itm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().dataCheck)
);
newItm.itm_option_string = "1";
}
// 데이터 정렬 초기화
else if (type == "DATA_SORT") {
newItm.itm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().dataFilter)
);
newItm.itm.filterItems.push(
JSON.parse(JSON.stringify(this.$getDefaultJobGroup().filterItem))
);
newItm.itm.filterItems[0].cmpr_value = "DESC";
newItm.itm.filterItems[0].cmpr_value2 = "10000";
// 잡그룹이 데이터셋 형일때
if (this.crrentJobGroup.datasetPost_id != null) {
newItm.front_dataTable = JSON.parse(
JSON.stringify(this.crrentJobGroup.dataTable)
);
}
}
// 데이터 필터 초기화
else if (type == "DATA_FILTER") {
newItm.itm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().dataFilter)
);
newItm.itm.match_type = true;
// 잡그룹이 데이터셋 형일때
if (this.crrentJobGroup.datasetPost_id != null) {
newItm.front_dataTable = JSON.parse(
JSON.stringify(this.crrentJobGroup.dataTable)
);
}
}
// 파일 쓰기 모듈
else if (type == "FILE_WRITE") {
newItm.itm = JSON.parse(
JSON.stringify(this.$getDefaultJobGroup().fileRead)
);
}
if (
this.crrentJobGroup.jobItms.length > 0 &&
this.crrentJobGroup.datasetPost_id == null
) {
newItm.front_dataTable =
this.crrentJobGroup.jobItms[
this.crrentJobGroup.jobItms.length - 1
].dataTable;
}
this.popupToggls.push(false);
this.crrentJobGroup.jobItms.push(newItm);
},
execModel: function () {
let vm = this;
axios({
url: "/job/executeJob.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.crrentJobGroup,
})
.then(function (response) {
vm.crrentJobGroup.dataTable = response.data.resultData.dataTable;
vm.$emit('getDataTable', vm.crrentJobGroup.dataTable)
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
deleteConnect: function (indx) {
this.crrentJobGroup.jobItms.splice(indx, 1);
},
},
watch: {
jobGroup: function (v) {
this.crrentJobGroup = v;
},
height: function (v) {
this.componentHright = v;
},
},
components: {
FileSelect: FileSelect,
SvgIcon: SvgIcon,
DataCheck: DataCheck,
DataSort: DataSort,
DataFilter: DataFilter,
},
mounted() {
this.getDefaultJobGroup();
},
};
</script>