hospital-project/src/views/password/index.vue

<script setup lang="ts">
defineOptions({
  name: "possword"
});
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { postUpdatePassword } from "@/api/password";
const router = useRouter();
const formRef = ref();
const formLabelAlign = reactive({
  name: "",
  oldPwd: "",
  newPwd: "",
  reNewPwd: ""
});
// const passWord = ref("");
// passWord.value = localStorage.getItem("password");
formLabelAlign.name = localStorage.getItem("userName");
const UpdatePasswordApi = async () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const { code } = await postUpdatePassword(formLabelAlign);
      if (code === 200) {
        Object.assign(formLabelAlign, {
          oldPwd: "",
          newPwd: "",
          reNewPwd: ""
        });
        ElMessage({
          message: "修改成功",
          type: "success"
        });
        // ElMessageBox.confirm("密码已修改请重新登录", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning"
        // }).then(() => {
        //   localStorage.clear();
        //   router.push("/login");
        // });
      } else {
        // ElMessage({
        //   message: "修改失败",
        //   type: "error"
        // });
      }
    } else {
      return;
    }
  });
};
const rules = {
  oldPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
  newPwd: [
    { required: true, message: "请输入 6 - 14 位密码", trigger: "blur" },
    {
      min: 6,
      max: 14,
      message: "请输入 6 - 14 位密码",
      trigger: "blur"
    }
  ],
  reNewPwd: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== formLabelAlign.newPwd) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};
</script>

<template>
  <div class="box">
    <el-form
      ref="formRef"
      class="m-auto form"
      label-position="top"
      label-width="auto"
      status-icon
      :rules="rules"
      :model="formLabelAlign"
      style="max-width: 400px"
    >
      <el-form-item label="账户">
        <el-input v-model="formLabelAlign.name" disabled />
      </el-form-item>
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input v-model="formLabelAlign.oldPwd" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input
          v-model="formLabelAlign.newPwd"
          type="password"
          show-password
          placeholder="请输入 6 - 14 位密码"
        />
      </el-form-item>
      <el-form-item label="再次输入密码" prop="reNewPwd">
        <el-input
          v-model="formLabelAlign.reNewPwd"
          type="password"
          show-password
          placeholder="请输入 6 - 14 位密码"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="UpdatePasswordApi">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.form {
  margin-top: 10%;
}
</style>