123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <template>
- <el-form ref="userRef" :model="userForm" :rules="rules" label-width="80px">
- <el-form-item label="用户昵称:" prop="nickName">
- <el-input v-model="userForm.nickName" maxlength="30" />
- </el-form-item>
- <el-form-item label="手机号码:" prop="phonenumber">
- <el-input v-model="userForm.phonenumber" maxlength="11" />
- </el-form-item>
- <el-form-item label="邮箱:" prop="email">
- <el-input v-model="userForm.email" maxlength="50" />
- </el-form-item>
- <el-form-item label="性别:">
- <el-radio-group v-model="userForm.sex">
- <el-radio value="0">男</el-radio>
- <el-radio value="1">女</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="submit">保存</el-button>
- <el-button type="danger" @click="close">关闭</el-button>
- </el-form-item>
- </el-form>
- </template>
- <script setup lang="ts">
- import { updateUserProfile } from '@/api/system/user';
- import { propTypes } from '@/utils/propTypes';
- const props = defineProps({
- user: propTypes.any.isRequired
- });
- const userForm = computed(() => props.user);
- const { proxy } = getCurrentInstance() as ComponentInternalInstance;
- const userRef = ref<ElFormInstance>();
- const rule: ElFormRules = {
- nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
- email: [
- { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
- {
- type: 'email',
- message: '请输入正确的邮箱地址',
- trigger: ['blur', 'change']
- }
- ],
- phonenumber: [
- {
- required: true,
- message: '手机号码不能为空',
- trigger: 'blur'
- },
- { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
- ]
- };
- const rules = ref<ElFormRules>(rule);
- /** 提交按钮 */
- const submit = () => {
- userRef.value?.validate(async (valid: boolean) => {
- if (valid) {
- await updateUserProfile(props.user);
- proxy?.$modal.msgSuccess('修改成功');
- }
- });
- };
- /** 关闭按钮 */
- const close = () => {
- proxy?.$tab.closePage();
- };
- </script>
|