大屏页面初始化
This commit is contained in:
@@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div class="edit-pwd-container">
|
||||
<el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-width="80px" class="pwd-form">
|
||||
<el-form-item label="原密码" prop="oldPassword">
|
||||
<el-input v-model="pwdForm.oldPassword" type="password" placeholder="请输入原密码" show-password size="default" maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="pwdForm.newPassword" type="password" placeholder="请输入新密码" show-password size="default" maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="pwdForm.confirmPassword" type="password" placeholder="请确认新密码" show-password size="default" maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onUnmounted, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const pwdFormRef = ref(null)
|
||||
const isMounted = ref(true)
|
||||
let submitPromise = null
|
||||
|
||||
const pwdForm = reactive({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const pwdRules = reactive({
|
||||
oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!isMounted.value) return callback()
|
||||
if (value === '') {
|
||||
callback(new Error('请确认新密码'))
|
||||
} else if (value !== pwdForm.newPassword) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const submitForm = async () => {
|
||||
if (!isMounted.value || !pwdFormRef.value) return
|
||||
if (submitPromise) {
|
||||
submitPromise = null
|
||||
return
|
||||
}
|
||||
|
||||
submitPromise = new Promise(async (resolve) => {
|
||||
try {
|
||||
let valid = true
|
||||
await pwdFormRef.value.validate().catch(() => {
|
||||
valid = false
|
||||
ElMessage.error('表单验证失败,请检查输入内容')
|
||||
})
|
||||
|
||||
if (!valid || !isMounted.value) {
|
||||
submitPromise = null
|
||||
return resolve(false)
|
||||
}
|
||||
|
||||
let confirmResult = false
|
||||
await nextTick(async () => {
|
||||
if (!isMounted.value) return
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'确认要修改密码吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
closeOnClickModal: false,
|
||||
showClose: false,
|
||||
timeout: 0
|
||||
}
|
||||
)
|
||||
confirmResult = true
|
||||
} catch {
|
||||
confirmResult = false
|
||||
}
|
||||
})
|
||||
|
||||
if (!confirmResult || !isMounted.value) {
|
||||
submitPromise = null
|
||||
return resolve(false)
|
||||
}
|
||||
|
||||
await new Promise(res => setTimeout(res, 800))
|
||||
if (isMounted.value) {
|
||||
ElMessage.success('密码修改成功')
|
||||
emit('success')
|
||||
resolve(true)
|
||||
}
|
||||
} catch (error) {
|
||||
if (isMounted.value) {
|
||||
ElMessage.error(error.message || '密码修改失败,请稍后重试')
|
||||
}
|
||||
resolve(false)
|
||||
} finally {
|
||||
submitPromise = null
|
||||
}
|
||||
})
|
||||
|
||||
return submitPromise
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
if (!isMounted.value || !pwdFormRef.value) return
|
||||
pwdFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
isMounted.value = false
|
||||
submitPromise = null
|
||||
})
|
||||
|
||||
defineExpose({ submitForm, resetForm })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-pwd-container {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.pwd-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
--el-input-height: 32px !important;
|
||||
width: 100%;
|
||||
--el-input-border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
padding: 0 10px;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(.el-input__suffix-inner) {
|
||||
height: 32px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-icon) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -169,7 +169,7 @@ import {
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getHomeMenuList } from '@/api/bizMenu'
|
||||
import LogoImg from '@/assets/logo.png'
|
||||
import EditPswd from './editPswd.vue'
|
||||
import EditPswd from './components/editPswd.vue'
|
||||
|
||||
const isMounted = ref(true)
|
||||
const systemTitle = ref("myPro管理系统")
|
||||
|
||||
Reference in New Issue
Block a user