|
|
|
@ -27,25 +27,65 @@ |
|
|
|
|
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="t('image')" prop="image"> |
|
|
|
<el-form-item :label="getPreviewLabel" prop="image"> |
|
|
|
<div class="image-preview-container"> |
|
|
|
<div v-if="formData.image" class="image-display"> |
|
|
|
<!-- 根据素材类型和是否有URL显示不同内容 --> |
|
|
|
|
|
|
|
<!-- 图片类型：显示图片预览 --> |
|
|
|
<div v-if="formData.type === '3' && formData.url" class="image-display"> |
|
|
|
<el-image |
|
|
|
:src="img(formData.image)" |
|
|
|
:src="formData.url" |
|
|
|
style="width: 120px; height: 120px" |
|
|
|
fit="cover" |
|
|
|
:preview-src-list="[img(formData.image)]" |
|
|
|
:preview-src-list="[formData.url]" |
|
|
|
/> |
|
|
|
<div class="image-info"> |
|
|
|
<p>封面预览</p> |
|
|
|
<el-button type="danger" size="small" @click="clearImage">删除</el-button> |
|
|
|
<p>图片预览</p> |
|
|
|
<el-button type="danger" size="small" @click="clearFile">删除</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 视频类型：显示视频预览 --> |
|
|
|
<div v-else-if="formData.type === '1' && formData.url" class="video-display"> |
|
|
|
<video |
|
|
|
:src="formData.url" |
|
|
|
controls |
|
|
|
style="width: 120px; height: 120px" |
|
|
|
preload="metadata" |
|
|
|
> |
|
|
|
您的浏览器不支持视频播放 |
|
|
|
</video> |
|
|
|
<div class="image-info"> |
|
|
|
<p>视频预览</p> |
|
|
|
<el-button type="danger" size="small" @click="clearFile">删除</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 文件类型：显示文件图标和下载 --> |
|
|
|
<div v-else-if="formData.type === '2' && formData.url" class="file-display"> |
|
|
|
<div class="file-icon-container" @click="downloadFile"> |
|
|
|
<el-icon size="40" class="file-icon"> |
|
|
|
<Document /> |
|
|
|
</el-icon> |
|
|
|
<div class="file-name">{{ getFileName(formData.url) }}</div> |
|
|
|
</div> |
|
|
|
<div class="image-info"> |
|
|
|
<el-button type="primary" size="small" @click="downloadFile"> |
|
|
|
<el-icon><Download /></el-icon> |
|
|
|
下载 |
|
|
|
</el-button> |
|
|
|
<el-button type="danger" size="small" @click="clearFile">删除</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 暂无内容时显示占位符 --> |
|
|
|
<div v-else class="image-placeholder"> |
|
|
|
<el-icon size="30" class="mb-2"> |
|
|
|
<Picture /> |
|
|
|
<Picture v-if="!formData.type || formData.type === '3'" /> |
|
|
|
<VideoPlay v-else-if="formData.type === '1'" /> |
|
|
|
<Document v-else-if="formData.type === '2'" /> |
|
|
|
</el-icon> |
|
|
|
<div class="text-xs text-gray-400">暂无封面图片</div> |
|
|
|
<div class="text-xs text-gray-400">{{ getPlaceholderText }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
@ -64,7 +104,7 @@ |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- 根据素材类型显示不同的上传和预览组件 --> |
|
|
|
<!-- 文件上传区域 --> |
|
|
|
<el-row :gutter="20" v-if="formData.type"> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-form-item :label="materialLabel" prop="url"> |
|
|
|
@ -85,54 +125,6 @@ |
|
|
|
</el-button> |
|
|
|
</direct-upload> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 文件预览区域 --> |
|
|
|
<div class="material-preview-area" v-if="formData.url"> |
|
|
|
<!-- 图片预览 --> |
|
|
|
<div v-if="formData.type == '3'" class="image-preview"> |
|
|
|
<el-image |
|
|
|
:src="formData.url" |
|
|
|
style="width: 200px; height: 120px" |
|
|
|
fit="cover" |
|
|
|
:preview-src-list="[formData.url]" |
|
|
|
/> |
|
|
|
<div class="preview-info"> |
|
|
|
<p>图片预览</p> |
|
|
|
<el-button type="danger" size="small" @click="clearFile">删除</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 视频预览 --> |
|
|
|
<div v-else-if="formData.type == '1'" class="video-preview"> |
|
|
|
<video |
|
|
|
:src="formData.url" |
|
|
|
controls |
|
|
|
style="width: 300px; height: 200px" |
|
|
|
preload="metadata" |
|
|
|
> |
|
|
|
您的浏览器不支持视频播放 |
|
|
|
</video> |
|
|
|
<div class="preview-info"> |
|
|
|
<p>视频预览</p> |
|
|
|
<el-button type="danger" size="small" @click="clearFile">删除</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 文件预览 --> |
|
|
|
<div v-else-if="formData.type == '2'" class="file-preview"> |
|
|
|
<div class="file-info"> |
|
|
|
<el-icon><Document /></el-icon> |
|
|
|
<span>{{ getFileName(formData.url) }}</span> |
|
|
|
</div> |
|
|
|
<div class="file-actions"> |
|
|
|
<el-button type="primary" size="small" @click="downloadFile"> |
|
|
|
<el-icon><Download /></el-icon> |
|
|
|
下载 |
|
|
|
</el-button> |
|
|
|
<el-button type="danger" size="small" @click="clearFile">删除</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
@ -206,7 +198,7 @@ import { addUnified, editUnified, getUnifiedInfo } from '@/app/api/lesson_course |
|
|
|
import { getWithPersonnelDataList } from '@/app/api/lesson_course_teaching' |
|
|
|
import { img } from '@/utils/common' |
|
|
|
import { ElMessage, FormInstance } from 'element-plus' |
|
|
|
import { Plus, Document, Download, Picture } from '@element-plus/icons-vue' |
|
|
|
import { Plus, Document, Download, Picture, VideoPlay } from '@element-plus/icons-vue' |
|
|
|
import { getToken } from '@/utils/common' |
|
|
|
import type { UploadProps } from 'element-plus' |
|
|
|
import Editor from '@/components/editor/index.vue' |
|
|
|
@ -260,6 +252,26 @@ const dialogTitle = computed(() => { |
|
|
|
return `${action}${props.moduleConfig?.name || ''}` |
|
|
|
}) |
|
|
|
|
|
|
|
// 预览区域标签 |
|
|
|
const getPreviewLabel = computed(() => { |
|
|
|
switch (formData.type) { |
|
|
|
case '1': return '视频预览' |
|
|
|
case '2': return '文件预览' |
|
|
|
case '3': return '图片预览' |
|
|
|
default: return '封面预览' |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// 占位文本 |
|
|
|
const getPlaceholderText = computed(() => { |
|
|
|
switch (formData.type) { |
|
|
|
case '1': return '暂无视频文件' |
|
|
|
case '2': return '暂无文档文件' |
|
|
|
case '3': return '暂无图片文件' |
|
|
|
default: return '暂无封面图片' |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 文件接受类型 |
|
|
|
const getFileAccept = computed(() => { |
|
|
|
@ -573,7 +585,7 @@ defineExpose({ |
|
|
|
} |
|
|
|
|
|
|
|
.image-preview-container { |
|
|
|
.image-display { |
|
|
|
.image-display, .video-display, .file-display { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 15px; |
|
|
|
@ -591,6 +603,43 @@ defineExpose({ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.file-display { |
|
|
|
.file-icon-container { |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: #fafafa; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
border-color: #409eff; |
|
|
|
background-color: #ecf5ff; |
|
|
|
} |
|
|
|
|
|
|
|
.file-icon { |
|
|
|
color: #606266; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.file-name { |
|
|
|
font-size: 12px; |
|
|
|
color: #909399; |
|
|
|
text-align: center; |
|
|
|
word-break: break-word; |
|
|
|
max-width: 100px; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.image-placeholder { |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
|
