添加退出登录

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "standard-project",
+  "name": "project",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/components/Header.vue

@@ -2,7 +2,15 @@
   <div id="title-wrap">
     <img :src="logo" />
     <p>{{ title }}</p>
-    <el-avatar shape="square" :size="32" fit="contain" :src="userLogo" />
+    <el-dropdown>
+      <el-avatar shape="square" :size="32" fit="contain" :src="userLogo" />
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    
     <!-- <el-badge is-dot class="item">
       <el-button
         class="share-button"
@@ -28,6 +36,19 @@ export default {
       userLogo: require("../assets/img/logo.png"),
     };
   },
+  methods:{
+    // 退出登录
+    logOut(){
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        localStorage.token='';
+        this.$router.push({ path:'/login'});
+      })
+    }
+  }
 };
 </script>
 <style lang="less">
@@ -50,6 +71,11 @@ export default {
       font-size: 22px;
     }
   }
+  .el-dropdown {
+    float: right;
+    margin-top: 8px;
+    margin-right: 24px;
+  }
 }
 </style>
 <style scoped lang="less">
@@ -72,11 +98,7 @@ export default {
     line-height: 48px;
     text-shadow: 0px -1px 0px #215c85;
   }
-  .el-avatar {
-    float: right;
-    margin-top: 8px;
-    margin-right: 24px;
-  }
+  
   .item {
     float: right;
     height: 30px;

src/router/index.js

@@ -4,6 +4,7 @@ import Routers from "./routers.js";
 const routes = [
   {
     path: "/",
+    redirect: "/system/menu",
     component: Layout,
     children: Routers,
   },

src/views/login.vue

@@ -37,42 +37,52 @@
 <script>
 import { get, post } from "@/server/api.js";
 export default {
-  data(){
-    return{
-      logoBG: process.env["VUE_APP_LOGIN_BG"] ? require(process.env["VUE_APP_LOGIN_BG"]) : require('../assets/img/bg-login.png'),
-      title: process.env["VUE_APP_TITLE"] ? process.env["VUE_APP_TITLE"] : '沈阳领新智科智能信息系统有限公司',
-      logBG: process.env['VUE_APP_LOGIN_LOGO']?process.env['VUE_APP_LOGIN_LOGO'] : require('../assets/img/bg-log.png'),
-      projectImg: require('../assets/img/login/bg-project.png'),
-      userImg: require('../assets/img/login/bg-user.png'),
-      passwordImg: require('../assets/img/login/bg-password.png'),
-      formData:{},
+  data() {
+    return {
+      logoBG: process.env["VUE_APP_LOGIN_BG"]
+        ? require(process.env["VUE_APP_LOGIN_BG"])
+        : require("../assets/img/bg-login.png"),
+      title: process.env["VUE_APP_TITLE"]
+        ? process.env["VUE_APP_TITLE"]
+        : "沈阳领新智科智能信息系统有限公司",
+      logBG: process.env["VUE_APP_LOGIN_LOGO"]
+        ? process.env["VUE_APP_LOGIN_LOGO"]
+        : require("../assets/img/bg-log.png"),
+      projectImg: require("../assets/img/login/bg-project.png"),
+      userImg: require("../assets/img/login/bg-user.png"),
+      passwordImg: require("../assets/img/login/bg-password.png"),
+      formData: {},
       options: [],
-    }
+    };
   },
-  created(){
+  created() {
     this.getProject();
-    
   },
-  methods:{
+  methods: {
     // 登录
-    onLogin(){
-      post('/user/login', this.formData).then(({code, data:{token=''}})=>{
-        if(code ==200){
-          localStorage.token=token;
-          this.$router.push({ path: '/' });
+    onLogin() {
+      post("/user/login", this.formData).then(
+        ({ code, data: { token = "" } }) => {
+          if (code == 200) {
+            localStorage.token = token;
+            this.$router.push({ path: "/" });
+          }
         }
-      });
+      );
     },
     // 获取项目列表
-    getProject(){
-      get('/user/plants').then(({code, data})=>{
-        if(code==200 && data){
-          this.options=data;
+    getProject() {
+      get("/user/plants").then(({ code, data }) => {
+        if (code == 200 && data) {
+          this.options = data;
+          if (data[0].pid) {
+            this.formData.workshop = data[0].pid;
+          }
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 <style lang="less">
 #login {
@@ -85,7 +95,7 @@ export default {
       font-weight: 400;
       color: #505050;
     }
-    .el-input__suffix{
+    .el-input__suffix {
       line-height: 71px;
     }
   }