超时登录

src/components/diy_message.vue

+<template>
+  <div id="diy_message">
+    <el-dialog :visible.sync="dialogVisible"
+               width="420px"
+               :before-close="handleClose">
+      <div slot="title"
+           class="dialog-title">
+        <img src="../assets/img/tishi.png"
+             alt=""
+             style="width:16px;height:16px;margin-right:5px">
+        <span class="title-text">系统超时，请重新登录</span>
+      </div>
+      <el-form ref="form"
+               :model="form">
+        <el-form-item>
+          <el-input prefix-icon="el-icon-user-solid"
+                    style="background:#F3F3F3"
+                    placeholder="请输入账号"
+                    v-model="form.account"></el-input>
+        </el-form-item>
+        <el-form-item type='password'>
+          <el-input prefix-icon="el-icon-lock"
+                    style="background:#F3F3F3"
+                    placeholder="请输入密码"
+                    v-model="form.password"></el-input>
+        </el-form-item>
+        <div class="btn">
+          <el-button type="primary">主要按钮</el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import url from "@/api/base";
+export default {
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      form: {
+        account: "",
+        password: ""
+      },
+      // dialogVisible: this.messageFlagmessageFlag
+    }
+  },
+  // computed: {
+  //   ...mapGetters(["messageFlag"])
+  // },
+  methods: {
+    handleClose () {
+      this.dialogVisible = false
+    },
+    submit () {
+      this.$store.dispatch("user/login", this.form).then((res) => {
+        if (res.success == true) {
+          self.logining = false;
+          sessionStorage.setItem('baseUrl', url.BaseURL);
+        } else {
+          self.logining = false;
+          self.$alert(res.msg, '提示', {
+            confirmButtonText: '确定',
+            callback: action => {
+            }
+          });
+        }
+        this.dialogVisible = false
+      }).catch(() => {
+      })
+    }
+
+  }
+}
+</script>
+
+<style lang="scss">
+#diy_message {
+  .dialog-title {
+    display: flex;
+    color: #ff5816;
+    font-size: 12px;
+    align-items: center;
+  }
+  .el-form-item {
+    margin-bottom: 8px;
+  }
+  .el-input {
+    width: 300px !important;
+  }
+  .el-form-item__content {
+    text-align: center;
+  }
+  .el-input__inner {
+    background: #f3f3f3 !important;
+  }
+  .el-dialog__header {
+    border-bottom: none !important;
+  }
+  .btn {
+    text-align: center;
+    .el-button {
+      width: 299px;
+      margin-left: 9px;
+      margin-bottom: 30px;
+      margin-top: 7px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/plugins/message.js

+import messageVue from "@c/diy_message.vue"
+
+const showMessage = {};
+
+showMessage.install = function (Vue, options = {}) {
+    const DrawerConstructor = Vue.extend(messageVue);
+    let currentMsg;
+    const initInstance = () => {
+        currentMsg = new DrawerConstructor({});
+        document.body.appendChild(currentMsg.$mount().$el);
+    };
+    Vue.prototype.$showMessage = {
+        showMessage(options) {
+            if (!currentMsg) {
+                initInstance();
+            }
+            if (typeof options === 'object') {
+                Object.assign(currentMsg, options);
+            }
+        }
+    };
+};
+
+export default showMessage;
\ No newline at end of file

src/store/getters.js

@@ -3,7 +3,8 @@ const getters = {
   defaultGoodsImage: state => state.user.defaultGoodsImage,
   defaultCarImage: state => state.user.defaultCarImage,
   logs: state => state.user.logs,
-  userAuth: state => state.user.userAuth
+  userAuth: state => state.user.userAuth,
+  messageFlag: state => state.user.messageFlag,
 };
 
 export default getters;

src/store/modules/user.js

@@ -6,7 +6,8 @@ const state = {
   defaultGoodsImage: require("@/assets/img/defaultGoods.jpg"),
   defaultCarImage: require("@/assets/img/defaultCar.jpg"),
   logs: [],
-  userAuth: ""
+  userAuth: "",
+  messageFlag:""
 };
 
 const mutations = {
@@ -22,7 +23,10 @@ const mutations = {
   },
   SET_Auth: (state, content) => {
     state.userAuth = content;
-  }
+  },
+  SET_MessageFlag: (state, flag) => {
+    state.messageFlag = flag;
+  },
 };
 
 const actions = {
@@ -36,6 +40,7 @@ const actions = {
       return login(account, password)
         .then(res => {
           const data = res.data.data;
+          debugger
           commit('SET_TOKEN', data.accessToken);
           sessionStorage.setItem('token', 'bearer ' + data.accessToken);
           sessionStorage.setItem("userInfo",JSON.stringify(res.data.data));/*存储userInfo,所有数据*/

src/views/magl/index.vue

@@ -21,17 +21,22 @@
             <i :class="!isCollapseP==true?'iconfont icondaohangshouqi':'iconfont icondaohangzhankai'"></i><span>{{name}}</span>
           </div>
           <div style="float: right;">
-            <span style="font-size: 12px;padding-right: 10px; cursor: pointer;" @click="dialogTableVisible = true">
+            <span style="font-size: 12px;padding-right: 10px; cursor: pointer;"
+                  @click="dialogTableVisible = true">
               <i class="iconfont iconxiaoxitongzhi"
                  style="font-size: 18px;margin: 0;padding-right: 10px;vertical-align: middle"></i>
               <span style="font-size: 12px;color: #525467;vertical-align: middle">消息中心</span>
             </span>
-            <span style="font-size: 12px; padding-right: 10px;cursor: pointer;color: #525467;" @click="getHome">
-              <i class="iconfont icongonggongyunkong" style="vertical-align: middle;margin-right: 10px;vertical-align: middle"></i>数据大屏</span>
+            <span style="font-size: 12px; padding-right: 10px;cursor: pointer;color: #525467;"
+                  @click="getHome">
+              <i class="iconfont icongonggongyunkong"
+                 style="vertical-align: middle;margin-right: 10px;vertical-align: middle"></i>数据大屏</span>
             <span style="vertical-align: middle">
               <el-dropdown>
                 <span class="el-dropdown-link">
-                <img src="../../assets/img/lj_480.png" style="font-size: 16px;vertical-align: text-top;width: 18px;height: 18px;" alt="">
+                  <img src="../../assets/img/lj_480.png"
+                       style="font-size: 16px;vertical-align: text-top;width: 18px;height: 18px;"
+                       alt="">
                   <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
@@ -226,7 +231,7 @@ export default {
   },
   methods: {
     // 跳转大屏
-    getHome(){
+    getHome () {
       const _this = this
       _this.$router.push('/dataV')
     },