sk_fems_ui/components/common/select/SelectDate.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>
					<v-menu
						ref="fromMenu"
						v-model="menu"
						:close-on-content-click="false"
						:nudge-right="40"
						transition="scale-transition"
						offset-y
						min-width="auto"
					>
						<template v-slot:activator="{ on, attrs }">
							<v-text-field
								v-model="fromDtValue"
								readonly
								v-bind="attrs"
								v-on="on"
								append-icon="mdi-calendar"
								class="v-input__custom"
							></v-text-field>
						</template>
						<v-date-picker
							ref="fromPicker"
							:type="pickerType"
							no-title
							v-model="fromDtValue"
							:max="maxDate"
							@input="menu = false"
							@click:year="saveFromDt"
						></v-date-picker>
					</v-menu>
				</v-col>
				<v-col :cols="1"></v-col>
				<v-col>
					<v-menu
						ref="toMenu"
						v-model="menu2"
						:close-on-content-click="false"
						transition="scale-transition"
						offset-y
						min-width="auto"
					>
						<template v-slot:activator="{ on, attrs }">
							<v-text-field
								v-model="toDtValue"
								readonly
								v-bind="attrs"
								v-on="on"
								append-icon="mdi-calendar"
								class="v-input__custom"
							></v-text-field>
						</template>
						<v-date-picker
							ref="toPicker"
							:type="pickerType"
							no-title
							v-model="toDtValue"
							:max="maxDate"
							@input="menu2 = false"
							@click:year="saveToDt"
						></v-date-picker>
					</v-menu>
				</v-col>
			</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,

			menu: false,
			menu2: false,
			modal: false,
			startDateMenu: false,
			endDateMenu: false,
			YEAR: 'MONTH',
		};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
		}),
		myCmCycle() {
			return this.searchParam[this.parentPrgmId].cmCycle;
		},
		dateFormatTypeGet() {
			return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYY-MM';
		},
		dateFormatTypeSet() {
			return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYYMM';
		},
		maxDate() {
			return Utility.setFormatDate('today', this.dateFormatTypeGet);
		},
		pickerType() {
			return this.myCmCycle == 'CYC_YEAR' ? 'year' : 'month';
		},
		fromDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].fromDt,
					this.dateFormatTypeGet,
				);
			},
			set(value) {
				return this.setPageData({
					fromDt: Utility.setFormatDate(value, this.dateFormatTypeSet),
				});
			},
		},
		toDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].toDt,
					this.dateFormatTypeGet,
				);
			},
			set(value) {
				return this.setPageData({
					toDt: Utility.setFormatDate(value, this.dateFormatTypeSet),
				});
			},
		},
		defaultRange() {
			return this.searchParam[this.parentPrgmId].defaultRange[this.myCmCycle];
		},
		isRange() {
			return this.defaultRange !== null && this.defaultRange > 0;
		},
	},
	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);
			}
		},
		menu(val) {
			if (val && this.myCmCycle == 'CYC_YEAR') {
				this.$nextTick(() => (this.$refs.fromPicker.activePicker = 'YEAR'));
			}
		},
		menu2(val) {
			if (val && this.myCmCycle == 'CYC_YEAR') {
				this.$nextTick(() => (this.$refs.toPicker.activePicker = 'YEAR'));
			}
		},
	},
	created() {},
	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(this.dateFormatTypeSet) ===
					compareDt.format(this.dateFormatTypeSet)
			) {
				// console.log("fromDtValueChkRang::통과");
				this.setPageData({ isFind: true });
			} else {
				this.setPageData({
					fromDt: Utility.setBeforetDate(
						this.searchParam[this.parentPrgmId],
						compareDt,
						this.dateFormatTypeSet,
					),
				});
			}
		},
		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(this.dateFormatTypeSet) ===
					compareDt.format(this.dateFormatTypeSet)
			) {
				// console.log("toDtValueChkRang::통과");
				this.setPageData({ isFind: true });
			} else {
				this.setPageData({
					toDt: Utility.setAftertDate(
						this.searchParam[this.parentPrgmId],
						compareDt,
						this.dateFormatTypeSet,
					),
				});
			}
		},
		saveFromDt(date) {
			if (this.myCmCycle == 'CYC_YEAR') {
				this.$refs.fromPicker.activePicker = 'YEAR';
				this.setPageData({ fromDt: date + '' });
				this.menu = false;
			}
		},
		saveToDt(date) {
			if (this.myCmCycle == 'CYC_YEAR') {
				this.$refs.toPicker.activePicker = 'YEAR';
				this.setPageData({ toDt: date + '' });
				this.menu2 = false;
			}
		},
	},
};
</script>

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