修改密码

src/api/sys/user.js

@@ -55,10 +55,16 @@ function changeUserPassword(formData) {
   return request.post(constant.serverUrl + "/sys/user/changeUserPassword", formData);
 }
 
+function changeLoginPassword(formData) {
+  return request.post(constant.serverUrl + "/sys/user/changeLoginPassword", formData);
+}
+
+
 function userInfo() {
   return request.get(constant.serverUrl + "/userInfo");
 }
 
 export default {
-  login, pageList, create, edit, add, update, remove, batchRemove, userInfo,changeUserPassword
+  login, pageList, create, edit, add, update, remove, batchRemove, userInfo,
+  changeUserPassword,changeLoginPassword
 }

src/views/layout/index.vue

@@ -1,10 +1,13 @@
 <template>
   <el-container class="outter-container">
     <el-header>
-      <h3><img src="../../assets/logo.png" height="50"/></h3>
+      <h3>
+        <img src="../../assets/logo.png" height="50" />
+      </h3>
       <div class="user-info">
         <i class="el-icon-s-custom"></i>
         <span v-html="user.realName" style="margin-right:10px;"></span>
+        <a href="#" @click="changePassword()" style="margin-right:10px;">修改密码</a>
         <a href="#" @click="logout()">退出</a>
       </div>
     </el-header>
@@ -25,35 +28,105 @@
         </el-menu>
       </el-aside>
       <el-main>
-        <router-view/>
+        <router-view />
       </el-main>
+      <el-dialog
+        title="修改密码"
+        :visible.sync="dialogFormVisible"
+        :modal-append-to-body="false"
+        :close-on-click-modal="false"
+        width="20%"
+        :before-close="colseChange"
+      >
+        <el-form ref="form" :model="form" :rules="ruleValidate">
+          <el-form-item label="旧密码" prop="oldPassword">
+            <el-input
+              v-model="form.oldPassword"
+              placeholder="请输入新密码"
+              style="width:100%"
+              show-password
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="新密码" prop="newPassword">
+            <el-input
+              v-model="form.newPassword"
+              placeholder="请输入新密码"
+              style="width:100%"
+              show-password
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="重复新密码" prop="newPasswordTwo">
+            <el-input
+              v-model="form.newPasswordTwo"
+              placeholder="请输入新密码"
+              style="width:100%"
+              show-password
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="colseChange">取 消</el-button>
+          <el-button type="primary" @click="changePw">确 定</el-button>
+        </div>
+      </el-dialog>
     </el-container>
   </el-container>
 </template>
 <script>
-import MenuTreeItem from "@/components/MenuTreeItem"
-import menuApi from "@/api/sys/menu"
-import userApi from "@/api/sys/user"
+import MenuTreeItem from "@/components/MenuTreeItem";
+import menuApi from "@/api/sys/menu";
+import userApi from "@/api/sys/user";
 
 export default {
   data() {
+    let samePassword = (rule, value, callback) => {
+      var self = this;
+      var newPasswordTwo = value;
+      var newPassword = self.form.newPassword;
+      if (newPassword != newPasswordTwo) {
+        return callback(new Error("两次密码输入不相同"));
+      } else {
+        return callback();
+      }
+    };
     return {
+      ruleValidate: {
+        oldPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
+        newPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
+        newPasswordTwo: [
+          {
+            required: true,
+            message: "不能为空",
+            trigger: "blur"
+          },
+          {
+            validator: samePassword,
+            trigger: "blur"
+          }
+        ]
+      },
       menuList: [],
       loading: false,
       collapse: false,
-      user: {}
+      user: {},
+      dialogFormVisible: false,
+      form: {
+        oldPassword: "",
+        newPassword: "",
+        newPasswordTwo: ""
+      }
     };
   },
-  computed:{
+  computed: {
     sidebarWidth() {
       return !this.collapse ? "200px" : "64px";
     },
-    sidbarHandlerClass(){
+    sidbarHandlerClass() {
       return {
-        "iconfont" : true,
-        "icon-icon_left_arrow" : this.collapse,
-        "icon-icon_right_arrow" : !this.collapse
-      }
+        iconfont: true,
+        "icon-icon_left_arrow": this.collapse,
+        "icon-icon_right_arrow": !this.collapse
+      };
     }
   },
   methods: {
@@ -71,32 +144,77 @@ export default {
       this.$store.dispatch("user/logout").then(() => {
         this.$router.push({ path: "/login" });
       });
+    },
+    changePassword() {
+      var self = this;
+      self.dialogFormVisible = true;
+    },
+    changePw() {
+      var self = this;
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          var formData = new FormData();
+          formData.append("oldPassword", self.form.oldPassword);
+          formData.append("newPassword", self.form.newPassword);
+
+          userApi.changeLoginPassword(formData).then(function(response) {
+            var jsonData = response.data;
+
+            if (jsonData.result) {
+              self.dialogFormVisible = false;
+              self.form.oldPassword = "";
+              self.form.newPassword = "";
+              self.form.newPasswordTwo = "";
+              self.$message({
+                type: "success",
+                message: "修改成功,下次登录生效!"
+              });
+            } else {
+              self.$message({
+                type: "warning",
+                message: jsonData.message
+              });
+            }
+          });
+        }
+      });
+    },
+    colseChange() {
+      var self = this;
+      self.form.oldPassword = "";
+      self.form.newPassword = "";
+      self.form.newPasswordTwo = "";
+      self.dialogFormVisible = false;
+      this.$refs["form"].resetFields();
     }
   },
   components: {
-    "menu-tree-item" : MenuTreeItem
+    "menu-tree-item": MenuTreeItem
   },
   mounted() {
     this.loading = true;
 
-    userApi.userInfo().then(resp=>{
-      if(resp.data.result){
+    userApi.userInfo().then(resp => {
+      if (resp.data.result) {
         this.user = resp.data.data;
       }
     });
 
-    menuApi.getMenuTree().then(response=>{
-      console.log(response);
+    menuApi
+      .getMenuTree()
+      .then(response => {
+        console.log(response);
 
-      var jsonData = response.data;
+        var jsonData = response.data;
 
-      this.menuList = jsonData.data;
-    
-      this.loading = false;
-    }).catch(exception=>{
-      this.$message.error(exception + "");
-      this.loading = false;
-    });
+        this.menuList = jsonData.data;
+
+        this.loading = false;
+      })
+      .catch(exception => {
+        this.$message.error(exception + "");
+        this.loading = false;
+      });
   }
 };
 </script>
@@ -112,7 +230,7 @@ export default {
   color: #333;
   text-align: left;
   height: 70px !important;
-  line-height:70px;
+  line-height: 70px;
   // border-bottom: 2px solid rgb(36,61,162);
   border-bottom: 2px solid #64a63c;
 }
@@ -131,7 +249,7 @@ export default {
 
 .el-aside .el-menu {
   flex: 1;
-  background-color:rgb(238, 238, 238);
+  background-color: rgb(238, 238, 238);
 }
 
 .el-main {
@@ -145,41 +263,41 @@ export default {
   text-align: left;
 }
 
-.user-info{
+.user-info {
   position: absolute;
-  right:20px;
-  bottom:10px;
-  font-size:14px;
+  right: 20px;
+  bottom: 10px;
+  font-size: 14px;
   line-height: 30px;
 
-  a{
-    color:blue;
+  a {
+    color: blue;
     cursor: pointer;
     text-decoration: none;
   }
 
-  a:hover{
+  a:hover {
     text-decoration: underline;
   }
 }
 
-.sidebar{
-  position:relative;
-  overflow:visible !important;
+.sidebar {
+  position: relative;
+  overflow: visible !important;
 }
 
-.sidebar-collpase-btn{
-  position:absolute;
-  width:12px;
-  height:53px;
+.sidebar-collpase-btn {
+  position: absolute;
+  width: 12px;
+  height: 53px;
   border-radius: 0px 10px 10px 0px;
-  top:200px;
-  right:-12px;
-  background-color:#eeeeee;
+  top: 200px;
+  right: -12px;
+  background-color: #eeeeee;
   z-index: 1000;
-  padding-top:30px;
-  padding-right:4px;
-  color:black;
+  padding-top: 30px;
+  padding-right: 4px;
+  color: black;
   font-weight: bold;
 }
 </style>