大屏页面初始化

This commit is contained in:
2026-03-03 17:39:57 +08:00
parent dec50927da
commit d64a6ef700
2 changed files with 1 additions and 188 deletions

View File

@@ -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>

View File

@@ -169,7 +169,7 @@ import {
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { getHomeMenuList } from '@/api/bizMenu' import { getHomeMenuList } from '@/api/bizMenu'
import LogoImg from '@/assets/logo.png' import LogoImg from '@/assets/logo.png'
import EditPswd from './editPswd.vue' import EditPswd from './components/editPswd.vue'
const isMounted = ref(true) const isMounted = ref(true)
const systemTitle = ref("myPro管理系统") const systemTitle = ref("myPro管理系统")