vue在PC端封装修改密码弹出窗组件

updatePassword.vue

<template>
  <el-dialog title="修改密码" :before-close="handleClose" :model-value="visible"
    :append-to-body="true" width="550px">
    <el-form :model="form" :rules="rule" ref="formRef" @keyup.enter="formSubmit()" label-width="80px">
      <el-form-item label="当前账号">
        <span>{{ userProfile.username }}</span>
      </el-form-item>
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="formSubmit()">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { ref, reactive, nextTick, getCurrentInstance, defineComponent, toRefs } from "vue"
import { storeToRefs } from 'pinia';
import { useUserProfile } from '/@/stores/userProfile';
export default defineComponent({
  name: 'layoutBreadcrumbUpdatePassword',
  setup() {
    const { proxy }: any = getCurrentInstance()
    let validateConfirmPassword = (rule: any, value: String, callback: Function) => {
      if (data.form.newPassword !== value) {
        callback(new Error("确认密码与新密码不一致"))
      } else {
        callback()
      }
    }
    const { userProfile } = storeToRefs(useUserProfile());

    let formRef = ref()
    let visible = ref(false)

    const data = reactive({
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rule: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    })

    const init = () => {
      visible.value = true
      nextTick(() => {
        formRef.value.resetFields()
      })
    }

    const handleClose = () => {
      visible.value = false
    }

    const formSubmit = () => {
      formRef.value.validate(async (valid: Boolean) => {
        if (valid) {
          let params = {
            old_password: data.form.oldPassword,
            new_password: data.form.newPassword,
            re_password: data.form.confirmPassword,
          }
          let res = await proxy.apis.updatePas(params)
          if (res.code === 200) {
            proxy.$message({
              type: "success",
              message: "修改成功，重新登录",
              duration: 1000,
              onClose: () => {
                visible.value = false
                // 清除缓存/token等
                useUserProfile().removeCacheData();
                // 重载自动跳到登录页
                window.location.reload();
              }
            })
          } else {
            proxy.$message.error(res.message)
          }
        }
      })
    }



    return { userProfile, visible, ...toRefs(data), formRef, init, handleClose, formSubmit }
  },
})
</script>


<style scoped lang="scss"></style>

效果图