sk_fems_ui commit
This commit is contained in:
unknown
885
components/common/modal/PlanPop.vue
Normal file
885
components/common/modal/PlanPop.vue
Normal file
@ -0,0 +1,885 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="700"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
>
|
||||
<v-card>
|
||||
<v-toolbar
|
||||
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
|
||||
class="py-4 pr-3 pl-5"
|
||||
height="auto"
|
||||
>
|
||||
<v-toolbar-title>{{ label }}</v-toolbar-title>
|
||||
<!-- <v-btn
|
||||
icon
|
||||
tile
|
||||
small
|
||||
:ripple="false"
|
||||
@click="dialog = !dialog"
|
||||
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn> -->
|
||||
</v-toolbar>
|
||||
<!-- <v-card-title>
|
||||
일정 상세 내용
|
||||
</v-card-title> -->
|
||||
<!-- <template v-for="(item, index) in detailList"> -->
|
||||
<template>
|
||||
<div style="padding : 20px">
|
||||
<v-col :cols="12">
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 시작
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<!-- <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="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>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 종료
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<!-- <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="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>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 제목
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-text-field
|
||||
v-model="planTitle"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 상세 내용
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-textarea
|
||||
v-model="planCntn"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:maxlength="1000"
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
표시 색상
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="redDiv"
|
||||
class="colPk redBg"
|
||||
@click="colorClick('red')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="blueDiv"
|
||||
class="colPk blueBg"
|
||||
@click="colorClick('blue')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="pupleDiv"
|
||||
class="colPk pupleBg"
|
||||
@click="colorClick('puple')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="greenDiv"
|
||||
class="colPk greenBg"
|
||||
@click="colorClick('green')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="orangeDiv"
|
||||
class="colPk orangeBg"
|
||||
@click="colorClick('orange')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="pinkDiv"
|
||||
class="colPk pinkBg"
|
||||
@click="colorClick('pink')"
|
||||
></div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn :ripple="false" @click="btnAction('save')">저장</v-btn>
|
||||
<v-btn
|
||||
v-show="popUpAction === 'update'"
|
||||
:ripple="false"
|
||||
@click="btnAction('delete')"
|
||||
>삭제</v-btn
|
||||
>
|
||||
<v-btn :ripple="false" @click="btnAction('close')">닫기</v-btn>
|
||||
</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';
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
InputText,
|
||||
InputNumber,
|
||||
TextArea,
|
||||
SelectBox,
|
||||
SelectBoxes,
|
||||
CheckBox,
|
||||
Label,
|
||||
DatePicker,
|
||||
Utility,
|
||||
TuiDatepicker,
|
||||
VueNumericInput,
|
||||
},
|
||||
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:{
|
||||
}
|
||||
};
|
||||
},
|
||||
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) {
|
||||
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');
|
||||
},
|
||||
},
|
||||
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.strtHh = returnData.strtHh;
|
||||
this.strtMm = returnData.strtMm;
|
||||
this.endHh = returnData.endHh;
|
||||
this.endMm = 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.strtHh === '' ||
|
||||
this.strtMm === '' ||
|
||||
this.endHh === '' ||
|
||||
this.endMm === '' ||
|
||||
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.strtHh == '' ||
|
||||
this.strtMm == '' ||
|
||||
this.endHh == '' ||
|
||||
this.endMm == '' ||
|
||||
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() {
|
||||
var params = {
|
||||
strtDt: this.strtDt,
|
||||
endDt: this.endDt,
|
||||
strtHh: this.strtHh.toString(),
|
||||
strtMm: this.strtMm.toString(),
|
||||
endHh: this.endHh.toString(),
|
||||
endMm: this.endMm.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() {
|
||||
var params = {
|
||||
strtDt: this.strtDt.substr(0, 10),
|
||||
endDt: this.endDt.substr(0, 10),
|
||||
strtHh: this.strtHh.toString(),
|
||||
strtMm: this.strtMm.toString(),
|
||||
endHh: this.endHh.toString(),
|
||||
endMm: this.endMm.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;
|
||||
}
|
||||
.colPk {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
border-radius: 5px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.colPkSelect {
|
||||
border: 2px solid;
|
||||
}
|
||||
.redBg {
|
||||
background-color: rgba(229, 62, 62, var(--bg-opacity));
|
||||
background-color: #e53e3e;
|
||||
}
|
||||
.blueBg {
|
||||
background-color: rgba(66, 153, 225, var(--bg-opacity));
|
||||
background-color: #4299e1;
|
||||
}
|
||||
.pupleBg {
|
||||
background-color: rgba(102, 126, 234, var(--bg-opacity));
|
||||
background-color: #667eea;
|
||||
}
|
||||
.greenBg {
|
||||
background-color: rgba(56, 178, 172, var(--bg-opacity));
|
||||
background-color: #38b2ac;
|
||||
}
|
||||
.orangeBg {
|
||||
background-color: rgba(237, 137, 54, var(--bg-opacity));
|
||||
background-color: #ed8936;
|
||||
}
|
||||
.pinkBg {
|
||||
background-color: rgba(237, 100, 166, var(--bg-opacity));
|
||||
background-color: #ed64a6;
|
||||
}
|
||||
}
|
||||
|
||||
.startpicker-container2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user