update slected header

This commit is contained in:
Nguyen Van Luan/(Nguyen Van Luan)/현장대리인/SK
2025-07-25 19:03:41 +09:00
5 changed files with 86 additions and 91 deletions

View File

@ -1314,18 +1314,24 @@ a {
.btn-close-menu-list { .btn-close-menu-list {
min-width: 100px; min-width: 100px;
border-color: transparent; border-color: transparent;
background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
.v-list-item { .v-list-item {
min-height: 30px; min-height: 30px;
} }
.v-list-item__title { .v-list-item__title {
color: #fff; color: map-deep-get($config, #{$theme}, "btn-header-select-color");
&:hover { &:hover {
color: #46c0ff; color: #46c0ff;
} }
} }
.v-btn {
background-color: transparent !important;
color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
}
} }
[hover-tooltip] { [hover-tooltip] {

View File

@ -168,6 +168,8 @@ $config: (
ant-btn-default-bg:#FFFFFF2E, ant-btn-default-bg:#FFFFFF2E,
ant-btn-default-color:#FFFFFFD9, ant-btn-default-color:#FFFFFFD9,
ant-btn-default-border-outlined:#424242, ant-btn-default-border-outlined:#424242,
btn-header-select-bg: #1F1F1F,
btn-header-select-color:#FFFFFFD9,
), ),
light: (w-g5: $--color-gray_555, light: (w-g5: $--color-gray_555,
g5-w: $--color-white, g5-w: $--color-white,
@ -300,5 +302,7 @@ $config: (
ant-btn-default-bg:#00000026, ant-btn-default-bg:#00000026,
ant-btn-default-color:#000000E0, ant-btn-default-color:#000000E0,
ant-btn-default-border-outlined:#D9D9D9, ant-btn-default-border-outlined:#D9D9D9,
btn-header-select-color:#1F1F1F,
btn-header-select-bg:#FFFFFF,
), ),
); );

View File

@ -27,7 +27,7 @@
/> --> /> -->
</template> </template>
<v-list class="pa-2"> <v-list class="pa-2 btn-close-menu-list" >
<!-- <v-list-item class="mb-1">--> <!-- <v-list-item class="mb-1">-->
<!-- <div class="d-flex align-center">--> <!-- <div class="d-flex align-center">-->
<!-- <v-avatar class="mr-1" size="20">--> <!-- <v-avatar class="mr-1" size="20">-->

View File

@ -28,9 +28,7 @@
<span class="body-2">닫기</span> <span class="body-2">닫기</span>
<v-icon size="20">mdi-chevron-down</v-icon></a-button> --> <v-icon size="20">mdi-chevron-down</v-icon></a-button> -->
</template> </template>
<v-list class="py-2 btn-close-menu-list" :style="{ <v-list class="py-2 btn-close-menu-list">
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}">
<v-list-item class="px-2"> <v-list-item class="px-2">
<v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title> <v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
</v-list-item> </v-list-item>
@ -56,9 +54,7 @@
<span class="body-2">즐겨찾기</span> <span class="body-2">즐겨찾기</span>
<v-icon size="20">mdi-chevron-down</v-icon></a-button> --> <v-icon size="20">mdi-chevron-down</v-icon></a-button> -->
</template> </template>
<v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" :style="{ <v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list">
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}">
<v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer"> <v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
<v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{ <v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
item.menuNm item.menuNm
@ -69,7 +65,9 @@
<a-button id="refresh" class="btn-header" @click="removeBookMark" v-if="bookmarkBtn == 1"> <a-button id="refresh" class="btn-header" @click="removeBookMark" v-if="bookmarkBtn == 1">
<span class="material-icons" style="font-size: 17px">star</span> <span class="material-icons" style="font-size: 17px">star</span>
</a-button> </a-button>
<a-button id="refresh" class="btn-header" @click="addBookMark" v-if="bookmarkBtn == 0"> <a-button id="refresh" class="btn-header" :style="{
display: 'flex',
alignItems: 'center'}" @click="addBookMark" v-if="bookmarkBtn == 0">
<span class="material-icons" style="font-size: 17px">star_border</span> <span class="material-icons" style="font-size: 17px">star_border</span>
</a-button> </a-button>
<a-button <a-button
@ -178,9 +176,7 @@
<span class="body-2">닫기</span> <span class="body-2">닫기</span>
<v-icon size="20">mdi-chevron-down</v-icon></a-button> <v-icon size="20">mdi-chevron-down</v-icon></a-button>
</template> </template>
<v-list class="py-2 btn-close-menu-list" :style="{ <v-list class="py-2 btn-close-menu-list" >
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}">
<v-list-item class="px-2"> <v-list-item class="px-2">
<v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title> <v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
</v-list-item> </v-list-item>
@ -206,9 +202,7 @@
<span class="body-2">즐겨찾기</span> <span class="body-2">즐겨찾기</span>
<v-icon size="20">mdi-chevron-down</v-icon></a-button> <v-icon size="20">mdi-chevron-down</v-icon></a-button>
</template> </template>
<v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" :style="{ <v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" >
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}">
<v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer"> <v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
<v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{ <v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
item.menuNm item.menuNm
@ -447,80 +441,71 @@ export default {
activeTree: { activeTree: {
deep: true, deep: true,
handler(newVal, oldVal) { handler(newVal, oldVal) {
var _this = this; var _this = this;
const nv = newVal[0]; const nv = newVal[0];
const ov = oldVal[0]; const ov = oldVal[0];
if (nv !== ov) { if (nv !== ov) {
if (!nv) { if (!nv) {
// 중복클릭 시 발생 상황 기존 값을 다시 넣어줌 // 중복클릭 시 발생 상황 기존 값을 다시 넣어줌
this.activeTree.push(ov); this.activeTree.push(ov);
} else { } else {
this.myPrgmId = nv; this.myPrgmId = nv;
console.log("menu:", this.menuData); if (this.menuData[nv].url) {
if (this.menuData[nv].url) { const menuUrl = this.menuData[nv].url;
const menuUrl = this.menuData[nv].url; const menuId = this.menuData[nv].menuId;
const menuId = this.menuData[nv].menuId;
const isCommMenu = menuUrl.indexOf("comm/"); const isCommMenu = menuUrl.indexOf('comm/');
const isEmsMenu = menuUrl.indexOf("ems/"); const isEmsMenu = menuUrl.indexOf('ems/');
const isCmmsMenu = menuUrl.indexOf("cmms/"); const isCmmsMenu = menuUrl.indexOf('cmms/');
// console.log('activeTree...'); // console.log('activeTree...');
console.log(isEmsMenu);
if (isCommMenu > -1 || isEmsMenu > -1 || isCmmsMenu > -1) { if (isCommMenu > -1 || isEmsMenu > -1 || isCmmsMenu > -1) {
// console.log('activeTree if stmt1'); // console.log('activeTree if stmt1');
// console.log('this.isLoading : ', this.isLoading); // console.log('this.isLoading : ', this.isLoading);
// if(this.isLoading == true){ // if(this.isLoading == true){
// console.log('if isLoading stmt1'); // console.log('if isLoading stmt1');
// return; // return;
// } // }
console.log("this:", this.menuData[nv].url); this.$router.push({
path: `${this.menuData[nv].url}?prgmId=${nv}`,
this.$router.push({ });
path: `/${this.menuData[nv].url}?prgmId=${nv}`, // this.$router.beforeEach((to, from, next) => {
}); // if(_this.isLoading == true){
// this.$router.replace("/").then(() => { // next(false);
// alert("hihi"); // }
// this.$router.push({ // if (!to.matched.length) {
// path: `${this.menuData[nv].url}?prgmId=${nv}`, // next(false);
// }); // } else {
// }); // next();
// }
// this.$router.beforeEach((to, from, next) => { // });
// if(_this.isLoading == true){ var tmp = 0;
// next(false); for (var i = 0; i < this.myMenuList.length; i++) {
// } if (this.myMenuList[i].menuId == menuId) {
// if (!to.matched.length) { tmp = 1;
// next(false); }
// } else { }
// next(); this.bookmarkBtn = tmp;
// } } else {
// }); // console.log('activeTree if stmt2');
var tmp = 0; // console.log('this.isLoading : ', this.isLoading);
for (var i = 0; i < this.myMenuList.length; i++) { // if(this.isLoading == true){
if (this.myMenuList[i].menuId == menuId) { // console.log('if isLoading stmt2');
tmp = 1; // return;
} // }
} this.$refs.routerTab.openIframe(
this.bookmarkBtn = tmp; encodeURI(
} else { `http://localhost:9999${this.menuData[nv].url}?prgmId=${nv}`,
// console.log('activeTree if stmt2'); ),
// console.log('this.isLoading : ', this.isLoading); this.menuData[nv].menuNm,
// if(this.isLoading == true){ );
// console.log('if isLoading stmt2'); }
// return; this.$axios.get(`${this.menuData[nv].url}?$menuId=${menuId}`);
// } } else alert('지정된 페이지 경로가 없습니다.');
this.$refs.routerTab.openIframe( }
encodeURI(`http://localhost:9999${this.menuData[nv].url}?prgmId=${nv}`), }
this.menuData[nv].menuNm },
);
}
this.$axios.get(`${this.menuData[nv].url}?$menuId=${menuId}`);
} else alert("지정된 페이지 경로가 없습니다.");
}
}
},
}, },
menuData: { menuData: {
deep: true, deep: true,

View File

@ -275,11 +275,11 @@ export default {
} }
} }
.v-btn { .v-btn {
@if $theme == dark { // @if $theme == dark {
background-color: #18579e; // background-color: #18579e;
} @else { // } @else {
background-color: #3f4d7d; // background-color: #3f4d7d;
} // }
} }
} }
} }