867 lines
26 KiB
Vue
867 lines
26 KiB
Vue
<template>
|
|
<div>
|
|
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
|
|
<v-dialog v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8">
|
|
<v-card>
|
|
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
|
<span class="custom-title-4">{{ label }}</span>
|
|
<a-button icon="close" type="text" @click="dialog = !dialog"></a-button>
|
|
</v-card-title>
|
|
<!-- <v-toolbar
|
|
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
|
|
class="py-4 pr-3 pl-5"
|
|
height="auto"
|
|
>
|
|
<v-toolbar-title>{{ label }}</v-toolbar-title>
|
|
</v-toolbar> -->
|
|
<!-- <v-card-title>
|
|
일정 상세 내용
|
|
</v-card-title> -->
|
|
<!-- <template v-for="(item, index) in detailList"> -->
|
|
<template>
|
|
<div class="pa-6 pt-0">
|
|
<v-row no-gutters class="mb-4">
|
|
<v-col :cols="12">
|
|
<label class="search-box-label">
|
|
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
|
일정 시작
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="6" class="py-0 pr-2">
|
|
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
|
<div class="startpicker-container2">
|
|
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
|
|
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
|
<template #append>
|
|
<v-icon size="20">$icoCalendar</v-icon>
|
|
</template>
|
|
<template #append-outer>
|
|
<div ref="startpicker-container2" id="startpicker-container2"></div>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</v-col>
|
|
<v-col :cols="6" class="py-0 pl-2">
|
|
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
|
<component :parentPrgmId="parentPrgmId" :is="'SelectBoxTime'" ref="SelectBox1"
|
|
:propsValue="selectTimeValue1" :itemList="selectTimeValueList1" :minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
|
|
" @update:propsValue="selectTimeValue1 = $event" />
|
|
<!-- <div class="startpicker-container2">
|
|
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
|
|
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
|
<template #append>
|
|
<v-icon size="20">$icoCalendar</v-icon>
|
|
</template>
|
|
<template #append-outer>
|
|
<div ref="startpicker-container2" id="startpicker-container2"></div>
|
|
</template>
|
|
</v-text-field>
|
|
</div> -->
|
|
</v-col>
|
|
<!-- <v-col :cols="2">
|
|
<vue-numeric-input v-model="strtHh" :min="0" :max="23" controls-type="updown"
|
|
class="v-input__slot" width="100%" align="center">
|
|
</vue-numeric-input>
|
|
</v-col>
|
|
<v-col :cols="1" style="text-align: center;">
|
|
:
|
|
</v-col>
|
|
<v-col :cols="2">
|
|
<vue-numeric-input v-model="strtMm" :min="0" :max="59" controls-type="updown"
|
|
class="v-input__slot" width="100%" align="center">
|
|
</vue-numeric-input>
|
|
</v-col> -->
|
|
</v-row>
|
|
<v-row no-gutters class="mb-4">
|
|
<v-col :cols="12">
|
|
<label class="search-box-label">
|
|
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
|
일정 종료
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="6" class="pr-2">
|
|
<!-- <DatePicker v-model="endDt" :parentPrgmId="parentPrgmId"/> -->
|
|
<div class="startpicker-container3">
|
|
<v-text-field id="startpicker3" ref="startpicker3" v-model="endDt"
|
|
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
|
<template #append>
|
|
<v-icon size="20">$icoCalendar</v-icon>
|
|
</template>
|
|
<template #append-outer>
|
|
<div ref="startpicker-container3" id="startpicker-container3"></div>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</v-col>
|
|
<v-col :cols="6" class="pl-2">
|
|
<component :parentPrgmId="parentPrgmId" :is="'SelectBoxTime'" ref="SelectBox2"
|
|
:propsValue="selectTimeValue2" :itemList="selectTimeValueList2" :minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
|
|
" @update:propsValue="selectTimeValue2 = $event" />
|
|
</v-col>
|
|
<!-- <v-col :cols="2">
|
|
<vue-numeric-input v-model="endHh" :min="0" :max="23" controls-type="updown"
|
|
class="v-input__slot" width="100%" align="center">
|
|
</vue-numeric-input>
|
|
</v-col>
|
|
<v-col :cols="1" style="text-align: center;">
|
|
:
|
|
</v-col>
|
|
<v-col :cols="2">
|
|
<vue-numeric-input v-model="endMm" :min="0" :max="59" controls-type="updown"
|
|
class="v-input__slot" width="100%" align="center">
|
|
</vue-numeric-input>
|
|
</v-col> -->
|
|
</v-row>
|
|
<v-row no-gutters class="mb-4">
|
|
<v-col :cols="12">
|
|
<label class="search-box-label">
|
|
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
|
일정 제목
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="12" class="py-0">
|
|
<v-text-field v-model="planTitle" class="v-input__custom" outlined
|
|
:hide-details="true"></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row no-gutters class="mb-4">
|
|
<v-col :cols="12">
|
|
<label class="search-box-label">
|
|
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
|
일정 상세 내용
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="12" class="py-0">
|
|
<v-textarea v-model="planCntn" class="v-input__custom" outlined :hide-details="true"
|
|
:maxlength="1000"></v-textarea>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row no-gutters class="mb-4">
|
|
<v-col :cols="12">
|
|
<label class="search-box-label">
|
|
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
|
표시 색상
|
|
</label>
|
|
|
|
</v-col>
|
|
<v-col :cols="6">
|
|
<div class="d-flex calendar-color" style="gap:16px">
|
|
|
|
<div id="redDiv" class="colPk redBg" @click="colorClick('red')">
|
|
<div class="inner-color"></div>
|
|
</div>
|
|
|
|
<div id="blueDiv" class="colPk blueBg" @click="colorClick('blue')">
|
|
<div class="inner-color"></div>
|
|
</div>
|
|
|
|
|
|
<div id="pupleDiv" class="colPk pupleBg" @click="colorClick('puple')">
|
|
<div class="inner-color"></div>
|
|
</div>
|
|
|
|
|
|
<div id="greenDiv" class="colPk greenBg" @click="colorClick('green')">
|
|
<div class="inner-color"></div>
|
|
</div>
|
|
|
|
|
|
<div id="orangeDiv" class="colPk orangeBg" @click="colorClick('orange')">
|
|
<div class="inner-color"></div>
|
|
</div>
|
|
|
|
|
|
<div id="pinkDiv" class="colPk pinkBg" @click="colorClick('pink')">
|
|
<div class="inner-color"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
<v-card-actions class="justify-end">
|
|
<a-button :ripple="false" @click="btnAction('close')" class="mr-2">닫기</a-button>
|
|
<a-button type="primary" :ripple="false" @click="btnAction('save')" class="mr-2">저장</a-button>
|
|
<a-button v-show="popUpAction === 'update'" type="danger" ghost danger :ripple="false"
|
|
@click="btnAction('delete')">삭제</a-button>
|
|
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapActions } from 'vuex';
|
|
import VueNumericInput from 'vue-numeric-input';
|
|
import InputText from '~/components/common/form/InputText';
|
|
import InputNumber from '~/components/common/form/InputNumber';
|
|
import TextArea from '~/components/common/form/TextArea';
|
|
import SelectBox from '~/components/common/form/SelectBox';
|
|
import SelectBoxes from '~/components/common/form/SelectBoxes';
|
|
import CheckBox from '~/components/common/form/CheckBox';
|
|
import Label from '~/components/common/form/Label';
|
|
import DatePicker from '~/components/common/Datepicker';
|
|
import mixinGlobal from '@/mixin/global.js';
|
|
import Utility from '~/plugins/utility';
|
|
import TuiDatepicker from 'tui-date-picker';
|
|
import SelectBoxTime from "@/components/common/select/SelectBoxTime";
|
|
|
|
export default {
|
|
mixins: [mixinGlobal],
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
detailList: {
|
|
type: Array,
|
|
require: false,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
label: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
bindingData: {
|
|
type: String,
|
|
require: false,
|
|
},
|
|
gridName: {
|
|
type: String,
|
|
require: false,
|
|
},
|
|
selectBoxTimeItemList: {
|
|
type: Object,
|
|
require: false,
|
|
default: () => {
|
|
return {
|
|
selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
|
|
selectTimeValueList1: [], // selectBoxTime에 필요한 prop
|
|
selectTimeValue2: "01 : 00", // selectBoxTime에 필요한 prop
|
|
selectTimeValueList2: [], // selectBoxTime에 필요한 prop
|
|
minInterval: 10,
|
|
};
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
InputText,
|
|
InputNumber,
|
|
TextArea,
|
|
SelectBox,
|
|
SelectBoxes,
|
|
CheckBox,
|
|
Label,
|
|
DatePicker,
|
|
Utility,
|
|
TuiDatepicker,
|
|
VueNumericInput,
|
|
SelectBoxTime,
|
|
},
|
|
data() {
|
|
return {
|
|
dialog: false,
|
|
popUpAction: '',
|
|
param: {},
|
|
planCntn: '',
|
|
planTitle: '',
|
|
strtHh: 0,
|
|
strtMm: 0,
|
|
endHh: 1,
|
|
endMm: 0,
|
|
strtDt: null,
|
|
endDt: null,
|
|
// strtDt: new Date().toISOString().substr(0, 10),
|
|
// endDt: new Date().toISOString().substr(0, 10),
|
|
planColor: '',
|
|
startDatepickerInstance: null,
|
|
startDatepickerInstance3: null,
|
|
planSeq: '',
|
|
blocId: '',
|
|
addPlanData: {
|
|
},
|
|
selectTimeValue1:
|
|
this.selectBoxTimeItemList.selectTimeValue1 != undefined
|
|
? this.selectBoxTimeItemList.selectTimeValue1
|
|
: null, // selectBoxTime에 필요한 prop
|
|
selectTimeValueList1:
|
|
this.selectBoxTimeItemList.selectTimeValueList1 != undefined
|
|
? this.selectBoxTimeItemList.selectTimeValueList1
|
|
: [], // selectBoxTime에 필요한 prop
|
|
selectTimeValue2:
|
|
this.selectBoxTimeItemList.selectTimeValue2 != undefined
|
|
? this.selectBoxTimeItemList.selectTimeValue2
|
|
: null, // selectBoxTime에 필요한 prop
|
|
selectTimeValueList2:
|
|
this.selectBoxTimeItemList.selectTimeValueList2 != undefined
|
|
? this.selectBoxTimeItemList.selectTimeValueList2
|
|
: [], // selectBoxTime에 필요한 prop
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
searchParam(state) {
|
|
return state.pageData[this.parentPrgmId];
|
|
},
|
|
isDarkMode: 'isDarkMode',
|
|
}),
|
|
chkDialog() {
|
|
return this.dialog;
|
|
},
|
|
},
|
|
watch: {
|
|
async chkDialog(val) {
|
|
if (val) {
|
|
this.openDialog();
|
|
|
|
this.$nextTick(() => { });
|
|
} else {
|
|
}
|
|
},
|
|
strtDt(val) {
|
|
// console.log('strtDt : ', val);
|
|
this.checkStrtAndEndDateTime('start');
|
|
if (this.startDatepickerInstance3) {
|
|
this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
|
}
|
|
},
|
|
endDt(val) {
|
|
// console.log('endDt : ', val);
|
|
this.checkStrtAndEndDateTime('end');
|
|
if (this.startDatepickerInstance) {
|
|
this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
|
}
|
|
},
|
|
strtHh(val) {
|
|
|
|
// const [hh, mm] = selectTimeValue1.split(':');
|
|
// console.log(`Hours: ${hh}, Minutes: ${mm}`);
|
|
|
|
console.log('strtHh : ', val);
|
|
this.checkStrtAndEndDateTime('start');
|
|
},
|
|
endHh(val) {
|
|
// console.log('endHh : ', val);
|
|
this.checkStrtAndEndDateTime('end');
|
|
},
|
|
strtMm(val) {
|
|
this.checkStrtAndEndDateTime('start');
|
|
},
|
|
endMm(val) {
|
|
this.checkStrtAndEndDateTime('end');
|
|
},
|
|
selectTimeValue1(val) {
|
|
this.setPageData({ selectTimeValue1: val });
|
|
},
|
|
selectTimeValue2(val) {
|
|
this.setPageData({ selectTimeValue2: val });
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setPageData: 'setPageData',
|
|
}),
|
|
...mapActions({
|
|
postUpdateApi: 'modules/list/postUpdateApi',
|
|
getDomain: 'modules/list/getDomain',
|
|
}),
|
|
async checkStrtAndEndDateTime(startEndFlag) {
|
|
var startDateTime = this.strtDt + ' ' + this.strtHh + ':' + this.strtMm;
|
|
var endDateTime = this.endDt + ' ' + this.endHh + ':' + this.endMm;
|
|
|
|
startDateTime = new Date(startDateTime);
|
|
endDateTime = new Date(endDateTime);
|
|
|
|
if (startDateTime > endDateTime) {
|
|
if (startEndFlag == 'start') { // 시작 부분이 변경됨 -> 끝 부분 값을 변경
|
|
this.endDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.strtDt).getDate() + 1)));
|
|
this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
|
} else if (startEndFlag == 'end') { // 끝 부분이 변경됨 -> 시작 부분 값을 변경
|
|
this.strtDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.endDt).getDate() - 1)));
|
|
this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
|
}
|
|
}
|
|
},
|
|
async tuiCalendarInit() {
|
|
const startContainer = document.getElementById('startpicker-container2');
|
|
const startTarget = document.getElementById('startpicker2');
|
|
|
|
const startContainer3 = document.getElementById('startpicker-container3');
|
|
const startTarget3 = document.getElementById('startpicker3');
|
|
|
|
var dt1 = new Date();
|
|
var dt2 = new Date();
|
|
|
|
if (this.strtDt) {
|
|
dt1 = this.strtDt;
|
|
}
|
|
|
|
if (this.endDt) {
|
|
dt2 = this.endDt;
|
|
}
|
|
|
|
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
|
|
// date: new Date(),
|
|
date: dt1,
|
|
language: 'ko',
|
|
type: 'date',
|
|
input: {
|
|
element: startTarget,
|
|
format: 'YYYY-MM-DD',
|
|
},
|
|
timePicker: false,
|
|
});
|
|
this.startDatepickerInstance.on('change', () => this.getStartDt());
|
|
|
|
this.startDatepickerInstance3 = new TuiDatepicker(startContainer3, {
|
|
// date: new Date(),
|
|
date: dt2,
|
|
language: 'ko',
|
|
type: 'date',
|
|
input: {
|
|
element: startTarget3,
|
|
format: 'YYYY-MM-DD',
|
|
},
|
|
timePicker: false,
|
|
});
|
|
this.startDatepickerInstance3.on('change', () => this.getEndDt());
|
|
},
|
|
getStartDt() {
|
|
const dt = this.startDatepickerInstance.getDate();
|
|
|
|
// console.log('dt[getStartDt] : ', dt);
|
|
// console.log('dt[getStartDt] : ', dt.toISOString());
|
|
|
|
// this.strtDt = dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
|
|
// this.strtDt = String(dt.toISOString()).substr(0, 10);
|
|
// this.strtDt = this.convertStringToDateFormat(this.strtDt);
|
|
|
|
this.strtDt = this.convertDateToString(dt);
|
|
this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
|
},
|
|
getEndDt() {
|
|
const dt = this.startDatepickerInstance3.getDate();
|
|
|
|
// console.log('dt[getEndDt] : ', dt);
|
|
// console.log('dt[getendDt] : ', dt.toISOString());
|
|
|
|
// this.endDt = dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
|
|
// this.endDt = String(dt.toISOString()).substr(0, 10);
|
|
// this.endDt = this.convertStringToDateFormat(this.endDt);
|
|
|
|
this.endDt = this.convertDateToString(dt);
|
|
this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
|
},
|
|
convertDateToString(dt) {
|
|
return dt.getFullYear() + '-' + String(dt.getMonth() + 1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
|
|
},
|
|
convertStringToDateFormat(val) {
|
|
var result = '';
|
|
|
|
result = Utility.setFormatDate(val, 'YYYY-MM-DD');
|
|
|
|
return result;
|
|
},
|
|
convertDateFormatToString(val) {
|
|
return val.replaceAll('-', '');
|
|
},
|
|
async openDialog() {
|
|
this.$nextTick(() => {
|
|
this.tuiCalendarInit();
|
|
switch (this.popUpAction) {
|
|
case 'read':
|
|
this.strtDt = this.convertStringToDateFormat(
|
|
this.searchParam.rowGridSelectData.chkDd,
|
|
);
|
|
this.endDt = this.convertStringToDateFormat(
|
|
this.searchParam.rowGridSelectData.chkDd,
|
|
);
|
|
break;
|
|
case 'insert':
|
|
this.insertPlanData();
|
|
break;
|
|
case 'update':
|
|
this.getPlanData();
|
|
break;
|
|
}
|
|
});
|
|
},
|
|
async insertPlanData() {
|
|
var year = this.addPlanData.year;
|
|
var month = this.addPlanData.month;
|
|
var day = this.addPlanData.day;
|
|
// this.strtDt = this.convertStringToDateFormat(this.strtDt);
|
|
// this.endDt = this.convertStringToDateFormat(this.endDt);
|
|
this.strtHh = 0;
|
|
this.strtMm = 0;
|
|
this.endHh = 1;
|
|
this.endMm = 0;
|
|
this.planTitle = '';
|
|
this.planCntn = '';
|
|
this.planColor = '';
|
|
document.getElementById('redDiv').classList.remove('colPkSelect');
|
|
document.getElementById('blueDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.remove('colPkSelect');
|
|
document.getElementById('greenDiv').classList.remove('colPkSelect');
|
|
document
|
|
.getElementById('orangeDiv')
|
|
.classList.remove('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.remove('colPkSelect');
|
|
|
|
// this.strtDt = this.convertStringToDateFormat(this.strtDt);
|
|
// this.endDt = this.convertStringToDateFormat(this.endDt);
|
|
// console.log('this.strtDt[insertPlanData] : ', this.strtDt);
|
|
// console.log('this.endDt[insertPlanData] : ', this.endDt);
|
|
|
|
// this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
|
// this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
|
|
|
// this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
|
// this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
|
|
|
// this.strtDt = Utility.setFormatDate(this.strtDt, 'YYYY-MM-DD');
|
|
// this.endDt = Utility.setFormatDate(this.endDt, 'YYYY-MM-DD');
|
|
|
|
this.strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
|
this.endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
|
},
|
|
async getPlanData() {
|
|
let res = await this.postApiReturn({
|
|
apiKey: 'selectWorkCaldDetlOne',
|
|
resKey: 'workcaldDetlOneData',
|
|
sendParam: {
|
|
blocId: this.blocId,
|
|
planSeq: this.planSeq,
|
|
comId: this.comId,
|
|
},
|
|
});
|
|
let returnData = res[0];
|
|
this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
|
|
this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
|
|
this.selectTimeValue1 = returnData.strtHh + ' : ' + returnData.strtMm;
|
|
this.selectTimeValue2 = returnData.endHh + ' : ' + returnData.endMm;
|
|
this.planTitle = returnData.planTitle;
|
|
this.planCntn = returnData.planCntn;
|
|
this.planColor = returnData.planColor;
|
|
this.colorClick(this.planColor);
|
|
},
|
|
|
|
async btnAction(action) {
|
|
switch (action) {
|
|
case 'close':
|
|
this.dialog = !this.dialog;
|
|
break;
|
|
case 'save':
|
|
if (this.popUpAction === 'insert') {
|
|
if (
|
|
this.strtDt === '' ||
|
|
this.endDt === '' ||
|
|
this.selectTimeValue1 === '' ||
|
|
this.selectTimeValue2 === '' ||
|
|
this.planTitle === '' ||
|
|
this.planCntn === '' ||
|
|
this.planColor === ''
|
|
) {
|
|
alert('필수값을 입력해주세요.');
|
|
} else {
|
|
this.dialog = !this.dialog;
|
|
await this.insertDetail();
|
|
}
|
|
} else if (this.popUpAction === 'update') {
|
|
if (
|
|
this.strtDt == '' ||
|
|
this.endDt == '' ||
|
|
this.selectTimeValue1 === '' ||
|
|
this.selectTimeValue2 === '' ||
|
|
this.planTitle == '' ||
|
|
this.planCntn == '' ||
|
|
this.planColor == ''
|
|
) {
|
|
alert('필수값을 입력해주세요.');
|
|
} else {
|
|
this.dialog = !this.dialog;
|
|
await this.updateDetail();
|
|
}
|
|
}
|
|
break;
|
|
case 'delete':
|
|
this.dialog = !this.dialog;
|
|
await this.deleteDetail();
|
|
break;
|
|
}
|
|
//console.log(this);
|
|
},
|
|
async insertDetail() {
|
|
|
|
const [strtHh, strtMm] = this.selectTimeValue1 ? this.selectTimeValue1.split(':') : '00:00'.split(':');
|
|
const [endHh, endMm] = this.selectTimeValue2 ? this.selectTimeValue2.split(':') : '01:00'.split(':');
|
|
|
|
var params = {
|
|
strtDt: this.strtDt,
|
|
endDt: this.endDt,
|
|
strtHh: strtHh.trim().toString(),
|
|
strtMm: strtMm.trim().toString(),
|
|
endHh: endHh.trim().toString(),
|
|
endMm: endMm.trim().toString(),
|
|
blocId: this.blocId,
|
|
planTitle: this.planTitle,
|
|
planCntn: this.planCntn,
|
|
planColor: this.planColor,
|
|
};
|
|
|
|
await this.postUpdateApi({
|
|
apiKey: 'savePlanDetl',
|
|
sendParam: {
|
|
datas: {
|
|
savePlanDetl: [params],
|
|
},
|
|
params: {},
|
|
},
|
|
});
|
|
this.setPageData({
|
|
isFind: true,
|
|
});
|
|
},
|
|
async updateDetail() {
|
|
const [strtHh, strtMm] = this.selectTimeValue1 ? this.selectTimeValue1.split(':') : '00:00'.split(':');
|
|
const [endHh, endMm] = this.selectTimeValue2 ? this.selectTimeValue2.split(':') : '01:00'.split(':');
|
|
|
|
var params = {
|
|
strtDt: this.strtDt.substr(0, 10),
|
|
endDt: this.endDt.substr(0, 10),
|
|
strtHh: strtHh.trim().toString(),
|
|
strtMm: strtMm.trim().toString(),
|
|
endHh: endHh.trim().toString(),
|
|
endMm: endMm.trim().toString(),
|
|
planTitle: this.planTitle,
|
|
planCntn: this.planCntn,
|
|
planColor: this.planColor,
|
|
blocId: this.blocId,
|
|
planSeq: this.planSeq,
|
|
};
|
|
|
|
await this.postUpdateApi({
|
|
apiKey: 'updatePlanDetl',
|
|
sendParam: {
|
|
datas: {
|
|
updatePlanDetl: [params],
|
|
},
|
|
params: {},
|
|
},
|
|
});
|
|
this.setPageData({
|
|
isFind: true,
|
|
});
|
|
},
|
|
async deleteDetail() {
|
|
var params = {
|
|
blocId: this.blocId,
|
|
planSeq: this.planSeq,
|
|
};
|
|
|
|
await this.postUpdateApi({
|
|
apiKey: 'deletePlanDetl',
|
|
sendParam: {
|
|
datas: {
|
|
deletePlanDetl: [params],
|
|
},
|
|
params: {},
|
|
},
|
|
});
|
|
this.setPageData({
|
|
isFind: true,
|
|
});
|
|
},
|
|
colorClick(t) {
|
|
if (t == 'red') {
|
|
document.getElementById('redDiv').classList.add('colPkSelect');
|
|
document.getElementById('blueDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.remove('colPkSelect');
|
|
document.getElementById('greenDiv').classList.remove('colPkSelect');
|
|
document.getElementById('orangeDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.remove('colPkSelect');
|
|
|
|
this.planColor = 'red';
|
|
} else if (t == 'blue') {
|
|
document.getElementById('redDiv').classList.remove('colPkSelect');
|
|
document.getElementById('blueDiv').classList.add('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.remove('colPkSelect');
|
|
document.getElementById('greenDiv').classList.remove('colPkSelect');
|
|
document.getElementById('orangeDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.remove('colPkSelect');
|
|
|
|
this.planColor = 'blue';
|
|
} else if (t == 'puple') {
|
|
document.getElementById('redDiv').classList.remove('colPkSelect');
|
|
document.getElementById('blueDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.add('colPkSelect');
|
|
document.getElementById('greenDiv').classList.remove('colPkSelect');
|
|
document.getElementById('orangeDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.remove('colPkSelect');
|
|
|
|
this.planColor = 'puple';
|
|
} else if (t == 'green') {
|
|
document.getElementById('redDiv').classList.remove('colPkSelect');
|
|
document.getElementById('blueDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.remove('colPkSelect');
|
|
document.getElementById('greenDiv').classList.add('colPkSelect');
|
|
document.getElementById('orangeDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.remove('colPkSelect');
|
|
|
|
this.planColor = 'green';
|
|
} else if (t == 'orange') {
|
|
document.getElementById('redDiv').classList.remove('colPkSelect');
|
|
document.getElementById('blueDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.remove('colPkSelect');
|
|
document.getElementById('greenDiv').classList.remove('colPkSelect');
|
|
document.getElementById('orangeDiv').classList.add('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.remove('colPkSelect');
|
|
|
|
this.planColor = 'orange';
|
|
} else if (t == 'pink') {
|
|
document.getElementById('redDiv').classList.remove('colPkSelect');
|
|
document.getElementById('blueDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pupleDiv').classList.remove('colPkSelect');
|
|
document.getElementById('greenDiv').classList.remove('colPkSelect');
|
|
document.getElementById('orangeDiv').classList.remove('colPkSelect');
|
|
document.getElementById('pinkDiv').classList.add('colPkSelect');
|
|
|
|
this.planColor = 'pink';
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep {
|
|
.v-toolbar__content {
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
|
|
.v-btn {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
.v-card__actions {
|
|
padding-bottom: 30px !important;
|
|
}
|
|
|
|
.inner-color {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.colPk {
|
|
width: 28px;
|
|
height: 28px;
|
|
text-align: center;
|
|
border-radius: 6px 6px;
|
|
cursor: pointer;
|
|
padding: 4px
|
|
}
|
|
|
|
.colPkSelect {
|
|
border: 1px solid #00000073;
|
|
}
|
|
|
|
.redBg .inner-color {
|
|
background-color: rgba(229, 62, 62, var(--bg-opacity));
|
|
background-color: #FF4D4F;
|
|
}
|
|
|
|
.blueBg .inner-color {
|
|
background-color: rgba(66, 153, 225, var(--bg-opacity));
|
|
background-color: #597EF7;
|
|
}
|
|
|
|
.pupleBg .inner-color {
|
|
background-color: rgba(102, 126, 234, var(--bg-opacity));
|
|
background-color: #9254DE;
|
|
}
|
|
|
|
.greenBg .inner-color {
|
|
background-color: rgba(56, 178, 172, var(--bg-opacity));
|
|
background-color: #73D13D;
|
|
}
|
|
|
|
.orangeBg .inner-color {
|
|
background-color: rgba(237, 137, 54, var(--bg-opacity));
|
|
background-color: #FFA940;
|
|
}
|
|
|
|
.pinkBg .inner-color {
|
|
background-color: rgba(237, 100, 166, var(--bg-opacity));
|
|
background-color: #F759AB;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.v-input__custom {
|
|
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
|
|
.startpicker-container2 {
|
|
position: relative;
|
|
|
|
.v-input {
|
|
.v-input__append-outer {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
|
|
#startpicker-container2,
|
|
#endpicker-container2 {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.startpicker-container3 {
|
|
position: relative;
|
|
|
|
.v-input {
|
|
.v-input__append-outer {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
|
|
#startpicker-container3,
|
|
#endpicker-container3 {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|