Compare commits
No commits in common. "a4339a1cf5529bb7c2c2c803ba06a8d368af93aa" and "eec987041ceb3e764f1b394dab0e44ef690fec95" have entirely different histories.
a4339a1cf5
...
eec987041c
1919
package-lock.json
generated
1919
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -22,7 +22,6 @@
|
||||
"os": "^0.1.2",
|
||||
"pinia": "^3.0.3",
|
||||
"vue": "^3.5.22",
|
||||
"vue-img-cutter": "^3.0.7",
|
||||
"vue-router": "^4.6.3",
|
||||
"vue3-pdf-app": "^1.0.3",
|
||||
"xlsx": "^0.18.5"
|
||||
@ -30,6 +29,7 @@
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.10.7",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"sass-embedded": "^1.93.3",
|
||||
"typescript": "^5.9.3",
|
||||
"unplugin-auto-import": "^20.2.0",
|
||||
"unplugin-vue-components": "^30.0.0",
|
||||
|
||||
@ -10,8 +10,8 @@ import request from "@/utils/request";
|
||||
*/
|
||||
export function getBabyList() {
|
||||
return request({
|
||||
url: '/admin/baby/list',
|
||||
method: 'get'
|
||||
url: "/admin/babys/list",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
@ -43,12 +43,17 @@ export function createBaby(data) {
|
||||
});
|
||||
}
|
||||
|
||||
// 更新宝贝信息
|
||||
/**
|
||||
* 更新宝贝数据
|
||||
* @param {number} id 宝贝ID
|
||||
* @param {Object} data 更新的数据
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function editBaby(id, data) {
|
||||
return request({
|
||||
url: `/admin/baby/update/${id}`,
|
||||
method: 'post',
|
||||
data: data
|
||||
url: `/admin/babys/${id}`,
|
||||
method: "post",
|
||||
data: { ...data, _method: 'PUT' }
|
||||
});
|
||||
}
|
||||
|
||||
@ -112,7 +117,7 @@ export function getUserList() {
|
||||
*/
|
||||
export function getUserDetail(id) {
|
||||
return request({
|
||||
url: `/admin/babyhealthUser/detail/${id}`,
|
||||
url: `/admin/babyhealthUser/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
@ -124,7 +129,7 @@ export function getUserDetail(id) {
|
||||
*/
|
||||
export function createUser(data) {
|
||||
return request({
|
||||
url: "/admin/babyhealthUser/create",
|
||||
url: "/admin/babyhealthUser",
|
||||
method: "post",
|
||||
data: data,
|
||||
headers: {
|
||||
@ -141,7 +146,7 @@ export function createUser(data) {
|
||||
*/
|
||||
export function updateUser(id, data) {
|
||||
return request({
|
||||
url: `/admin/babyhealthUser/update/${id}`,
|
||||
url: `/admin/babyhealthUser/${id}`,
|
||||
method: "post",
|
||||
data: data,
|
||||
headers: {
|
||||
@ -157,34 +162,7 @@ export function updateUser(id, data) {
|
||||
*/
|
||||
export function deleteUser(id) {
|
||||
return request({
|
||||
url: `/admin/babyhealthUser/delete/${id}`,
|
||||
url: `/admin/babyhealthUser/${id}`,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*************************************************
|
||||
****************** 仪表盘相关接口 ******************
|
||||
*************************************************/
|
||||
|
||||
/**
|
||||
* 获取用户列表
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getUserCounts() {
|
||||
return request({
|
||||
url: "/admin/babyhealthDashborad/users",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取宝贝列表
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getBabyCounts() {
|
||||
return request({
|
||||
url: "/admin/babyhealthDashborad/babys",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
4
src/types/vue-cropper.d.ts
vendored
4
src/types/vue-cropper.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
declare module 'vue-cropper' {
|
||||
import { Component } from 'vue'
|
||||
export const VueCropper: Component
|
||||
}
|
||||
@ -298,7 +298,7 @@ const handleSubmit = async () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style scoped lang="scss">
|
||||
.baby-info-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,44 +1,37 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑宝贝' : '添加宝贝'" width="600px" :close-on-click-modal="false"
|
||||
@close="handleClose">
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑宝贝' : '添加宝贝'"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="dialog-content">
|
||||
<!-- 头像上传区域 -->
|
||||
<div class="avatar-section">
|
||||
<el-upload
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:http-request="uploadFile"
|
||||
class="avatar-uploader"
|
||||
>
|
||||
<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="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>
|
||||
@ -55,23 +48,43 @@
|
||||
</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-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%">
|
||||
<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%">
|
||||
<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-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
@ -86,37 +99,16 @@
|
||||
<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 { ref, reactive, watch } from 'vue';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import { Plus, Picture } from '@element-plus/icons-vue';
|
||||
import { Plus } 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;
|
||||
@ -129,16 +121,6 @@ interface BabyFormData {
|
||||
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;
|
||||
@ -152,48 +134,7 @@ const emit = defineEmits<{
|
||||
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 fileList = ref<any[]>([]);
|
||||
|
||||
const formData = reactive<BabyFormData>({
|
||||
id: 0,
|
||||
@ -234,6 +175,7 @@ const resetForm = () => {
|
||||
avatar: '',
|
||||
status: 1
|
||||
});
|
||||
fileList.value = [];
|
||||
};
|
||||
|
||||
// 关闭对话框
|
||||
@ -257,12 +199,86 @@ watch(() => props.editData, (data) => {
|
||||
if (data) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, data);
|
||||
if (data.avatar) {
|
||||
fileList.value = [
|
||||
{
|
||||
name: 'avatar',
|
||||
url: data.avatar
|
||||
}
|
||||
];
|
||||
} else {
|
||||
fileList.value = [];
|
||||
}
|
||||
} else {
|
||||
isEdit.value = false;
|
||||
resetForm();
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 头像上传前校验
|
||||
const beforeAvatarUpload = (file: any) => {
|
||||
const isImage = file.type.startsWith('image/');
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
|
||||
if (!isImage) {
|
||||
ElMessage.error('仅支持图片格式');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isLt5M) {
|
||||
ElMessage.error('图片大小不能超过5MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 上传文件到服务器
|
||||
const uploadFile = async (options: any) => {
|
||||
const { file } = options;
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('file', file);
|
||||
|
||||
try {
|
||||
// 使用uploadAvatar接口上传文件
|
||||
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 (response.code === 201) {
|
||||
ElMessage.info("文件已存在，使用已有图片");
|
||||
} else {
|
||||
ElMessage.success("头像上传成功");
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.msg || "上传失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error);
|
||||
ElMessage.error("上传失败，请重试");
|
||||
}
|
||||
};
|
||||
|
||||
// 上传相关
|
||||
const handleUploadChange = (file: any) => {
|
||||
if (file.raw) {
|
||||
const isImage = file.raw.type.startsWith('image/');
|
||||
const isLt5M = file.raw.size / 1024 / 1024 < 5;
|
||||
if (!isImage || !isLt5M) {
|
||||
fileList.value = [];
|
||||
ElMessage.error(isImage ? '图片大小不能超过5MB' : '仅支持图片格式');
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (file: any) => {
|
||||
fileList.value = [];
|
||||
formData.avatar = '';
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
@ -272,9 +288,24 @@ const handleSubmit = async () => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 如果有新上传的图片，先上传
|
||||
if (fileList.value.length > 0 && fileList.value[0].raw) {
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('file', fileList.value[0].raw);
|
||||
uploadFormData.append('cate', 'baby');
|
||||
|
||||
const uploadRes = await uploadAvatar(uploadFormData);
|
||||
if ((uploadRes.code === 200 || uploadRes.code === 201) && uploadRes.data?.url) {
|
||||
formData.avatar = uploadRes.data.url;
|
||||
} else {
|
||||
ElMessage.error('图片上传失败');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
@ -283,7 +314,7 @@ const handleSubmit = async () => {
|
||||
});
|
||||
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) {
|
||||
@ -297,7 +328,7 @@ const handleSubmit = async () => {
|
||||
ElMessage.success(formData.id ? '编辑成功' : '添加成功');
|
||||
dialogVisible.value = false;
|
||||
resetForm();
|
||||
emit('success');
|
||||
emit('success'); // 通知父组件刷新列表
|
||||
} else {
|
||||
ElMessage.error(res.msg || (formData.id ? '编辑失败' : '添加失败'));
|
||||
}
|
||||
@ -312,117 +343,84 @@ const handleSubmit = async () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style scoped lang="scss">
|
||||
.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;
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
.cutter-container {
|
||||
max-width: 500px;
|
||||
.avatar-preview {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.avatar-uploader) {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
.avatar-uploader {
|
||||
:deep(.el-upload) {
|
||||
border: 2px dashed var(--el-border-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
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);
|
||||
margin: 0 auto;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
transform: scale(1.05);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 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%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -231,7 +231,7 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style scoped lang="scss">
|
||||
.babys-container {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
|
||||
@ -1,152 +1,114 @@
|
||||
<template>
|
||||
<div class="statistics-container">
|
||||
<!-- 第一行：宝贝统计 -->
|
||||
<el-row :gutter="20" class="data-overview">
|
||||
<el-col :span="8" v-for="item in babyData" :key="item.title">
|
||||
<el-col :span="6" v-for="item in summaryData" :key="item.title">
|
||||
<el-card shadow="hover" class="data-card">
|
||||
<div class="card-content">
|
||||
<div class="icon-box" :style="{ backgroundColor: item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value.toLocaleString() }}</div>
|
||||
<div class="trend" :class="item.isUp ? 'up' : 'down'">
|
||||
{{ item.isUp ? '↑' : '↓' }} {{ item.percentage }}%
|
||||
<span>较上月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行：用户统计 -->
|
||||
<el-row :gutter="20" class="data-overview" style="margin-top: 20px;">
|
||||
<el-col :span="8" v-for="item in userData" :key="item.title">
|
||||
<el-card shadow="hover" class="data-card">
|
||||
<div class="card-content">
|
||||
<div class="icon-box" :style="{ backgroundColor: item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value.toLocaleString() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<el-row :gutter="20" class="charts-row" style="margin-top: 20px;">
|
||||
<!-- 宝贝增长趋势柱状图 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" header="宝贝增长趋势">
|
||||
<div ref="babyChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 用户增长趋势柱状图 -->
|
||||
<el-col :span="12">
|
||||
<el-row :gutter="20" class="charts-row">
|
||||
<el-col :span="16">
|
||||
<el-card shadow="hover" header="用户增长趋势">
|
||||
<div ref="userChartRef" class="chart-box"></div>
|
||||
<div ref="lineChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" header="用户等级分布">
|
||||
<div ref="pieChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { getBabyCounts, getUserCounts } from '@/api/babyhealth';
|
||||
import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';
|
||||
|
||||
// --- 类型定义 ---
|
||||
interface SummaryItem {
|
||||
title: string;
|
||||
value: number;
|
||||
icon: string;
|
||||
icon: any;
|
||||
color: string;
|
||||
percentage: number;
|
||||
isUp: boolean;
|
||||
}
|
||||
|
||||
// --- 响应式数据 ---
|
||||
const babyChartRef = ref<HTMLElement | null>(null);
|
||||
const userChartRef = ref<HTMLElement | null>(null);
|
||||
const babyChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const userChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const lineChartRef = ref<HTMLElement | null>(null);
|
||||
const pieChartRef = ref<HTMLElement | null>(null);
|
||||
const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const pieChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
|
||||
const babyData = ref<SummaryItem[]>([
|
||||
{ title: '总宝贝数', value: 0, icon: 'fa-solid fa-baby', color: '#67C23A', percentage: 0, isUp: false },
|
||||
{ title: '男宝宝数', value: 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '女宝宝数', value: 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
const summaryData = ref<SummaryItem[]>([
|
||||
{ title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
|
||||
{ title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
|
||||
{ title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
|
||||
{ title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
|
||||
]);
|
||||
|
||||
const userData = ref<SummaryItem[]>([
|
||||
{ title: '总用户数', value: 0, icon: 'fa-solid fa-users', color: '#3973FF', percentage: 0, isUp: false },
|
||||
{ title: '父亲数', value: 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '母亲数', value: 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
]);
|
||||
|
||||
// 调用宝贝统计接口
|
||||
async function fetchGetBabyDatas() {
|
||||
const res = await getBabyCounts();
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
const { total, male, female } = res.data;
|
||||
|
||||
// 更新 babyData
|
||||
babyData.value = [
|
||||
{ title: '总宝贝数', value: total, icon: 'fa-solid fa-baby', color: '#67C23A', percentage: 0, isUp: false },
|
||||
{ title: '男宝宝数', value: male !== undefined ? male : 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '女宝宝数', value: female !== undefined ? female : 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
];
|
||||
|
||||
// 更新宝贝柱状图
|
||||
updateBabyChart(total, male, female);
|
||||
}
|
||||
}
|
||||
|
||||
// 调用用户统计接口
|
||||
async function fetchGetUserDatas() {
|
||||
const res = await getUserCounts();
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
const { total, father, mother } = res.data;
|
||||
|
||||
// 更新 userData
|
||||
userData.value = [
|
||||
{ title: '总用户数', value: total, icon: 'fa-solid fa-users', color: '#3973FF', percentage: 0, isUp: false },
|
||||
{ title: '父亲数', value: father !== undefined ? father : 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '母亲数', value: mother !== undefined ? mother : 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
];
|
||||
|
||||
// 更新用户柱状图
|
||||
updateUserChart(total, father, mother);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化宝贝柱状图
|
||||
const initBabyChart = () => {
|
||||
if (babyChartRef.value) {
|
||||
babyChartInstance.value = echarts.init(babyChartRef.value);
|
||||
babyChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
// --- 初始化图表 ---
|
||||
const initCharts = () => {
|
||||
// 折线图配置
|
||||
if (lineChartRef.value) {
|
||||
lineChartInstance.value = echarts.init(lineChartRef.value);
|
||||
lineChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['总宝贝数', '男宝宝数', '女宝宝数'],
|
||||
axisTick: { alignWithLabel: true }
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
name: '新增用户',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
areaStyle: { opacity: 0.3 },
|
||||
itemStyle: { color: '#3973FF' }
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// 饼图配置
|
||||
if (pieChartRef.value) {
|
||||
pieChartInstance.value = echarts.init(pieChartRef.value);
|
||||
pieChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { bottom: '0%', left: 'center' },
|
||||
series: [
|
||||
{
|
||||
name: '等级分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
data: [
|
||||
{ value: 0, itemStyle: { color: '#67C23A' } },
|
||||
{ value: 0, itemStyle: { color: '#409EFF' } },
|
||||
{ value: 0, itemStyle: { color: '#F56C6C' } }
|
||||
{ value: 1048, name: '普通用户' },
|
||||
{ value: 735, name: 'VIP会员' },
|
||||
{ value: 580, name: '超级管理员' },
|
||||
{ value: 484, name: '运营人员' }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -154,135 +116,81 @@ const initBabyChart = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化用户柱状图
|
||||
const initUserChart = () => {
|
||||
if (userChartRef.value) {
|
||||
userChartInstance.value = echarts.init(userChartRef.value);
|
||||
userChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['总用户数', '父亲数', '母亲数'],
|
||||
axisTick: { alignWithLabel: true }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [
|
||||
{ value: 0, itemStyle: { color: '#3973FF' } },
|
||||
{ value: 0, itemStyle: { color: '#409EFF' } },
|
||||
{ value: 0, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新宝贝柱状图数据
|
||||
const updateBabyChart = (total: number, male: number, female: number) => {
|
||||
if (babyChartInstance.value) {
|
||||
babyChartInstance.value.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: total, itemStyle: { color: '#67C23A' } },
|
||||
{ value: male, itemStyle: { color: '#409EFF' } },
|
||||
{ value: female, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新用户柱状图数据
|
||||
const updateUserChart = (total: number, father: number, mother: number) => {
|
||||
if (userChartInstance.value) {
|
||||
userChartInstance.value.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: total, itemStyle: { color: '#3973FF' } },
|
||||
{ value: father, itemStyle: { color: '#409EFF' } },
|
||||
{ value: mother, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期与自适应
|
||||
// --- 生命周期与自适应 ---
|
||||
const handleResize = () => {
|
||||
babyChartInstance.value?.resize();
|
||||
userChartInstance.value?.resize();
|
||||
lineChartInstance.value?.resize();
|
||||
pieChartInstance.value?.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initBabyChart();
|
||||
initUserChart();
|
||||
fetchGetBabyDatas();
|
||||
fetchGetUserDatas();
|
||||
initCharts();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
babyChartInstance.value?.dispose();
|
||||
userChartInstance.value?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped lang="scss">
|
||||
.statistics-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.data-overview {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.data-overview {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.data-card {
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.data-card {
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-box {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
.icon-box {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 4px 0;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.trend {
|
||||
font-size: 12px;
|
||||
&.up { color: #67c23a; }
|
||||
&.down { color: #f56c6c; }
|
||||
span { color: #909399; margin-left: 4px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 4px 0;
|
||||
color: var(--el-text-color-primary);
|
||||
.charts-row {
|
||||
.chart-box {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
margin-top: 20px;
|
||||
|
||||
.chart-box {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
// 深度修改 Element Plus 卡片头部样式
|
||||
:deep(.el-card__header) {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
</style>
|
||||
@ -158,7 +158,7 @@ defineExpose({
|
||||
fetchRoles();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.user-preview {
|
||||
padding: 20px;
|
||||
|
||||
|
||||
@ -9,32 +9,41 @@
|
||||
|
||||
<!-- 密码 -->
|
||||
<el-form-item label="密码" prop="password" v-if="isAdd">
|
||||
<el-input v-model="form.password" type="password" autocomplete="new-password" show-password
|
||||
:placeholder="isAdd ? '请输入密码（至少6位）' : '留空则不修改密码'" />
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
show-password
|
||||
:placeholder="isAdd ? '请输入密码（至少6位）' : '留空则不修改密码'"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 确认密码 -->
|
||||
<el-form-item label="确认密码" prop="confirmPassword" v-if="isAdd">
|
||||
<el-input v-model="form.confirmPassword" type="password" autocomplete="new-password" show-password
|
||||
:placeholder="isAdd ? '请再次输入密码' : '留空则不修改密码'" />
|
||||
<el-input
|
||||
v-model="form.confirmPassword"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
show-password
|
||||
:placeholder="isAdd ? '请再次输入密码' : '留空则不修改密码'"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<div class="form-title">个人信息</div>
|
||||
<!-- 头像 -->
|
||||
<el-form-item label="头像">
|
||||
<el-upload class="avatar-uploader" :show-file-list="false" :action="uploadUrl" :headers="uploadHeaders"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:http-request="uploadFile"
|
||||
>
|
||||
<img v-if="form.avatar" :src="getAvatarUrl(form.avatar)" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 裁剪对话框 -->
|
||||
<CropImage ref="cropImageRef" @confirm="handleCropConfirm" />
|
||||
|
||||
<!-- 姓名 -->
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" />
|
||||
@ -51,8 +60,13 @@
|
||||
|
||||
<!-- 生日 -->
|
||||
<el-form-item label="生日">
|
||||
<el-date-picker v-model="form.birth" type="date" placeholder="请选择日期" style="width: 100%"
|
||||
value-format="YYYY-MM-DD" />
|
||||
<el-date-picker
|
||||
v-model="form.birth"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 电话 -->
|
||||
@ -67,7 +81,11 @@
|
||||
|
||||
<!-- 状态 -->
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择状态"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
@ -88,7 +106,7 @@ import { ElMessage } from "element-plus";
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import type { UploadProps, UploadRequestOptions } from 'element-plus';
|
||||
import { createUser, updateUser, getUserDetail } from "@/api/babyhealth";
|
||||
import { uploadAvatar } from '@/api/file';
|
||||
import { uploadAvatar } from '@/api/upload';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -208,7 +226,7 @@ watch(visible, (newVal) => {
|
||||
// 监听 statusDict 变化，用于调试
|
||||
watch(
|
||||
() => props.statusDict,
|
||||
(newVal) => { },
|
||||
(newVal) => {},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
@ -221,30 +239,35 @@ const uploadHeaders = {
|
||||
// 拼接头像完整URL
|
||||
const getAvatarUrl = (url: string) => {
|
||||
if (!url) return '';
|
||||
// 如果已经是完整URL,直接返回
|
||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||
return url;
|
||||
}
|
||||
// 拼接API地址
|
||||
return `${import.meta.env.VITE_API_BASE_URL}${url}`;
|
||||
};
|
||||
|
||||
// 头像上传前校验 - 只校验格式,打开裁剪对话框
|
||||
// 头像上传前校验
|
||||
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
||||
const isImage = rawFile.type.startsWith('image/');
|
||||
const isLt2M = rawFile.size / 1024 / 1024 < 2;
|
||||
const isImage = rawFile.type.startsWith("image/");
|
||||
const isLt5M = rawFile.size / 1024 / 1024 < 5;
|
||||
|
||||
if (!isImage) {
|
||||
ElMessage.error('只能上传图片文件！');
|
||||
ElMessage.error("只能上传图片文件！");
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.error('图片大小不能超过 2MB!');
|
||||
|
||||
if (!isLt5M) {
|
||||
ElMessage.error("图片大小不能超过5MB！");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 上传文件到服务器(裁剪后调用)
|
||||
const uploadFile = async (file: File) => {
|
||||
// 上传文件到服务器
|
||||
const uploadFile = async (options: any) => {
|
||||
const { file } = options;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
@ -252,9 +275,11 @@ const uploadFile = async (file: File) => {
|
||||
// 使用uploadAvatar接口上传文件
|
||||
const response = await uploadAvatar(formData, { cate: 'user_avatar' });
|
||||
|
||||
if (response.code === 200 || response.code === 201) {
|
||||
if (response.code === 200) {
|
||||
// 更新用户头像
|
||||
form.value.avatar = response.data.url || response.data.path || '';
|
||||
// 调用更新用户信息接口保存头像URL
|
||||
await updateUser(form.value.id, { avatar: form.value.avatar });
|
||||
ElMessage.success("头像上传成功");
|
||||
} else {
|
||||
ElMessage.error(response.msg || "上传失败");
|
||||
@ -265,18 +290,13 @@ const uploadFile = async (file: File) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 裁剪确认后的处理
|
||||
const handleCropConfirm = async (file: File) => {
|
||||
await uploadFile(file);
|
||||
};
|
||||
|
||||
// 头像上传成功
|
||||
const handleAvatarSuccess = (response: any) => {
|
||||
if (response.code === 200 || response.code === 201) {
|
||||
form.value.avatar = response.data.url || response.data.path || '';
|
||||
ElMessage.success('头像上传成功');
|
||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
|
||||
if (response.code === 200) {
|
||||
form.value.avatar = response.data.avatar || '';
|
||||
ElMessage.success("头像上传成功");
|
||||
} else {
|
||||
ElMessage.error(response.msg || '上传失败');
|
||||
ElMessage.error(response.msg || "上传失败");
|
||||
}
|
||||
};
|
||||
|
||||
@ -478,7 +498,7 @@ defineExpose({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.form-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -494,7 +514,7 @@ defineExpose({
|
||||
display: block;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
:deep(.el-upload) {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
@ -505,17 +525,15 @@ defineExpose({
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user