feat: 添加“修改密码”功能

src/assets/js/api/user.js

@@ -16,6 +16,17 @@ export function getUserInfo() {
   return xhr.get('/sys/sys-user/withRoleAndGroup/getUserInfo')
 }
 
+
+export function modifyPwd(userId, oldPwd, newPwd, confirmPwd) {
+  
+  return xhr.put('/sys/sys-user/modifyPwd', {
+    userId,
+    oldPwd,
+    newPwd,
+    confirmPwd
+  })
+}
+
 export function getUsersByPage(page, size, keyword, roleId, groupId) {
   return xhr.get('/sys/sys-user/withRoleAndGroup/page', {
     page,

src/components/Layout/index.vue

@@ -48,6 +48,11 @@
                   首页
                 </el-dropdown-item>
               </router-link>
+              <el-dropdown-item divided>
+                <span style="display:block;" @click="modifyDialog = true"
+                  >修改密码</span
+                >
+              </el-dropdown-item>
               <el-dropdown-item divided>
                 <span style="display:block;" @click="toLogout">登出</span>
               </el-dropdown-item>
@@ -59,12 +64,57 @@
         </el-main>
       </el-container>
     </el-container>
+    <el-dialog
+      title="修改密码"
+      :visible.sync="modifyDialog"
+      width="30%"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+      >
+        <el-form-item label="旧密码" prop="oldPassword">
+          <el-input
+            type="password"
+            v-model="ruleForm.oldPassword"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="pass">
+          <el-input
+            type="password"
+            v-model="ruleForm.pass"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="checkPass">
+          <el-input
+            type="password"
+            v-model="ruleForm.checkPass"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            v-loading.fullscreen.lock="fullscreenLoading"
+            @click="submitForm('ruleForm')"
+            >确认修改</el-button
+          >
+          <el-button @click="closeDialog('ruleForm')">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
   import {
     getUserInfo,
+    modifyPwd
   } from "@assets/js/api/user";
 import menuStyle from "@assets/css/variable.styl";
 import Hamburger from "@comp/Hamburger";
@@ -82,13 +132,51 @@ export default {
   },
   props: {},
   data() {
+    var validateOldPass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入旧密码"));
+      } else {
+        callback();
+      }
+    };
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入新密码"));
+      } else {
+        if (this.ruleForm.checkPass !== "") {
+          this.$refs.ruleForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.ruleForm.pass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
+      modifyDialog: false,
       isCollapse: false,
       menuStyle,
       systemName: "天友-户型查询",
       avatar: null,
       userName:'',
       access:'',
+      ruleForm: {
+        pass: "",
+        checkPass: "",
+        oldPassword: "",
+      },
+      rules: {
+        oldPassword: [{ validator: validateOldPass, trigger: "blur" }],
+        pass: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+      },
+      fullscreenLoading: false,
     };
   },
   created() {
@@ -96,6 +184,33 @@ export default {
   },
   mounted() {},
   methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.fullscreenLoading = true;
+          modifyPwd(
+            this.userId,
+            this.ruleForm.oldPassword,
+            this.ruleForm.pass,
+            this.ruleForm.checkPass
+          ).then((res) => {
+            if (res.code === "200") {
+              this.$message.success("密码修改成功");
+              this.closeDialog();
+            }
+            this.fullscreenLoading = false;
+          }).catch(() => {
+            this.fullscreenLoading = false;
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    closeDialog(formName) {
+      this.modifyDialog = false;
+      this.$refs[formName].resetFields();
+    },
     searchByUserInfo() {
       getUserInfo().then((res) => {
         console.log(res);
@@ -103,6 +218,7 @@ export default {
           this.avatar = res.data.headImg;
           this.userName = res.data.realName;
           this.access = res.data.access;
+          this.userId = res.data.userId || res.data.businessId;
           sessionStorage.setItem('access',(this.access === undefined || this.access === null) ? '' : this.access);
         }