<template>
|
<div class="classManagePage-box">
|
<div class="classManagePage-nav">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>我的班级</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ classInfo?.name }}</el-breadcrumb-item>
|
<el-breadcrumb-item>互动学生列表</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="classManagePage-content">
|
<div class="backBtn">
|
<el-button @click="goBack()" type="primary" link>
|
<el-icon style="margin-right: 5px"><ArrowLeftBold /></el-icon> 返回
|
</el-button>
|
</div>
|
<div class="contentBox">
|
<div class="titleOptions">
|
<span>互动学生列表</span>
|
</div>
|
<div class="content-tab-box">
|
<div class="content-list-box">
|
<el-table
|
:header-cell-style="{ background: '#eee' }"
|
:data="dataList"
|
max-height="600px"
|
style="width: 100%"
|
v-loading="pages.loading"
|
>
|
<el-table-column prop="index" label="序号" width="70" />
|
<el-table-column prop="userName" label="姓名" width="500" />
|
<el-table-column label="状态">
|
<el-button link type="success">已完成</el-button>
|
</el-table-column>
|
<el-table-column prop="questionTime" label="答题时间" />
|
<el-table-column label="操作" #default="scoped">
|
<el-button link type="primary" @click="getQuestions(scoped.row)">
|
答题详情
|
</el-button>
|
</el-table-column>
|
</el-table>
|
<div class="pageBox">
|
<el-pagination
|
style="float: right"
|
v-model:current-page="pages.currentPage"
|
:page-size="pages.pageSize"
|
:size="'small'"
|
:disabled="pages.count <= 1"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 浏览答题 -->
|
<el-dialog
|
class="customDialog"
|
title="浏览答题"
|
v-model="visible"
|
destroy-on-close
|
width="1000"
|
align-center
|
>
|
<div class="pubContent" v-if="dialogList.length > 0 && !dialogLLoading">
|
<div v-for="(item, index) in dialogList" :key="index">
|
<span class="userName">答题人：{{ item.userName ?? '-' }}</span>
|
<question-dom
|
v-if="item.questionTypeList.length > 0"
|
:questionList="item.questionTypeList"
|
:noCheckbox="false"
|
:is-preview="true"
|
:is-interaction="true"
|
/>
|
</div>
|
</div>
|
<div class="pubContent" v-if="dialogLLoading" v-loading="dialogLLoading"></div>
|
<div class="pubContent noData" v-if="dialogList.length == 0 && !dialogLLoading">
|
<el-empty></el-empty>
|
</div>
|
<template #footer>
|
<div class="selectedFooter" style="padding: 0">
|
<el-button type="primary" @click="visible = false"> 关闭 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useRoute, useRouter } from 'vue-router'
|
import { inject, onMounted, reactive, ref } from 'vue'
|
import { Search, UserFilled, ArrowRight } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import moment from 'moment'
|
import questionDom from './components/questionDom.vue'
|
|
const route: any = useRoute()
|
const router = useRouter()
|
const classInfo = JSON.parse(route.query.classInfo)
|
const MG: any = inject('MG')
|
const config: any = inject('config')
|
const tool: any = inject('toolClass')
|
|
const dataList = ref([])
|
let pages = reactive({
|
currentPage: 1,
|
page: 1,
|
pageSize: 15,
|
count: 0,
|
loading: false
|
})
|
|
const visible = ref(false)
|
const dialogList: any = ref([])
|
const dialogLLoading = ref(false)
|
const defaultCmsPath = ref('')
|
|
const handleDelete = (item: any) => {
|
const data = {
|
messageIds: [item.id]
|
}
|
MG.ugc.delTopicMessage(data).then((res: any) => {
|
ElMessage.success('删除成功')
|
getMessage()
|
})
|
}
|
|
// 获取当前话题
|
const getMessage = () => {
|
pages.loading = true
|
const data = {
|
start: (pages.page - 1) * pages.pageSize,
|
size: pages.pageSize,
|
appRefCode: config.appRefCode,
|
topicIdOrRefCode: String(classInfo.teachInteractionId),
|
sort: {
|
type: 'Desc',
|
field: 'CreateDate'
|
},
|
searchList: [
|
{
|
keywords: classInfo.questionName,
|
field: 'Name',
|
compareType: 'Contains'
|
}
|
]
|
}
|
MG.ugc.getTopicMessageList(data).then((res: any) => {
|
pages.loading = false
|
pages.count = res.totalSize
|
dataList.value = res.datas.map((item: any, i: number) => {
|
item.question = []
|
item.bookId = null
|
item.path = ''
|
item.index = i + 1
|
try {
|
const obj = JSON.parse(item.content)
|
if (obj.bookId) {
|
item.question = obj.content
|
item.bookId = obj.bookId
|
item.path = obj.path
|
item.userName = obj.userName ?? '-'
|
}
|
} catch (error) {
|
console.log(item)
|
}
|
return {
|
...item,
|
questionTime: moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss')
|
}
|
})
|
})
|
}
|
|
// 分页
|
const handleSizeChange = (val: number) => {
|
pages.pageSize = val
|
getMessage()
|
}
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val
|
pages.currentPage = val
|
getMessage()
|
}
|
|
onMounted(() => {
|
defaultCmsPath.value = classInfo.bookRefCode ? '*' : 'defaultGoodsStore3'
|
getMessage()
|
})
|
|
// 获取题目列表
|
const getQuestions = (item: any) => {
|
visible.value = true
|
dialogLLoading.value = true
|
MG.store
|
.getProductDetail({
|
path: defaultCmsPath.value,
|
queryType: '*',
|
productId: classInfo.bookId,
|
cmsPath: item.path,
|
itemFields: {
|
Embedded_QuestionBank_AnalysisCon: [],
|
Embedded_QuestionBank_Answer: [],
|
Embedded_QuestionBank_Difficulty: [],
|
Embedded_QuestionBank_KnowledgePoint: [],
|
Embedded_QuestionBank_Option: [],
|
Embedded_QuestionBank_OptionStyle: [],
|
Embedded_QuestionBank_QuestionType: [],
|
Embedded_QuestionBank_Score: [],
|
Embedded_QuestionBank_Stem: [],
|
Embedded_QuestionBank_StemStyle: []
|
}
|
})
|
.then((res: any) => {
|
try {
|
let list = []
|
list = res.datas.cmsDatas[0]?.datas.map((item: any) => {
|
try {
|
if (item.Embedded_QuestionBank_Stem) {
|
item.questionStem = JSON.parse(item.Embedded_QuestionBank_Stem)
|
}
|
if (
|
item.Embedded_QuestionBank_Option &&
|
item.Embedded_QuestionBank_Option.indexOf('[') > -1
|
) {
|
item.questionOption = JSON.parse(item.Embedded_QuestionBank_Option)
|
}
|
if (
|
item.Embedded_QuestionBank_Answer &&
|
item.Embedded_QuestionBank_Answer.indexOf('[') > -1
|
) {
|
item.Embedded_QuestionBank_Answer = JSON.parse(item.Embedded_QuestionBank_Answer)
|
}
|
return {
|
...item,
|
questionType: item.Embedded_QuestionBank_QuestionType,
|
questionAnalysisCon: item.Embedded_QuestionBank_AnalysisCon,
|
questionAnswer: item.Embedded_QuestionBank_Answer,
|
customAnswer: null
|
}
|
} catch (error) {
|
console.log(item)
|
}
|
})
|
dialogList.value = chageData([item], list)
|
dialogLLoading.value = false
|
} catch (error) {
|
dialogList.value = []
|
dialogLLoading.value = false
|
}
|
})
|
}
|
|
// 处理数据结构
|
const chageData = (arr: any, zrr: any) => {
|
let newData = []
|
// 题库题目类型
|
const questionTypeList = [
|
{ name: '单选题', value: 'singleChoice', data: [] },
|
{ name: '多选题', value: 'multipleChoice', data: [] },
|
{ name: '判断题', value: 'judge', data: [] },
|
{ name: '简答题', value: 'shortAnswer', data: [] },
|
{ name: '论述题', value: 'discuss', data: [] },
|
{ name: '填空题', value: 'completion', data: [] },
|
{ name: '连线题', value: 'matching', data: [] },
|
{ name: '分类题', value: 'classification', data: [] }
|
]
|
for (let i = 0; i < arr.length; i++) {
|
const item = arr[i]
|
item.questionTypeList = JSON.parse(JSON.stringify(questionTypeList))
|
for (let j = 0; j < zrr.length; j++) {
|
const ele = zrr[j]
|
const qusObj = item.question.find((citem: any) => citem.cmsItemId == ele.id)
|
if (qusObj?.cmsItemId) {
|
ele.userAnswer = qusObj.answer
|
const index = findIndexByValue(questionTypeList, ele.questionType)
|
if (index > -1) {
|
item.questionTypeList[index].data.push(ele)
|
}
|
}
|
}
|
item.questionTypeList = item.questionTypeList.filter((item: any) => item.data.length > 0)
|
newData.push(item)
|
}
|
return newData.filter((item) => item.questionTypeList.length > 0)
|
}
|
|
const findIndexByValue = (res: any, type: string) => {
|
for (let i = 0; i < res.length; i++) {
|
if (res[i].value == type) {
|
return i
|
}
|
}
|
return -1 // 如果未找到，则返回 -1
|
}
|
|
// 作业搜索
|
const searchData = () => {}
|
|
const goBack = () => {
|
router.go(-1)
|
}
|
</script>
|
<style lang="less" scoped>
|
.classManagePage-box {
|
background: #fff;
|
|
.classManagePage-nav {
|
width: 100%;
|
padding: 0 20px;
|
height: 40px;
|
border-bottom: 1px solid #e6e8ed;
|
position: sticky;
|
top: 0;
|
z-index: 999;
|
display: flex;
|
align-items: center;
|
background: #fff;
|
}
|
.classManagePage-content {
|
width: 100%;
|
position: relative;
|
.backBtn {
|
width: 100%;
|
height: 45px;
|
margin-bottom: 10px;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
position: sticky;
|
top: 40px;
|
z-index: 99;
|
background: #fff;
|
box-shadow: 0px 0px 20px 1px #eeeeee83;
|
box-sizing: border-box;
|
}
|
.contentBox {
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
.titleOptions {
|
width: 160px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
span {
|
height: 30px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
font-size: 16px;
|
color: #333;
|
line-height: 30px;
|
text-align: left;
|
border-left: 6px solid #019e58;
|
padding-left: 10px;
|
}
|
}
|
}
|
.pubContent {
|
padding: 10px;
|
box-sizing: border-box;
|
min-height: 750px;
|
.userName {
|
color: #019e58;
|
}
|
}
|
}
|
}
|
</style>
|
