429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑宝贝' : '添加宝贝'" width="600px" :close-on-click-modal="false"
|
|
@close="handleClose">
|
|
<div class="dialog-content">
|
|
|
|
<!-- 表单区域 -->
|
|
<el-form ref="editFormRef" :model="formData" :rules="formRules" label-width="100px">
|
|
<el-form-item label="头像" prop="avatar">
|
|
<div class="preview-image">
|
|
<img v-if="formData.avatar" :src="getEnvUrl(formData.avatar)" class="preview-img" />
|
|
<div v-else class="no-preview">
|
|
<el-icon>
|
|
<Picture />
|
|
</el-icon>
|
|
<span>头像预览</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 裁剪区域 -->
|
|
<div class="cutter-container">
|
|
<img-cutter ref="imgCutterRef" :img="formData.avatar ? getEnvUrl(formData.avatar) : ''" :cutWidth="400"
|
|
:cutHeight="400" :rate="'1:1'" :fixedNumber="[1, 1]" :fixed="true" :fixedBox="true" :original="false"
|
|
:autoCrop="true" :autoCropWidth="300" :autoCropHeight="300" :centerBox="true" :showChooseBtn="true"
|
|
:boxWidth="300" :boxHeight="300" @cutDown="handleCut" class="img-cutter-wrapper">
|
|
<template #cut>
|
|
<div style="padding: 20px; text-align: center;">
|
|
<el-button type="primary" size="small" @click="handleCropClick">确认裁剪</el-button>
|
|
</div>
|
|
</template>
|
|
<template #placeholder>
|
|
<div class="avatar-uploader">
|
|
<el-icon class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
<span class="upload-text">点击上传头像</span>
|
|
</div>
|
|
</template>
|
|
</img-cutter>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
|
|
</template>
|
|
|
|
</el-dialog>
|
|
|
|
<!-- <ImgCutter :cutWidth="300" :cutHeight="300" :tool="true" V-on:cutDown="handleCut" /> -->
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch, nextTick } from 'vue';
|
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
|
import { Plus, Picture } from '@element-plus/icons-vue';
|
|
import { createBaby, editBaby } from '@/api/babyhealth';
|
|
import { uploadAvatar } from '@/api/file';
|
|
|
|
import ImgCutter from 'vue-img-cutter';
|
|
|
|
// 定义 ImgCutter 实例类型
|
|
interface ImgCutterInstance {
|
|
chooseImg: () => void;
|
|
resetCrop: () => void;
|
|
crop: () => void;
|
|
}
|
|
|
|
// 定义裁剪数据结构类型
|
|
interface CroppedData {
|
|
blob: Blob;
|
|
dataURL: string;
|
|
file: File;
|
|
fileName: string;
|
|
index: number | null;
|
|
}
|
|
|
|
interface BabyFormData {
|
|
id: number;
|
|
name: string;
|
|
nickname: string;
|
|
sex: number;
|
|
birth: string;
|
|
height: number;
|
|
weight: number;
|
|
avatar: string;
|
|
status: number;
|
|
}
|
|
|
|
|
|
const imgCutterRef = ref<ImgCutterInstance | null>(null);
|
|
|
|
// 处理裁剪按钮点击
|
|
const handleCropClick = () => {
|
|
if (imgCutterRef.value) {
|
|
(imgCutterRef.value as any).crop();
|
|
}
|
|
};
|
|
|
|
const props = defineProps<{
|
|
visible: boolean;
|
|
editData?: BabyFormData;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:visible': [value: boolean];
|
|
success: [];
|
|
}>();
|
|
|
|
const dialogVisible = ref(false);
|
|
const loading = ref(false);
|
|
const editFormRef = ref<FormInstance>();
|
|
const cropDialogVisible = ref(false);
|
|
const croppingImage = ref('');
|
|
let selectedFile: File | null = null;
|
|
// 图片大小限制 (5MB)
|
|
const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
|
|
|
|
// 支持的图片类型
|
|
const SUPPORTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
|
|
|
|
// 处理裁剪完成
|
|
const handleCut = async (data: CroppedData) => {
|
|
try {
|
|
// 创建FormData
|
|
const uploadFormData = new FormData();
|
|
uploadFormData.append('file', data.file);
|
|
uploadFormData.append('cate', 'baby_avatar');
|
|
|
|
// 上传裁剪后的图片
|
|
const response = await uploadAvatar(uploadFormData);
|
|
|
|
if (response.code === 200 || response.code === 201) {
|
|
const avatarUrl = response.data.url || response.data.path || '';
|
|
formData.avatar = avatarUrl;
|
|
|
|
if (response.code === 201) {
|
|
ElMessage.info("文件已存在，使用已有图片");
|
|
} else {
|
|
ElMessage.success("头像上传成功");
|
|
}
|
|
} else {
|
|
ElMessage.error(response.msg || "上传失败");
|
|
}
|
|
} catch (error) {
|
|
console.error('上传失败:', error);
|
|
ElMessage.error("上传失败，请重试");
|
|
} finally {
|
|
// 清理
|
|
croppingImage.value = '';
|
|
selectedFile = null;
|
|
}
|
|
};
|
|
|
|
|
|
const formData = reactive<BabyFormData>({
|
|
id: 0,
|
|
name: '',
|
|
nickname: '',
|
|
sex: 1,
|
|
birth: '',
|
|
height: 0,
|
|
weight: 0,
|
|
avatar: '',
|
|
status: 1
|
|
});
|
|
|
|
const isEdit = ref(false);
|
|
|
|
const formRules: FormRules = {
|
|
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
|
sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
|
birth: [{ required: true, message: '请选择出生日期', trigger: 'change' }]
|
|
};
|
|
|
|
// 拼接接口路径
|
|
const getEnvUrl = (path: string) => {
|
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
|
|
return `${API_BASE_URL}${path}`;
|
|
};
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
Object.assign(formData, {
|
|
id: 0,
|
|
name: '',
|
|
nickname: '',
|
|
sex: 1,
|
|
birth: '',
|
|
height: 0,
|
|
weight: 0,
|
|
avatar: '',
|
|
status: 1
|
|
});
|
|
};
|
|
|
|
// 关闭对话框
|
|
const handleClose = () => {
|
|
dialogVisible.value = false;
|
|
resetForm();
|
|
};
|
|
|
|
// 监听 visible 变化
|
|
watch(() => props.visible, (val) => {
|
|
dialogVisible.value = val;
|
|
});
|
|
|
|
// 监听 dialogVisible 变化
|
|
watch(dialogVisible, (val) => {
|
|
emit('update:visible', val);
|
|
});
|
|
|
|
// 监听 editData 变化
|
|
watch(() => props.editData, (data) => {
|
|
if (data) {
|
|
isEdit.value = true;
|
|
Object.assign(formData, data);
|
|
} else {
|
|
isEdit.value = false;
|
|
resetForm();
|
|
}
|
|
}, { immediate: true });
|
|
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
if (!editFormRef.value) return;
|
|
|
|
await editFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
loading.value = true;
|
|
try {
|
|
let res;
|
|
if (formData.id) {
|
|
// 编辑
|
|
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 {
|
|
// 新增
|
|
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('提交失败');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.dialog-content {
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.preview-image {
|
|
width: 168px;
|
|
height: 168px;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border: 1px dashed var(--el-border-color);
|
|
margin-right: 30px;
|
|
|
|
.preview-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.no-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: var(--el-text-color-secondary);
|
|
|
|
.el-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 8px;
|
|
color: var(--el-text-color-placeholder);
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-section {
|
|
margin-bottom: 24px;
|
|
|
|
.cutter-container {
|
|
max-width: 500px;
|
|
}
|
|
|
|
:deep(.avatar-uploader) {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
width: 200px;
|
|
height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--el-fill-color-light);
|
|
margin: 0 auto;
|
|
|
|
&:hover {
|
|
border-color: var(--el-color-primary);
|
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 32px;
|
|
color: var(--el-text-color-placeholder);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.upload-text {
|
|
color: var(--el-text-color-secondary);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.img-cutter-wrapper {
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
:deep(.img-cutter) {
|
|
width: 100%;
|
|
margin: 0;
|
|
max-width: none;
|
|
|
|
.cut-btn {
|
|
display: none;
|
|
}
|
|
|
|
.cut-box {
|
|
width: 100% !important;
|
|
height: 350px !important;
|
|
}
|
|
|
|
.cut-container {
|
|
width: 100% !important;
|
|
height: 350px !important;
|
|
}
|
|
|
|
.cut-preview-box {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|