forked from integrated_whb/integrated_whb_vue
🐜 教育培训-平台资源库-课程管理-课件预览
duhang
parent
24387955fe
commit
3ef14d2406
|
|
@ -135,10 +135,6 @@
|
|||
:src="data.pdfDialog.src"
|
||||
v-model:visible="data.pdfDialog.visible"
|
||||
/>
|
||||
<layout-txt
|
||||
:src="data.txtDialog.src"
|
||||
v-model:visible="data.txtDialog.visible"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -158,7 +154,6 @@ import { debounce } from "throttle-debounce";
|
|||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import LayoutPdf from "@/components/pdf/index.vue";
|
||||
import LayoutTxt from "@/components/txt/index.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
|
||||
|
|
@ -173,10 +168,6 @@ const data = reactive({
|
|||
src: "",
|
||||
visible: false,
|
||||
},
|
||||
txtDialog: {
|
||||
src: "",
|
||||
visible: false,
|
||||
},
|
||||
});
|
||||
|
||||
// const buttonJurisdiction = await useButtonJurisdiction("courseware"); 原项目没找到在哪用
|
||||
|
|
|
|||
|
|
@ -197,6 +197,9 @@ const fnAdd = debounce(1000, async (VIDEOCOURSEWARE_ID) => {
|
|||
});
|
||||
|
||||
const fnPreviewVideo = async (row) => {
|
||||
data.videoDialog.src = "";
|
||||
data.videoDialog.vid = "";
|
||||
data.videoDialog.playAuth = "";
|
||||
if (
|
||||
row.VIDEOCOURSEWARE_ID_REMOTE &&
|
||||
row.VIDEOCOURSEWARE_ID_REMOTE.length > 0
|
||||
|
|
@ -205,16 +208,19 @@ const fnPreviewVideo = async (row) => {
|
|||
VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID_REMOTE,
|
||||
CURRICULUM_ID: row.CURRICULUM_ID_REMOTE,
|
||||
});
|
||||
if (respData && respData.result === "success") {
|
||||
data.videoDialog.playAuth = respData.playAuth;
|
||||
data.videoDialog.vid = row.VIDEOFILES;
|
||||
if (respData && respData.type === "success") {
|
||||
const video = {};
|
||||
respData.videoList.forEach((item) => {
|
||||
video[item.definition] = item.playURL;
|
||||
});
|
||||
data.videoDialog.src = JSON.stringify(video);
|
||||
data.videoDialog.visible = true;
|
||||
}
|
||||
} else if (row.VIDEOFILES && row.VIDEOFILES.length > 0) {
|
||||
const respData = await getVideoAuth({
|
||||
videoId: row.VIDEOFILES,
|
||||
});
|
||||
if (respData && respData.result === "success") {
|
||||
if (respData && respData.type === "success") {
|
||||
data.videoDialog.playAuth = respData.playAuth;
|
||||
data.videoDialog.vid = row.VIDEOFILES;
|
||||
data.videoDialog.visible = true;
|
||||
|
|
|
|||
|
|
@ -1,93 +1,141 @@
|
|||
<template>
|
||||
<layout-card>
|
||||
<el-divider content-position="left">课程信息</el-divider>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="课程名称">
|
||||
{{ data.curriculumInfo.CURRICULUMNAME }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="培训行业类型">
|
||||
{{
|
||||
data.curriculumInfo.CURRENCY === "1"
|
||||
? "通用"
|
||||
: data.curriculumInfo.train_type_name
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="岗位培训类型">
|
||||
{{ data.curriculumInfo.post_type_name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="课程图片">
|
||||
<img
|
||||
:src="FILE_URL + data.curriculumInfo.CAPTURE"
|
||||
width="100"
|
||||
height="100"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="课程介绍">
|
||||
{{ data.curriculumInfo.CURRICULUMINTRODUCE }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<template v-for="(chapter, index) in data.chapterList" :key="index">
|
||||
<el-divider content-position="left">{{ data.NAME }}</el-divider>
|
||||
<el-divider content-position="left">视频课件</el-divider>
|
||||
<layout-table :data="chapter.xzVideoList" :showPagination="false">
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWARENAME"
|
||||
label="视频课件名称"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="post_type_name"
|
||||
label="岗位培训类型"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="train_type_name"
|
||||
label="培训行业类型"
|
||||
/>
|
||||
<el-table-column show-overflow-tooltip prop="CLASSHOUR" label="学时" />
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWAREINTRODUCE"
|
||||
label="课件描述"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="teacherName"
|
||||
label="讲师"
|
||||
/>
|
||||
</layout-table>
|
||||
<el-divider content-position="left">资料课件</el-divider>
|
||||
<layout-table :data="chapter.xzDataList" :showPagination="false">
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWARENAME"
|
||||
label="资料课件名称"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="post_type_name"
|
||||
label="岗位培训类型"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="train_type_name"
|
||||
label="培训行业类型"
|
||||
/>
|
||||
<el-table-column show-overflow-tooltip prop="CLASSHOUR" label="学时" />
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWAREINTRODUCE"
|
||||
label="课件描述"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="teacherName"
|
||||
label="讲师"
|
||||
/>
|
||||
</layout-table>
|
||||
</template>
|
||||
</layout-card>
|
||||
<div>
|
||||
<layout-card>
|
||||
<el-divider content-position="left">课程信息</el-divider>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="课程名称">
|
||||
{{ data.curriculumInfo.CURRICULUMNAME }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="培训行业类型">
|
||||
{{
|
||||
data.curriculumInfo.CURRENCY === "1"
|
||||
? "通用"
|
||||
: data.curriculumInfo.train_type_name
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="岗位培训类型">
|
||||
{{ data.curriculumInfo.post_type_name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="课程图片">
|
||||
<img
|
||||
:src="FILE_URL + data.curriculumInfo.CAPTURE"
|
||||
width="100"
|
||||
height="100"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="课程介绍">
|
||||
{{ data.curriculumInfo.CURRICULUMINTRODUCE }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<template v-for="(chapter, index) in data.chapterList" :key="index">
|
||||
<el-divider content-position="left">{{ data.NAME }}</el-divider>
|
||||
<el-divider content-position="left">视频课件</el-divider>
|
||||
<layout-table :data="chapter.xzVideoList" :showPagination="false">
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWARENAME"
|
||||
label="视频课件名称"
|
||||
>
|
||||
<template v-slot="{ row }">
|
||||
<template
|
||||
v-if="
|
||||
(row.VIDEOCOURSEWARE_ID_REMOTE &&
|
||||
row.VIDEOCOURSEWARE_ID_REMOTE.length > 0) ||
|
||||
(row.VIDEOFILES && row.VIDEOFILES.length > 0)
|
||||
"
|
||||
>
|
||||
<a @click="fnPreviewVideo(row)">
|
||||
{{ row.COURSEWARENAME }}
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ row.COURSEWARENAME }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="post_type_name"
|
||||
label="岗位培训类型"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="train_type_name"
|
||||
label="培训行业类型"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="CLASSHOUR"
|
||||
label="学时"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWAREINTRODUCE"
|
||||
label="课件描述"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="teacherName"
|
||||
label="讲师"
|
||||
/>
|
||||
</layout-table>
|
||||
<el-divider content-position="left">资料课件</el-divider>
|
||||
<layout-table :data="chapter.xzDataList" :showPagination="false">
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWARENAME"
|
||||
label="资料课件名称"
|
||||
>
|
||||
<template v-slot="{ row }">
|
||||
<template v-if="interceptTheSuffix(row.COURSEWAREFILES, '.pdf')">
|
||||
<a @click="fnPreviewPdf(row.COURSEWAREFILES)">
|
||||
{{ row.COURSEWARENAME }}
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ row.COURSEWARENAME }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="post_type_name"
|
||||
label="岗位培训类型"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="train_type_name"
|
||||
label="培训行业类型"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="CLASSHOUR"
|
||||
label="学时"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="COURSEWAREINTRODUCE"
|
||||
label="课件描述"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="teacherName"
|
||||
label="讲师"
|
||||
/>
|
||||
</layout-table>
|
||||
</template>
|
||||
</layout-card>
|
||||
<layout-pdf
|
||||
:src="data.pdfDialog.src"
|
||||
v-model:visible="data.pdfDialog.visible"
|
||||
/>
|
||||
<layout-video
|
||||
:src="data.videoDialog.src"
|
||||
:vid="data.videoDialog.vid"
|
||||
:play-auth="data.videoDialog.playAuth"
|
||||
v-model:visible="data.videoDialog.visible"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -95,6 +143,10 @@ import LayoutTable from "@/components/table/index.vue";
|
|||
import { reactive } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { getCurriculumInfo } from "@/request/platform_resource_library.js";
|
||||
import LayoutPdf from "@/components/pdf/index.vue";
|
||||
import LayoutVideo from "@/components/video/index.vue";
|
||||
import { getVideoAuth, getVideoSource } from "@/request/api.js";
|
||||
import { interceptTheSuffix } from "@/assets/js/utils.js";
|
||||
|
||||
const FILE_URL = import.meta.env.VITE_FILE_URL;
|
||||
|
||||
|
|
@ -104,6 +156,16 @@ const { CURRICULUM_ID } = route.query;
|
|||
const data = reactive({
|
||||
curriculumInfo: {},
|
||||
chapterList: [],
|
||||
pdfDialog: {
|
||||
src: "",
|
||||
visible: false,
|
||||
},
|
||||
videoDialog: {
|
||||
src: "",
|
||||
vid: "",
|
||||
playAuth: "",
|
||||
visible: false,
|
||||
},
|
||||
});
|
||||
|
||||
const fnGetCurriculumInfo = async () => {
|
||||
|
|
@ -114,6 +176,43 @@ const fnGetCurriculumInfo = async () => {
|
|||
}
|
||||
};
|
||||
await fnGetCurriculumInfo();
|
||||
|
||||
const fnPreviewPdf = (FILEPATH) => {
|
||||
data.pdfDialog.visible = true;
|
||||
data.pdfDialog.src = FILEPATH;
|
||||
};
|
||||
|
||||
const fnPreviewVideo = async (row) => {
|
||||
data.videoDialog.src = "";
|
||||
data.videoDialog.vid = "";
|
||||
data.videoDialog.playAuth = "";
|
||||
if (
|
||||
row.VIDEOCOURSEWARE_ID_REMOTE &&
|
||||
row.VIDEOCOURSEWARE_ID_REMOTE.length > 0
|
||||
) {
|
||||
const respData = await getVideoSource({
|
||||
VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID_REMOTE,
|
||||
CURRICULUM_ID: row.CURRICULUM_ID_REMOTE,
|
||||
});
|
||||
if (respData && respData.type === "success") {
|
||||
const video = {};
|
||||
respData.videoList.forEach((item) => {
|
||||
video[item.definition] = item.playURL;
|
||||
});
|
||||
data.videoDialog.src = JSON.stringify(video);
|
||||
data.videoDialog.visible = true;
|
||||
}
|
||||
} else if (row.VIDEOFILES && row.VIDEOFILES.length > 0) {
|
||||
const respData = await getVideoAuth({
|
||||
videoId: row.VIDEOFILES,
|
||||
});
|
||||
if (respData && respData.type === "success") {
|
||||
data.videoDialog.playAuth = respData.playAuth;
|
||||
data.videoDialog.vid = row.VIDEOFILES;
|
||||
data.videoDialog.visible = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue