logout

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,17 +1,41 @@
 <template>
   <div v-if="!item.hidden">
     <template
-        v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :class="{ 'submenu-title-noDropdown': !isNest }" :index="resolvePath(onlyOneChild.path)">
+        v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"
+    >
+      <app-link
+          v-if="onlyOneChild.meta && onlyOneChild.meta.title !== 'ログアウト'"
+          :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"
+      >
+        <el-menu-item
+            :class="{ 'submenu-title-noDropdown': !isNest }"
+            :index="resolvePath(onlyOneChild.path)"
+        >
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span :title="hasTitle(onlyOneChild.meta.title)"
-                                 class="menu-title">{{ onlyOneChild.meta.title }}</span>
+          <template #title>
+            <span :title="hasTitle(onlyOneChild.meta.title)" class="menu-title">
+              {{ onlyOneChild.meta.title }}
+            </span>
           </template>
         </el-menu-item>
       </app-link>
+
+      <el-menu-item
+          v-else
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+          :index="resolvePath(onlyOneChild.path)"
+          @click="logout"
+      >
+        <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+        <template #title>
+          <span :title="hasTitle(onlyOneChild.meta.title)" class="menu-title">
+            {{ onlyOneChild.meta.title }}
+          </span>
+        </template>
+      </el-menu-item>
     </template>
 
+
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
       <template v-if="item.meta" #title>
         <svg-icon :icon-class="item.meta && item.meta.icon"/>
@@ -34,6 +58,9 @@
 import {isExternal} from '@/utils/validate'
 import AppLink from './Link'
 import {getNormalPath} from '@/utils/yamada.js'
+import { ElMessageBox } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+import { formatMsg } from "@/utils/yamada.js"
 
 const props = defineProps({
   // route object
@@ -52,6 +79,7 @@ const props = defineProps({
 })
 
 const onlyOneChild = ref({});
+const userStore = useUserStore();
 
 function hasOneShowingChild(children = [], parent) {
   if (!children) {
@@ -100,4 +128,17 @@ function hasTitle(title) {
     return "";
   }
 }
+
+function logout() {
+  ElMessageBox.confirm(formatMsg('Q0003'), '確認', {
+    confirmButtonText: 'はい',
+    cancelButtonText: 'いいえ',
+    type: 'warning'
+  }).then(() => {
+    userStore.logOut().then(() => {
+      location.href = '/index';
+    })
+  }).catch(() => {
+  });
+}
 </script>