|
- <!--
- * @Autor: Chutingting
- * @Date: 2023-11-05 19:03:11
- * @LastEditors: Chutingting
- * @LastEditTime: 2023-11-08 16:45:31
- * @Description: 修改密码
- -->
- <template>
- <div class="page">
- <el-form
- ref="ruleFormRef"
- :model="ruleForm"
- status-icon
- :rules="rules"
- label-width="120px"
- class="editPass"
- >
- <el-form-item label="用户名" prop="pass">
- <el-input v-model="ruleForm.userName" disabled autocomplete="off" />
- </el-form-item>
- <el-form-item label="密码" prop="pass">
- <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
- </el-form-item>
- <el-form-item label="确认密码" prop="checkPass">
- <el-input
- v-model="ruleForm.checkPass"
- type="password"
- autocomplete="off"
- />
- </el-form-item>
- <el-form-item>
- <el-button @click="handleClose(ruleFormRef)">Close</el-button>
- <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
-
- <script lang="ts" setup>
- import { reactive, ref } from 'vue'
- import type { FormInstance, FormRules } from 'element-plus'
- import { updatepwd } from "@/apis/editPass.js";
- import { logoutApi } from '@/apis/login.js'
- import { userInfoModules } from "@/store/modules/userInfo";
- import { useRoute, useRouter } from "vue-router";
- const userInfoPinia = userInfoModules();
- const router = useRouter();
- const emit = defineEmits(["close"]);
-
- const ruleFormRef = ref<FormInstance>()
-
- const validatePass = (rule: any, value: any, callback: any) => {
- if (value === '') {
- callback(new Error('请输入密码'))
- } else {
- if (ruleForm.checkPass !== '') {
- if (!ruleFormRef.value) return
- ruleFormRef.value.validateField('checkPass', () => null)
- }
- callback()
- }
- }
- const validatePass2 = (rule: any, value: any, callback: any) => {
- if (value === '') {
- callback(new Error('请重新输入密码'))
- } else if (value !== ruleForm.pass) {
- callback(new Error("两次密码不一致"))
- } else {
- callback()
- }
- }
-
- const ruleForm = reactive({
- userName: localStorage.getItem("username"),
- pass: '',
- checkPass: ''
- })
-
- const rules = reactive<FormRules<typeof ruleForm>>({
- pass: [{ validator: validatePass, trigger: 'blur' }],
- checkPass: [{ validator: validatePass2, trigger: 'blur' }]
- })
-
- const submitForm = (formEl: FormInstance | undefined) => {
- if (!formEl) return
- formEl.validate(async (valid) => {
- if (valid) {
- const data = {
- userName: ruleForm.userName,
- pwd: ruleForm.checkPass
- };
- try {
- const res = await updatepwd(data);
- if (res.code == 200) {
- ElMessage.success("修改成功!");
- logoutApi().then(d => {
- userInfoPinia.loginOut();
- router.push(`/login`);
- })
- localStorage.removeItem("AccessToken");
- handleClose(ruleFormRef.value)
- }
- } catch (error) {
- console.log(error, "err");
- // ElMessage.error(error.message);
- }
- } else {
- console.log('error submit!')
- return false
- }
- })
- }
- const handleClose = (formEl: FormInstance | undefined) => {
- if (!formEl) return
- formEl.resetFields()
- emit("close");
- }
- </script>
|