|
|
@@ -5,14 +5,16 @@
|
|
|
{{ quizDetail.name }}
|
|
|
<c-button class="delete-button" :left="12" text theme="red" @click="handleDelete" icon="close">删除测试</c-button>
|
|
|
</back-title>
|
|
|
- <div class="sub-title">学生提交结果列表</div>
|
|
|
- <search-bar></search-bar>
|
|
|
+ <quiz-statistic :quiz-id="$route.params.quizId"></quiz-statistic>
|
|
|
+ <search-bar v-model="searchKey"></search-bar>
|
|
|
<pagination @change="handlePageChange" v-show="result && result.length > 0" :page="page" :size="size"
|
|
|
:total-elements="totalElements"></pagination>
|
|
|
- <template v-if="quizDetail.state === QuizState.closed || quizDetail.state === QuizState.ongoing">
|
|
|
+ <div class="no-content-warning" v-if="result === null">加载中...</div>
|
|
|
+ <div class="answer-card-container"
|
|
|
+ v-else-if="quizDetail.state === QuizState.closed || quizDetail.state === QuizState.ongoing">
|
|
|
<answer-card @click="handleSelectAnswer(answer)" v-for="answer of result" :key="answer.studentId"
|
|
|
:answer="answer"></answer-card>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="quiz">
|
|
|
<div class="sub-title">学生答案:{{showStudentName ? showStudentName : '[ 未选择 ]'}}</div>
|
|
|
@@ -32,29 +34,42 @@ import AnswerCard from '@/components/Cards/AnswerCard'
|
|
|
import CButton from '@/components/Basic/CButton'
|
|
|
import Pagination from '@/components/Pagination'
|
|
|
import SearchBar from '@/components/Basic/SearchBar'
|
|
|
+import debounce from '@/utils/debounce'
|
|
|
+import QuizStatistic from '@/views/quiz/components/QuizStatistic'
|
|
|
|
|
|
export default {
|
|
|
name: 'QuizDetail',
|
|
|
- components: { SearchBar, Pagination, CButton, AnswerCard, QuizDetailFactory, BackTitle },
|
|
|
+ components: { QuizStatistic, SearchBar, Pagination, CButton, AnswerCard, QuizDetailFactory, BackTitle },
|
|
|
data () {
|
|
|
return {
|
|
|
page: 1,
|
|
|
- size: 12,
|
|
|
+ size: 9,
|
|
|
totalElements: 1,
|
|
|
+ searchKey: '',
|
|
|
|
|
|
quizDetail: createDefaultQuiz(),
|
|
|
- result: [],
|
|
|
+ result: null,
|
|
|
+
|
|
|
showStudentName: '',
|
|
|
showScore: '',
|
|
|
showSubmitAt: '',
|
|
|
showAnswers: [],
|
|
|
|
|
|
- QuizState
|
|
|
+ QuizState,
|
|
|
+ debounceSearch: debounce(() => {
|
|
|
+ this.page = 1
|
|
|
+ this.fetchQuizStudentAnswers({})
|
|
|
+ }, 500)
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.fetchQuizDetail()
|
|
|
- this.fetchQuizStudentAnswers({ page: 1 })
|
|
|
+ this.fetchQuizStudentAnswers({})
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ searchKey () {
|
|
|
+ this.debounceSearch()
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
fetchQuizDetail () {
|
|
|
@@ -65,9 +80,10 @@ export default {
|
|
|
},
|
|
|
fetchQuizStudentAnswers ({ page = this.page }) {
|
|
|
const { quizId } = this.$route.params
|
|
|
- getQuizStudentAnswers({ quizId: quizId })
|
|
|
+ getQuizStudentAnswers({ quizId: quizId, page, size: this.size, key: this.searchKey })
|
|
|
.then(res => {
|
|
|
this.result = res.data
|
|
|
+ this.totalElements = res.page.totalElements
|
|
|
})
|
|
|
.catch(err => { this.$setErrorMessage(err.response.data.msg) })
|
|
|
},
|
|
|
@@ -89,7 +105,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handlePageChange ({ page }) {
|
|
|
-
|
|
|
+ this.page = page
|
|
|
+ this.fetchQuizStudentAnswers({ page })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -97,15 +114,26 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.quiz-detail {
|
|
|
- max-width: 1000px;
|
|
|
+ max-width: 1100px;
|
|
|
margin: 0 auto;
|
|
|
- padding: 64px 24px;
|
|
|
+ padding: 32px 24px;
|
|
|
}
|
|
|
|
|
|
.delete-button {
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
+.answer-card-container {
|
|
|
+ margin: 12px 0 0 0 ;
|
|
|
+ column-width: 150px;
|
|
|
+ column-gap: 12px;
|
|
|
+
|
|
|
+ .answer-card {
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ break-inside: avoid;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
@media (max-width: 800px) {
|
|
|
|
|
|
}
|
|
|
@@ -121,9 +149,12 @@ export default {
|
|
|
flex: 1;
|
|
|
}
|
|
|
.quiz {
|
|
|
+ margin: -16px 0;
|
|
|
width: 100px;
|
|
|
- padding: 0 12px;
|
|
|
+ padding: 16px 24px 16px 12px;
|
|
|
flex: 1;
|
|
|
+ max-height: calc(100vh - 64px);
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
}
|
|
|
|