拿来即用修改密码功能

<template><div><!-- 重置密码 --><el-dialogtitle="修改密码"v-model="state.resetPwdDialogVisible":showClose="state.firstLogin !== 1"width="550px"@close="onCancel":close-on-click-modal="false"><el-form :model="state.resetPwdForm" status-icon :rules="state.resetPwdRules" ref="pwdForm" label-width="100px"><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"><el-form-item label="新密码" prop="pwd_new1"><el-inputplaceholder="请输入新密码"type="password"v-model="state.resetPwdForm.pwd_new1"autocomplete="new-password"show-passwordclearable></el-input></el-form-item></el-col><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"><el-form-item label="确认新密码" prop="pwd_new2"><el-inputplaceholder="请再次输入新密码"type="password"v-model="state.resetPwdForm.pwd_new2"autocomplete="new-password"show-passwordclearable></el-input></el-form-item></el-col></el-form><template #footer><span class="dialog-footer"><el-button @click="onCancel" size="default">取消</el-button><el-button v-throttle type="primary" @click="onSubmit" size="default">确定</el-button></span></template></el-dialog></div>
</template><script setup name="layoutBreadcrumbUser">
import { updatePwd } from '/@/api/login.js';const pwdForm = ref(null);const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (state.resetPwdForm.pwd_new2 !== '') {pwdForm.value.validateField('pwd_new2');}callback();}
};
const validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== state.resetPwdForm.pwd_new1) {callback(new Error('两次输入密码不一致!'));} else {callback();}
};
const state = reactive({resetPwdDialogVisible: false, // 修改密码resetPwdForm: {pwd_new1: '',pwd_new2: '',},resetPwdRules: {pwd_new1: [{required: true,trigger: 'blur',message: '请输入6~20位不含有中文的密码',pattern: /^[^\u4e00-\u9fa5 ]{6,20}$/,},{ validator: validatePass, trigger: 'blur' },],pwd_new2: [{required: true,trigger: 'blur',message: '请输入6~20位不含有中文的密码',pattern: /^[^\u4e00-\u9fa5 ]{6,20}$/,},{ validator: validatePass2, trigger: 'blur' },],}
});// 取消
const onCancel = () => {state.resetPwdDialogVisible = false;// 清除验证pwdForm.value.resetFields();
};// 修改密码保存
const onSubmit = () => {if (!pwdForm) return;pwdForm.value.validate((valid) => {if (valid) {toSavePwd();} else {return false;}});
};const toSavePwd = () => {updatePwd(state.resetPwdForm).then((res) => {if (res.data.code === 1) {ElMessage.success('密码修改成功');state.resetPwdDialogVisible = false;}}).catch((error) => {return;});
};// 页面加载时
onMounted(() => {});
</script>