mayiming/hldrCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成speaker管理页面

Browse Source
This commit is contained in:
马懿铭
2025-10-29 11:09:56 +08:00
parent b7309dec47
commit e597c40c43
1 changed files with 438 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
management/src/views/meeting/meetingView.vue
View File

@@ -2,11 +2,18 @@
<el-config-provider :locale="zhCn">
<div class="p-6 bg-white rounded-lg shadow-md min-h-screen pb-24" v-loading="loading">
<!-- 顶部标题和操作按钮（新增编辑页面图片按钮） -->
<div class="flex justify-between items-center mb-6">
<span class="text-2xl font-bold text-gray-700">会议管理列表</span>
<el-button type="primary" :icon="Plus" @click="handleAdd">新增会议</el-button>
<div class="flex gap-3">
<el-button type="primary" :icon="Image" @click="openPageImageDialog">
编辑页面图片
</el-button>
<el-button type="primary" :icon="Plus" @click="handleAdd">新增会议</el-button>
</div>
</div>
<!-- 会议列表表格 -->
<el-table :data="tableData" style="width: 100%" row-key="id" max-height="82vh">
<el-table-column prop="id" label="ID" width="80" sortable fixed></el-table-column>
<el-table-column label="会议封面" width="180">
@@ -70,7 +77,7 @@
</el-dialog>
<!-- 演讲人员管理弹窗 -->
<el-dialog v-model="speakerDialogVisible" title="演讲人员管理" :width="`800px`" :before-close="handleCloseSpeakerDialog">
<el-dialog v-model="speakerDialogVisible" title="演讲人员管理" :width="`1200px`" :before-close="handleCloseSpeakerDialog">
<div class="mb-4 flex justify-end">
<el-button type="primary" :icon="Plus" @click="handleAddSpeaker">新增演讲嘉宾</el-button>
</div>
@@ -89,7 +96,7 @@
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="80" align="center"></el-table-column>
<el-table-column label="操作" width="140" align="center">
<el-table-column label="操作" width="280" align="center">
<template #default="scope">
<el-button size="mini" type="primary" :icon="Edit" @click="handleEditSpeaker(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" :icon="Delete" @click="handleDeleteSpeaker(scope.row)">删除</el-button>
@@ -97,6 +104,21 @@
</el-table-column>
</el-table>
<!-- 演讲嘉宾分页组件 -->
<div class="mt-4 flex justify-end">
<el-pagination
class="custom-pagination"
background
layout="total, sizes, prev, pager, next, jumper"
:total="speakerTotal"
v-model:current-page="currentSpeakerPage"
v-model:page-size="speakerPageSize"
:page-sizes="[5, 10, 20, 50]"
@size-change="handleSpeakerSizeChange"
@current-change="handleSpeakerCurrentChange"
></el-pagination>
</div>
<!-- 新增/编辑演讲嘉宾表单 -->
<el-drawer v-model="speakerDrawerVisible" :title="currentSpeaker.id ? '编辑演讲嘉宾' : '新增演讲嘉宾'" direction="rtl" size="50%" destroy-on-close>
<div class="p-4">
@@ -140,6 +162,60 @@
</template>
</el-drawer>
</el-dialog>
<!-- 新增：页面图片管理弹窗 -->
<el-dialog v-model="pageImageDialogVisible" title="会议页面封面图管理" :width="`800px`" :before-close="handleClosePageImageDialog">
<div class="page-image-management">
<h3 class="section-title text-lg font-semibold mb-3">页面顶部封面图</h3>
<p class="section-desc text-gray-600 mb-4">上传会议列表页面的顶部封面图，建议16:9比例，支持JPG/PNG/WEBP格式，大小不超过5MB</p>
<div class="cover-uploader">
<!-- 已上传图片预览 -->
<div v-if="pageImageUrl" class="cover-preview">
<img :src="pageImageUrl" alt="会议页面封面" class="cover-img">
<button
class="remove-cover-btn"
@click="removePageImage"
title="删除封面图"
:disabled="isPageImageSaving"
>
<el-icon><Close /></el-icon>
</button>
</div>
<!-- 未上传时的上传区域 -->
<el-upload
v-else
class="cover-upload-area"
:action="`${API_BASE_URL}/upload/cover`"
name="image"
:show-file-list="false"
:on-success="handlePageImageSuccess"
:before-upload="beforePageImageUpload"
:on-error="handlePageImageError"
:disabled="isPageImageSaving"
>
<div class="upload-placeholder">
<el-icon class="upload-icon"><Upload /></el-icon>
<p class="upload-text">点击或拖拽图片至此处上传</p>
<p class="upload-subtext">支持JPG/PNG/WEBP，最大5MB，建议16:9比例</p>
</div>
</el-upload>
</div>
<div class="cover-action-buttons mt-4 flex justify-end">
<el-button
type="primary"
@click="savePageImage"
:loading="isPageImageSaving"
:disabled="!pageImageUrl || isPageImageSaving"
>
<el-icon><Check /></el-icon>
保存封面图
</el-button>
</div>
</div>
</el-dialog>
</div>
<!-- 分页组件 -->
@@ -181,11 +257,11 @@
<div class="form-group time-group grid grid-cols-2 gap-4">
<div>
<label class="form-label required">开始时间</label>
<el-date-picker v-model="form.start_time" type="datetime" placeholder="选择会议开始时间" :disabled="isSubmitting" value-format="YYYY-MM-DD HH:mm:ss" timezone="GMT+8" />
<el-date-picker v-model="form.start_time" type="datetime" placeholder="选择会议开始时间" :disabled="isSubmitting" value-format="YYYY-MM-DD HH:mm:ss" timezone="GMT" />
</div>
<div>
<label class="form-label required">结束时间</label>
<el-date-picker v-model="form.end_time" type="datetime" placeholder="选择会议结束时间" :disabled="isSubmitting" value-format="YYYY-MM-DD HH:mm:ss" timezone="GMT+8" />
<el-date-picker v-model="form.end_time" type="datetime" placeholder="选择会议结束时间" :disabled="isSubmitting" value-format="YYYY-MM-DD HH:mm:ss" timezone="GMT" />
</div>
</div>
@@ -212,7 +288,7 @@
<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Edit, Delete, Plus, User } from '@element-plus/icons-vue';
import { Edit, Delete, Plus, User, Upload, Check, Close } from '@element-plus/icons-vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import type { UploadProps } from 'element-plus';
@@ -441,6 +517,23 @@ const handleDrawerClose = () => {
drawerVisible.value = false;
};
const subtractEightHours = (timeStr: string): string => {
if (!timeStr) return '';
// 转换为Date对象（假设原时间字符串格式为 "YYYY-MM-DD HH:mm:ss"）
const date = new Date(timeStr);
if (isNaN(date.getTime())) return timeStr; // 无效时间则返回原字符串
// 减去8小时（8*60*60*1000毫秒）
date.setTime(date.getTime() - 8 * 60 * 60 * 1000);
// 格式化回 "YYYY-MM-DD HH:mm:ss" 格式
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// --- 提交会议 ---
const submitMeeting = async () => {
if (!form.value.theme.trim()) {
@@ -470,8 +563,8 @@ const submitMeeting = async () => {
intro: form.value.intro || '',
cover_url: form.value.cover_url || '',
schedule_image_url: form.value.schedule_image_url || '',
start_time: form.value.start_time,
end_time: form.value.end_time,
start_time: subtractEightHours(form.value.start_time),
end_time: subtractEightHours(form.value.end_time),
};
try {
@@ -673,10 +766,15 @@ const currentSpeaker = ref<MeetingSpeaker>({
intro: '',
sort: 0
});
// 演讲嘉宾分页状态
const currentSpeakerPage = ref(1); // 嘉宾列表当前页码
const speakerPageSize = ref(10); // 嘉宾列表每页条数
const speakerTotal = ref(0); // 嘉宾列表总条数
// --- 打开演讲人员管理弹窗 ---
const handleManageSpeaker = async (row: Meeting) => {
currentMeetingId.value = row.id;
currentSpeakerPage.value = 1;
speakerDialogVisible.value = true;
await fetchSpeakerList();
};
@@ -684,16 +782,36 @@ const handleManageSpeaker = async (row: Meeting) => {
// --- 获取演讲嘉宾列表 ---
const fetchSpeakerList = async () => {
try {
const response = await fetch(`${API_BASE_URL}/meetings/${currentMeetingId.value}/speakers`, {
method: 'GET',
if (!currentMeetingId.value || currentMeetingId.value <= 0) {
ElMessage.warning('会议ID无效，无法获取嘉宾列表');
return;
}
const reqData = {
meetingId: currentMeetingId.value,
page: currentSpeakerPage.value,
page_size: speakerPageSize.value
};
const response = await fetch(`${API_BASE_URL}/speakers/meetingspeakers`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(reqData)
});
if (!response.ok) throw new Error('获取演讲嘉宾列表失败');
if (!response.ok) {
const errData = await response.json().catch(() => null);
throw new Error(errData?.message || '获取演讲嘉宾列表失败');
}
const data = await response.json();
speakerList.value = data.speakers || [];
speakerTotal.value = data.total || 0;
} catch (error) {
console.error('[ERROR] 获取演讲嘉宾列表失败：', error);
ElMessage.error('获取演讲嘉宾列表失败，请重试！');
ElMessage.error((error as Error).message || '获取演讲嘉宾列表失败，请重试！');
}
};
@@ -702,6 +820,8 @@ const handleCloseSpeakerDialog = () => {
speakerDialogVisible.value = false;
speakerList.value = [];
currentMeetingId.value = 0;
speakerTotal.value = 0;
currentSpeakerPage.value = 1;
};
// --- 新增演讲嘉宾 ---
@@ -737,9 +857,13 @@ const handleDeleteSpeaker = (row: MeetingSpeaker) => {
method: 'DELETE',
});
if (!response.ok) throw new Error('删除失败');
if (!response.ok) {
const errData = await response.json().catch(() => null);
throw new Error(errData?.message || '删除失败');
}
ElMessage.success('删除成功！');
fetchSpeakerList();
await fetchSpeakerList();
} catch (error) {
console.error('[ERROR] 删除演讲嘉宾失败：', error);
ElMessage.error(`删除失败: ${(error as Error).message}`);
@@ -752,40 +876,93 @@ const handleDeleteSpeaker = (row: MeetingSpeaker) => {
// --- 提交演讲嘉宾 ---
const submitSpeaker = async () => {
if (!currentSpeaker.value.name.trim()) {
ElMessage.warning('请输入嘉宾姓名');
const isUpdate = !!currentSpeaker.value.id;
// 1. 基础参数校验
if (isUpdate) {
if (currentSpeaker.value.id === null || currentSpeaker.value.id <= 0) {
ElMessage.warning('嘉宾ID无效，请重新选择嘉宾');
return;
}
if (currentSpeaker.value.name !== undefined && currentSpeaker.value.name.trim() === '') {
ElMessage.warning('嘉宾姓名不能为空');
return;
}
} else {
if (!currentSpeaker.value.name.trim()) {
ElMessage.warning('请输入嘉宾姓名（必填）');
return;
}
if (currentSpeaker.value.meeting_id <= 0) {
ElMessage.warning('会议ID无效，请重新选择会议');
return;
}
}
// 2. 公共字段校验
if (currentSpeaker.value.sort === undefined || currentSpeaker.value.sort < 0) {
currentSpeaker.value.sort = 0;
}
if (currentSpeaker.value.name && currentSpeaker.value.name.length > 100) {
ElMessage.warning('嘉宾姓名长度不能超过100字');
return;
}
if (currentSpeaker.value.title && currentSpeaker.value.title.length > 200) {
ElMessage.warning('嘉宾头衔长度不能超过200字');
return;
}
if (currentSpeaker.value.avatar && currentSpeaker.value.avatar.length > 512) {
ElMessage.warning('头像URL长度不能超过512字符');
return;
}
isSpeakerSubmitting.value = true;
const submitData = { ...currentSpeaker.value };
// 3. 构造提交数据
const submitData: any = {
name: currentSpeaker.value.name?.trim() || '',
title: currentSpeaker.value.title?.trim() || '',
avatar: currentSpeaker.value.avatar?.trim() || '',
intro: currentSpeaker.value.intro || '',
sort: currentSpeaker.value.sort
};
if (isUpdate) {
submitData.id = currentSpeaker.value.id;
} else {
submitData.meeting_id = currentSpeaker.value.meeting_id;
}
// 4. 处理请求路径和方法
let url = `${API_BASE_URL}/speakers`;
let method = 'POST';
if (isUpdate) {
method = 'PUT';
url = `${url}`;
}
try {
let url = `${API_BASE_URL}/speakers`;
let method = 'POST';
if (submitData.id) {
method = 'PUT';
url = `${url}/${submitData.id}`;
}
const response = await fetch(url, {
method: method,
headers: { 'Content-Type': 'application/json' },
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(submitData),
});
if (!response.ok) {
const errData = await response.json().catch(() => null);
throw new Error(errData?.message || (submitData.id ? '更新失败' : '创建失败'));
throw new Error(
errData?.message ||
(isUpdate ? '更新嘉宾失败' : '创建嘉宾失败')
);
}
ElMessage.success(submitData.id ? '嘉宾更新成功！' : '嘉宾创建成功！');
ElMessage.success(isUpdate ? '嘉宾更新成功！' : '创建嘉宾成功！');
speakerDrawerVisible.value = false;
fetchSpeakerList();
await fetchSpeakerList();
} catch (error) {
const err = error as Error;
ElMessage.error(`${submitData.id ? '更新' : '创建'}失败: ${err.message}`);
ElMessage.error(`${isUpdate ? '更新' : '创建'}失败: ${err.message}`);
} finally {
isSpeakerSubmitting.value = false;
}
@@ -818,6 +995,127 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
const handleAvatarError = () => {
ElMessage.error('头像上传失败');
};
// --- 演讲嘉宾分页事件 ---
const handleSpeakerSizeChange = (val: number) => {
speakerPageSize.value = val;
currentSpeakerPage.value = 1;
fetchSpeakerList();
};
const handleSpeakerCurrentChange = (val: number) => {
currentSpeakerPage.value = val;
fetchSpeakerList();
};
// =================================================================
// 页面图片管理相关状态与逻辑
// =================================================================
const pageImageDialogVisible = ref(false); // 页面图片管理弹窗显示状态
const pageImageUrl = ref(''); // 页面封面图URL
const isPageImageSaving = ref(false); // 图片保存加载状态
// 打开页面图片管理弹窗（加载现有图片）
const openPageImageDialog = async () => {
pageImageDialogVisible.value = true;
await fetchPageImage();
};
// 从后端获取当前页面图片
const fetchPageImage = async () => {
try {
const response = await fetch(`${API_BASE_URL}/page-image/get`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ page: 'AcademicExchange' })
});
const data = await response.json();
if (data.message === '查询成功' && Array.isArray(data.images) && data.images.length) {
pageImageUrl.value = data.images[0].image_url;
} else {
pageImageUrl.value = '';
}
} catch (error) {
console.error('[ERROR] 获取页面图片失败：', error);
ElMessage.warning('未获取到现有页面图片，可重新上传');
pageImageUrl.value = '';
}
};
// 页面图片上传前校验
const beforePageImageUpload: UploadProps['beforeUpload'] = (rawFile) => {
const allowTypes = ['image/jpeg', 'image/png', 'image/webp'];
if (!allowTypes.includes(rawFile.type)) {
ElMessage.error('仅支持JPG/PNG/WEBP格式的图片');
return false;
}
if (rawFile.size / 1024 / 1024 > 5) {
ElMessage.error('图片大小不能超过5MB');
return false;
}
return true;
};
// 页面图片上传成功
const handlePageImageSuccess: UploadProps['onSuccess'] = (response) => {
const ossUrl = response.data?.url;
if (ossUrl) {
pageImageUrl.value = ossUrl;
ElMessage.success('图片上传成功');
} else {
ElMessage.error('图片上传失败：未获取到图片地址');
}
};
// 页面图片上传失败
const handlePageImageError = () => {
ElMessage.error('图片上传失败，请重试');
};
// 删除页面图片
const removePageImage = () => {
pageImageUrl.value = '';
ElMessage.info('页面图片已删除');
};
// 保存页面图片到后端
const savePageImage = async () => {
try {
isPageImageSaving.value = true;
if (!pageImageUrl.value) {
ElMessage.warning('请先上传图片再保存');
return;
}
const response = await fetch(`${API_BASE_URL}/page-image/save`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: 6,
image_url: pageImageUrl.value,
})
});
const data = await response.json();
if (data.success || data.message === '保存成功') {
ElMessage.success('页面图片保存成功');
pageImageDialogVisible.value = false;
} else {
ElMessage.error('页面图片保存失败：' + (data.message || '未知错误'));
}
} catch (error) {
console.error('[ERROR] 保存页面图片失败：', error);
ElMessage.error('页面图片保存失败，请重试');
} finally {
isPageImageSaving.value = false;
}
};
// 关闭页面图片管理弹窗
const handleClosePageImageDialog = () => {
pageImageDialogVisible.value = false;
};
</script>
<style scoped>
@@ -863,4 +1161,113 @@ const handleAvatarError = () => {
.avatar-uploader-icon { font-size: 24px; color: #8c939d; width: 80px; height: 80px; text-align: center; line-height: 80px; border: 1px dashed #dcdfe6; border-radius: 6px; }
.avatar-preview { width: 80px; height: 80px; display: block; object-fit: cover; border-radius: 6px; }
.el-dialog__body .el-table { margin-bottom: 16px; }
</style>
.el-dialog__body .custom-pagination { margin-top: 8px; }
/* 页面图片管理弹窗样式 */
.page-image-management {
padding: 10px 0;
}
.section-title {
color: #333;
font-weight: 600;
}
.section-desc {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.cover-uploader {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.cover-preview {
width: 100%;
height: 225px; /* 16:9比例适配 */
border-radius: 8px;
overflow: hidden;
position: relative;
background: #f5f5f5;
}
.cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.remove-cover-btn {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
z-index: 10;
}
.remove-cover-btn:hover {
background: rgba(255, 0, 0, 0.8);
}
.cover-upload-area {
width: 100%;
height: 225px;
}
.upload-placeholder {
width: 100%;
height: 100%;
border: 2px dashed #ccc;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fafafa;
cursor: pointer;
transition: all 0.3s;
}
.upload-placeholder:hover {
border-color: #409eff;
background: #f0f7ff;
}
.upload-icon {
font-size: 36px;
color: #999;
margin-bottom: 12px;
}
.upload-text {
color: #666;
font-size: 14px;
margin-bottom: 6px;
}
.upload-subtext {
color: #999;
font-size: 12px;
}
.cover-action-buttons {
margin-top: 16px;
}
:deep(.el-dialog__body) {
padding: 20px;
}
</style>