sk_fems_ui commit
This commit is contained in:
unknown
499
components/common/modal/DrSnarExecPop.vue
Normal file
499
components/common/modal/DrSnarExecPop.vue
Normal file
@ -0,0 +1,499 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user