<!--
|
* @Description:
|
* @Version: 2.0
|
* @Autor: yuxinqiang
|
* @Date: 2022-08-03 09:28:47
|
* @LastEditors: yuxinqiang
|
* @LastEditTime: 2022-08-03 15:00:32
|
-->
|
<template>
|
<div>
|
<el-form ref="userForm" class="user-info-form" :model="state.userInfoForm" :rules="rules" :labelWidth="labelWidth">
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="state.userInfoForm.username" readonly />
|
</el-form-item>
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="state.userInfoForm.name" autocomplete="off" clearable />
|
</el-form-item>
|
<el-form-item label="邮箱" prop="email">
|
<el-input type="email" v-model="state.userInfoForm.email" autocomplete="off" clearable />
|
</el-form-item>
|
<el-form-item label="手机号" prop="phone">
|
<el-input v-model="state.userInfoForm.phone" autocomplete="off" clearable />
|
</el-form-item>
|
</el-form>
|
<div class="form-footer">
|
<el-button type="primary" @click="saveUserInfo(userForm)">保存</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { FormInstance, FormRules } from 'element-plus'
|
import { validatorMobile, validatorEmail, validatorName } from '@/utils/validate'
|
|
|
interface userInfoType {
|
username: string
|
name: string
|
email: string
|
phone: string | number
|
}
|
|
interface Props {
|
userInfo: userInfoType
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
userInfo: () => {
|
return {
|
username: '',
|
name: '',
|
email: '',
|
phone: ''
|
}
|
},
|
})
|
|
const userForm = ref<FormInstance>()
|
const labelWidth = ref<string>('100px')
|
|
interface State {
|
userInfoForm: userInfoType
|
}
|
const state = reactive<State>({
|
userInfoForm: {
|
username: '',
|
name: '',
|
email: '',
|
phone: ''
|
}
|
})
|
|
// 将父组件中传递的个人信息赋值给本地属性，方便后面修改
|
state.userInfoForm = { ...props.userInfo }
|
|
const rules = reactive<FormRules>({
|
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
name: [
|
{ required: true, message: '姓名不能为空', trigger: 'blur' },
|
{ min: 2, max: 16, message: '姓名为2-16位中英文及下划线的组合', trigger: 'blur' },
|
{ validator: validatorName, trigger: 'blur' }
|
],
|
email: [
|
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
|
{ validator: validatorEmail, trigger: 'blur' }
|
],
|
phone: [
|
{ required: true, message: '手机号不能为空', trigger: 'blur' },
|
{ validator: validatorMobile, trigger: 'blur' }
|
]
|
})
|
|
// 子组件与父组件的通信方法
|
const emits = defineEmits(['save'])
|
|
// 保存个人信息修改
|
const saveUserInfo = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
emits('save', state.userInfoForm)
|
}
|
})
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// 弹窗样式
|
.user-info-form {
|
width: 80%;
|
margin: auto;
|
}
|
|
.form-footer {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
