500 lines
12 KiB
Vue
500 lines
12 KiB
Vue
<template>
|
|
<v-row class="search-box" align="center" no-gutters>
|
|
<v-col :cols="4">
|
|
<label for="" class="search-box-label">
|
|
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
|
{{ label }}
|
|
</label>
|
|
</v-col>
|
|
|
|
<v-dialog
|
|
ref="popModal"
|
|
v-model="dialog"
|
|
width="600"
|
|
overlay-color="#000"
|
|
overlay-opacity="0.8"
|
|
scrollable
|
|
>
|
|
<v-card style="height: 100%">
|
|
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
|
<span class="custom-title-4">{{ label }}</span>
|
|
<v-btn icon tile :ripple="false" @click="btnAction('close')">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-card-title>
|
|
<!-- <v-card-actions> -->
|
|
<div class="pa-5">
|
|
<v-row class="search-box" align="center" no-gutters>
|
|
<v-col :cols="3">
|
|
<label class="search-box-label">
|
|
<v-icon x-small color="primary" class="mr-1"
|
|
>mdi-record-circle</v-icon
|
|
>
|
|
실행 일자
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="9">
|
|
<div class="calcDtpicker-container">
|
|
<v-text-field
|
|
id="calcDtpicker"
|
|
ref="calcDtpicker"
|
|
v-model="calcDt"
|
|
:class="'v-input__custom'"
|
|
:hide-details="true"
|
|
readonly
|
|
outlined
|
|
>
|
|
<template #append>
|
|
<v-icon size="20">$icoCalendar</v-icon>
|
|
</template>
|
|
<template #append-outer>
|
|
<div
|
|
ref="calcDtpicker-container"
|
|
id="calcDtpicker-container"
|
|
></div>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<!-- </v-card-actions> -->
|
|
<span class="pa-4">고급옵션</span>
|
|
<div class="px-5 pb-4">
|
|
<v-row class="search-box py-2" align="center" no-gutters>
|
|
<v-col :cols="3">
|
|
<label class="search-box-label">
|
|
<v-icon x-small color="#fb8200" class="mr-1"
|
|
>mdi-record-circle</v-icon
|
|
>
|
|
CBL days
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="9">
|
|
<v-text-field
|
|
v-model="cblClacDays"
|
|
class="v-input__custom"
|
|
outlined
|
|
:hide-details="true"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="search-box py-2" align="center" no-gutters>
|
|
<v-col :cols="3">
|
|
<label class="search-box-label">
|
|
<v-icon x-small color="#fb8200" class="mr-1"
|
|
>mdi-record-circle</v-icon
|
|
>
|
|
MIN/MAX days
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="9">
|
|
<v-text-field
|
|
v-model="minMaxDays"
|
|
class="v-input__custom"
|
|
outlined
|
|
:hide-details="true"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="search-box py-2" align="center" no-gutters>
|
|
<v-col :cols="3">
|
|
<label class="search-box-label">
|
|
<v-icon x-small color="primary" class="mr-1"
|
|
>mdi-record-circle</v-icon
|
|
>
|
|
제외 일자
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="7">
|
|
<div class="exclDtpicker-container">
|
|
<v-text-field
|
|
id="exclDtpicker"
|
|
ref="exclDtpicker"
|
|
v-model="exclDt"
|
|
:class="'v-input__custom'"
|
|
:hide-details="true"
|
|
readonly
|
|
outlined
|
|
>
|
|
<template #append>
|
|
<v-icon size="20">$icoCalendar</v-icon>
|
|
</template>
|
|
<template #append-outer>
|
|
<div
|
|
ref="exclDtpicker-container"
|
|
id="exclDtpicker-container"
|
|
></div>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</v-col>
|
|
<v-col :cols="2">
|
|
<v-btn :ripple="false" @click="btnAction('add')">추가</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
<div
|
|
id="exclDtListValDiv"
|
|
class="px-5 mb-1 h100"
|
|
style="overflow-y: auto; max-height:72px"
|
|
></div>
|
|
</div>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" dark :ripple="false" @click="btnAction('save')"
|
|
>확인</v-btn
|
|
>
|
|
<v-btn
|
|
color="primary"
|
|
dark
|
|
:ripple="false"
|
|
@click="btnAction('close')"
|
|
>닫기</v-btn
|
|
>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapActions } from 'vuex';
|
|
import InputText from '~/components/common/form/InputText';
|
|
import Label from '~/components/common/form/Label';
|
|
import TuiDatepicker from 'tui-date-picker';
|
|
import Buttons from '~/components/common/button/Buttons';
|
|
import Utility from '~/plugins/utility';
|
|
|
|
export default {
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
},
|
|
components: {
|
|
InputText,
|
|
Label,
|
|
TuiDatepicker,
|
|
Buttons,
|
|
Utility,
|
|
},
|
|
data() {
|
|
return {
|
|
dialog: false,
|
|
snarComId: null,
|
|
snarId: null,
|
|
simulId: null,
|
|
calcDt: this.convertStringToDateFormat(new Date()),
|
|
exclDt: this.convertStringToDateFormat(new Date()),
|
|
calcDtDatepickerInstance: null,
|
|
exclDtDatepickerInstance: null,
|
|
cblClacDays: null,
|
|
minMaxDays: null,
|
|
exclDtListData: null,
|
|
exclDtListVal: [],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
searchParam(state) {
|
|
return state.pageData[this.parentPrgmId];
|
|
},
|
|
isDarkMode: 'isDarkMode',
|
|
}),
|
|
chkDialog() {
|
|
return this.dialog;
|
|
},
|
|
},
|
|
watch: {
|
|
async chkDialog(val) {
|
|
if (val) {
|
|
this.openDialog();
|
|
} else {
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
window.exclDtDel = this.exclDtDel;
|
|
},
|
|
mounted() {
|
|
//this.tuiCalendarInit();
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations({
|
|
setPageData: 'setPageData',
|
|
}),
|
|
...mapActions({
|
|
postUpdateApi: 'modules/list/postUpdateApi',
|
|
}),
|
|
tuiCalendarInit() {
|
|
const calcDtContainer = document.getElementById('calcDtpicker-container');
|
|
const calcDtTarget = document.getElementById('calcDtpicker');
|
|
|
|
const exclDtContainer = document.getElementById('exclDtpicker-container');
|
|
const exclDtTarget = document.getElementById('exclDtpicker');
|
|
|
|
this.calcDtDatepickerInstance = new TuiDatepicker(calcDtContainer, {
|
|
date: new Date(),
|
|
language: 'ko',
|
|
type: 'date',
|
|
input: {
|
|
element: calcDtTarget,
|
|
format: 'yyyy-MM-dd',
|
|
},
|
|
timePicker: false,
|
|
calendar: {
|
|
showToday: false,
|
|
},
|
|
});
|
|
|
|
this.exclDtDatepickerInstance = new TuiDatepicker(exclDtContainer, {
|
|
date: new Date(),
|
|
language: 'ko',
|
|
type: 'date',
|
|
input: {
|
|
element: exclDtTarget,
|
|
format: 'yyyy-MM-dd',
|
|
},
|
|
timePicker: false,
|
|
calendar: {
|
|
showToday: false,
|
|
},
|
|
});
|
|
|
|
// datepicker 초기값 생성
|
|
this.calcDtDatepickerInstance.setDate(new Date());
|
|
this.exclDtDatepickerInstance.setDate(new Date());
|
|
// datepicker 초기값 생성 끝
|
|
|
|
// datepicker 변경시 이벤트 추가
|
|
this.calcDtDatepickerInstance.on('change', () => this.getCalcDt());
|
|
this.exclDtDatepickerInstance.on('change', () => this.getExclDt());
|
|
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
|
|
},
|
|
getCalcDt() {
|
|
const dt = this.calcDtDatepickerInstance.getDate();
|
|
//this.calcDt = dt.toISOString().substr(0, 10);
|
|
this.calcDt = Utility.setFormatDate(dt, 'YYYY-MM-DD');
|
|
},
|
|
getExclDt() {
|
|
const dt = this.exclDtDatepickerInstance.getDate();
|
|
this.exclDt = Utility.setFormatDate(dt, 'YYYY-MM-DD');
|
|
//this.exclDt = dt.toISOString().substr(0, 10);
|
|
},
|
|
convertStringToDateFormat(val) {
|
|
var result = '';
|
|
|
|
result = Utility.setFormatDate(val, 'YYYY-MM-DD');
|
|
|
|
return result;
|
|
},
|
|
async openDialog() {
|
|
this.cblClacDays = null;
|
|
this.minMaxDays = null;
|
|
this.calcDt = Utility.setFormatDate(new Date(), 'YYYY-MM-DD');
|
|
this.exclDt = Utility.setFormatDate(new Date(), 'YYYY-MM-DD');
|
|
this.exclDtListVal = [];
|
|
this.$nextTick(() => {
|
|
this.tuiCalendarInit();
|
|
});
|
|
},
|
|
|
|
async btnAction(action) {
|
|
switch (action) {
|
|
case 'close':
|
|
this.dialog = !this.dialog;
|
|
document.getElementById('exclDtListValDiv').innerHTML = '';
|
|
break;
|
|
case 'save':
|
|
if (this.cblClacDays == null || this.minMaxDays == null) {
|
|
alert('필수값을 입력해주세요.');
|
|
} else {
|
|
await this.insertDetail();
|
|
this.dialog = !this.dialog;
|
|
document.getElementById('exclDtListValDiv').innerHTML = '';
|
|
}
|
|
break;
|
|
case 'add':
|
|
var chkVal = true;
|
|
for (var j = 0; j < this.exclDtListVal.length; j++) {
|
|
if (this.exclDtListVal[j] == this.exclDt.substr(0, 10))
|
|
chkVal = false;
|
|
}
|
|
if (!chkVal) {
|
|
alert('같은 날짜가 있습니다.');
|
|
} else {
|
|
this.exclDtListVal.push(this.exclDt.substr(0, 10));
|
|
var tmp = '';
|
|
for (var i = 0; i < this.exclDtListVal.length; i++) {
|
|
tmp +=
|
|
"<div class='no-gutters align-center' style='display:inline-block; padding:5px;'>" +
|
|
"<span id='exclDt" +
|
|
i +
|
|
"' class='pr-2' style='font-size:14px'>" +
|
|
this.exclDtListVal[i] +
|
|
'</span>' +
|
|
"<i aria-hidden='true' class='v-icon notranslate mr-1 mdi mdi-close-circle-outline theme--dark' onclick='exclDtDel(" +
|
|
i +
|
|
")' style='cursor: pointer;'></i>" +
|
|
'</div>';
|
|
}
|
|
document.getElementById('exclDtListValDiv').innerHTML = tmp;
|
|
this.exclDtListData = this.exclDtListVal.toString();
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
exclDtDel(val) {
|
|
this.exclDtListVal.splice(val, 1);
|
|
var tmp = '';
|
|
for (var i = 0; i < this.exclDtListVal.length; i++) {
|
|
tmp +=
|
|
"<div class='no-gutters align-center' style='display:inline-block; padding:5px;'>" +
|
|
"<span id='exclDt" +
|
|
i +
|
|
"' class='pr-2' style='font-size:14px'>" +
|
|
this.exclDtListVal[i] +
|
|
'</span>' +
|
|
"<i aria-hidden='true' class='v-icon notranslate mr-1 mdi mdi-close-circle-outline theme--dark' onclick='exclDtDel(" +
|
|
i +
|
|
")' style='cursor: pointer;'></i>" +
|
|
'</div>';
|
|
}
|
|
document.getElementById('exclDtListValDiv').innerHTML = tmp;
|
|
this.exclDtListData = this.exclDtListVal.toString();
|
|
},
|
|
|
|
async insertDetail() {
|
|
var params = {
|
|
comId: this.snarComId,
|
|
simulId: this.simulId,
|
|
snarId: this.snarId,
|
|
calcDt: this.calcDt.substr(0, 10).replace(/-/g, ''),
|
|
exclDt: String(this.exclDtListData).replace(/-/g, ''),
|
|
cblClacDays: this.cblClacDays,
|
|
minMaxDays: this.minMaxDays,
|
|
regUserNo: null,
|
|
regDttm: null,
|
|
procUserNo: null,
|
|
procDttm: null,
|
|
};
|
|
let statusCd = await this.postUpdateApi({
|
|
apiKey: 'saveSnarExecPop',
|
|
sendParam: {
|
|
datas: {
|
|
saveSnarExecPop: [params],
|
|
},
|
|
params: {},
|
|
},
|
|
});
|
|
// console.log('statusCd', statusCd);
|
|
if (statusCd.data.retnCd == 0) {
|
|
const params2 = {
|
|
simulationId: statusCd.data.dataset.simulId,
|
|
scenarioId: this.snarId,
|
|
comId: this.snarComId,
|
|
};
|
|
const res = await this.$axios.post(
|
|
'http://192.168.10.17:3000/fems',
|
|
params2,
|
|
);
|
|
}
|
|
|
|
this.setPageData({
|
|
isFind: true,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.calcDtpicker-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.v-input {
|
|
.v-input__append-outer {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
|
|
#calcDtpicker-container {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.exclDtpicker-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.v-input {
|
|
.v-input__append-outer {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
|
|
#exclDtpicker-container {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: -256px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-input__custom {
|
|
flex: 0 0 auto;
|
|
&.half {
|
|
width: calc(50% - 20px);
|
|
}
|
|
}
|
|
::v-deep {
|
|
.tui-timepicker-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #edf4fc;
|
|
.tui-timepicker-column.tui-timepicker-colon {
|
|
color: #000 !important;
|
|
}
|
|
}
|
|
}
|
|
@each $theme in dark, light {
|
|
.v-application.#{$theme}-mode {
|
|
.v-dialog {
|
|
.v-card {
|
|
&__title {
|
|
color: map-deep-get($color, 'white', '0');
|
|
@if $theme == dark {
|
|
background-color: #2d3355;
|
|
.v-btn {
|
|
background-color: #2d3355;
|
|
}
|
|
} @else {
|
|
background-color: #3f4d7d;
|
|
.v-btn {
|
|
background-color: #3f4d7d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|