sk_fems_ui commit
This commit is contained in:
unknown
68
components/common/search/CheckBox.vue
Normal file
68
components/common/search/CheckBox.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="labelCols ? 11 - labelCols : ''">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: state => state.isDarkMode,
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
chkValue: {
|
||||
get() {
|
||||
return this.searchParam[this.item.valueKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.item.valueKey]: value });
|
||||
},
|
||||
},
|
||||
labelCols() {
|
||||
let myCols = 0;
|
||||
if (this.item.label) {
|
||||
myCols = this.item.labelCols || '4';
|
||||
}
|
||||
return myCols;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkValue() {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
415
components/common/search/CustomDatepicker.vue
Normal file
415
components/common/search/CustomDatepicker.vue
Normal file
@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<v-row
|
||||
class="search-box"
|
||||
align="center"
|
||||
no-gutters
|
||||
style="margin: 14px 0px 0px"
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="labelCols ? 11 - labelCols : ''">
|
||||
<div :class="isRange ? 'datepicker-container' : ''">
|
||||
<v-text-field
|
||||
id="startpicker"
|
||||
ref="startpicker"
|
||||
v-model="fromDtValue"
|
||||
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
|
||||
readonly
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<v-text-field
|
||||
v-show="isRange"
|
||||
id="endpicker"
|
||||
ref="endpicker"
|
||||
v-model="toDtValue"
|
||||
class="v-input__custom"
|
||||
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
|
||||
readonly
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="endpicker-container" id="endpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import TuiDatepicker from 'tui-date-picker';
|
||||
import Utility from '~/plugins/utility';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
today: new Date(),
|
||||
startDatepickerInstance: null,
|
||||
endDatepickerInstance: null,
|
||||
startDtValue: null,
|
||||
endDtValue: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
if (!this.item.dataPath) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.item.dataPath];
|
||||
}
|
||||
},
|
||||
}),
|
||||
labelCols() {
|
||||
let myCols = 0;
|
||||
if (this.item.label) {
|
||||
myCols = this.item.labelCols || '4';
|
||||
}
|
||||
return myCols;
|
||||
},
|
||||
myCmCycle() {
|
||||
return this.searchParam.cmCycle;
|
||||
},
|
||||
myOptions() {
|
||||
let returnObj = {};
|
||||
switch (this.myCmCycle) {
|
||||
case 'CYC_YEAR':
|
||||
returnObj = {
|
||||
type: 'year',
|
||||
viewFormat: 'YYYY',
|
||||
pickerFormat: 'YYYY',
|
||||
sendFormat: 'YYYY',
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
returnObj = {
|
||||
type: 'month',
|
||||
viewFormat: 'YYYY-MM',
|
||||
pickerFormat: 'YYYY-MM',
|
||||
sendFormat: 'YYYYMM',
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
returnObj = {
|
||||
type: 'date',
|
||||
viewFormat: 'YYYY-MM-DD',
|
||||
pickerFormat: 'yyyy-MM-dd',
|
||||
sendFormat: 'YYYYMMDD',
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
returnObj = {
|
||||
type: 'date',
|
||||
viewFormat:
|
||||
'YYYY-MM-DD' + (this.item.timePicker ? ' HH:mm:ss' : ''),
|
||||
pickerFormat:
|
||||
'yyyy-MM-dd' + (this.item.timePicker ? ' HH:mm A' : ''),
|
||||
sendFormat: this.item.timePicker
|
||||
? 'YYYY-MM-DD HH:mm:ss'
|
||||
: 'YYYYMMDD',
|
||||
};
|
||||
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return returnObj;
|
||||
},
|
||||
// maxDate() {
|
||||
// return Utility.setFormatDate("today", this.myOptions.format);
|
||||
// },
|
||||
fromDtValue() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam.fromDt,
|
||||
this.myOptions.viewFormat,
|
||||
);
|
||||
},
|
||||
toDtValue() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam.toDt,
|
||||
this.myOptions.viewFormat,
|
||||
);
|
||||
},
|
||||
defaultRange() {
|
||||
// console.log(this.searchParam.defaultRange);
|
||||
return this.searchParam.defaultRange
|
||||
? this.searchParam.defaultRange[this.myCmCycle]
|
||||
: null;
|
||||
},
|
||||
isRange() {
|
||||
return (
|
||||
(this.defaultRange !== null && this.defaultRange > 0) ||
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
myCmCycle() {
|
||||
// this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
|
||||
this.startDatepickerInstance.setType(this.myOptions.type);
|
||||
this.endDatepickerInstance.setType(this.myOptions.type);
|
||||
},
|
||||
fromDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.toDtValueChkRang(newVal);
|
||||
this.startDatepickerInstance.setDate(new Date(newVal));
|
||||
} else {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
toDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.fromDtValueChkRang(newVal);
|
||||
this.endDatepickerInstance.setDate(new Date(newVal));
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (!this.searchParam.fromDt) {
|
||||
let defaultDate = '';
|
||||
if (this.item.timePicker) {
|
||||
defaultDate = Utility.setFormatDate(this.today, 'YYYY-MM-DD');
|
||||
let dt = {
|
||||
fromDt: defaultDate + ' 00:00:00',
|
||||
toDt: defaultDate + ' 23:59:59',
|
||||
};
|
||||
if (this.item.dataPath) {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: dt,
|
||||
});
|
||||
} else {
|
||||
this.setPageData(dt);
|
||||
}
|
||||
} else {
|
||||
defaultDate = Utility.setFormatDate(this.today, 'YYYYMMDD');
|
||||
let dt = { fromDt: defaultDate, toDt: defaultDate };
|
||||
if (this.item.dataPath) {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: dt,
|
||||
});
|
||||
} else {
|
||||
this.setPageData(dt);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const startContainer = document.getElementById('startpicker-container');
|
||||
const startTarget = document.getElementById('startpicker');
|
||||
const endContainer = document.getElementById('endpicker-container');
|
||||
const endTarget = document.getElementById('endpicker');
|
||||
|
||||
// datepicker 생성
|
||||
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
|
||||
date: this.today,
|
||||
language: 'ko',
|
||||
type: this.myOptions.type, // "date", // type: date || month || year
|
||||
input: {
|
||||
element: startTarget,
|
||||
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
|
||||
},
|
||||
timePicker: this.item.timePicker ? { showMeridiem: false } : false,
|
||||
});
|
||||
|
||||
// datepicker 초기값 생성
|
||||
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
|
||||
// datepicker 초기값 생성 끝
|
||||
|
||||
// datepicker 변경시 이벤트 추가
|
||||
this.startDatepickerInstance.on('change', () => this.getStartDt());
|
||||
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
|
||||
|
||||
// if (this.isRange) {
|
||||
// datepicker 생성
|
||||
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
|
||||
date: this.today,
|
||||
language: 'ko',
|
||||
type: this.myOptions.type, // "date", // type: date || month || year
|
||||
input: {
|
||||
element: endTarget,
|
||||
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
|
||||
},
|
||||
timePicker: this.item.timePicker ? { showMeridiem: false } : false,
|
||||
});
|
||||
// datepicker 생성 끝
|
||||
|
||||
// datepicker 초기값 생성
|
||||
this.endDatepickerInstance.setDate(new Date(this.toDtValue));
|
||||
// datepicker 초기값 생성 끝
|
||||
|
||||
// datepicker 변경시 이벤트 추가
|
||||
this.endDatepickerInstance.on('change', () => this.getEndDt());
|
||||
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setDataPathPageData: 'setDataPathPageData',
|
||||
}),
|
||||
getStartDt() {
|
||||
const dt = this.startDatepickerInstance.getDate();
|
||||
let stDt = {
|
||||
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
|
||||
};
|
||||
if (this.item.dataPath) {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: stDt,
|
||||
});
|
||||
} else {
|
||||
this.setPageData(stDt);
|
||||
}
|
||||
},
|
||||
getEndDt() {
|
||||
const dt = this.endDatepickerInstance.getDate();
|
||||
let edDt = {
|
||||
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
|
||||
};
|
||||
if (this.item.dataPath) {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: edDt,
|
||||
});
|
||||
} else {
|
||||
this.setPageData(edDt);
|
||||
}
|
||||
},
|
||||
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.myOptions.sendFormat) ===
|
||||
compareDt.format(this.myOptions.sendFormat)
|
||||
) {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
} else {
|
||||
let dt = {
|
||||
fromDt: Utility.setBeforetDate(
|
||||
this.searchParam,
|
||||
compareDt,
|
||||
this.myOptions.sendFormat,
|
||||
),
|
||||
};
|
||||
if (this.item.dataPath) {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: dt,
|
||||
});
|
||||
} else {
|
||||
this.setPageData(dt);
|
||||
}
|
||||
}
|
||||
},
|
||||
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.myOptions.sendFormat) ===
|
||||
compareDt.format(this.myOptions.sendFormat)
|
||||
) {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
} else {
|
||||
let dt = {
|
||||
toDt: Utility.setAftertDate(
|
||||
this.searchParam,
|
||||
compareDt,
|
||||
this.myOptions.sendFormat,
|
||||
),
|
||||
};
|
||||
if (this.item.dataPath) {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: dt,
|
||||
});
|
||||
} else {
|
||||
this.setPageData(dt);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #edf4fc;
|
||||
.tui-timepicker-column.tui-timepicker-colon {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
components/common/search/Datepicker.vue
Normal file
355
components/common/search/Datepicker.vue
Normal file
@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<v-row
|
||||
class="search-box"
|
||||
align="center"
|
||||
no-gutters
|
||||
style="margin: 14px 0px 0px"
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCol">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="labelCols ? 11 - labelCols : ''">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<v-text-field
|
||||
id="startpicker"
|
||||
ref="startpicker"
|
||||
v-model="fromDtValue"
|
||||
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
|
||||
readonly
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<v-text-field
|
||||
v-show="isRange"
|
||||
id="endpicker"
|
||||
ref="endpicker"
|
||||
v-model="toDtValue"
|
||||
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
|
||||
readonly
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="endpicker-container" id="endpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import TuiDatepicker from 'tui-date-picker';
|
||||
import Utility from '~/plugins/utility';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
labelCol: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
today: new Date(),
|
||||
startDatepickerInstance: null,
|
||||
endDatepickerInstance: null,
|
||||
startDtValue: null,
|
||||
endDtValue: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
labelCols() {
|
||||
let myCols = 0;
|
||||
if (this.item.label) {
|
||||
myCols = this.item.labelCols || '4';
|
||||
}
|
||||
return myCols;
|
||||
},
|
||||
myCmCycle() {
|
||||
return this.searchParam.cmCycle;
|
||||
},
|
||||
myOptions() {
|
||||
let returnObj = {};
|
||||
switch (this.myCmCycle) {
|
||||
case 'CYC_YEAR':
|
||||
returnObj = {
|
||||
type: 'year',
|
||||
viewFormat: 'YYYY',
|
||||
pickerFormat: 'YYYY',
|
||||
sendFormat: 'YYYY',
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
returnObj = {
|
||||
type: 'month',
|
||||
viewFormat: 'YYYY-MM',
|
||||
pickerFormat: 'YYYY-MM',
|
||||
sendFormat: 'YYYYMM',
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
returnObj = {
|
||||
type: 'date',
|
||||
viewFormat: 'YYYY-MM-DD',
|
||||
pickerFormat: 'yyyy-MM-dd',
|
||||
sendFormat: 'YYYYMMDD',
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
returnObj = {
|
||||
type: 'date',
|
||||
viewFormat:
|
||||
'YYYY-MM-DD' + (this.item.timePicker ? ' HH:mm:ss' : ''),
|
||||
pickerFormat:
|
||||
'yyyy-MM-dd' + (this.item.timePicker ? ' HH:mm A' : ''),
|
||||
sendFormat: this.item.timePicker
|
||||
? 'YYYY-MM-DD HH:mm:ss'
|
||||
: 'YYYYMMDD',
|
||||
};
|
||||
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return returnObj;
|
||||
},
|
||||
// maxDate() {
|
||||
// return Utility.setFormatDate("today", this.myOptions.format);
|
||||
// },
|
||||
fromDtValue() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam.fromDt,
|
||||
this.myOptions.viewFormat,
|
||||
);
|
||||
},
|
||||
toDtValue() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam.toDt,
|
||||
this.myOptions.viewFormat,
|
||||
);
|
||||
},
|
||||
defaultRange() {
|
||||
// console.log(this.searchParam.defaultRange);
|
||||
return this.searchParam.defaultRange
|
||||
? this.searchParam.defaultRange[this.myCmCycle]
|
||||
: null;
|
||||
},
|
||||
isRange() {
|
||||
return (
|
||||
(this.defaultRange !== null && this.defaultRange > 0) ||
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
myCmCycle() {
|
||||
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
|
||||
this.startDatepickerInstance.setType(this.myOptions.type);
|
||||
this.endDatepickerInstance.setType(this.myOptions.type);
|
||||
},
|
||||
fromDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.toDtValueChkRang(newVal);
|
||||
this.startDatepickerInstance.setDate(new Date(newVal));
|
||||
} else {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
toDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.fromDtValueChkRang(newVal);
|
||||
this.endDatepickerInstance.setDate(new Date(newVal));
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (!this.searchParam.fromDt) {
|
||||
let defaultDate = '';
|
||||
if (this.item.timePicker) {
|
||||
defaultDate = Utility.setFormatDate(this.today, 'YYYY-MM-DD');
|
||||
this.setPageData({
|
||||
fromDt: defaultDate + ' 00:00:00',
|
||||
toDt: defaultDate + ' 23:59:59',
|
||||
});
|
||||
} else {
|
||||
defaultDate = Utility.setFormatDate(this.today, 'YYYYMMDD');
|
||||
this.setPageData({ fromDt: defaultDate, toDt: defaultDate });
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const startContainer = document.getElementById('startpicker-container');
|
||||
const startTarget = document.getElementById('startpicker');
|
||||
const endContainer = document.getElementById('endpicker-container');
|
||||
const endTarget = document.getElementById('endpicker');
|
||||
|
||||
// datepicker 생성
|
||||
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
|
||||
date: this.today,
|
||||
language: 'ko',
|
||||
type: this.myOptions.type, // "date", // type: date || month || year
|
||||
input: {
|
||||
element: startTarget,
|
||||
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
|
||||
},
|
||||
timePicker: this.item.timePicker,
|
||||
calendar: {
|
||||
showToday: false,
|
||||
},
|
||||
});
|
||||
// datepicker 생성
|
||||
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
|
||||
date: this.today,
|
||||
language: 'ko',
|
||||
type: this.myOptions.type, // "date", // type: date || month || year
|
||||
input: {
|
||||
element: endTarget,
|
||||
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
|
||||
},
|
||||
timePicker: this.item.timePicker,
|
||||
calendar: {
|
||||
showToday: false,
|
||||
},
|
||||
});
|
||||
// datepicker 생성 끝
|
||||
|
||||
// datepicker 초기값 생성
|
||||
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
|
||||
// datepicker 초기값 생성 끝
|
||||
|
||||
// datepicker 변경시 이벤트 추가
|
||||
this.startDatepickerInstance.on('change', () => this.getStartDt());
|
||||
this.endDatepickerInstance.on('change', () => this.getEndDt());
|
||||
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
getStartDt() {
|
||||
const dt = this.startDatepickerInstance.getDate();
|
||||
this.setPageData({
|
||||
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
|
||||
});
|
||||
},
|
||||
getEndDt() {
|
||||
const dt = this.endDatepickerInstance.getDate();
|
||||
this.setPageData({
|
||||
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
|
||||
});
|
||||
},
|
||||
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.myOptions.sendFormat) ===
|
||||
compareDt.format(this.myOptions.sendFormat)
|
||||
) {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
} else {
|
||||
this.setPageData({
|
||||
fromDt: Utility.setBeforetDate(
|
||||
this.searchParam,
|
||||
compareDt,
|
||||
this.myOptions.sendFormat,
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
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.myOptions.sendFormat) ===
|
||||
compareDt.format(this.myOptions.sendFormat)
|
||||
) {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
} else {
|
||||
this.setPageData({
|
||||
toDt: Utility.setAftertDate(
|
||||
this.searchParam,
|
||||
compareDt,
|
||||
this.myOptions.sendFormat,
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #edf4fc;
|
||||
.tui-timepicker-column.tui-timepicker-colon {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
components/common/search/SearchCmCycle.vue
Normal file
152
components/common/search/SearchCmCycle.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<v-row
|
||||
class="search-box"
|
||||
align="center"
|
||||
no-gutters
|
||||
style="margin: 14px 0px 0px"
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="labelCols ? 11 - labelCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam.cmCycleList"
|
||||
item-text="text"
|
||||
item-value="code"
|
||||
solo
|
||||
hide-details
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</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,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
if (!this.item.dataPath) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.item.dataPath];
|
||||
}
|
||||
},
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam.cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
let cmCycleObj = { cmCycle: value };
|
||||
if (!this.item.dataPath) {
|
||||
return this.setPageData(cmCycleObj);
|
||||
} else {
|
||||
return this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: cmCycleObj,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
labelCols() {
|
||||
let myCols = 0;
|
||||
if (this.item.label) {
|
||||
myCols = this.item.labelCols || '4';
|
||||
}
|
||||
return myCols;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectValue(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefaultDate(this.searchParam.cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setDataPathPageData: 'setDataPathPageData',
|
||||
}),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
const today = Utility.setFormatDate('today', 'YYYYMMDD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
endDate = Utility.setFormatDate(today, 'YYYY');
|
||||
srartDate = Utility.setBeforetDate(this.searchParam, endDate, 'YYYY');
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
endDate = Utility.setFormatDate(today, 'YYYYMM');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam,
|
||||
endDate,
|
||||
'YYYYMM',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam,
|
||||
endDate,
|
||||
'YYYYMMDD',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const dtObj = { fromDt: srartDate, toDt: endDate };
|
||||
if (!this.item.dataPath) {
|
||||
this.setPageData(dtObj);
|
||||
} else {
|
||||
this.setDataPathPageData({
|
||||
pathKey: this.item.dataPath,
|
||||
data: dtObj,
|
||||
});
|
||||
}
|
||||
// console.log(this.searchParam.cmCycle);
|
||||
// console.log(this.searchParam.dateRange);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
69
components/common/search/SearchInput.vue
Normal file
69
components/common/search/SearchInput.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<v-row
|
||||
class="search-box"
|
||||
align="center"
|
||||
no-gutters
|
||||
style="margin: 14px 0px 0px"
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="labelCols ? 11 - labelCols : ''">
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
InputValue: {
|
||||
get() {
|
||||
return this.searchParam[this.item.valueNm];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.item.valueNm]: value });
|
||||
},
|
||||
},
|
||||
labelCols() {
|
||||
let myCols = 0;
|
||||
if (this.item.label) {
|
||||
myCols = this.item.labelCols || '4';
|
||||
}
|
||||
return myCols;
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
112
components/common/search/SearchSelect.vue
Normal file
112
components/common/search/SearchSelect.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<v-row
|
||||
class="search-box"
|
||||
align="center"
|
||||
no-gutters
|
||||
style="margin: 14px 0px 0px"
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="labelCols ? 11 - labelCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[item.resKey + 'List']"
|
||||
item-text="text"
|
||||
item-value="code"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.item.resKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.item.resKey]: value });
|
||||
},
|
||||
},
|
||||
labelCols() {
|
||||
let myCols = 0;
|
||||
if (this.item.label) {
|
||||
myCols = this.item.labelCols || '4';
|
||||
}
|
||||
return myCols;
|
||||
},
|
||||
// chkVlue() {
|
||||
// return this.searchParam.blocId;
|
||||
// },
|
||||
chkBefoerLoad() {
|
||||
return this.item.befoerLoad
|
||||
? this.searchParam[this.item.befoerLoad]
|
||||
: null;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectValue() {
|
||||
if (this.item.autoLoad) this.setPageData({ isFind: true });
|
||||
},
|
||||
chkBefoerLoad() {
|
||||
if (this.item.befoerLoad)
|
||||
this.loadData(
|
||||
Object.assign(this.item.sendParam, {
|
||||
[this.item.paramKey]: this.searchParam[this.item.befoerLoad],
|
||||
}),
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (!this.item.befoerLoad) this.loadData(this.item.sendParam || {});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getSearchList: 'modules/search/getSearchList',
|
||||
}),
|
||||
loadData(params) {
|
||||
this.getSearchList({
|
||||
apiKey: this.item.apiKey,
|
||||
resKey: this.item.resKey,
|
||||
dataCd: this.item.dataCd,
|
||||
dataNm: this.item.dataNm,
|
||||
addAll: this.item.addAll,
|
||||
params,
|
||||
// addAll: this.item.addAll || false
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
105
components/common/search/index.vue
Normal file
105
components/common/search/index.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters style="margin: 14px 0px 0px">
|
||||
<v-col
|
||||
v-if="chkSearchOptions"
|
||||
:cols="chkSearchOptions.cols || '12'"
|
||||
:class="chkSearchOptions.class || ''"
|
||||
>
|
||||
<v-row align="center" no-gutters>
|
||||
<template v-for="(item, index) in chkSearchOptions.list">
|
||||
<!-- <v-col
|
||||
:cols="item.cols"
|
||||
:class="item.class || ''"
|
||||
:key="'searchOptions' + index"
|
||||
>
|
||||
<component
|
||||
:is="item.type ? item.type : null"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="item"
|
||||
/>
|
||||
</v-col> -->
|
||||
<v-col :cols="item.cols" :key="'searchOptions' + index">
|
||||
<component
|
||||
:is="item.type ? item.type : null"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="item"
|
||||
/>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer v-if="chkSearchOptions && chkSearchButtons"></v-spacer>
|
||||
<v-col
|
||||
v-if="chkSearchButtons"
|
||||
:cols="chkSearchButtons.cols || '12'"
|
||||
:class="chkSearchButtons.class || ''"
|
||||
>
|
||||
<template v-for="(item, index) in chkSearchButtons.list">
|
||||
<component
|
||||
:key="'searchButtons' + index"
|
||||
:is="item.type ? item.type : null"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:gridName="item.bindingData"
|
||||
:class="{ 'mr-1': index < chkSearchButtons.list.length - 1 }"
|
||||
/>
|
||||
</template>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import SearchSelect from './SearchSelect';
|
||||
import SearchInput from './SearchInput';
|
||||
import SearchCmCycle from './SearchCmCycle';
|
||||
import DatePicker from './CustomDatepicker';
|
||||
import CheckBox from './CheckBox';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
|
||||
import FtnPlcMultiPop from '~/components/common/modal/FtnPlcMultiPop';
|
||||
import UserPopPage from '~/components/common/modal/UserPopPage';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SearchSelect,
|
||||
SearchInput,
|
||||
SearchCmCycle,
|
||||
DatePicker,
|
||||
CheckBox,
|
||||
BtnSearch,
|
||||
BtnExcelDownload,
|
||||
FtnPlcMultiPop,
|
||||
UserPopPage,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchItems(state) {
|
||||
return state.pageData[this.parentPrgmId].searchItems;
|
||||
},
|
||||
}),
|
||||
chkSearchOptions() {
|
||||
// console.log("chkSearchOptions", this.searchItems);
|
||||
return this.searchItems.options;
|
||||
},
|
||||
chkSearchButtons() {
|
||||
// console.log("chkSearchButtons", this.searchItems);
|
||||
return this.searchItems.buttons;
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user