sk_fems_ui commit

components/common/AdminMenu.vue

@@ -0,0 +1,181 @@
+<template>
+	<v-menu offset-y nudge-bottom="8" :left="true">
+		<template v-slot:activator="{ on, attrs }">
+			<v-btn
+				v-bind="attrs"
+				v-on="on"
+				depressed
+				:ripple="false"
+				:class="{ miniVariant }"
+				:style="btnStyle"
+			>
+				<v-icon size="32" :class="{ 'mr-2': !miniVariant }"
+					>$icoAdminMenu</v-icon
+				>
+				<span class="body-1 mr-1">{{ userNm }}</span>
+				<v-icon>mdi-chevron-down</v-icon>
+			</v-btn>
+			<!-- <AlertPopup
+        ref="alertPop"
+        v-show='false'
+        :item="item"
+        
+      /> -->
+		</template>
+
+		<v-list class="pa-2">
+			<!--      <v-list-item class="mb-1">-->
+			<!--        <div class="d-flex align-center">-->
+			<!--          <v-avatar class="mr-1" size="20">-->
+			<!--            <v-icon color="white">mdi-account-outline</v-icon>-->
+			<!--          </v-avatar>-->
+			<!--          <div class="d-flex flex-column">-->
+			<!--            <span class="body-2 white&#45;&#45;text">관리자</span>-->
+			<!--            &lt;!&ndash; <nuxt-link class="d-flex align-center mypage" to="/">-->
+			<!--              <span class="clr-ccc-aaa">마이페이지</span>-->
+			<!--              <v-icon class="ico-right">mdi-chevron-right</v-icon>-->
+			<!--            </nuxt-link> &ndash;&gt;-->
+			<!--          </div>-->
+			<!--        </div>-->
+			<!--      </v-list-item>-->
+			<v-list-item>
+				<v-btn @click="pswdChange" small elevation="0">
+					<v-icon class="mr-1" size="20">mdi-account-outline</v-icon>
+					<span class="body-2">비밀번호 변경</span>
+				</v-btn>
+			</v-list-item>
+			<v-list-item>
+				<v-btn @click="logout" small elevation="0">
+					<v-icon class="mr-1" size="20">mdi-logout</v-icon>
+					<span class="body-2">로그아웃</span>
+				</v-btn>
+			</v-list-item>
+		</v-list>
+	</v-menu>
+</template>
+<script>
+import $cookie from 'vue-cookie';
+import { mapState } from 'vuex';
+// import AlertPopup from "~/components/common/modal/AlertPopup";
+
+export default {
+	props: {
+		miniVariant: Boolean,
+		userNm: {
+			type: String,
+			require: true,
+		},
+		comId: {
+			type: String,
+			require: true,
+		},
+	},
+	components: {
+		// AlertPopup
+		//ChangePswdPop
+	},
+	data() {
+		return {
+			logoutUrl: '/login',
+			item: {},
+		};
+	},
+	computed: {
+		...mapState(['isDarkMode']),
+		btnStyle() {
+			return this.isDarkMode ? { color: '#fff' } : { color: '#111' };
+		},
+	},
+	methods: {
+		logout() {
+			$cookie.delete('FEMS_SESSION');
+			// alert("정상적으로 로그아웃 되었습니다.");
+			// this.item={
+			//   label:'로그아웃',
+			//   message:'정상적으로 로그아웃 되었습니다.'
+			// }
+			// this.$refs['alertPop'].dialog = true;
+
+			this.$nextTick(() => {
+				window.location.href = this.logoutUrl + '?' + this.comId;
+			});
+		},
+		pswdChange() {
+			this.$parent.$parent.$parent.$parent.$refs['changePswdPop'].dialog = true;
+		},
+	},
+	mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+@import '@/assets/scss/var.scss';
+@each $theme in dark, light {
+	.v-application.#{$theme}-mode {
+		.mdi-account {
+			color: map-deep-get(
+				$config,
+				#{$theme},
+				'tui-datepicker-calendar-color'
+			) !important;
+		}
+
+		.v-list {
+			background-color: map-deep-get(
+				$config,
+				#{$theme},
+				'admin-menu-expanded-list-backgroundColor'
+			);
+			border-color: transparent;
+		}
+	}
+}
+
+.v-menu__content {
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
+}
+
+.v-list {
+	.v-btn {
+		padding: 0 !important;
+		margin-bottom: 0;
+		color: #fff;
+
+		&:hover {
+			color: #46c0ff;
+		}
+
+		> span {
+			color: currentColor;
+		}
+	}
+}
+
+.v-btn {
+	width: 100%;
+	min-width: auto !important;
+	display: flex;
+	align-items: center;
+	padding: 0 20px !important;
+	margin-bottom: 12px;
+
+	&,
+	&:before {
+		background-color: transparent !important;
+	}
+
+	::v-deep {
+		.v-btn__content {
+			justify-content: flex-start;
+		}
+	}
+
+	&.miniVariant {
+		::v-deep {
+			.v-btn__content > .body-1,
+			.v-btn__content > .mdi-chevron-down {
+				display: none;
+			}
+		}
+	}
+}
+</style>