reset pwd add

src/modules/base/components/ResetPwd.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    class="reset-pwd"
+    :visible.sync="modalIsShow"
+    title="修改密码"
+    top="10vh"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="resetModel"
+      :rules="resetRules"
+      label-width="100px"
+    >
+      <el-form-item prop="password" label="旧密码：">
+        <el-input
+          size="large"
+          type="password"
+          v-model="resetModel.password"
+          placeholder="请输入旧密码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="newPassword" label="新密码：">
+        <el-input
+          size="large"
+          type="password"
+          v-model="resetModel.newPassword"
+          placeholder="请输入新密码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="rePassword" label="再次密码：">
+        <el-input
+          size="large"
+          type="password"
+          v-model="resetModel.rePassword"
+          placeholder="请再次输入新密码"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updatePwd } from "../api";
+import { password } from "@/plugins/formRules";
+// import { AES } from "@/plugins/crypto";
+
+const initModalForm = {
+  id: "",
+  password: "",
+  newPassword: "",
+  rePassword: ""
+};
+export default {
+  name: "reset-pwd",
+  data() {
+    const equalToPswd = (rule, value, callback) => {
+      if (value !== this.resetModel.newPassword) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      resetModel: { ...initModalForm },
+      resetRules: {
+        password,
+        newPassword: password,
+        rePassword: [
+          ...password,
+          {
+            validator: equalToPswd,
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    initData(val) {
+      this.resetModel = { ...initModalForm };
+      this.resetModel.id = this.$ls.get("user", { id: "" }).id;
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const data = await updatePwd(this.resetModel).catch(() => {
+        this.isSubmit = false;
+      });
+
+      if (!data) return;
+
+      this.isSubmit = false;
+      this.$message.success("修改成功，请重新登录！");
+      this.$emit("modified");
+      this.cancel();
+    }
+  }
+};
+</script>

src/modules/base/views/UserManage.vue

@@ -132,6 +132,7 @@
 import { ABLE_TYPE } from "@/constants/enumerate";
 import { userListPage, ableUser, updatePwd, roleList } from "../api";
 import UploadButton from "@/components/UploadButton";
+// import { AES } from "@/plugins/crypto";
 
 export default {
   name: "user-manage",
@@ -204,7 +205,7 @@ export default {
     async toResetPwd(row) {
       await updatePwd({
         id: row.id,
-        password: "123456"
+        newPassword: "123456"
       });
       this.$message.success("密码重置成功！");
     },

src/modules/login/views/Login.vue

@@ -45,6 +45,7 @@
 <script>
 import { password } from "@/plugins/formRules";
 import { login } from "../api";
+// import { AES } from "@/plugins/crypto";
 
 export default {
   name: "login",

src/plugins/crypto.js

@@ -0,0 +1,12 @@
+const CryptoJS = require("crypto-js");
+
+export const AES = content => {
+  const key = CryptoJS.enc.Utf8.parse("1234567890123456");
+
+  const enstr = CryptoJS.AES.encrypt(content + "", key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  }).toString();
+
+  return enstr;
+};

src/views/Home.vue

@@ -21,10 +21,10 @@
       </div>
       <div class="head-user menu-list">
         <ul>
-          <li>
+          <li @click="$refs.ResetPwd.open()">
             <div class="menu-item">
               <i class="icon icon-account"></i>
-              <span>账户设置</span>
+              <span>{{ username }}</span>
             </div>
           </li>
           <li @click="toLogout">
@@ -148,6 +148,8 @@
         </ul>
       </div>
     </el-dialog>
+    <!-- 修改密码 -->
+    <reset-pwd @modified="logoutAction" ref="ResetPwd"></reset-pwd>
   </div>
 </template>
 
@@ -156,9 +158,11 @@ import localNavs from "@/constants/navs";
 import { deepCopy } from "@/plugins/utils";
 import { MENU_ROUTER_DICT } from "@/constants/enumerate";
 import { logout, sysMenu } from "../modules/login/api";
+import ResetPwd from "../modules/base/components/ResetPwd";
 
 export default {
   name: "home",
+  components: { ResetPwd },
   data() {
     return {
       navs: [],
@@ -166,6 +170,7 @@ export default {
       curMainIndex: 0,
       curSubIndex: 0,
       breadcrumbs: [],
+      username: this.$ls.get("user", { name: "" }).name,
       menuDailogIsShow: false
     };
   },
@@ -298,13 +303,16 @@ export default {
         confirmButtonClass: "el-button--default-act",
         type: "warning"
       })
-        .then(async () => {
-          await logout(this.$ls.get("user", { id: "" }).id);
-          this.$ls.clear();
-          this.$router.push({ name: "Login" });
+        .then(() => {
+          this.logoutAction();
         })
         .catch(() => {});
     },
+    async logoutAction() {
+      await logout(this.$ls.get("user", { id: "" }).id);
+      this.$ls.clear();
+      this.$router.push({ name: "Login" });
+    },
     // popover menu
     showMenu() {
       this.menuDailogIsShow = !this.menuDailogIsShow;