我的培训页面

src/api/examTrain/questionBank.ts

@@ -80,7 +80,7 @@ export const fileDownloadBatch = (params: object) => {
  */
 export const questionTemplate = (params?: object) => {
     return request({
-        url: ``,
+        url: `/api/v1/Question/Download`,
         method: 'get',
         responseType: 'blob'
     },{
@@ -94,7 +94,7 @@ export const questionTemplate = (params?: object) => {
  */
 export const questionImport = (data: object) => {
     return request({
-        url: ``,
+        url: `/api/v1/Question/ImportExcel`,
         method: 'post',
         data,
         headers: {

src/api/examTrain/userTrain.ts

@@ -0,0 +1,66 @@
+/*
+ * @Author: zjq
+ * @description 我的培训
+ */
+import request from '@/utils/request';
+
+/**
+ * @description 获取培训列表
+ * @param {object} params
+ */
+export const getUserTrainData = (params?: object) => {
+    return request({
+        url: '/api/v1/TrainRecord/GetPagedList',
+        method: 'post',
+        data: params,
+    });
+};
+
+/**
+ * @description 获取培训详情
+ * @param {any} Id
+ */
+export const getTrainInfo = (Id: any) => {
+    return request({
+        url: `/api/v1/TrainRecord/Get`,
+        method: 'post',
+        data: {
+            id: Id
+        }
+    });
+};
+
+/**
+ * @description 提交培训习题
+ * @param {object} data
+ */
+export const answerUserTrain = (data: object) => {
+    return request({
+        url: '/api/v1/TrainRecord/Train',
+        method: 'post',
+        data,
+    });
+};
+
+/**
+ * @description 获取培训试题详情
+ * @param {any} Id
+ */
+export const getTrainQuestion = (Id: any, TrainPracticeId: any) => {
+    return request({
+        url: `/api/v1/TrainRecord/GetTrainPractice?Id=${Id}&TrainPracticeId=${TrainPracticeId}`,
+        method: 'get',
+    });
+};
+
+/**
+ * @description 结束培训
+ * @param {object} params
+ */
+export const submitUserTrain = (params?: object) => {
+    return request({
+        url: '/api/v1/TrainRecord/CompleteTrainRecord',
+        method: 'post',
+        data: params,
+    });
+};

src/views/examTrain/questionBank/edit.vue

@@ -510,6 +510,9 @@ const getDetail = async () => {
 				}
 			});
 		}
+		if (!state.ruleForm.questionAnswerDto){
+			state.ruleForm.questionAnswerDto = {answer: ''};
+		}
 	}else {
 		for(let num = ref(0); num.value < 3; num.value++){
 			state.ruleForm.questionOptionsDtos.push({temp: guid(), content: '', isAnswer: false});

src/views/examTrain/train/userTrain/components/UserTrain-view.vue

@@ -0,0 +1,223 @@
+<template>
+	<el-dialog v-model="state.dialogVisible" draggable destroy-on-close :show-close="false" width="80%" :before-close="closeDialog">
+        <template #header="{ close, titleId, titleClass }">
+            <div class="topContent">
+                <div class="titleBox">
+                    <span class="title">查看小测</span>
+                </div>
+                <div class="submitBox">
+				    <el-button type="info" @click="closeDialog">关 闭</el-button>
+                </div>
+            </div>
+        </template>
+        <el-row :gutter="10" v-loading="state.loading">
+            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-skeleton :loading="state.loading" animated :rows="10">
+                    <p class="knowladgeDtosItem" v-for="(item) in state.trainPracticeQuestionsDtos" @click="onSelQuestion(item.id)">
+                        <el-icon color="#409efc" class="el-input__icon">
+                            <ele-Tickets />
+                        </el-icon>
+                        {{ item.title }}
+                    </p>
+                </el-skeleton>
+            </el-col>
+            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
+                <div class="questionBox" v-if="state.questionDetail">
+                    <p class="questionTitle">题干：{{ state.questionDetail.title }}</p>
+                    <div class="questionAnswer">
+                        <div v-if="[0,2].includes(state.questionDetail.questionType)">
+                            <el-radio-group style="display: block;" v-model="state.selRadioValue">
+                                <el-form-item :label="item.label + '. '" v-for="item in state.questionDetail.trainPracticeOptionsDtos" style="margin-bottom: 10px;">
+                                    <el-radio :label="item.content" :value="item.questionOptionId" disabled />
+                                </el-form-item>
+                            </el-radio-group>
+                        </div>
+                        <div v-else-if="state.questionDetail.questionType == 1">
+                            <el-checkbox-group v-model="state.selCheckboxValue">
+                                <el-form-item :label="item.label + '. '" v-for="item in state.questionDetail.trainPracticeOptionsDtos" style="margin-bottom: 10px;">
+                                    <el-checkbox :label="item.content" :value="item.questionOptionId" disabled />
+                                </el-form-item>
+                            </el-checkbox-group>
+                        </div>
+                        <div v-else-if="state.questionDetail.questionType == 3">
+                            <el-form-item label="答：">
+                                <el-input type="textarea" v-model="state.answerValue" :rows="3"disabled></el-input>
+                            </el-form-item>
+                        </div>
+                        <div v-else-if="state.questionDetail.questionType == 4">
+                            <el-form-item label="答：">
+                                <el-input type="textarea" v-model="state.answerValue" :rows="3" disabled></el-input>
+                            </el-form-item>
+                        </div>
+                    </div>
+                </div>
+                <div class="referenceAnswer" v-if="state.questionDetail">
+                    <span>参考答案：</span>
+                    <p>{{state.questionDetail.answerDesc || '略'}}</p>
+                </div>
+                <div class="referenceAnswer" v-if="state.questionDetail && state.questionDetail.trainPracticeKnowladgeDtos.length > 0">
+                    <span>关联知识：</span>
+                    <p v-for="item in state.questionDetail.trainPracticeKnowladgeDtos" @click="onKnowladgeTo(item)">{{item.title}}</p>
+                </div>
+                <div class="referenceAnswer" v-if="state.questionDetail && state.questionDetail.trainPracticeSourcewareDtos.length > 0">
+                    <span>关联课件：</span>
+                    <p v-for="item in state.questionDetail.trainPracticeSourcewareDtos" @click="onSourcewareTo(item)">{{item.name}}</p>
+                </div>
+            </el-col>
+        </el-row>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { excludeSelfById } from '@/utils/tools';
+import other from '@/utils/other';
+import { fileDownloadByUrl } from '@/api/public/file';
+import { getTrainInfo, answerUserTrain, getTrainQuestion, submitUserTrain } from '@/api/examTrain/userTrain';
+
+const router = useRouter(); // 路由
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['updateList']);
+
+// 定义变量内容
+const state = reactive<any>({
+	dialogVisible: false, // 弹窗
+	loading: false, // 加载
+    userTrainId: '', // 用户培训id
+	trainPracticeQuestionsDtos: [], // 习题数据
+    questionsData: [] as any[], // 试题集合
+    selQuestionID: '', // 选择的问题id
+    questionDetail: null, // 选择的问题详情
+    selRadioValue: '', // 单选题选择的值
+    selCheckboxValue: [] as any[], // 多选题选择的值
+    answerValue: '', // 填空、问答填写的值
+});
+// 打开弹窗
+const openDialog = async (rows: any) => {
+    state.dialogVisible = true;
+    state.userTrainId = rows.id;
+	state.loading = true;
+    getQuestionsData();
+};
+const getQuestionsData = async () => {
+    try {
+		const res: any = await getTrainInfo(state.userTrainId);
+        state.trainPracticeQuestionsDtos = res.result.questionDtos;
+        state.loading = false;
+	} catch (error) {
+		// 打印错误信息
+		console.error(error);
+	}
+}
+// 关闭弹窗
+const closeDialog = () => {
+	state.dialogVisible = false;
+    state.trainPracticeQuestionsDtos = []; 
+    state.selQuestionID = ''; 
+    state.questionDetail = null; 
+    state.selRadioValue = ''; 
+    state.selCheckboxValue = []; 
+    state.answerValue = ''; 
+};
+// 选择的问题id 提交当前试题答案，再请求下一道题详情 value: 请求下一题详情id
+const onSelQuestion = async (value: any) => {
+	state.loading = true;
+    onGetQuestionDetail(value);
+}
+const onGetQuestionDetail = async (value) => {
+    // 初始化选择选择/填写的答案
+    state.selRadioValue = '';  
+    state.selCheckboxValue = []; 
+    // 请求下一道题
+    state.selQuestionID = value;
+    try {
+		const { result } = await getTrainQuestion(state.userTrainId, state.selQuestionID);
+		state.questionDetail = result;
+        let answerDesc = '';
+        state.questionDetail.trainPracticeOptionsDtos.forEach(it => {it.isAnswer && (answerDesc += it.label)});
+        state.questionDetail.answerDesc = answerDesc;
+        if ([0,2].includes(state.questionDetail.questionType)){
+            let obj = state.questionDetail.trainPracticeOptionsDtos.find((x: any) => x.isSelected === true);
+            state.selRadioValue = obj ? obj.questionOptionId : '';
+        }else if (state.questionDetail.questionType == 1){
+            let arr = [] as any[];
+            state.questionDetail.trainPracticeOptionsDtos.forEach(it => {if (it.isSelected) arr.push(it);})
+            state.selCheckboxValue = arr ? arr.map((x: any) => x.questionOptionId) : [];
+            console.log(state.selCheckboxValue)
+        }else {
+            state.answerValue = state.questionDetail.answer || '';
+        }
+        state.loading = false;
+	} catch (error) {
+		// 打印错误信息
+		console.error(error);
+	}
+}
+// 跳转知识详情页面
+const onKnowladgeTo = (row: any) => {
+	router.push({
+		name: 'knowledgePreview',
+		params: {
+			id: row.knowladgeId,
+			isAddPv: 'isAddPv',
+			tagsViewName: row.title,
+		},
+	});
+};
+// 课件预览下载
+const onSourcewareTo = (row: any) => {
+    ElMessageBox.confirm(`您确定要下载课件，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			fileDownloadByUrl({
+				Source: 'hotline',
+				Id: row.attachmentId,
+			}).then((res: any) => {
+				let blob: Blob = new Blob([res.data], { type: res.data.type }); // 创建blob 设置blob文件类型 data 设置为后端返回的文件(例如mp3,jpeg) type:这里设置后端返回的类型 为 mp3
+				let down: HTMLAnchorElement = document.createElement('a'); // 创建A标签
+				let href: string = window.URL.createObjectURL(blob); // 创建下载的链接
+				down.href = href; // 下载地址
+				down.download = row.name // 下载文件名
+				document.body.appendChild(down);
+				down.click(); // 模拟点击A标签
+				document.body.removeChild(down); // 下载完成移除元素
+				window.URL.revokeObjectURL(href); // 释放blob对象
+			});
+		})
+		.catch(() => {});
+}
+// 暴露变量
+defineExpose({
+	openDialog,
+	closeDialog,
+});
+</script>
+<style lang="scss">
+    .topContent{padding: 10px 30px;display: flex;justify-content: space-between;align-items: center;}
+    .topContent .surplusBox{text-align: center;}
+    .topContent .surplusBox .surplus{font-size: 18px;color: #000000;}
+    .topContent .titleBox{text-align: center;}
+    .topContent .titleBox .title{font-size: 20px;font-weight: bold;letter-spacing: 1px;color: #000000;}
+    .topContent .submitBox{text-align: right;vertical-align: top;}
+    .examListContent .examType{font-weight: bold;color: #000000;}
+    .examListContent .examList{padding: 5px 0 10px;}
+    .examListContent .examList .examListItem{display: inline-block;margin: 5px 10px 5px 0;text-align: center;width: 50px;height:35px;line-height: 35px;cursor: pointer;position: relative;border: #f2f2f2 1px solid;}
+    .examListContent .examList .right::after{content: " ";width: 5px;height: 5px;position: absolute;top: 2px;right: 3px;background-color: #009688;border-radius: 50%;}
+    .examListContent .examList .error::after{content: " ";width: 5px;height: 5px;position: absolute;top: 2px;right: 3px;background-color: #FF5722;border-radius: 50%;}
+    .examListContent .examList .select{background-color: #1890ff;color: #fff;}
+    .questionBox{padding: 20px 10px 0;}
+    .questionBox .questionTitle{margin-bottom: 10px;font-size: 16px;}
+    .questionBox .questionAnswer{padding: 0 20px;}
+    .referenceAnswer{background-color: #ebf9ff;margin: 15px 40px 15px 30px;padding: 10px;}
+    .referenceAnswer span{display: block;}
+    .referenceAnswer p{width: calc(100% - 80px);display: block;margin-top: 10px;color: #1890ff;cursor: pointer;}
+    .knowladgeDtosItem{color: var(--el-color-primary);margin-bottom: 10px;cursor: pointer;}
+</style>

src/views/examTrain/train/userTrain/index.vue

@@ -0,0 +1,170 @@
+<template>
+	<div class="plan-index-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent :disabled="state.tableLoading">
+                <el-form-item label="培训编号" prop="code">
+                    <el-input v-model="state.queryParams.code" placeholder="培训编号" clearable @keyup.enter="handleQuery" class="keyword-input" />
+                </el-form-item>
+                <el-form-item label="培训名称" prop="name">
+                    <el-input v-model="state.queryParams.name" placeholder="培训名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="handleQuery" :loading="state.tableLoading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+				    <el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+                </el-form-item>
+            </el-form>
+            <vxe-toolbar
+                ref="toolbarRef"
+                :loading="state.tableLoading"
+                custom
+                :refresh="{
+                    queryMethod: handleQuery,
+                }"
+            ></vxe-toolbar>
+            <div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+                <vxe-table
+                    border
+                    :loading="state.tableLoading"
+                    :data="state.tableData"
+                    :column-config="{ resizable: true }"
+                    :row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
+                    ref="tableRef"
+                    height="auto"
+                    auto-resize
+                    show-overflow
+                    :print-config="{}"
+                    :scrollY="{ enabled: true, gt: 100 }"
+                    id="examTrainTrainUserTrain"
+                    :custom-config="{ storage: true }"
+                    showHeaderOverflow
+                >
+                    <vxe-column field="trainCode" title="培训编号" width="150"></vxe-column>
+                    <vxe-column field="trainName" title="培训标题" min-width="150"></vxe-column>
+                    <vxe-column field="trainStartTime" title="培训开始时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.trainStartTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+                    <vxe-column field="trainEndTime" title="培训结束时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.trainEndTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+                    <vxe-column field="isCompleteDes" title="是否完成培训" align="center" width="120"></vxe-column>
+                    <!-- <vxe-column field="" title="创建人" width="100"></vxe-column>
+                    <vxe-column field="endTime" title="创建时间" width="160">
+						<template #default="{ row }">
+                            <span v-if="row.examType == 0">{{formatDate(row.endTime, 'YYYY-mm-dd HH:MM:SS')}}</span>
+                            <span v-else></span>
+						</template>
+					</vxe-column> -->
+                    <vxe-column title="操作" fixed="right" width="160" align="center" :show-overflow="false">
+                        <template #default="{ row }">
+                            <el-button type="primary" v-if="!row.isComplete" @click="onStudy(row)" size="small" title="学习" v-auth="'userTrain:index:study'">
+                                学习
+                            </el-button>
+                            <el-button link type="primary" v-else @click="onView(row)" title="查看小测" v-auth="'userTrain:index:view'">
+                                查看小测
+                            </el-button>
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+            </div>
+            <pagination
+                @pagination="queryList"
+                :total="state.total"
+                v-model:current-page="state.queryParams.PageIndex"
+                v-model:page-size="state.queryParams.PageSize"
+                :disabled="state.tableLoading"
+            />
+		</div>
+
+        <!-- 查看小测 -->
+		<userTrain-view ref="userTrainViewRef" @updateList="queryList" />
+	</div>
+</template>
+
+<script lang="tsx" setup name="examTrainTrainUserTrain">
+import { ref, reactive, onMounted, defineAsyncComponent, computed } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+import type { FormInstance } from 'element-plus';
+import { formatDate } from '@/utils/formatTime';
+import 'splitpanes/dist/splitpanes.css';
+import Other from '@/utils/other';
+import { downloadFileByStream } from '@/utils/tools';
+import {getUserTrainData} from '@/api/examTrain/userTrain';
+
+// 引入组件
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
+const UserTrainView = defineAsyncComponent(() => import('@/views/examTrain/train/userTrain/components/UserTrain-view.vue')); // 查看组件
+
+const router = useRouter(); //路由
+
+// 定义变量内容
+const state = reactive<any>({
+	queryParams: {
+		PageIndex: 1, //页码
+		PageSize: 20, //每页条数
+        code: '', // 编号
+        name: '', // 标题
+	},
+	tableLoading: false, //表格loading
+	tableData: [], //表格数据
+	total: 0, //总条数
+});
+/** 搜索按钮操作 节流操作 */
+const handleQuery = () => {
+	state.queryParams.PageIndex = 1;
+	queryList();
+};
+/** 获取试题列表 */
+const requestParams = ref<EmptyObjectType>({});
+const queryList = () => {
+	state.tableLoading = true;
+	requestParams.value = Other.deepClone(state.queryParams);
+	getUserTrainData(requestParams.value)
+		.then((response: any) => {
+			state.tableData = response?.result.items ?? [];
+			state.total = response?.result.pagination.totalCount ?? 0;
+			state.tableLoading = false;
+		})
+		.catch(() => {
+			state.tableLoading = false;
+		});
+};
+/** 重置按钮操作 */
+const ruleFormRef = ref<RefType>(); // 表单ref
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	ruleFormRef.value?.resetFields();
+	handleQuery();
+};
+// 学习
+const onStudy  = (row: any) => {
+    console.log(row)
+	router.push({
+		name: 'trainStudy',
+		params: {
+			id: row.id,
+            trainName: row.trainName,
+			tagsViewName: '培训学习',
+		},
+	});
+};
+// 打开查看弹窗
+const userTrainViewRef = ref<RefType>(); // 修改ref
+const onView = (row: any) => {
+	userTrainViewRef.value.openDialog(row, state.tableData.value);
+};
+// 表格选中状态
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
+onMounted(() => {
+	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+});
+</script>

src/views/examTrain/train/userTrain/study.vue

@@ -0,0 +1,412 @@
+<template>
+	<div class="layout-pd h100">
+		<div class="layout-padding-auto layout-padding-view pd20">
+            <splitpanes class="h100" :horizontal="horizontal">
+				<pane size="30">
+                    <el-tabs v-model="state.activeName" stretch @tab-change="tabChange">
+                        <el-tab-pane label="培训知识" name="0" :disabled="state.loading"></el-tab-pane>
+                        <el-tab-pane label="习题" name="1" :disabled="state.loading" v-if="state.trainPracticeQuestionsDtos.length > 0" ></el-tab-pane>
+                    </el-tabs>
+                    <el-scrollbar style="height: calc(100% - 100px);" ref="scrollBarRef">
+                        <el-skeleton :loading="state.loading" animated :rows="10" v-if="state.activeName === '0'">
+                            <p class="knowladgeDtosItem" v-for="(item) in state.trainPracticeKnowladgeDtos" @click="onClickKnowladge(item.id)">
+                                <el-icon color="#409efc" class="el-input__icon">
+                                    <ele-Notebook />
+                                </el-icon>
+                                {{ item.title }}
+                            </p>
+                        </el-skeleton>
+                        <el-skeleton :loading="state.loading" animated :rows="10" v-if="state.activeName === '1'">
+                            <p class="knowladgeDtosItem" v-for="(item) in state.trainPracticeQuestionsDtos" @click="onSelQuestion(item.id)">
+                                <el-icon color="#409efc" class="el-input__icon">
+                                    <ele-Tickets />
+                                </el-icon>
+                                {{ item.title }}
+                            </p>
+                        </el-skeleton>
+                    </el-scrollbar>
+                </pane>
+				<pane class="h100" style="display: flex;flex-direction: column;flex: 1;">
+                    <el-card shadow="never" v-if="state.activeName === '0' && state.KnowladgeInfo">
+                        <template #header>
+                            <div class="card-header">
+                                <span class="headerText">{{state.trainTitle}}</span>
+                                <el-button class="headerBtn" type="primary" @click="onSubmit" :loading="state.loading">结束培训</el-button>
+                            </div>
+                        </template>
+                        <el-skeleton :loading="state.knowladgeLoading" animated>
+                            <template #template>
+                                <el-skeleton-item />
+                            </template>
+                            <template #default>
+                                <h1 class="font18 mb10" style="text-align: center">{{ state.KnowladgeInfo.title }}</h1>
+                            </template>
+                        </el-skeleton>
+                        <el-row class="color-info flex-center-between" :gutter="20">
+                            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                                <el-skeleton :loading="state.knowladgeLoading" animated>
+                                    <template #template>
+                                        <el-skeleton-item />
+                                    </template>
+                                    <template #default>
+                                        <span class="mr30">创建时间：{{ formatDate(state.KnowladgeInfo.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+                                        <span class="mr30">创建人：{{ state.KnowladgeInfo.creatorName }}</span>
+                                        <span>创建部门：{{ state.KnowladgeInfo.creatorOrgName }}</span>
+                                    </template>
+                                </el-skeleton>
+                            </el-col>
+                            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="display: flex; align-items: center; justify-content: center">
+                                <el-skeleton :loading="state.knowladgeLoading" animated>
+                                    <template #template>
+                                        <el-skeleton-item />
+                                    </template>
+                                    <template #default>
+                                        <span class="mr20 flex-center-align" v-if="state.KnowladgeInfo.knowledgeTypeText"
+                                            >知识分类：
+                                            <el-tooltip effect="dark" content="Top Left prompts info" :disabled="state.KnowladgeInfo.knowledgeTypeText.length < 8">
+                                                <span style="display: block; width: 100px" class="text-no-wrap">{{ state.KnowladgeInfo.knowledgeTypeText }}</span>
+                                                <template #content>
+                                                    {{ state.KnowladgeInfo.knowledgeTypeText }}
+                                                </template>
+                                            </el-tooltip>
+                                        </span>
+                                        <span class="mr30">是否公开：{{ state.KnowladgeInfo.isPublic ? '是' : '否' }}</span>
+                                        <span>已阅：{{ state.KnowladgeInfo.pageView }}</span>
+                                    </template>
+                                </el-skeleton>
+                            </el-col>
+                        </el-row>
+                        <el-row class="color-info flex-center-between">
+                            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                                <el-skeleton :loading="state.knowladgeLoading" animated>
+                                    <template #template>
+                                        <el-skeleton-item />
+                                    </template>
+                                    <template #default>
+                                        <span class="mr30" v-if="state.KnowladgeInfo.documentNo">文档号：{{ state.KnowladgeInfo.documentNo }}</span>
+                                        <span class="mr30" v-if="state.KnowladgeInfo.versionDescription">版本说明：{{ state.KnowladgeInfo.versionDescription }}</span>
+                                        <span class="mr30" v-if="state.KnowladgeInfo.indexNo">索引号：{{ state.KnowladgeInfo.indexNo }}</span>
+                                        <span v-if="state.KnowladgeInfo.fileNo">文号：{{ state.KnowladgeInfo.fileNo }}</span>
+                                    </template>
+                                </el-skeleton>
+                            </el-col>
+                        </el-row>
+                        <el-divider />
+                        <el-skeleton :loading="state.knowladgeLoading" animated>
+                            <template #template>
+                                <el-skeleton :rows="5" />
+                            </template>
+                            <template #default>
+                                <div class="mt5 editor-content-view">
+                                    <div v-html="state.KnowladgeInfo.content" class="lineHeight24"></div>
+                                </div>
+                            </template>
+                        </el-skeleton>
+                        <template v-if="state.KnowladgeInfo.knowledgeDtos && state.KnowladgeInfo.knowledgeDtos.length > 0">
+                            <el-divider />
+                            <el-skeleton :loading="state.knowladgeLoading" animated>
+                                <template #template>
+                                    <el-skeleton-item />
+                                </template>
+                                <template #default>
+                                    关联知识
+                                    <div class="mt5">
+                                        <div v-for="(item, index) in state.KnowladgeInfo.knowledgeDtos" :key="index" @click="onPreview(item)" class="relevance">
+                                            <el-link type="primary">{{ item.title }}</el-link>
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-skeleton>
+                        </template>
+                        <template>
+                            <el-divider />
+                            <el-skeleton :loading="state.knowladgeLoading" animated>
+                                <template #template>
+                                    <el-form-item label="附件">
+                                        <el-skeleton-item />
+                                    </el-form-item>
+                                </template>
+                                <template #default>
+                                    <div class="mt10">
+                                        <el-form-item label="附件">
+                                            <annex-list name="知识附件" v-model="state.KnowladgeInfo.files" readonly classify="知识附件" />
+                                        </el-form-item>
+                                    </div>
+                                </template>
+                            </el-skeleton>
+                        </template>
+                    </el-card>
+                    <el-card shadow="never" v-if="state.activeName === '1'">
+                        <template #header>
+                            <div class="card-header">
+                                <span class="headerText">{{state.trainTitle}}</span>
+                                <el-button class="headerBtn" type="primary" @click="onSubmit" :loading="state.loading">结束培训</el-button>
+                            </div>
+                        </template>
+                        <el-skeleton :loading="state.questionLoading" animated :rows="5">
+                            <template #default>
+                                <div class="questionBox" v-if="state.questionDetail">
+                                    <p class="questionTitle">题干：{{ state.questionDetail.title }}</p>
+                                    <div class="questionAnswer">
+                                        <div v-if="[0,2].includes(state.questionDetail.questionType)">
+                                            <el-radio-group style="display: block;" v-model="state.selRadioValue">
+                                                <el-form-item :label="item.label + '. '" v-for="item in state.questionDetail.trainPracticeOptionsDtos" style="margin-bottom: 10px;">
+                                                    <el-radio :label="item.content" :value="item.questionOptionId" />
+                                                </el-form-item>
+                                            </el-radio-group>
+                                        </div>
+                                        <div v-else-if="state.questionDetail.questionType == 1">
+                                            <el-checkbox-group v-model="state.selCheckboxValue">
+                                                <el-form-item :label="item.label + '. '" v-for="item in state.questionDetail.trainPracticeOptionsDtos" style="margin-bottom: 10px;">
+                                                    <el-checkbox :label="item.content" :value="item.questionOptionId" />
+                                                </el-form-item>
+                                            </el-checkbox-group>
+                                        </div>
+                                        <div v-else-if="state.questionDetail.questionType == 2"></div>
+                                        <div v-else-if="state.questionDetail.questionType == 3">
+                                            <el-form-item label="答：">
+                                                <el-input type="textarea" v-model="state.answerValue" :rows="3" placeholder="请输入答案，如果有多个请依照顺序用英文 , 隔开" clearable></el-input>
+                                            </el-form-item>
+                                        </div>
+                                        <div v-else-if="state.questionDetail.questionType == 4">
+                                            <el-form-item label="答：">
+                                                <el-input type="textarea" v-model="state.answerValue" :rows="3" placeholder="请输入答案" clearable></el-input>
+                                            </el-form-item>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="referenceAnswer" v-if="state.questionDetail && state.questionDetail.trainPracticeKnowladgeDtos.length > 0">
+                                    <span>关联知识：</span>
+                                    <p v-for="item in state.questionDetail.trainPracticeKnowladgeDtos" @click="onKnowladgeTo(item)">{{item.title}}</p>
+                                </div>
+                                <div class="referenceAnswer" v-if="state.questionDetail && state.questionDetail.trainPracticeSourcewareDtos.length > 0">
+                                    <span>关联课件：</span>
+                                    <p v-for="item in state.questionDetail.trainPracticeSourcewareDtos" @click="onSourcewareTo(item)">{{item.name}}</p>
+                                </div>
+                            </template>
+                        </el-skeleton>
+                    </el-card>
+                </pane>
+            </splitpanes>
+        </div>
+		
+    </div>
+</template>
+
+<script setup lang="ts" name="trainStudy">
+import { defineAsyncComponent, nextTick, onMounted, reactive, ref, computed } from 'vue';
+import type { FormInstance } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import mittBus from '@/utils/mitt';
+import { useRoute, useRouter } from 'vue-router';
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+import { formatDate } from '@/utils/formatTime';
+import { Local } from '@/utils/storage';
+import other from '@/utils/other';
+import { throttle, transformFile, guid } from '@/utils/tools';
+import { fileDownloadByUrl } from '@/api/public/file';
+import { getTrainInfo, answerUserTrain, getTrainQuestion, submitUserTrain } from '@/api/examTrain/userTrain';
+import { KnowledgeInfo} from '@/api/knowledge';
+
+const router = useRouter(); //路由
+const route = useRoute(); //  获取路由参数
+const horizontal = ref(false);
+
+// 定义变量内容
+const state = reactive<any>({
+    loading: false, // 加载状态
+    knowladgeLoading: false, // 问题加载状态
+    questionLoading: false, // 问题加载状态
+    trainTitle: '我的培训', // 培训标题
+	activeName: '0', //tab切换 默认关联知识
+    isContainsPractice: false, // 是否包含习题
+    trainPracticeKnowladgeDtos: [], // 知识库数据
+    KnowladgeInfo: null,
+    // trainPracticeSourcewareDtos: [], // 课件数据
+    trainPracticeQuestionsDtos: [], // 习题数据
+    questionsData: [] as any[], // 试题集合
+    selQuestionID: '', // 选择的问题id
+    questionDetail: null, // 选择的问题详情
+    selRadioValue: '', // 单选题选择的值
+    selCheckboxValue: [] as any[], // 多选题选择的值
+    answerValue: '', // 填空、问答填写的值
+});
+
+// 初始化数据
+const getInfo = async () => {
+	state.loading = true;
+    state.trainTitle = route.params.trainName;
+    console.log(state.trainName);
+    const res: any = await getTrainInfo(route.params.id);
+    state.trainPracticeKnowladgeDtos = res.result.knowladgeDtos;
+    // state.trainPracticeSourcewareDtos = res.result.trainPracticeSourcewareDtos;
+    state.trainPracticeQuestionsDtos = res.result.questionDtos;
+    state.loading = false;
+};
+// tab切换
+const tabChange = () => {
+
+};
+//  知识点击
+const onClickKnowladge = async(id: any) => {
+    state.knowladgeLoading = true;
+    const res: any = await KnowledgeInfo(id, { isAddPv: 'true' });
+    state.KnowladgeInfo = res.result ?? {};
+    state.KnowladgeInfo.files = transformFile(state.KnowladgeInfo.files);
+    state.knowladgeLoading = false;
+};
+// 知识预览
+const onPreview = (row: any) => {
+	router.push({
+		name: 'knowledgePreview',
+		params: {
+			id: row.id,
+			tagsViewName: '知识查看',
+		},
+	});
+};
+ 
+// 问题点击
+// 选择的问题id 提交当前试题答案，再请求下一道题详情 value: 请求下一题详情id
+const onSelQuestion = async (value: any) => {
+	state.questionLoading = true;
+    if (state.questionDetail){
+        // 保存当前题目选项
+        const submitObj = {
+            trainRecordId: route.params.id,
+            trainPracticeId: state.questionDetail.id,
+            addTrainRecordOptionDtos: [] as any[],
+            addTrainRecordAnswerDto: null as any
+        };
+        if ([0,2].includes(state.questionDetail.questionType)){
+            if (state.selRadioValue){
+                submitObj.addTrainRecordOptionDtos.push({questionOptionId: state.selRadioValue})
+            }
+        }else if (state.questionDetail.questionType == 1){
+            if (state.selCheckboxValue.length > 0){
+                state.selCheckboxValue.forEach(it => {
+                    submitObj.addTrainRecordOptionDtos.push({questionOptionId: it})
+                })
+            }
+        }else if ([3,4].includes(state.questionDetail.questionType)){
+            submitObj.addTrainRecordAnswerDto = {answer: state.answerValue};
+        }
+        answerUserTrain(submitObj)
+            .then((res) => {
+                onGetQuestionDetail(value);
+            })
+            .catch(() => {
+                state.questionLoading = false;
+            });
+    }else {
+        onGetQuestionDetail(value);
+    }
+}
+const onGetQuestionDetail = async (value) => {
+    if (!value){
+        state.questionLoading = false;
+        return;
+    }
+    // 初始化选择选择/填写的答案
+    state.selRadioValue = '';  
+    state.selCheckboxValue = []; 
+    // 请求下一道题
+    state.selQuestionID = value;
+    try {
+		const { result } = await getTrainQuestion(route.params.id, state.selQuestionID);
+		state.questionDetail = result;
+        if ([0,2].includes(state.questionDetail.questionType)){
+            let obj = state.questionDetail.trainPracticeOptionsDtos.find((x: any) => x.isSelected === true);
+            state.selRadioValue = obj ? obj.questionOptionId : '';
+        }else if (state.questionDetail.questionType == 1){
+            let arr = [] as any[];
+            state.questionDetail.trainPracticeOptionsDtos.forEach(it => {if (it.isSelected) arr.push(it);})
+            state.selCheckboxValue = arr ? arr.map((x: any) => x.questionOptionId) : [];
+            console.log(state.selCheckboxValue)
+        }else {
+            state.answerValue = state.questionDetail.answer || '';
+        }
+        state.questionLoading = false;
+	} catch (error) {
+		// 打印错误信息
+		console.error(error);
+	}
+}
+// 跳转知识详情页面
+const onKnowladgeTo = (row: any) => {
+	router.push({
+		name: 'knowledgePreview',
+		params: {
+			id: row.knowladgeId,
+			isAddPv: 'isAddPv',
+			tagsViewName: row.title,
+		},
+	});
+};
+// 课件预览下载
+const onSourcewareTo = (row: any) => {
+    ElMessageBox.confirm(`您确定要下载课件，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			fileDownloadByUrl({
+				Source: 'hotline',
+				Id: row.attachmentId,
+			}).then((res: any) => {
+				let blob: Blob = new Blob([res.data], { type: res.data.type }); // 创建blob 设置blob文件类型 data 设置为后端返回的文件(例如mp3,jpeg) type:这里设置后端返回的类型 为 mp3
+				let down: HTMLAnchorElement = document.createElement('a'); // 创建A标签
+				let href: string = window.URL.createObjectURL(blob); // 创建下载的链接
+				down.href = href; // 下载地址
+				down.download = row.name // 下载文件名
+				document.body.appendChild(down);
+				down.click(); // 模拟点击A标签
+				document.body.removeChild(down); // 下载完成移除元素
+				window.URL.revokeObjectURL(href); // 释放blob对象
+			});
+		})
+		.catch(() => {});
+}
+// 结束培训
+const onSubmit = async () => {
+    state.loading = true;
+    await onSelQuestion('');
+	submitUserTrain({
+        id: route.params.id,
+        isComplete: true
+    }).then(() => {
+        mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+        mittBus.emit('clearCache', 'userTrain');
+        router.push({
+            path: '/examTrain/train/userTrain',
+        });
+        state.loading = false;
+    }).catch(() => {
+        state.loading = false;
+    });
+};
+onMounted(() => {
+	getInfo();
+});
+</script>
+<style lang="scss">
+    .knowladgeDtosItem{color: var(--el-color-primary);margin-bottom: 10px;cursor: pointer;}
+    .questionBox{padding: 20px 10px 0;}
+    .questionBox .questionTitle{margin-bottom: 10px;font-size: 16px;}
+    .questionBox .questionAnswer{padding: 0 20px;}
+    .questionBox .referenceAnswer{background-color: #ebf9ff;margin: 15px 40px 15px 30px;padding: 10px;}
+    .questionBox .referenceAnswer span{vertical-align: top;display: inline-block;}
+    .questionBox .referenceAnswer p{width: calc(100% - 80px);display: inline-block;}
+    .referenceAnswer{background-color: #ebf9ff;margin: 15px 40px 15px 30px;padding: 10px;}
+    .referenceAnswer span{display: block;}
+    .referenceAnswer p{width: calc(100% - 80px);display: block;margin-top: 10px;color: #1890ff;cursor: pointer;}
+    .el-card__header {padding: 7px 20px 8px;}
+    .card-header{text-align: center;position: relative;}
+    .headerText{font-size: 20px;color: #000;font-weight: bolder;}
+    .headerBtn{position: absolute;top: -7px;right: 0px;}
+</style>