sk_fems_ui commit

components/common/select/SelectDateVcTime.vue

@@ -0,0 +1,220 @@
+<template>
+	<v-row class="search-box">
+		<v-col v-if="label" :cols="labelCols">
+			<label for="" class="search-box-label">
+				{{ label }}
+			</label>
+		</v-col>
+		<v-col :cols="label ? textCols : ''">
+			<v-row>
+				<v-col class="pa-0">
+					<vc-date-picker
+						v-model="fromDtValue"
+						:available-dates="myAvailableDates"
+						:timezone="fromTimezone"
+						mode="dateTime"
+						is24hr
+						is-required
+					>
+						<template v-slot="{ inputEvents }">
+							<v-text-field
+								readonly
+								:value="fromDtValue"
+								v-on="inputEvents"
+								append-icon="mdi-calendar"
+								class="v-input__custom"
+							></v-text-field>
+						</template>
+					</vc-date-picker>
+				</v-col>
+				<template v-if="isRange">
+					<v-col cols="1" class="pa-0"></v-col>
+					<v-col class="pa-0">
+						<vc-date-picker
+							v-model="toDtValue"
+							:available-dates="myAvailableDates"
+							:timezone="toTimezone"
+							mode="dateTime"
+							is24hr
+							is-required
+						>
+							<template v-slot="{ inputEvents }">
+								<v-text-field
+									readonly
+									:value="toDtValue"
+									v-on="inputEvents"
+									append-icon="mdi-calendar"
+									class="v-input__custom"
+								></v-text-field>
+							</template>
+						</vc-date-picker>
+					</v-col>
+				</template>
+			</v-row>
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+import { mapState, mapMutations, mapActions } from 'vuex';
+import Utility from '~/plugins/utility';
+
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		textCols: {
+			type: Number,
+			require: false,
+			default: 8,
+		},
+		labelCols: {
+			type: Number,
+			require: false,
+			default: 3,
+		},
+	},
+	data() {
+		return {
+			label: '조회기간',
+			labelPrepend: true,
+			today: new Date(),
+			myAvailableDates: {
+				start: null,
+				end: null,
+			},
+			fromTimezone: '',
+			toTimezone: '',
+		};
+	},
+	computed: {
+		...mapState({
+			searchParam: state => state.pageData,
+		}),
+		myCmCycle() {
+			return this.searchParam[this.parentPrgmId].cmCycle;
+		},
+		defaultRange() {
+			return this.searchParam[this.parentPrgmId].defaultRange[this.myCmCycle];
+		},
+		isRange() {
+			return (
+				(this.defaultRange !== null && this.defaultRange > 0) ||
+				this.defaultRange === 'no limite'
+			);
+		},
+		fromDtValue: {
+			get() {
+				return Utility.setFormatDate(
+					this.searchParam[this.parentPrgmId].fromDt,
+					'YYYY-MM-DD HH:mm:ss',
+				);
+			},
+			set(value) {
+				return this.setPageData({
+					fromDt: Utility.setFormatDate(value, 'YYYY-MM-DD HH:mm') + ':00',
+				});
+			},
+		},
+		toDtValue: {
+			get() {
+				return Utility.setFormatDate(
+					this.searchParam[this.parentPrgmId].toDt,
+					'YYYY-MM-DD HH:mm:ss',
+				);
+			},
+			set(value) {
+				return this.setPageData({
+					toDt: Utility.setFormatDate(value, 'YYYY-MM-DD HH:mm') + ':00',
+				});
+			},
+		},
+	},
+	watch: {
+		fromDtValue(newVal, oldVal) {
+			if (
+				this.isRange &&
+				this.defaultRange !== 'no limite' &&
+				newVal !== 'Invalid Date' &&
+				newVal !== oldVal
+			) {
+				this.toDtValueChkRang(newVal);
+			}
+		},
+		toDtValue(newVal, oldVal) {
+			if (
+				this.isRange &&
+				this.defaultRange !== 'no limite' &&
+				newVal !== 'Invalid Date' &&
+				newVal !== oldVal
+			) {
+				this.fromDtValueChkRang(newVal);
+			}
+		},
+	},
+	created() {
+		const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
+		this.myAvailableDates = {
+			start: null,
+			end: today,
+		};
+		this.setPageData({
+			fromDt: today + ' 00:00:00',
+			toDt: today + ' 23:59:59',
+		});
+	},
+	// async mounted() {},
+	methods: {
+		...mapMutations({ setPageData: 'setPageData' }),
+		...mapActions({}),
+		fromDtValueChkRang(newDt) {
+			const defaultDt = this.$dayjs(this.fromDtValue);
+			const compareDt = this.$dayjs(newDt);
+			const rangGap = compareDt.diff(defaultDt, 'hour');
+			if (this.defaultRange > rangGap && rangGap > 0) {
+				// console.log("통과");
+			} else {
+				this.setPageData({
+					fromDt: Utility.setBeforetDate(
+						this.searchParam[this.parentPrgmId],
+						compareDt,
+						'YYYY-MM-DD',
+						'HH:mm:ss',
+					),
+				});
+			}
+		},
+		toDtValueChkRang(newDt) {
+			const defaultDt = this.$dayjs(this.toDtValue);
+			const compareDt = this.$dayjs(newDt);
+			const rangGap = defaultDt.diff(compareDt, 'hour');
+
+			if (this.defaultRange > rangGap && rangGap > 0) {
+				// console.log("통과");
+			} else {
+				this.setPageData({
+					toDt: Utility.setAftertDate(
+						this.searchParam[this.parentPrgmId],
+						compareDt,
+						'YYYY-MM-DD',
+						'HH:mm:ss',
+					),
+				});
+			}
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep {
+	.v-text-field__details {
+		display: none;
+	}
+	.v-input__slot {
+		margin-bottom: 0;
+	}
+}
+</style>