|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <nav class="breadcrumb" aria-label="breadcrumbs">
|
|
|
+ <ul>
|
|
|
+ <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
|
|
|
+ <li>
|
|
|
+ <router-link :to="`/student-course/${course.id}/dashboard`">{{
|
|
|
+ course.name
|
|
|
+ }}</router-link>
|
|
|
+ </li>
|
|
|
+ <li class="is-active">
|
|
|
+ <router-link :to="`/student-course/${course.id}/review`"
|
|
|
+ >查看题目</router-link
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ <!-- container面板-->
|
|
|
+ <div class="data-table">
|
|
|
+ <!--下拉框&搜索框-->
|
|
|
+ <div class="form-group">
|
|
|
+ <!--下拉框-->
|
|
|
+ <b-field>
|
|
|
+ <b-select placeholder="选择题目类型">
|
|
|
+ <option
|
|
|
+ v-for="option in questionType"
|
|
|
+ :value="option.title"
|
|
|
+ :key="option.id"
|
|
|
+ >
|
|
|
+ {{ option.title }}
|
|
|
+ </option>
|
|
|
+ </b-select>
|
|
|
+ </b-field>
|
|
|
+ <!--搜索框-->
|
|
|
+ <b-field>
|
|
|
+ <b-input
|
|
|
+ placeholder="输入关键字查找题目"
|
|
|
+ type="search"
|
|
|
+ icon="magnify"
|
|
|
+ >
|
|
|
+ </b-input>
|
|
|
+ </b-field>
|
|
|
+ </div>
|
|
|
+ <!--题目table-->
|
|
|
+ <div class="question-list">
|
|
|
+ <b-table
|
|
|
+ :data="data"
|
|
|
+ paginated
|
|
|
+ per-page="5"
|
|
|
+ detailed
|
|
|
+ detail-key="id"
|
|
|
+ @details-open="
|
|
|
+ (row, index) => $toast.open(`Expanded ${row.user.first_name}`)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template slot-scope="props">
|
|
|
+ <b-table-column field="id" label="ID" width="40" numeric sortable>
|
|
|
+ {{ props.row.id }}
|
|
|
+ </b-table-column>
|
|
|
+
|
|
|
+ <b-table-column field="user.first_name" label="题目名称">
|
|
|
+ {{ props.row.name }}
|
|
|
+ </b-table-column>
|
|
|
+
|
|
|
+ <b-table-column field="user.last_name" label="题目描述">
|
|
|
+ {{ props.row.description }}
|
|
|
+ </b-table-column>
|
|
|
+
|
|
|
+ <b-table-column field="date" label="题目难度" sortable centered>
|
|
|
+ <span class="tag is-success"> {{ props.row.difficulty }} </span>
|
|
|
+ </b-table-column>
|
|
|
+
|
|
|
+ <b-table-column
|
|
|
+ label="平均时长"
|
|
|
+ field="expectTime"
|
|
|
+ sortable
|
|
|
+ centered
|
|
|
+ >
|
|
|
+ {{ props.row.expectTime }}
|
|
|
+ </b-table-column>
|
|
|
+ <b-table-column label="题目标签">
|
|
|
+ {{ props.row.assignmentType }}
|
|
|
+ </b-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot="detail" slot-scope="props">
|
|
|
+ <article class="media">
|
|
|
+ <!--<figure class="media-left">-->
|
|
|
+ <!--<p class="image is-64x64">-->
|
|
|
+ <!--<img src="/static/img/placeholder-128x128.png">-->
|
|
|
+ <!--</p>-->
|
|
|
+ <!--</figure>-->
|
|
|
+ <div class="media-content">
|
|
|
+ <div class="content">
|
|
|
+ <p>
|
|
|
+ <strong>{{ props.row.name }}</strong>
|
|
|
+ <small>@{{ props.row.expectTime }}分钟</small> <br />
|
|
|
+ {{ props.row.description }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </template>
|
|
|
+ </b-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from "vuex";
|
|
|
+import { getStudentCourseReviewList } from "@/api/review";
|
|
|
+
|
|
|
+const data = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "第一题",
|
|
|
+ description: "这题xxxxxxxx",
|
|
|
+ difficulty: "easy",
|
|
|
+ expectTime: 20,
|
|
|
+ assignmentType: "文档作业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "第一题",
|
|
|
+ description: "这题xxxxxxxx",
|
|
|
+ difficulty: "easy",
|
|
|
+ expectTime: 25,
|
|
|
+ assignmentType: "文档作业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "第一题",
|
|
|
+ description: "这题xxxxxxxx",
|
|
|
+ difficulty: "easy",
|
|
|
+ expectTime: 35,
|
|
|
+ assignmentType: "文档作业"
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ course: state => state.course.currentCourse
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ courses: [],
|
|
|
+ review: [],
|
|
|
+ questionType: [
|
|
|
+ { id: 1, title: "文档作业题目" },
|
|
|
+ { id: 2, title: "代码作业题目" }
|
|
|
+ ],
|
|
|
+ data
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ getStudentCourseReviewList(this.courses.id).then(
|
|
|
+ value => (this.review = value.data)
|
|
|
+ );
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.breadcrumb a {
|
|
|
+ /*color: #7957d5;*/
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.data-table {
|
|
|
+ width: 100%;
|
|
|
+ padding: 30px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.question-list {
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+.form-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+</style>
|
