添加重置密码与更改密码功能

src/components/Main.vue

@@ -6,7 +6,15 @@
           <span class="w-title">水质监测平台</span>
         </a-col>
         <a-col :span="2" :offset="10">
-          <a-button icon="logout" @click="logout" >登出</a-button>
+          <a-popover :title="username" trigger="hover" placement="bottom">
+            <template slot="content">
+              <p v-if="!isAnyone" style="cursor: pointer;" @click="changePasswd">
+                更改密码
+              </p>
+            </template>
+            <a-avatar :size="48" icon="user" />
+          </a-popover>
+           
         </a-col>
          </a-row>
       <a-row>
@@ -35,6 +43,17 @@
       <component :is="currentComp"/>
       </keep-alive>
     </a-layout-content>
+     <a-modal
+      v-model="passwd_visible"
+      :title="'更改密码'"
+      :destroyOnClose="true"
+      :footer="null"
+    >
+      <password-change
+        @ok="logout"
+        @cancle="passwd_visible = false"
+      />
+    </a-modal>
   </a-layout>
 </template>
 
@@ -48,6 +67,7 @@ import Analysis from '@/components/analysis/Index'
 import Logs from '@/components/logs/Index'
 import Admin from '@/components/admin/Index'
 import { logout } from '@/utils/http'
+import PasswordChange from './admin/forms/PasswordChange.vue'
 export default {
   components: {
     'icon-font':IconFont,
@@ -55,17 +75,25 @@ export default {
     'detail-search':DetailSearch,
     'analysis':Analysis,
     // 'logs':Logs,
-    'admin':Admin
+    'admin':Admin,
+    PasswordChange
   },
   data() {
     return {
       current:['map-layout'],
-      currentComp: 'map-layout'
+      currentComp: 'map-layout',
+      passwd_visible: false
     };
   },
   computed: {
     isAdmin() {
       return this.$store.getters.isSuper || this.$store.getters.isProject
+    },
+    isAnyone() {
+      return this.$store.getters.isAnyone
+    },
+    username() {
+      return this.$store.getters.username
     }
   },
   methods: {
@@ -79,6 +107,9 @@ export default {
       this.$router.push({
         path: '/login'
       })
+    },
+    changePasswd() {
+      this.passwd_visible = true
     }
   }
 };

src/components/admin/forms/PasswordChange.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <a-spin :spinning="loading">
+      <a-form-model :model="form">
+        <a-form-model-item label="旧密码">
+          <a-input type="password" v-model="form.old" />
+        </a-form-model-item>
+        <a-form-model-item label="新密码">
+          <a-input type="password" v-model="form.new" />
+        </a-form-model-item>
+        <a-form-model-item label="重复新密码">
+          <a-input type="password" v-model="form.new2" />
+        </a-form-model-item>
+
+        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+          <a-button type="primary" @click="onSubmit"> 确认 </a-button>
+          <a-button style="margin-left: 10px" @click="$emit('cancle')">
+            关闭
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { postJSON, URL_MAP } from "@/utils/http";
+export default {
+  data() {
+    return {
+      form: {
+        old: "",
+        new: "",
+        new2: "",
+      },
+      loading: false,
+    };
+  },
+  methods: {
+    async onSubmit() {
+      
+      if (this.form.old && this.form.new2 && this.form.new == this.form.new2) {
+        this.loading = true;
+        try {
+            await postJSON(URL_MAP.CHANGE_PASSWD, this.form);
+            this.$message.success('更改密码成功！请重新登录！')
+            this.$emit("ok");
+        } catch (e) {
+          console.log(e);
+          this.$message.error('更改密码失败！')
+        } finally {
+          this.loading = false;
+        }
+      } else {
+        this.$message.error("请输入原密码或保证新密码一致");
+      }
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style>
+</style>

src/components/admin/tables/SensorTable.vue

@@ -18,7 +18,7 @@
     </a-table>
     <a-modal
       v-model="visible"
-      :title="isCreate ? '添加设备' : '查看设备'"
+      :title="isCreate ? '添加传感器' : '查看传感器'"
       :destroyOnClose="true"
       :footer="null"
     >

src/components/admin/tables/UserTable.vue

@@ -19,11 +19,13 @@
       <a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
       <a-divider type="vertical" />
       <a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
+          <a-divider type="vertical" />
+      <a-button type="danger" size="small" @click="() => handlePasswdReset(record)" >密码重置</a-button>
     </span>
     </a-table>
      <a-modal
       v-model="visible"
-      :title="isCreate ? '添加用户' : '添加用户'"
+      :title="isCreate ? '添加用户' : '查看用户'"
       :destroyOnClose="true"
       :footer="null"
     >
@@ -37,7 +39,7 @@
 </template>
 
 <script>
-import { deleteJSON, getData, patchJSON, postJSON, URL_MAP } from '@/utils/http'
+import { deleteJSON, getData, logout, patchJSON, postJSON, URL_MAP } from '@/utils/http'
 import UserDetail from '../forms/UserDetail.vue';
 export default {
   components: { UserDetail },
@@ -108,6 +110,7 @@ export default {
       try{
         await deleteJSON(URL_MAP.USER_DETAIL, { 'id': record._id })
         await this.fetch({})
+        this.$message.success('删除成功！')
       }catch(e) 
       {
         console.log(e)
@@ -145,6 +148,31 @@ export default {
         permission: 0x000
       };
     },
+    async handlePasswdReset(record) {
+        this.loading = true
+        try{
+          await postJSON(URL_MAP.RESET_PASSWD, {
+            'id':record._id
+          })
+          console.log(record._id)
+          console.log(this.$store.getters.userid)
+          if (record._id === this.$store.getters.userid) {
+            logout()
+            sessionStorage.clear()
+            this.$store.commit('logout')
+            this.$router.push({
+              path: '/login'
+            })
+          }
+          this.$message.success('重置密码成功！')
+        }catch(e)
+        {
+          console.log(e)
+        }
+        finally{
+          this.loading = false
+        }
+    }
   },
   mounted() {
     this.fetch({})

src/utils/http.js

@@ -16,7 +16,9 @@ export const URL_MAP = {
     SENSOR_DETAIL: 'sensor/detail/',
     WATER_LIST: 'v1/api/water_detail/',
     USER_LIST: 'user/',
-    USER_DETAIL: 'user/detail/'
+    USER_DETAIL: 'user/detail/',
+    CHANGE_PASSWD: 'current/chpass/',
+    RESET_PASSWD: 'passwd/reset/'
 
 }
 

src/utils/store.js

@@ -119,6 +119,19 @@ const store = new Vuex.Store({
         },
         sensorList(state) {
             return state.sensorList
+        },
+        username(state, getters) {
+            if (getters.isLogin)
+            {
+                return state.userInfo.username
+            }
+            return '未登录'
+        },
+        userid(state, getters) {
+            if (getters.isLogin)
+            {
+                return state.userInfo._id
+            }
         }
     },
     plugins: [storeToSession]