yunzerwebsite/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新宝贝监护功能

Browse Source
This commit is contained in:
hero920103
2026-02-04 23:45:55 +08:00
parent 649da2a6fd
commit eec987041c
6 changed files with 621 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/apps/babyhealth/babys/components/edit.vue
+186 -136
View File
@@ -6,90 +6,99 @@
:close-on-click-modal="false"
@close="handleClose"
>
<el-form ref="editFormRef" :model="formData" :rules="formRules" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" clearable />
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入昵称" clearable />
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="formData.sex">
<el-radio :value="1">男</el-radio>
<el-radio :value="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
v-model="formData.birth"
type="date"
placeholder="选择出生日期"
style="width: 100%"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="身高" prop="height">
<el-input-number
v-model="formData.height"
:min="0"
:max="200"
:precision="1"
:step="0.5"
controls-position="right"
style="width: 100%"
/>
<span style="margin-left: 8px; color: var(--el-text-color-regular)">cm</span>
</el-form-item>
<el-form-item label="体重" prop="weight">
<el-input-number
v-model="formData.weight"
:min="0"
:max="50"
:precision="2"
:step="0.01"
controls-position="right"
style="width: 100%"
/>
<span style="margin-left: 8px; color: var(--el-text-color-regular)">kg</span>
</el-form-item>
<el-form-item label="头像">
<div class="dialog-content">
<!-- 头像上传区域 -->
<div class="avatar-section">
<el-upload
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="uploadFile"
:headers="uploadHeaders"
class="avatar-uploader"
>
<img v-if="formData.avatar" :src="getEnvUrl(formData.avatar)" class="avatar-preview" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
<el-image
v-if="formData.avatar"
:src="getEnvUrl(formData.avatar)"
class="avatar-preview"
fit="cover"
:preview-src-list="[getEnvUrl(formData.avatar)]"
:initial-index="0"
/>
<div v-else class="avatar-placeholder">
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
<span class="avatar-tip">点击上传头像</span>
</div>
</el-upload>
</div>
<!-- 表单区域 -->
<el-form ref="editFormRef" :model="formData" :rules="formRules" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" clearable />
</el-form-item>
<el-form-item label="小名" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入小名" clearable />
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="formData.sex">
<el-radio :value="1">男</el-radio>
<el-radio :value="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
v-model="formData.birth"
type="date"
placeholder="选择出生日期"
style="width: 100%"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="身高" prop="height">
<el-input
v-model="formData.height"
:min="0"
:max="200"
:precision="1"
:step="0.5"
controls-position="right"
style="width: 100%"
>
<template #append>CM</template>
</el-input>
</el-form-item>
<el-form-item label="体重" prop="weight">
<el-input
v-model="formData.weight"
:min="0"
:max="50"
:precision="2"
:step="0.01"
controls-position="right"
style="width: 100%"
>
<template #append>KG</template>
</el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
</template>
<!-- 预览对话框 -->
<el-dialog v-model="previewVisible" title="头像预览" width="500px">
<img w-full :src="getEnvUrl(previewImageUrl)" alt="Preview Image" style="width: 100%" />
</el-dialog>
</el-dialog>
</template>
@@ -97,8 +106,8 @@
import { ref, reactive, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { createBaby, updateBaby } from '@/api/babyhealth';
import { uploadAvatar } from '@/api/upload';
import { createBaby, editBaby } from '@/api/babyhealth';
import { uploadAvatar } from '@/api/file';
interface BabyFormData {
id: number;
@@ -119,12 +128,10 @@ const props = defineProps<{
const emit = defineEmits<{
'update:visible': [value: boolean];
submit: [data: BabyFormData];
success: [];
}>();
const dialogVisible = ref(false);
const previewVisible = ref(false);
const previewImageUrl = ref('');
const loading = ref(false);
const editFormRef = ref<FormInstance>();
const fileList = ref<any[]>([]);
@@ -208,45 +215,44 @@ watch(() => props.editData, (data) => {
}
}, { immediate: true });
// 上传配置
const uploadUrl = import.meta.env.VITE_API_BASE_URL + "/admin/uploadavatar";
const uploadHeaders = {
'Content-Type': 'multipart/form-data'
};
// 头像上传前校验
const beforeAvatarUpload = (file: any) => {
const isImage = file.type.startsWith('image/');
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isImage) {
ElMessage.error('仅支持图片格式');
return false;
}
return false;
if (!isLt5M) {
ElMessage.error('图片大小不能超过5MB');
return false;
}
return true;
};
// 上传文件到服务器
const uploadFile = async (options: any) => {
const { file } = options;
const formData = new FormData();
formData.append('file', file);
const uploadFormData = new FormData();
uploadFormData.append('file', file);
try {
// 使用uploadAvatar接口上传文件
const response = await uploadAvatar(formData, { cate: 'baby_avatar' });
if (response.code === 200) {
const response = await uploadAvatar(uploadFormData, { cate: 'baby_avatar' });
if (response.code === 200 || response.code === 201) {
// 更新宝贝头像
const avatarUrl = response.data.url || response.data.path || '';
formData.avatar = avatarUrl;
// 如果正在编辑，则更新宝贝信息
if (formData.id) {
await updateBaby(formData.id, { avatar: avatarUrl });
if (response.code === 201) {
ElMessage.info("文件已存在，使用已有图片");
} else {
ElMessage.success("头像上传成功");
}
ElMessage.success("头像上传成功");
} else {
ElMessage.error(response.msg || "上传失败");
}
@@ -256,23 +262,6 @@ const uploadFile = async (options: any) => {
}
};
// 上传成功
const handleAvatarSuccess = (response: any) => {
if (response.code === 200) {
const avatarUrl = response.data.url || response.data.path || '';
formData.avatar = avatarUrl;
// 如果正在编辑，则更新宝贝信息
if (formData.id) {
updateBaby(formData.id, { avatar: avatarUrl });
}
ElMessage.success("头像上传成功");
} else {
ElMessage.error(response.msg || "上传失败");
}
};
// 上传相关
const handleUploadChange = (file: any) => {
if (file.raw) {
@@ -291,11 +280,6 @@ const handleRemove = (file: any) => {
formData.avatar = '';
};
const handlePictureCardPreview = (file: any) => {
previewImageUrl.value = file.url;
previewVisible.value = true;
};
// 提交表单
const handleSubmit = async () => {
if (!editFormRef.value) return;
@@ -311,7 +295,7 @@ const handleSubmit = async () => {
uploadFormData.append('cate', 'baby');
const uploadRes = await uploadAvatar(uploadFormData);
if (uploadRes.code === 200 && uploadRes.data?.url) {
if ((uploadRes.code === 200 || uploadRes.code === 201) && uploadRes.data?.url) {
formData.avatar = uploadRes.data.url;
} else {
ElMessage.error('图片上传失败');
@@ -319,10 +303,35 @@ const handleSubmit = async () => {
}
}
// 提交数据
emit('submit', { ...formData });
dialogVisible.value = false;
resetForm();
let res;
if (formData.id) {
// 编辑 - 使用普通对象，PUT请求
const submitData: Record<string, any> = {};
Object.keys(formData).forEach(key => {
if (key !== 'id' && formData[key as keyof BabyFormData] !== undefined && formData[key as keyof BabyFormData] !== null) {
submitData[key] = formData[key as keyof BabyFormData];
}
});
res = await editBaby(formData.id, submitData);
} else {
// 新增 - 使用 FormData
const submitData = new FormData();
Object.keys(formData).forEach(key => {
if (key !== 'id' && formData[key as keyof BabyFormData] !== undefined && formData[key as keyof BabyFormData] !== null) {
submitData.append(key, String(formData[key as keyof BabyFormData]));
}
});
res = await createBaby(submitData);
}
if (res.code === 200) {
ElMessage.success(formData.id ? '编辑成功' : '添加成功');
dialogVisible.value = false;
resetForm();
emit('success'); // 通知父组件刷新列表
} else {
ElMessage.error(res.msg || (formData.id ? '编辑失败' : '添加失败'));
}
} catch (error) {
console.error('提交失败:', error);
ElMessage.error('提交失败');
@@ -335,39 +344,80 @@ const handleSubmit = async () => {
</script>
<style scoped lang="scss">
.dialog-content {
display: flex;
flex-direction: column;
}
.avatar-section {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--el-border-color-lighter);
}
.avatar-preview {
width: 100px;
height: 100px;
border-radius: 6px;
width: 120px;
height: 120px;
border-radius: 8px;
object-fit: cover;
display: block;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
:deep(img) {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
.avatar-uploader {
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
border: 2px dashed var(--el-border-color);
border-radius: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
width: 100px;
height: 100px;
transition: all 0.3s;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--el-fill-color-light);
&:hover {
border-color: var(--el-color-primary);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}
}
}
.avatar-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 16px;
text-align: center;
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 32px;
color: var(--el-text-color-placeholder);
margin-bottom: 8px;
}
.avatar-tip {
font-size: 12px;
color: var(--el-text-color-placeholder);
}
}
:deep(.el-upload-list__item-thumbnail) {
width: 100%;
height: 100%;