From 7baa87df1206c7c8b13e86731954fafbeab35f67 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 20 Aug 2025 10:17:23 +0900 Subject: [PATCH] Update 1908 --- assets/scss/common/grid.scss | 174 ++++++++++++++++++++ assets/scss/var.scss | 4 + pages/comm/base/CalendarMngPage.vue | 26 +-- pages/ems/base/GdIdxMngPage.vue | 2 +- pages/ems/base/GdStndMngPage.vue | 56 ------- pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue | 11 +- 6 files changed, 198 insertions(+), 75 deletions(-) diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss index f9b9cee..3ca101f 100644 --- a/assets/scss/common/grid.scss +++ b/assets/scss/common/grid.scss @@ -145,6 +145,44 @@ } } +.tui-grid-editor-select-box-layer { + min-width: 116px !important; + + .tui-select-box-input { + border-radius: 6px; + } + + .tui-select-box-dropdown { + margin-top: 1px; + border-radius: 4px; + padding: 4px; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); + + .tui-select-box-item { + margin-bottom: 4px; + position: relative; + + &:before { + bottom: 0; + content: ''; + left: 0; + opacity: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0 + } + + &:hover { + &::before { + opacity: 0.04 + } + } + + } + } +} + .treeGrid { .tui-grid { &-header-area { @@ -756,6 +794,142 @@ } } } + + select { + &.selectbox { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + border-color:map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + .calendarOption { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + border-color:map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + &:hover { + background: #d9d9d9; + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + + &:checked { + background: #E6F4FF; + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + } + } + } + + } + } + + .tui-grid-editor-select-box-layer { + + .tui-select-box-input { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + border-color:map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + } + + .tui-select-box-dropdown { + background-color: map-deep-get($config, + #{$theme}, + "tui-datepicker-backgroundColor" + ); + border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color"); + + .tui-select-box-item { + + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color"); + + &:before { + opacity: map-deep-get($config, + #{$theme}, + "selected-bg-opacity" + ); + } + } + + + .tui-select-box-highlight { + background:none !important; + &:before { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + opacity: map-deep-get($config, + #{$theme}, + "highlighted-bg-opacity" + ); + } + + } + + .tui-select-box-selected { + background: map-deep-get($config, + #{$theme}, + "v-treeview-node-label-active-bg" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + &:before { + // opacity: map-deep-get($config, + // #{$theme}, + // "selected-bg-opacity" + // ); + background: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ) !important; + + + opacity: map-deep-get($config, + #{$theme}, + "selected-bg-opacity" + ) !important; + + } + + } + } } diff --git a/assets/scss/var.scss b/assets/scss/var.scss index 01242e8..adb4f90 100644 --- a/assets/scss/var.scss +++ b/assets/scss/var.scss @@ -185,6 +185,8 @@ $config: ( paging-background: #212224, paging-text: #FFFFFFD9, icon-datepicker-color: #FFFFFF73, + selected-bg-opacity: 0.32, + highlighted-bg-opacity: 0.08, ), light: (w-g5: $--color-gray_555, g5-w: $--color-white, @@ -333,5 +335,7 @@ $config: ( paging-background: #FFFFFF, paging-text: #000000E0, icon-datepicker-color: #00000073, + selected-bg-opacity: 0.16, + highlighted-bg-opacity: 0.04, ), ); \ No newline at end of file diff --git a/pages/comm/base/CalendarMngPage.vue b/pages/comm/base/CalendarMngPage.vue index 753bb95..e143bae 100644 --- a/pages/comm/base/CalendarMngPage.vue +++ b/pages/comm/base/CalendarMngPage.vue @@ -261,18 +261,18 @@ export default { formatter({ value }) { return value == 1 ? '휴일' : '평일'; }, - editor: { - type: CustomSelectBoxEditor, - }, // editor: { - // type: 'select', - // options: { - // listItems: [ - // { text: '휴일', value: '1' }, - // { text: '평일', value: '0' }, - // ], - // }, + // type: CustomSelectBoxEditor, // }, + editor: { + type: 'select', + options: { + listItems: [ + { text: '휴일', value: '1' }, + { text: '평일', value: '0' }, + ], + }, + }, }, { header: '휴일명', name: 'hldyNm', editor: 'text' }, ]; @@ -482,6 +482,8 @@ const defaultData = { height: 100%; padding: 0; margin: 0; + border: 1px solid; + border-radius: 6px; } select.selectbox { @@ -510,10 +512,8 @@ const defaultData = { /* 네이티브 외형 감추기 */ -moz-appearance: auto; appearance: auto; - background: #fff; - border: 1px solid #d9d9d9; + border: 1px solid; border-radius: 6px; - color: rgba(0,0,0,0.87843); } .tui-grid-layer-editing { diff --git a/pages/ems/base/GdIdxMngPage.vue b/pages/ems/base/GdIdxMngPage.vue index 912bc73..847bdd8 100644 --- a/pages/ems/base/GdIdxMngPage.vue +++ b/pages/ems/base/GdIdxMngPage.vue @@ -41,7 +41,7 @@
+ :parentPrgmId="myPrgmId" @getRowsData="getRowData" />
- - + +
설비별 현황 리스트
-
+
-
+ +
+
-