退出登录

src/assets/styles/index.scss

@@ -194,3 +194,9 @@ aside {
   //input常规宽度
   width: 140px;
 }
+
+.taicang-dialog {
+  .el-dialog__close {
+    color: #fff;
+  }
+}

src/components/NavigationBar/index.js

@@ -2,3 +2,4 @@ export { default as peopleCentre } from "./peopleCentre.vue";
 export { default as warningCentre } from "./warningCentre.vue";
 export { default as recycleCentre } from "./recycleCentre.vue";
 export { default as logCentre } from "./logCentre.vue";
+export { default as userModel } from "./userModel.vue";

src/components/NavigationBar/index.vue

@@ -20,14 +20,16 @@
       <div class="reset"></div>
       <el-button type="text">后台管理</el-button>
       <el-button type="text">美丽街区</el-button>
-      <div class="user-data">
+      <userModel :name="name" />
-        <div class="user-icon"></div>
-        <div class="user-name">欢迎,{{ name }}</div>
-      </div>
     </div>
 
     <!-- 四个中心 -->
-    <el-dialog :visible.sync="open" :modal="false" width="990px">
+    <el-dialog
+      :visible.sync="open"
+      :modal="false"
+      width="990px"
+      custom-class="taicang-dialog"
+    >
       <div class="dialog-main">
         <div class="dialog-title"><span></span> {{ title }}</div>
         <peopleCentre v-if="title == '搜索中心'" />
@@ -41,13 +43,20 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { peopleCentre, warningCentre, recycleCentre, logCentre } from "./index";
+import {
+  peopleCentre,
+  warningCentre,
+  recycleCentre,
+  logCentre,
+  userModel,
+} from "./index";
 export default {
   components: {
     peopleCentre,
     warningCentre,
     recycleCentre,
     logCentre,
+    userModel,
   },
   props: {
     //显示左边四个中心
@@ -160,26 +169,6 @@ export default {
       width: 58px;
       background: url("~@/assets/images/ui/reset.png");
     }
-    .user-data {
-      display: flex;
-      align-items: center;
-      padding-top: 8px;
-      cursor: pointer;
-      .user-icon {
-        height: 19px;
-        width: 19px;
-        border-radius: 50%;
-        background: url("~@/assets/images/ui/user.png");
-        background-size: 100% 100%;
-        margin-right: 10px;
-      }
-      .user-name {
-        font-size: 16px;
-        color: #ffffff;
-        font-weight: 400;
-        font-family: "Alibaba-PuHuiTi-Regular.otf";
-      }
-    }
   }
   .el-button {
     font-size: 14px;

src/components/NavigationBar/logCentre.vue

@@ -321,7 +321,7 @@ export default {
     async getDeptList() {
       let result = await treeselect();
       this.deptList = result.data[0].children;
-      console.log(result);
+      // console.log(result);
     },
     /**
      * 级联筛选
@@ -345,7 +345,7 @@ export default {
       this.reset();
       //分色
       this.queryParams.color = this.colorList.toString();
-      console.log(this.queryParams.color);
+      // console.log(this.queryParams.color);
       //处理四个is
       // this.isCheck.forEach((item) => {
       //   let index = this.isList.findIndex((it) => it.name == item);
@@ -469,7 +469,7 @@ export default {
         item = item.personInfo;
         return item;
       });
-      console.log(arr);
+      // console.log(arr);
       return arr;
     },
 

src/components/NavigationBar/peopleCentre.vue

@@ -285,7 +285,7 @@ export default {
     async getDeptList() {
       let result = await treeselect();
       this.deptList = result.data[0].children;
-      console.log(result);
+      // console.log(result);
     },
     /**
      * 级联筛选
@@ -309,7 +309,7 @@ export default {
       this.reset();
       //分色
       this.queryParams.color = this.colorList.toString();
-      console.log(this.queryParams.color);
+      // console.log(this.queryParams.color);
       //处理四个is
       this.isCheck.forEach((item) => {
         let index = this.isList.findIndex((it) => it.name == item);

src/components/NavigationBar/recycleCentre.vue

@@ -299,7 +299,7 @@ export default {
      */
     /**恢复 */
     addClcik(item) {
-      console.warn("恢复数据", item.deleteUserId, this.userId);
+      // console.warn("恢复数据", item.deleteUserId, this.userId);
       if (item.deleteUserId != this.userId) {
         this.$message.error("您没有权限恢复该条记录！");
       } else {
@@ -328,7 +328,7 @@ export default {
     async getDeptList() {
       let result = await treeselect();
       this.deptList = result.data[0].children;
-      console.log(result);
+      // console.log(result);
     },
     /**
      * 级联筛选
@@ -352,7 +352,7 @@ export default {
       this.reset();
       //分色
       this.queryParams.color = this.colorList.toString();
-      console.log(this.queryParams.color);
+      // console.log(this.queryParams.color);
       //处理四个is
       // this.isCheck.forEach((item) => {
       //   let index = this.isList.findIndex((it) => it.name == item);
@@ -475,7 +475,7 @@ export default {
         item = item.personInfo;
         return item;
       });
-      console.log(arr);
+      // console.log(arr);
       return arr;
     },
 

src/components/NavigationBar/userModel.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dropdown trigger="click">
+    <div class="user-data">
+      <div class="user-icon"></div>
+      <div class="user-name">
+        欢迎 , {{ name }} <i class="el-icon-caret-bottom"></i>
+      </div>
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item>修改密码</el-dropdown-item>
+      <el-dropdown-item divided @click.native="logout"
+        >退出登录</el-dropdown-item
+      >
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  name: "userModel",
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    async logout() {
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-data {
+  display: flex;
+  align-items: center;
+  padding-top: 8px;
+  cursor: pointer;
+  .user-icon {
+    height: 19px;
+    width: 19px;
+    border-radius: 50%;
+    background: url("~@/assets/images/ui/user.png");
+    background-size: 100% 100%;
+    margin-right: 10px;
+  }
+  .user-name {
+    font-size: 16px;
+    color: #ffffff;
+    font-weight: 400;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+</style>

src/components/NavigationBar/warningCentre.vue

@@ -291,7 +291,7 @@ export default {
     async getDeptList() {
       let result = await treeselect();
       this.deptList = result.data[0].children;
-      console.log(result);
+      // console.log(result);
     },
     /**
      * 级联筛选
@@ -315,7 +315,7 @@ export default {
       this.reset();
       //分色
       this.queryParams.color = this.colorList.toString();
-      console.log(this.queryParams.color);
+      // console.log(this.queryParams.color);
       //处理四个is
       // this.isCheck.forEach((item) => {
       //   let index = this.isList.findIndex((it) => it.name == item);