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

完成视频案例管理界面

Browse Source
This commit is contained in:
马懿铭
2025-11-01 19:37:51 +08:00
parent 1772e5fa9e
commit c275bc2897
1 changed files with 170 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
management/src/views/caseresource/videoscase/videosCaseView.vue
View File

@@ -1,13 +1,10 @@
<template>
<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>
<!-- 搜索栏 -->
<div class="mb-6 flex gap-4">
<el-input
v-model="searchKeyword"
@@ -17,8 +14,6 @@
/>
<el-button type="primary" @click="fetchData">搜索</el-button>
</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 prop="title" label="视频标题" min-width="200" show-overflow-tooltip>
@@ -66,8 +61,6 @@
</template>
</el-table-column>
</el-table>
<!-- 视频预览弹窗 -->
<el-dialog v-model="videoDialogVisible" title="视频预览" :width="`800px`" :before-close="handleCloseVideo">
<div class="video-container" v-if="currentVideoUrl">
<video
@@ -83,8 +76,6 @@
</div>
</div>
</el-dialog>
<!-- 详情弹窗（可选，如需完整详情） -->
<el-dialog v-model="detailDialogVisible" title="视频案例详情" :width="`800px`">
<div class="detail-container">
<h3 class="text-xl font-bold mb-4">{{ currentVideoCase.title }}</h3>
@@ -114,8 +105,6 @@
</div>
</el-dialog>
</div>
<!-- 分页组件 -->
<div class="fixed bottom-0 right-0 w-full p-4 bg-white shadow-[0_-2px_5px_rgba(0,0,0,0.05)] flex justify-end z-10 border-t border-gray-200">
<el-pagination
class="custom-pagination"
@@ -129,8 +118,6 @@
@current-change="handleCurrentChange"
></el-pagination>
</div>
<!-- 新增/编辑抽屉 -->
<el-drawer
v-model="drawerVisible"
:title="form.id ? '编辑视频案例' : '新增视频案例'"
@@ -150,19 +137,40 @@
maxlength="255"
/>
</div>
<div class="form-group video-url-group">
<label class="form-label required">视频播放地址</label>
<el-input
v-model="form.video_url"
placeholder="请输入视频直接播放地址（如MP4 URL）"
clearable
<div class="form-group video-upload-group">
<label class="form-label required">视频上传</label>
<el-upload
class="video-upload"
action="http://localhost:8080/api/upload/file"
name="file"
:file-list="uploadFileList"
:before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:on-progress="handleUploadProgress"
:on-change="handleUploadChange"
:headers="uploadHeaders"
:disabled="isSubmitting"
maxlength="512"
/>
<p class="text-gray-500 text-sm mt-2">支持MP4等主流视频格式的直接播放地址</p>
:limit="1"
accept="video/*"
list-type="picture-card"
auto-upload="true"
:with-credentials="false"
>
<i class="el-icon-plus video-upload-icon"></i>
</el-upload>
<div v-if="form.video_url" class="mt-4">
<video
:src="form.video_url"
controls
style="width: 300px; height: auto;"
:poster="videoPoster"
>
您的浏览器不支持视频播放
</video>
</div>
<p class="text-gray-500 text-sm mt-2">支持 MP4、MOV、AVI 等主流视频格式，单个文件大小不超过 {{ maxFileSize }}MB</p>
</div>
<div class="form-group intro-group">
<label class="form-label">视频简介</label>
<el-input
@@ -174,7 +182,6 @@
:disabled="isSubmitting"
/>
</div>
<div class="form-group designer-group">
<label class="form-label required">设计人员名单</label>
<el-input
@@ -185,7 +192,6 @@
maxlength="1000"
/>
</div>
<div class="form-group tutor-group">
<label class="form-label required">指导老师名单</label>
<el-input
@@ -196,7 +202,6 @@
maxlength="1000"
/>
</div>
<div class="form-group sort-group">
<label class="form-label">排序</label>
<el-input
@@ -208,7 +213,6 @@
/>
</div>
</div>
<template #footer>
<div style="flex: auto">
<el-button @click="handleDrawerClose">取消</el-button>
@@ -222,13 +226,13 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { ElMessage, ElMessageBox, ElConfigProvider, ElDrawer, ElInput, ElUpload, ElPagination, ElTable, ElTableColumn, ElDialog, ElButton } from 'element-plus';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElUpload, ElPagination, ElTable, ElTableColumn, ElDialog, ElButton, ElInput, ElDrawer, ElConfigProvider } from 'element-plus';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import type { UploadProps } from 'element-plus';
import type { UploadProps, UploadFile, UploadProgressEvent } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
// --- 类型定义 ---
// 接口类型定义
interface VideoCase {
id: number;
title: string;
@@ -262,13 +266,22 @@ interface UpdateVideoCaseReq extends CreateVideoCaseReq {
id: number;
}
// --- 常量定义 ---
const API_BASE_URL = 'http://localhost:8080/api';
const videoPoster = 'https://via.placeholder.com/800x450?text=视频封面'; // 默认视频封面
interface UploadSuccessResponse {
code: number;
data: {
filename: string;
size: number;
type: string;
url: string;
};
message: string;
}
// =================================================================
// 列表页相关状态与逻辑
// =================================================================
// 常量定义
const videoPoster = 'https://via.placeholder.com/800x450?text=视频封面';
const maxFileSize = 500;
// 列表数据相关
const loading = ref(true);
const tableData = ref<VideoCase[]>([]);
const currentPage = ref(1);
@@ -276,7 +289,7 @@ const pageSize = ref(10);
const total = ref(0);
const searchKeyword = ref('');
// 弹窗状态
// 视频预览相关
const videoDialogVisible = ref(false);
const currentVideoUrl = ref('');
const detailDialogVisible = ref(false);
@@ -293,13 +306,13 @@ const currentVideoCase = ref<VideoCase>({
is_delete: 0
});
// --- 格式化姓名显示（超长截断） ---
// 格式化名称显示
const formatNames = (names: string) => {
if (!names) return '';
return names.length > 15 ? `${names.slice(0, 15)}...` : names;
};
// --- 获取视频案例列表 ---
// 获取列表数据
const fetchData = async () => {
loading.value = true;
try {
@@ -309,16 +322,13 @@ const fetchData = async () => {
keyword: searchKeyword.value.trim(),
sort: 0
};
const response = await fetch(`${API_BASE_URL}/video-cases/list`, {
const response = await fetch('http://localhost:8080/api/video-cases/list', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(reqData)
});
if (!response.ok) throw new Error(`请求失败！状态码：${response.status}`);
const data = await response.json();
console.log("获取到视频案例数据：", data);
// 适配后端返回的小写字段（list和total）
tableData.value = data.list || [];
total.value = data.total || 0;
} catch (error) {
@@ -331,7 +341,7 @@ const fetchData = async () => {
onMounted(fetchData);
// --- 视频预览 ---
// 视频预览处理
const handlePreviewVideo = (url: string) => {
currentVideoUrl.value = url;
videoDialogVisible.value = true;
@@ -342,13 +352,13 @@ const handleCloseVideo = () => {
currentVideoUrl.value = '';
};
// --- 查看详情 ---
// 详情查看
const handleViewDetail = (row: VideoCase) => {
currentVideoCase.value = { ...row };
detailDialogVisible.value = true;
};
// --- 删除案例 ---
// 删除处理
const handleDelete = (row: VideoCase) => {
ElMessageBox.confirm(`确定要删除视频案例《${row.title}》吗？此操作无法撤销！`, '警告', {
confirmButtonText: '确定删除',
@@ -357,12 +367,12 @@ const handleDelete = (row: VideoCase) => {
})
.then(async () => {
try {
const response = await fetch(`${API_BASE_URL}/video-cases/${row.id}`, {
const response = await fetch(`http://localhost:8080/api/video-cases/${row.id}`, {
method: 'DELETE',
});
if (!response.ok) {
const errData = await response.json().catch(() => null);
throw new Error(errData?.msg || '删除失败');
throw new Error(errData?.message || '删除失败');
}
ElMessage.success('删除成功！');
fetchData();
@@ -376,7 +386,7 @@ const handleDelete = (row: VideoCase) => {
});
};
// --- 分页处理 ---
// 分页处理
const handleSizeChange = (val: number) => {
pageSize.value = val;
currentPage.value = 1;
@@ -388,13 +398,15 @@ const handleCurrentChange = (val: number) => {
fetchData();
};
// =================================================================
// 抽屉编辑/新增相关状态与逻辑
// =================================================================
// 新增/编辑抽屉相关
const drawerVisible = ref(false);
const isSubmitting = ref(false);
const uploadFileList = ref<UploadFile[]>([]);
const uploadHeaders = ref({
'Accept': 'application/json'
});
// --- 表单默认值 ---
// 表单初始状态
const defaultFormState = () => ({
id: null as number | null,
title: '',
@@ -406,12 +418,102 @@ const defaultFormState = () => ({
});
const form = ref(defaultFormState());
// --- 操作处理 ---
// 核心修改：字节上传完成显示99%，后端响应成功后才显示100%
const handleUploadProgress: UploadProps['onProgress'] = (event: UploadProgressEvent, file: UploadFile) => {
let percent = Math.round(event.percent * 100) / 100;
// 字节上传完成（percent=100）时，显示99%并提示"等待后端响应"
if (percent >= 100) {
percent = 99;
console.log(`[上传进度] ${percent}%（文件字节上传完成，等待后端返回结果...）`,
'已上传:', formatFileSize(event.loaded),
'总大小:', formatFileSize(event.total || 0)
);
} else {
console.log(`[上传进度] ${percent}%`,
'已上传:', formatFileSize(event.loaded),
'总大小:', formatFileSize(event.total || 0)
);
}
};
// 文件状态变化处理
const handleUploadChange: UploadProps['onChange'] = (file: UploadFile) => {
// 避免状态提前标记为完成
const statusText = {
'ready': '待上传',
'uploading': '上传中',
'success': '上传成功',
'error': '上传失败'
};
console.log(`[文件状态变更] 文件名: ${file.name}，状态: ${statusText[file.status]}`);
};
// 格式化文件大小
const formatFileSize = (bytes: number) => {
return (bytes / 1024 / 1024).toFixed(2) + 'MB';
};
// 上传前校验
const handleBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
console.log("开始上传视频",
'文件名:', rawFile.name,
'大小:', formatFileSize(rawFile.size),
'类型:', rawFile.type
);
const isVideo = rawFile.type.startsWith('video/');
if (!isVideo) {
ElMessage.error('请上传视频格式文件（MP4、MOV、AVI 等）');
return Promise.reject(new Error('文件格式错误'));
}
const isLtMaxSize = rawFile.size / 1024 / 1024 <= maxFileSize;
if (!isLtMaxSize) {
ElMessage.error(`视频大小不能超过 ${maxFileSize}MB`);
return Promise.reject(new Error('文件过大'));
}
return Promise.resolve(true);
};
// 核心修改：收到后端成功响应后，显示100%并输出视频地址
const handleUploadSuccess: UploadProps['onSuccess'] = (response: UploadSuccessResponse) => {
// 显示最终100%进度
console.log(`[上传进度] 100%（后端响应成功，上传完成！）`);
// 输出成功信息和视频地址
console.log("===== 视频上传成功 =====");
console.log("响应数据:", response);
console.log("视频地址:", response.data.url);
console.log("=======================");
if (response.code === 200 && response.data?.url) {
form.value.video_url = response.data.url;
uploadFileList.value = [];
ElMessage.success(response.message || '视频上传成功！');
} else {
ElMessage.error(`视频上传失败：${response.message || '未知错误'}`);
}
};
// 上传错误处理
const handleUploadError: UploadProps['onError'] = (error: any, file: UploadFile) => {
console.log(`[上传进度] 上传失败！`);
console.error('[ERROR] 视频上传失败:', error);
if (error.message === 'Failed to fetch') {
console.error('[跨域可能] 请检查后端跨域配置');
}
if (error.response) {
console.error('[响应错误] 状态码:', error.response.status);
console.error('[响应错误] 响应体:', error.response.data);
}
ElMessage.error('视频上传失败，请检查接口或网络');
};
// 新增处理
const handleAdd = () => {
form.value = defaultFormState();
uploadFileList.value = [];
drawerVisible.value = true;
};
// 编辑处理
const handleEdit = (row: VideoCase) => {
form.value = {
id: row.id,
@@ -422,23 +524,25 @@ const handleEdit = (row: VideoCase) => {
tutor_names: row.tutor_names,
sort: row.sort,
};
uploadFileList.value = [];
drawerVisible.value = true;
};
// 关闭抽屉
const handleDrawerClose = () => {
drawerVisible.value = false;
form.value = defaultFormState();
uploadFileList.value = [];
};
// --- 提交视频案例（新增/更新） ---
// 提交表单
const submitVideoCase = async () => {
// 表单校验
if (!form.value.title.trim()) {
ElMessage.warning('请输入视频标题');
return;
}
if (!form.value.video_url.trim()) {
ElMessage.warning('请输入视频播放地址');
ElMessage.warning('请上传视频文件');
return;
}
if (!form.value.designer_names.trim()) {
@@ -452,7 +556,6 @@ const submitVideoCase = async () => {
isSubmitting.value = true;
// 构造提交数据
const submitData: CreateVideoCaseReq | UpdateVideoCaseReq = {
title: form.value.title.trim(),
intro: form.value.intro.trim(),
@@ -462,18 +565,16 @@ const submitVideoCase = async () => {
sort: form.value.sort || 0,
};
// 编辑模式补充id
if (form.value.id) {
(submitData as UpdateVideoCaseReq).id = form.value.id;
}
try {
let url = `${API_BASE_URL}/video-cases`;
let url = 'http://localhost:8080/api/video-cases';
let method = 'POST';
// 编辑模式
if (form.value.id) {
url = `${API_BASE_URL}/video-cases/${form.value.id}`;
url = `http://localhost:8080/api/video-cases`;
method = 'PUT';
}
@@ -485,12 +586,13 @@ const submitVideoCase = async () => {
if (!response.ok) {
const errData = await response.json().catch(() => null);
throw new Error(errData?.msg || '提交失败');
throw new Error(errData?.message || '提交失败');
}
ElMessage.success(form.value.id ? '视频案例更新成功！' : '视频案例新增成功！');
drawerVisible.value = false;
form.value = defaultFormState();
uploadFileList.value = [];
fetchData();
} catch (error) {
@@ -503,34 +605,25 @@ const submitVideoCase = async () => {
</script>
<style scoped>
/* 基础样式 */
::v-deep(.el-drawer__body) { padding: 20px 0 !important; }
.required::after { content: '*'; color: #f56c6c; margin-left: 4px; }
/* 表格样式 */
.el-table .el-table__cell { vertical-align: middle; }
.el-table__header-wrapper th { background-color: #fafafa !important; font-weight: 600; color: #333; }
.action-buttons .el-button { margin-right: 8px; }
.intro-preview { color: #666; line-height: 1.5; word-break: break-all; }
/* 弹窗样式 */
.video-container { padding: 10px 0; }
.detail-container { line-height: 1.8; }
/* 分页器样式 */
.custom-pagination { justify-content: flex-end !important; }
.custom-pagination .el-pagination__total,
.custom-pagination .el-pagination__sizes,
.custom-pagination .el-pagination__jump { margin-right: 16px !important; }
.custom-pagination .el-pagination__jump .el-input { width: 60px !important; }
/* 抽屉内表单样式 */
.publish-form-container { padding: 0 20px; }
.form-group { margin-bottom: 24px; }
.form-label { display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; }
.el-textarea__inner { min-height: 100px !important; }
/* 响应式调整 */
.video-upload-icon { font-size: 24px; color: #666; }
::v-deep(.video-upload .el-upload--picture-card) { width: 120px; height: 120px; line-height: 120px; }
@media (max-width: 1440px) {
.el-table-column { min-width: 120px; }
}