<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="cartClass">
|
<!-- <el-tabs v-model="jobState" @tab-click="tabCart">
|
<el-tab-pane label="全部" name="all"></el-tab-pane>
|
<el-tab-pane label="进行中" name="payment"></el-tab-pane>
|
<el-tab-pane label="已过期" name="complete"></el-tab-pane>
|
</el-tabs> -->
|
<div class="titleOptions">
|
<span>作业管理</span>
|
</div>
|
</div>
|
<div class="headerBox">
|
<div class="searchBox">
|
<el-input
|
v-model="searchKey"
|
clearable
|
@clear="searchTask"
|
@keydown.enter="searchTask"
|
placeholder="请输入关键字"
|
>
|
<template #append>
|
<el-button type="primary" @click="searchTask" class="searchBtn" :icon="Search" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
<div class="listBox">
|
<el-table
|
:data="tableData"
|
:header-cell-style="{ background: '#eee' }"
|
max-height="600px"
|
style="width: 100%"
|
v-loading="pages.loading"
|
>
|
<el-table-column label="序号" prop="id" width="70"> </el-table-column>
|
<el-table-column label="名称" prop="name"> </el-table-column>
|
<el-table-column label="作业完成情况" #default="scope">
|
<span v-if="scope.row.submitState == 'WaitCheck'" style="color: #ff6d00">待批改</span>
|
<span v-if="scope.row.submitState == 'Normal'" style="color: #67c23a">已批改</span>
|
<span v-if="!scope.row.submitState" style="color: red">未提交</span>
|
</el-table-column>
|
<!-- <el-table-column label="状态" prop="state" #default="scope">
|
<span v-if="scope.row.state == 'Waiting'" style="color: red">未开始</span>
|
<span v-if="scope.row.state == 'Normal'" style="color: #67c23a">进行中</span>
|
<span v-if="scope.row.state == 'Ended'" style="color: #999">已结束</span>
|
</el-table-column> -->
|
<el-table-column label="作业开始日期" prop="beginDate"> </el-table-column>
|
<el-table-column label="作业结束日期" prop="endDate"> </el-table-column>
|
<el-table-column label="主观题得分" prop="judgeScore"> </el-table-column>
|
<el-table-column label="客观题得分" prop="otherScore"> </el-table-column>
|
<el-table-column label="总分" prop="totalScore"> </el-table-column>
|
<el-table-column label="操作" width="200" #default="scope">
|
<el-button link style="color: #409eff" @click="preview(scope.row)">预览</el-button>
|
<el-button link v-if="!scope.row.submitState" type="primary" @click="answer(scope.row)">
|
答题
|
</el-button>
|
</el-table-column>
|
</el-table>
|
<div class="pageBox">
|
<el-pagination
|
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>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from 'vue'
|
import { Search, ArrowRight } from '@element-plus/icons-vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import moment from 'moment'
|
|
const route: any = useRoute()
|
const router = useRouter()
|
const MG: any = inject('MG')
|
const config: any = inject('config')
|
const tool: any = inject('toolClass')
|
const classInfo = JSON.parse(route.query.classInfo)
|
const jobState = ref('all')
|
const searchKey = ref('')
|
const dataList = ref([])
|
const userInfo = ref()
|
|
// 获取task参数
|
const filterData = ref([
|
{
|
value: config.taskType.homeWork,
|
field: 'Type',
|
subFilters: []
|
}
|
])
|
// task
|
const taskData = reactive({
|
id: '',
|
description: '',
|
rootCmsItemId: '',
|
name: '',
|
type: '',
|
state: '',
|
groupId: '',
|
beginDate: '',
|
endDate: ''
|
})
|
|
const visiblePub = ref(false)
|
const questionData: any = ref([])
|
|
const scoreData: any = ref([])
|
// question Key
|
const questionKey = [
|
'Name',
|
'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'
|
]
|
|
let pages = reactive({
|
currentPage: 1,
|
page: 1,
|
pageSize: 15,
|
count: 0,
|
loading: false
|
})
|
// 作业列表
|
const tableData: any = ref([])
|
|
onMounted(() => {
|
const userCache: any = localStorage.getItem(config.userInfoKey)
|
if (userCache) {
|
userInfo.value = JSON.parse(userCache)
|
}
|
getTaskList()
|
})
|
|
// 分页
|
const handleSizeChange = (val: number) => {
|
pages.pageSize = val
|
getTaskList()
|
}
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val
|
pages.currentPage = val
|
getTaskList()
|
}
|
|
// 获取任务列表
|
const getTaskList = (filter?: any[], search?: any[]) => {
|
const filterList = filter ?? filterData.value
|
const searchList = search ?? []
|
pages.loading = true
|
const data = {
|
start: (pages.page - 1) * pages.pageSize,
|
size: pages.pageSize,
|
sort: {
|
type: 'Desc',
|
field: 'CreateDate'
|
},
|
filterList,
|
searchList,
|
groupId: classInfo?.id
|
}
|
MG.edu
|
.getTaskList(data)
|
.then((res: any) => {
|
pages.count = res.totalSize
|
if (res.datas.length > 0) {
|
tableData.value = res.datas?.map((item: any) => {
|
item.judgeScore = 0
|
item.otherScore = 0
|
if (item.submit?.id) {
|
item.submit?.submitAndCmsItemLinks?.forEach((citem: any) => {
|
if (citem.comments == 'judge') {
|
item.judgeScore += citem.score
|
}
|
if (citem.comments != 'judge') {
|
item.otherScore += citem.score
|
}
|
})
|
}
|
return {
|
...item,
|
totalScore: item.judgeScore + item.otherScore,
|
beginDate: moment(item.beginDate).format('YYYY-MM-DD'),
|
endDate: moment(item.endDate).format('YYYY-MM-DD')
|
}
|
})
|
} else {
|
tableData.value = []
|
}
|
pages.loading = false
|
})
|
.catch((e: any) => {
|
pages.loading = false
|
console.log(e)
|
})
|
}
|
|
// 搜索任务
|
const searchTask = () => {
|
const data = [
|
{
|
compareType: 'Contains',
|
keywords: searchKey.value,
|
field: 'Name'
|
}
|
]
|
pages.page = 1
|
pages.currentPage = 1
|
getTaskList(undefined, data)
|
}
|
|
// 表格tab事件{Waiting:未开始,Normal:进行中,Ended:已结束}
|
const tabCart = (event: Event | any) => {
|
let queryFilter: any = []
|
jobState.value = event.props.name
|
pages.page = 1
|
dataList.value = []
|
if (jobState.value == 'all') {
|
queryFilter = [...filterData.value]
|
}
|
if (jobState.value == 'payment') {
|
queryFilter = [...filterData.value, { field: 'State', value: 'Normal', subFilters: [] }]
|
}
|
if (jobState.value == 'complete') {
|
queryFilter = [...filterData.value, { field: 'State', value: 'Ended', subFilters: [] }]
|
}
|
getTaskList(queryFilter)
|
}
|
|
// 答题
|
const answer = (item: any) => {
|
router.push({
|
path: '/bookService/details/answer',
|
query: {
|
answerTitle: item.name,
|
taskId: item.id,
|
groupId: classInfo?.id,
|
answerType: 'task'
|
}
|
})
|
}
|
|
// 预览
|
const preview = (item: any) => {
|
router.push({
|
path: '/bookService/details/answer',
|
query: {
|
answerTitle: item.name,
|
taskId: item.id,
|
groupId: classInfo?.id,
|
answerType: 'task',
|
isPreview: 'true'
|
}
|
})
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.classManagePage-box {
|
padding: 20px;
|
.classManagePage-nav {
|
padding-bottom: 20px;
|
border-bottom: 1px solid #e6e8ed;
|
}
|
.classManagePage-content {
|
.cartClass {
|
.titleOptions {
|
width: 160px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
span {
|
height: 30px;
|
font-weight: bold;
|
font-size: 16px;
|
color: #333;
|
line-height: 30px;
|
text-align: left;
|
border-left: 6px solid #ff6c00;
|
padding-left: 10px;
|
}
|
}
|
margin-top: 20px;
|
::v-deep .el-tabs__nav-wrap::after {
|
background-color: #ff6d00;
|
height: 1px;
|
}
|
|
::v-deep .el-tabs__item {
|
width: 100px;
|
padding: 0;
|
color: #545c63;
|
}
|
|
::v-deep .is-active {
|
background-color: #ff6d00;
|
color: #fff;
|
border-radius: 3px 3px 0 0;
|
}
|
}
|
.headerBox {
|
padding: 20px 0;
|
overflow: hidden;
|
.searchBox {
|
width: 300px;
|
float: left;
|
.searchBtn {
|
background-color: var(--el-color-primary);
|
color: #fff;
|
border-top-left-radius: 0;
|
border-bottom-left-radius: 0;
|
}
|
}
|
}
|
::v-deep(.customDialog) {
|
border-radius: 5px;
|
margin: 10px auto;
|
padding-bottom: 20px;
|
.pubContent {
|
height: 800px;
|
}
|
}
|
.pageBox {
|
padding: 10px 0;
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
}
|
</style>
|
