邃芒慧影管理端
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 

119 líneas
3.2 KiB

  1. <!--
  2. * @Autor: Chutingting
  3. * @Date: 2023-11-05 19:03:11
  4. * @LastEditors: Chutingting
  5. * @LastEditTime: 2023-11-08 16:45:31
  6. * @Description: 修改密码
  7. -->
  8. <template>
  9. <div class="page">
  10. <el-form
  11. ref="ruleFormRef"
  12. :model="ruleForm"
  13. status-icon
  14. :rules="rules"
  15. label-width="120px"
  16. class="editPass"
  17. >
  18. <el-form-item label="用户名" prop="pass">
  19. <el-input v-model="ruleForm.userName" disabled autocomplete="off" />
  20. </el-form-item>
  21. <el-form-item label="密码" prop="pass">
  22. <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
  23. </el-form-item>
  24. <el-form-item label="确认密码" prop="checkPass">
  25. <el-input
  26. v-model="ruleForm.checkPass"
  27. type="password"
  28. autocomplete="off"
  29. />
  30. </el-form-item>
  31. <el-form-item>
  32. <el-button @click="handleClose(ruleFormRef)">Close</el-button>
  33. <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
  34. </el-form-item>
  35. </el-form>
  36. </div>
  37. </template>
  38. <script lang="ts" setup>
  39. import { reactive, ref } from 'vue'
  40. import type { FormInstance, FormRules } from 'element-plus'
  41. import { updatepwd } from "@/apis/editPass.js";
  42. import { logoutApi } from '@/apis/login.js'
  43. import { userInfoModules } from "@/store/modules/userInfo";
  44. import { useRoute, useRouter } from "vue-router";
  45. const userInfoPinia = userInfoModules();
  46. const router = useRouter();
  47. const emit = defineEmits(["close"]);
  48. const ruleFormRef = ref<FormInstance>()
  49. const validatePass = (rule: any, value: any, callback: any) => {
  50. if (value === '') {
  51. callback(new Error('请输入密码'))
  52. } else {
  53. if (ruleForm.checkPass !== '') {
  54. if (!ruleFormRef.value) return
  55. ruleFormRef.value.validateField('checkPass', () => null)
  56. }
  57. callback()
  58. }
  59. }
  60. const validatePass2 = (rule: any, value: any, callback: any) => {
  61. if (value === '') {
  62. callback(new Error('请重新输入密码'))
  63. } else if (value !== ruleForm.pass) {
  64. callback(new Error("两次密码不一致"))
  65. } else {
  66. callback()
  67. }
  68. }
  69. const ruleForm = reactive({
  70. userName: localStorage.getItem("username"),
  71. pass: '',
  72. checkPass: ''
  73. })
  74. const rules = reactive<FormRules<typeof ruleForm>>({
  75. pass: [{ validator: validatePass, trigger: 'blur' }],
  76. checkPass: [{ validator: validatePass2, trigger: 'blur' }]
  77. })
  78. const submitForm = (formEl: FormInstance | undefined) => {
  79. if (!formEl) return
  80. formEl.validate(async (valid) => {
  81. if (valid) {
  82. const data = {
  83. userName: ruleForm.userName,
  84. pwd: ruleForm.checkPass
  85. };
  86. try {
  87. const res = await updatepwd(data);
  88. if (res.code == 200) {
  89. ElMessage.success("修改成功!");
  90. logoutApi().then(d => {
  91. userInfoPinia.loginOut();
  92. router.push(`/login`);
  93. })
  94. localStorage.removeItem("AccessToken");
  95. handleClose(ruleFormRef.value)
  96. }
  97. } catch (error) {
  98. console.log(error, "err");
  99. // ElMessage.error(error.message);
  100. }
  101. } else {
  102. console.log('error submit!')
  103. return false
  104. }
  105. })
  106. }
  107. const handleClose = (formEl: FormInstance | undefined) => {
  108. if (!formEl) return
  109. formEl.resetFields()
  110. emit("close");
  111. }
  112. </script>