111 lines
4.4 KiB
Vue
111 lines
4.4 KiB
Vue
<template>
|
|
<el-form
|
|
label-width="84px"
|
|
:model="formData"
|
|
ref="formRef"
|
|
>
|
|
<div class="flex">
|
|
<el-form-item label="名称" prop="realname" class="flex-1"
|
|
:rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
|
|
<el-input v-model="formData.realname" placeholder="请输入名称" clearable />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="性别" prop="sex" class="flex-1">
|
|
<el-radio-group v-model="formData.gender" name="gender">
|
|
<el-radio :value="1">男</el-radio>
|
|
<el-radio :value="2">女</el-radio>
|
|
<el-radio :value="3">保密</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<el-form-item label="手机号码" prop="mobile" class="flex-1"
|
|
:rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' },]">
|
|
<el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱地址" prop="email" class="flex-1"
|
|
:rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'}]">
|
|
<el-input v-model="formData.email" placeholder="请输入邮箱地址" clearable />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<el-form-item label="所属区域" class="flex-1" prop="city" :rules="{ required: true, message: '请选择所属区域', trigger: 'change' }">
|
|
<chinaArea style="width: 100%" :type="4" v-model="formData.city"></chinaArea>
|
|
</el-form-item>
|
|
<el-form-item label="详细地址" class="flex-1" prop="address" :rules="{ required: true, message: '请输入详细地址', trigger: 'blur' }">
|
|
<el-input v-model="formData.address" placeholder="请输入详细地址" clearable />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<el-form-item label="简介" prop="intro" class="flex-1">
|
|
<el-input v-model="formData.intro" type="textarea" placeholder="请输入简介" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="note" class="flex-1">
|
|
<el-input v-model="formData.note" type="textarea" placeholder="请输入备注" clearable />
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="头像" prop="avatar" :rules="{ required: true, message: '请输上传头像', trigger: 'blur' }">
|
|
<UploadImg @changeFileName="(name)=>formData.avatarName=name"
|
|
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
|
|
name="user"
|
|
:fileSize="200"
|
|
v-model:image-url="formData.avatar">
|
|
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
|
|
</UploadImg>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-space>
|
|
<el-button :loading="subLoading" type="primary" @click="submit">更新基本信息</el-button>
|
|
</el-space>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref,onMounted } from 'vue';
|
|
import type { ElForm } from 'element-plus';
|
|
import { rule } from '@/utils/validate';
|
|
import chinaArea from '@/components/ChinaArea/index.vue';
|
|
import UploadImg from '@/components/Upload/Image.vue';
|
|
import {message} from "@/utils/auth";
|
|
import { useLockFn } from "@/utils/useLockFn";
|
|
import { getUserInfo } from '@/api/system/user';
|
|
import { updateProfile } from '@/api/setting/profile';
|
|
|
|
type FormInstance = InstanceType<typeof ElForm>;
|
|
|
|
const formRef = ref<FormInstance>();
|
|
|
|
const formData = reactive({
|
|
realname: '',
|
|
gender: '',
|
|
avatar: '',
|
|
mobile: '',
|
|
email: '',
|
|
city:'',
|
|
address: '',
|
|
intro: '',
|
|
note: '',
|
|
avatarName:''
|
|
});
|
|
|
|
const handleSubmit = async () => {
|
|
await formRef.value?.validate();
|
|
await updateProfile(formData)
|
|
message("更新成功");
|
|
};
|
|
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
|
|
const setUserInfo = async () => {
|
|
const data = await getUserInfo();
|
|
for (const key in formData) {
|
|
if (data[key] != null && data[key] != undefined) {
|
|
formData[key] = data[key];
|
|
}
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
setUserInfo()
|
|
});
|
|
</script>
|