修改提示信息

src/components/changePassword/index.vue

@@ -1,143 +1,152 @@
-<template>
-  <div class="containe">
-    <div class="main">
-      <el-form ref="form" :model="user" :rules="rules" label-width="120px">
-        <el-form-item label="原有密码" prop="oldPassword">
-          <el-input
-            v-model="user.oldPassword"
-            placeholder="请输入原有密码"
-            type="password"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item label="新的密码" prop="newPassword">
-          <el-input
-            v-model="user.newPassword"
-            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
-            type="password"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPassword">
-          <el-input
-            v-model="user.confirmPassword"
-            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
-            type="password"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" size="mini" @click="submit">确定</el-button>
-          <!-- <el-button type="danger" size="mini" @click="close">关闭</el-button> -->
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-  
-<script>
-import { updateUserPwd } from "@/api/system/user";
-
-export default {
-  data() {
-    const equalToPassword = (rule, value, callback) => {
-      if (this.user.newPassword !== value) {
-        callback(new Error("两次输入的密码不一致"));
-      } else {
-        callback();
-      }
-    };
-    const newPassRule = (rule, value, callback) => {
-      var pPattern = new RegExp(
-        /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?,.?/|!@#$%^&*()~ ]).*$/
-      );
-      if (value === "") {
-        callback(new Error("请输入密码"));
-      } else if (!pPattern.test(value)) {
-        callback(
-          new Error("密码长度最少为8位，包含大小写字母、数字、特殊字符")
-        );
-      } else {
-        callback();
-      }
-    };
-    return {
-      user: {
-        oldPassword: undefined,
-        newPassword: undefined,
-        confirmPassword: undefined,
-      },
-      // 表单校验
-      rules: {
-        oldPassword: [
-          { required: true, message: "原有密码不能为空", trigger: "blur" },
-        ],
-        newPassword: [
-          { required: true, message: "新的密码不能为空", trigger: "blur" },
-          { required: true, validator: newPassRule, trigger: "blur" },
-        ],
-        confirmPassword: [
-          { required: true, message: "确认密码不能为空", trigger: "blur" },
-          { required: true, validator: equalToPassword, trigger: "blur" },
-        ],
-      },
-    };
-  },
-  methods: {
-    submit() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
-            (response) => {
-              this.$modal.msgSuccess("密码修改成功,请重新登录");
-              this.$tab.closePage();
-              this.$store.dispatch("LogOut").then(() => {
-                location.href = "/index";
-              });
-            }
-          );
-        }
-      });
-    },
-    // close() {
-    //
-    // },
-  },
-};
-</script>
-  
-<style scoped lang='scss'>
-.containe {
-  color: #7ea4c8;
-  /* font-size: 0.14rem; */
-  font-family: PingFang SC-Medium, PingFang SC;
-  font-weight: 500;
-  padding-left: calc(100vw * (20 / 1920));
-  .main {
-    height: 400px;
-    background: #0b113b;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ::v-deep .el-form-item__label {
-      color: #2e8aecff;
-    }
-    ::v-deep .el-input--medium .el-input__inner {
-      background: transparent;
-      border: 1px solid #006c9aff;
-      color: #7ea4c8ff;
-    }
-  }
-}
-::v-deep .el-button--mini {
-  margin-left: 35%;
-}
-::v-deep.el-input--medium {
-  width: 400px !important;
-}
-::v-deep .el-form-item__content {
-  margin-left: 50px !important;
-  width: calc(100vw * (700 / 1920)) !important;
-}
-</style>
-  
+<template>
+  <div class="containe">
+    <div class="main">
+      <el-form ref="form" :model="user" :rules="rules" label-width="120px">
+        <h2 class="title" style="margin-bottom: 50px;">初次登录或密码重置后，需要修改密码才能正常登录访问！</h2>
+        <el-form-item label="原有密码" prop="oldPassword">
+          <el-input
+            v-model="user.oldPassword"
+            placeholder="请输入原有密码"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="新的密码" prop="newPassword">
+          <el-input
+            v-model="user.newPassword"
+            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="user.confirmPassword"
+            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="submit">确定</el-button>
+          <!-- <el-button type="danger" size="mini" @click="close">关闭</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { updateUserPwd } from '@/api/system/user'
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    const newPassRule = (rule, value, callback) => {
+      var pPattern = new RegExp(
+        /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?,.?/|!@#$%^&*()~ ]).*$/
+      )
+      if (value === '') {
+        callback(new Error('请输入密码'))
+      } else if (!pPattern.test(value)) {
+        callback(
+          new Error('密码长度最少为8位，包含大小写字母、数字、特殊字符')
+        )
+      } else {
+        callback()
+      }
+    }
+    return {
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: '原有密码不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '新的密码不能为空', trigger: 'blur' },
+          { required: true, validator: newPassRule, trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: '确认密码不能为空', trigger: 'blur' },
+          { required: true, validator: equalToPassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then((response) => {
+              this.$confirm('密码修改成功,请重新登录！', {
+                showClose: false,
+                showCancelButton: false,
+                type: 'success'
+              }).then(() => {
+                this.$tab.closePage()
+                this.$store.dispatch('LogOut').then(() => {
+                  location.href = '/index'
+                })
+              })
+          })
+        }
+      })
+    }
+    // close() {
+    //
+    // },
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+.containe {
+  color: #7ea4c8;
+  /* font-size: 0.14rem; */
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  padding-left: calc(100vw * (20 / 1920));
+
+  .main {
+    height: 400px;
+    background: #0b113b;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ::v-deep .el-form-item__label {
+      color: #2e8aecff;
+    }
+
+    ::v-deep .el-input--medium .el-input__inner {
+      background: transparent;
+      border: 1px solid #006c9aff;
+      color: #7ea4c8ff;
+    }
+  }
+}
+
+::v-deep .el-button--mini {
+  margin-left: 35%;
+}
+
+::v-deep.el-input--medium {
+  width: 400px !important;
+}
+
+::v-deep .el-form-item__content {
+  margin-left: 50px !important;
+  width: calc(100vw * (500 / 1920)) !important;
+}
+</style>

src/views1/LoginView.vue

@@ -93,7 +93,7 @@
     </div>
     <el-dialog
       :visible.sync="dialogVisible"
-      title="请修改当前密码"
+      title="修改密码"
       width="300"
     >
       <change-password :dialogVisible="dialogVisible"></change-password>
@@ -196,8 +196,6 @@ export default {
                 this.ismodify = true;
                 this.loading = false;
               } else {
-                //TODO 在这里弹出来修改密码框框
-         
                 this.ismodify = false;
                 this.$router
                   .push({ path: this.redirect || "/index" })