sk_fems_ui commit

components/common/select/SelectDateSolo.vue

@@ -0,0 +1,150 @@
+<template>
+	<v-row class="search-box">
+		<v-col v-if="label" :cols="labelCols">
+			<label for="" class="search-box-label ft-size_14 ft-clr_g-c">
+				{{ label }}
+			</label>
+		</v-col>
+		<v-col :cols="label ? textCols : ''">
+			<!-- <DatePicker /> -->
+			<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="month"
+					no-title
+					v-model="fromDtValue"
+					:max="maxDate"
+					@input="menu = false"
+					@click:year="saveFromDt"
+				></v-date-picker>
+			</v-menu>
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+import { mapState, mapMutations, mapActions } from 'vuex';
+import DatePicker from '~/components/common/Datepicker';
+import Utility from '~/plugins/utility';
+
+export default {
+	components: {
+		DatePicker,
+	},
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		textCols: {
+			type: Number,
+			require: false,
+			default: 7,
+		},
+		labelCols: {
+			type: Number,
+			require: false,
+			default: 4,
+		},
+	},
+	data() {
+		return {
+			label: '조회연월',
+			labelPrepend: true,
+
+			menu: false,
+			modal: false,
+			startDateMenu: 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' : 'YYYY-MM';
+		},
+		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),
+				});
+			},
+		},
+	},
+	watch: {
+		fromDtValue(val) {
+			if (val) {
+				// alert(val);
+				// this.setPageData({ isFind: true });
+			}
+		},
+		menu(val) {
+			if (val && this.myCmCycle == 'CYC_YEAR') {
+				this.$nextTick(() => (this.$refs.fromPicker.activePicker = 'YEAR'));
+			}
+		},
+	},
+	created() {},
+	async mounted() {},
+	methods: {
+		...mapMutations({ setPageData: 'setPageData' }),
+		...mapActions({}),
+		saveFromDt(date) {
+			if (this.myCmCycle == 'CYC_YEAR') {
+				this.$refs.fromPicker.activePicker = 'YEAR';
+				this.setPageData({ fromDt: date + '' });
+				this.menu = false;
+			}
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep {
+	.v-text-field__details {
+		display: none;
+	}
+	.v-input__slot {
+		margin-bottom: 0;
+	}
+}
+</style>