sk_fems_ui/components/common/select/SelectDateVc.vue

<template>
	<v-row class="search-box" align="center" no-gutters>
		<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"
						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"
							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: 4,
		},
	},
	data() {
		return {
			label: '조회기간',
			labelPrepend: true,
			myAvailableDates: {
				start: null,
				end: null,
			},
		};
	},
	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;
		},
		fromDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].fromDt,
					'YYYY-MM-DD',
				);
			},
			set(value) {
				return this.setPageData({
					fromDt: Utility.setFormatDate(value, 'YYYYMMDD'),
				});
			},
		},
		toDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].toDt,
					'YYYY-MM-DD',
				);
			},
			set(value) {
				return this.setPageData({
					toDt: Utility.setFormatDate(value, 'YYYYMMDD'),
				});
			},
		},
	},
	watch: {
		fromDtValue(newVal, oldVal) {
			if (this.isRange && newVal !== 'Invalid Date' && newVal !== oldVal) {
				this.toDtValueChkRang(newVal);
			} else {
				this.setPageData({ isFind: true });
			}
		},
		toDtValue(newVal, oldVal) {
			if (this.isRange && newVal !== 'Invalid Date' && newVal !== oldVal) {
				this.fromDtValueChkRang(newVal);
			}
		},
	},
	created() {
		const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
		this.myAvailableDates = {
			start: null,
			end: today,
		};
	},
	// async mounted() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({}),
		fromDtValueChkRang(newDt) {
			const defaultDt = this.$dayjs(this.fromDtValue);
			const compareDt = this.$dayjs(newDt);
			const newDefault = Utility.setNewDefaultRange(
				this.myCmCycle,
				this.defaultRange,
			);
			const myRange = newDefault.range;
			const rangeKey = newDefault.key;
			const rangeGap = compareDt.diff(defaultDt, rangeKey);

			if (
				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
				defaultDt.format('YYYYMMDD') === compareDt.format('YYYYMMDD')
			) {
				// console.log("통과");
				this.setPageData({ isFind: true });
			} else {
				this.setPageData({
					fromDt: Utility.setBeforetDate(
						this.searchParam[this.parentPrgmId],
						compareDt,
						'YYYYMMDD',
					),
				});
			}
		},
		toDtValueChkRang(newDt) {
			const defaultDt = this.$dayjs(this.toDtValue);
			const compareDt = this.$dayjs(newDt);
			const newDefault = Utility.setNewDefaultRange(
				this.myCmCycle,
				this.defaultRange,
			);
			const myRange = newDefault.range;
			const rangeKey = newDefault.key;
			const rangeGap = defaultDt.diff(compareDt, rangeKey);

			if (
				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
				defaultDt.format('YYYYMMDD') === compareDt.format('YYYYMMDD')
			) {
				// console.log("통과");
				this.setPageData({ isFind: true });
			} else {
				this.setPageData({
					toDt: Utility.setAftertDate(
						this.searchParam[this.parentPrgmId],
						compareDt,
						'YYYYMMDD',
					),
				});
			}
		},
	},
};
</script>

<style scoped lang="scss">
::v-deep {
	.v-text-field__details {
		display: none;
	}
	.v-input__slot {
		margin-bottom: 0;
	}
}
</style>