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

Merge pull request 'fix icon datepicker' (#60) from dev-manhph1-figbug into dev

Browse Source 
Reviewed-on: #60
This commit is contained in:
dev
2025-08-12 18:47:08 +09:00
parent 8d444eafcd 7d2bcb9496
commit 0825663c64
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,
& td {
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>
</template> -->
<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 #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
<img :src="arrowIcon">
</div>
<v-text-field
v-show="isRange"
@ -43,7 +43,9 @@
outlined
>
<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 #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -212,9 +214,9 @@ export default {
},
arrowIcon() {
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: {

89
components/common/DatepickerTopView.vue
View File

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

47
components/common/PastRsltDatePicker.vue
View File

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

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

@ -12,7 +12,7 @@
</v-col>
<v-col :cols="3">
<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
customClass="select-large" />
class="no-gutters" customClass="select-large" />
</v-col>
<v-col :cols="3">
<!-- 대상일 -->
@ -29,17 +29,17 @@
</v-col>
</v-row>
<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">
<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"
:parentPrgmId="myPrgmId" />
</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"
@loadData="changeGrid" />
</div>
</v-card>
</v-col>
</v-row>
</div>
@ -61,7 +61,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import DateUtility from '~/plugins/dateUtility';
// import Search from "~/components/common/search";
import EvtObjPop from '~/components/common/modal/EvtObjPop';
import pagination from '~/components/Pagination';
import pagination from '~/components/common/Pagination';
let myTitle;
// const myPrgmId = "PRG0052";
@ -212,7 +212,7 @@ export default {
},
layoutInit() {
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() {
this.pageData.fromDt = Utility.setBeforetDate(
@ -220,7 +220,6 @@ export default {
this.pageData.toDt,
'YYYYMMDD',
);
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
},
gridInit() {
this.loadGrid = false;