sk_fems_ui commit
This commit is contained in:
unknown
275
components/common/select/SelectDate.vue
Normal file
275
components/common/select/SelectDate.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user