110 lines
4.4 KiB
Plaintext
110 lines
4.4 KiB
Plaintext
<template>
|
|
<a-form
|
|
:model="formData"
|
|
ref="formRef"
|
|
:label-col="{ style: { width: '85px' }}"
|
|
>
|
|
<div class="flex">
|
|
<a-form-item label="名称" name="realname" class="flex-1"
|
|
:rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
|
|
<a-input v-model:value="formData.realname" placeholder="请输入名称" clearable />
|
|
</a-form-item>
|
|
|
|
<a-form-item label="性别" name="sex" class="flex-1">
|
|
<a-radio-group v-model:value="formData.gender" name="gender">
|
|
<a-radio :value="1">男</a-radio>
|
|
<a-radio :value="2">女</a-radio>
|
|
<a-radio :value="3">保密</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<a-form-item label="手机号码" name="mobile" class="flex-1"
|
|
:rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' }]">
|
|
<a-input v-model:value="formData.mobile" placeholder="请输入手机号码" clearable />
|
|
</a-form-item>
|
|
<a-form-item label="邮箱地址" name="email" class="flex-1"
|
|
:rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'}]">
|
|
<a-input v-model:value="formData.email" placeholder="请输入邮箱地址" clearable />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<a-form-item label="所属区域" class="flex-1" name="city" :rules="{ required: true, message: '请选择所属区域', trigger: 'change' }">
|
|
<chinaArea style="width: 100%" :type="4" v-model="formData.city"></chinaArea>
|
|
</a-form-item>
|
|
<a-form-item label="详细地址" class="flex-1" name="address" :rules="{ required: true, message: '请输入详细地址', trigger: 'blur' }">
|
|
<a-input v-model:value="formData.address" placeholder="请输入详细地址" clearable />
|
|
</a-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<a-form-item label="简介" name="intro" class="flex-1">
|
|
<a-input v-model:value="formData.intro" type="textarea" placeholder="请输入简介" clearable />
|
|
</a-form-item>
|
|
<a-form-item label="备注" name="note" class="flex-1">
|
|
<a-textarea v-model:value="formData.note" placeholder="请输入备注" clearable />
|
|
</a-form-item>
|
|
</div>
|
|
<a-form-item label="头像" name="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>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button :loading="subLoading" type="primary" @click="submit" v-perm="['sys:profile:update']">更新基本信息</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref,onMounted } from 'vue';
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { rule } from '@/utils/validate';
|
|
import chinaArea from '@/components/ChinaArea/index.vue';
|
|
import UploadImg from '@/components/Upload/Image.vue';
|
|
import { message } from 'ant-design-vue'
|
|
import { useLockFn } from "@/utils/useLockFn";
|
|
import { getUserInfo } from '@/api/system/user';
|
|
import { updateProfile } from '@/api/setting/profile';
|
|
|
|
|
|
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.success("更新成功");
|
|
};
|
|
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>
|