gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix icon datepicker

Browse Source
This commit is contained in:
Pham Hoang Manh/(Pham Hoang Manh)/현장대리인/SK
2025-08-12 18:00:01 +09:00
parent ffdc56b8f1
commit 7d2bcb9496
7 changed files with 86 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/images/SwapRight.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="black" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

3
assets/images/SwapRight_Dark.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

1
assets/scss/common.scss
View File

@ -954,6 +954,7 @@ a {
& th, & th,
& td { & td {
height: 48px; height: 48px;
color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
} }
} }

12
components/common/Datepicker.vue
View File

@ -23,14 +23,14 @@
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
</template> --> </template> -->
<template v-slot:append> <template v-slot:append>
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" /> <a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template> </template>
<template #append-outer> <template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div> <div ref="startpicker-container" id="startpicker-container"></div>
</template> </template>
</v-text-field> </v-text-field>
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }"> <div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt=""> <img :src="arrowIcon">
</div> </div>
<v-text-field <v-text-field
v-show="isRange" v-show="isRange"
@ -43,7 +43,9 @@
outlined outlined
> >
<template #append> <template #append>
<v-icon size="20">$icoCalendar</v-icon> <div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template> </template>
<template #append-outer> <template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div> <div ref="endpicker-container" id="endpicker-container"></div>
@ -212,9 +214,9 @@ export default {
}, },
arrowIcon() { arrowIcon() {
if(this.isDarkMode){ if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png'); return require('@/assets/images/SwapRight_Dark.svg');
} }
return require('@/assets/images/arrow_datepicker.png'); return require('@/assets/images/SwapRight.svg');
} }
}, },
watch: { watch: {

97
components/common/DatepickerTopView.vue
View File

@ -5,10 +5,7 @@
<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1" <!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon >mdi-record-circle</v-icon
> --> > -->
<v-icon <v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>
$icoBulletPoint $icoBulletPoint
</v-icon> </v-icon>
{{ label }} {{ label }}
@ -16,17 +13,11 @@
</v-col> </v-col>
<v-col :cols="label ? textCols : ''"> <v-col :cols="label ? textCols : ''">
<div class="datepicker-container"> <div class="datepicker-container">
<v-text-field <v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
id="startpicker" :class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
ref="startpicker" outlined>
v-model="fromDtValue" <template v-slot:append>
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" <a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
</template> </template>
<template #append-outer> <template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div> <div ref="startpicker-container" id="startpicker-container"></div>
@ -36,18 +27,13 @@
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }"> <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt=""> <img :src="arrowIcon" alt="">
</div> </div>
<v-text-field <v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
v-show="isRange" :class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
id="endpicker" outlined>
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append> <template #append>
<v-icon size="20">$icoCalendar</v-icon> <div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template> </template>
<template #append-outer> <template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div> <div ref="endpicker-container" id="endpicker-container"></div>
@ -91,9 +77,9 @@ export default {
require: false, require: false,
default: false, default: false,
}, },
isRangeOption:{ isRangeOption: {
type:Boolean, type: Boolean,
require:false, require: false,
default: true default: true
} }
}, },
@ -177,21 +163,23 @@ export default {
this.myOptions.viewFormat, this.myOptions.viewFormat,
); );
}, },
toDtChange(){ toDtChange() {
return { return {
isCheck:this.searchParam.isCheck , isCheck: this.searchParam.isCheck,
toDt : Utility.setFormatDate( toDt: Utility.setFormatDate(
this.searchParam.toDt, this.searchParam.toDt,
this.myOptions.viewFormat, this.myOptions.viewFormat,
)}; )
};
}, },
fromDtChange(){ fromDtChange() {
return { return {
isCheck:this.searchParam.isCheck , isCheck: this.searchParam.isCheck,
fromDt : Utility.setFormatDate( fromDt: Utility.setFormatDate(
this.searchParam.fromDt, this.searchParam.fromDt,
this.myOptions.viewFormat, this.myOptions.viewFormat,
)}; )
};
}, },
defaultRange() { defaultRange() {
return this.searchParam.defaultRange return this.searchParam.defaultRange
@ -205,10 +193,10 @@ export default {
); );
}, },
arrowIcon() { arrowIcon() {
if(this.isDarkMode){ if (this.isDarkMode) {
return require('@/assets/images/arrow_datepicker_dm.png'); return require('@/assets/images/SwapRight_Dark.svg');
} }
return require('@/assets/images/arrow_datepicker.png'); return require('@/assets/images/SwapRight.svg');
} }
}, },
watch: { watch: {
@ -242,24 +230,24 @@ export default {
this.endDatepickerInstance.setDate(new Date(newVal)); this.endDatepickerInstance.setDate(new Date(newVal));
} }
}, },
fromDtChange:{ fromDtChange: {
deep:true, deep: true,
handler(){ handler() {
if(this.fromDtChange.isCheck){ if (this.fromDtChange.isCheck) {
this.fromDtChanged(this.fromDtChange.fromDt); this.fromDtChanged(this.fromDtChange.fromDt);
this.setPageData({ this.setPageData({
isCheck : false isCheck: false
}) })
} }
} }
}, },
toDtChange:{ toDtChange: {
deep:true, deep: true,
handler(){ handler() {
if(this.toDtChange.isCheck){ if (this.toDtChange.isCheck) {
this.toDtChanged(this.toDtChange.toDt); this.toDtChanged(this.toDtChange.toDt);
this.setPageData({ this.setPageData({
isCheck : false isCheck: false
}) })
} }
} }
@ -370,7 +358,7 @@ export default {
if ( if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) || (myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) === defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat) compareDt.format(this.myOptions.sendFormat)
) { ) {
// if(this.cmCycleFlag){ // if(this.cmCycleFlag){
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
@ -400,7 +388,7 @@ export default {
if ( if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) || (myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) === defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat) compareDt.format(this.myOptions.sendFormat)
) { ) {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
} else { } else {
@ -424,6 +412,7 @@ export default {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
background-color: #edf4fc; background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon { .tui-timepicker-column.tui-timepicker-colon {
color: #000 !important; color: #000 !important;
} }

53
components/common/PastRsltDatePicker.vue
View File

@ -2,25 +2,19 @@
<v-row class="search-box" align="center" no-gutters> <v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols"> <v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label"> <label for="" class="search-box-label">
<v-icon small color="primary" <v-icon small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']" :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
>$icoBulletPoint</v-icon>
{{ label }} {{ label }}
</label> </label>
</v-col> </v-col>
<v-col :cols="label ? textCols : ''"> <v-col :cols="label ? textCols : ''">
<div :class="['datepicker-container', customClass]" > <div :class="['datepicker-container', customClass]">
<v-text-field <v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
id="startpicker" :class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
ref="startpicker" outlined>
v-model="fromDtValue" <template #append>
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" <a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
:hide-details="true" <!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
</template> </template>
<template #append-outer> <template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div> <div ref="startpicker-container" id="startpicker-container"></div>
@ -29,18 +23,13 @@
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }"> <div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt=""> <img :src="arrowIcon" alt="">
</div> </div>
<v-text-field <v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
v-show="isRange" :class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
id="endpicker" outlined>
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append> <template #append>
<v-icon size="20">$icoCalendar</v-icon> <div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template> </template>
<template #append-outer> <template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div> <div ref="endpicker-container" id="endpicker-container"></div>
@ -98,6 +87,7 @@ export default {
searchParam(state) { searchParam(state) {
return state.pageData[this.parentPrgmId]; return state.pageData[this.parentPrgmId];
}, },
isDarkMode: "isDarkMode",
}), }),
myCmCycle() { myCmCycle() {
return this.searchParam.cmCycle; return this.searchParam.cmCycle;
@ -138,10 +128,10 @@ export default {
); );
}, },
arrowIcon() { arrowIcon() {
if(this.isDarkMode){ if (this.isDarkMode) {
return require('@/assets/images/arrow_datepicker_dm.png'); return require('@/assets/images/SwapRight_Dark.svg');
} }
return require('@/assets/images/arrow_datepicker.png'); return require('@/assets/images/SwapRight.svg');
} }
}, },
watch: { watch: {
@ -280,7 +270,7 @@ export default {
if ( if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) || (myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) === defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat) compareDt.format(this.myOptions.sendFormat)
) { ) {
// if(this.cmCycleFlag){ // if(this.cmCycleFlag){
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
@ -310,7 +300,7 @@ export default {
if ( if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) || (myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) === defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat) compareDt.format(this.myOptions.sendFormat)
) { ) {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
} else { } else {
@ -334,6 +324,7 @@ export default {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
background-color: #edf4fc; background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon { .tui-timepicker-column.tui-timepicker-colon {
color: #000 !important; color: #000 !important;
} }

15
pages/ems/base/PastRsltDataReadPage.vue
View File

@ -12,7 +12,7 @@
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem" <component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
customClass="select-large" /> class="no-gutters" customClass="select-large" />
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<!-- 대상일 --> <!-- 대상일 -->
@ -29,17 +29,17 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row ref="contents"> <v-row ref="contents">
<v-col :cols="12" style="height: 100%" class="h100"> <v-col :cols="12" class="h100">
<v-card class="px-5 py-5 h100"> <v-card class="px-5 py-5 h100">
<div ref="gridParent" class="h100 px-5" style="height: 100%"> <div ref="gridParent" class="h100 px-5">
<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName" <component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" /> :parentPrgmId="myPrgmId" />
</div> </div>
<div class="d-flex align-center justify-space-between"> </v-card>
<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0" >
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit" <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
@loadData="changeGrid" /> @loadData="changeGrid" />
</div> </div>
</v-card>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
@ -61,7 +61,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import DateUtility from '~/plugins/dateUtility'; import DateUtility from '~/plugins/dateUtility';
// import Search from "~/components/common/search"; // import Search from "~/components/common/search";
import EvtObjPop from '~/components/common/modal/EvtObjPop'; import EvtObjPop from '~/components/common/modal/EvtObjPop';
import pagination from '~/components/Pagination'; import pagination from '~/components/common/Pagination';
let myTitle; let myTitle;
// const myPrgmId = "PRG0052"; // const myPrgmId = "PRG0052";
@ -212,7 +212,7 @@ export default {
}, },
layoutInit() { layoutInit() {
const searchFilterHeight = this.$refs.searchFilter.offsetHeight; const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`; this.$refs.contents.style.height = `calc(100% - 90px - ${searchFilterHeight}px) `;
}, },
async setFromDt() { async setFromDt() {
this.pageData.fromDt = Utility.setBeforetDate( this.pageData.fromDt = Utility.setBeforetDate(
@ -220,7 +220,6 @@ export default {
this.pageData.toDt, this.pageData.toDt,
'YYYYMMDD', 'YYYYMMDD',
); );
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
}, },
gridInit() { gridInit() {
this.loadGrid = false; this.loadGrid = false;