前端增加题目中心

vue2/vue/src/views/Teacher/Questions.vue

@@ -1,18 +1,23 @@
 <template>
   <el-container style="min-height: 100vh">
-    <!-- 左侧导航 -->
+    <!-- 左侧边栏 -->
     <el-aside :width="sideWidth + 'px'" style="background-color: #f4f6f9; box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1)">
       <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
     </el-aside>
-    <!-- 右侧内容 -->
+
+    <!-- 主内容 -->
     <el-container>
-      <!-- 顶部导航 -->
+      <!-- 顶部 Header -->
       <el-header style="border-bottom: 1px solid #e0e0e0; background-color: #ffffff; padding: 10px;">
         <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
       </el-header>
+
       <el-main>
-        <div class="question-add-container">
-          <!-- 输入框用于添加题目，设置合适的宽度和样式 -->
+        <!-- 加载中显示 -->
+        <el-spin v-if="loading" size="large" />
+
+        <!-- 添加题目部分 -->
+        <div class="question-add-container" v-if="!loading">
           <el-input
               placeholder="请输入题目内容"
               v-model="newQuestion"
@@ -28,59 +33,128 @@
             添加题目
           </el-button>
         </div>
-        <el-collapse
-            v-model="activeNames"
-            class="question-collapse"
-            accordion
-            :expand-icon="false"
-        >
-          <el-collapse-item
+
+        <!-- 题目列表展示 -->
+        <el-list v-if="!loading">
+          <el-list-item
               v-for="(question, index) in questionList"
-              :key="index"
-              :name="index.toString()"
+              :key="question.id"
               class="question-item"
           >
-            <template #title>
+            <div class="question-item-content">
+              <!-- 题目标题和操作按钮 -->
               <div class="question-title-container">
-                <span class="question-title">{{ question.title }}</span>
-                <el-button
-                    type="danger"
-                    icon="el-icon-delete"
-                    circle
-                    @click="deleteQuestion(index)"
-                />
+                <span class="question-title">{{ question.id }}</span>
+                <div class="button-group">
+                  <el-button
+                      type="info"
+                      icon="el-icon-view"
+                      circle
+                      @click="previewQuestion(question)"
+                      class="preview-button"
+                  />
+                  <el-button
+                      type="danger"
+                      icon="el-icon-delete"
+                      circle
+                      @click="deleteQuestion(index)"
+                      class="delete-button"
+                  />
+                </div>
+              </div>
+              <!-- 题目内容及元数据 -->
+              <div class="question-content">
+                <p>{{ question.content }}</p>
+                <div class="question-meta">
+                  <span class="subject-type">学科类型: {{ question.subject }}</span>
+                  <span class="question-difficulty">难度: {{ question.difficulty }}</span>
+                  <span class="created-at">创建时间: {{ question.createtime}}</span>
+                </div>
               </div>
-            </template>
-            <div class="question-content">{{ question.content }}</div>
-          </el-collapse-item>
-        </el-collapse>
+            </div>
+          </el-list-item>
+        </el-list>
+
+        <!-- 分页部分 -->
+        <el-pagination
+            v-if="!loading && totalQuestions > 0"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="totalQuestions"
+            @current-change="handlePageChange"
+            layout="total, prev, pager, next, jumper"
+        />
       </el-main>
     </el-container>
+
+    <!-- 预览弹窗 -->
+    <el-dialog
+      title="预览题目"
+      :visible.sync="previewVisible"
+      width="50%"
+      :before-close="handleClosePreview"
+    >
+     <div class="question-preview">
+        <p><strong>题目ID:</strong> {{ previewQuestionData.id }}</p>
+        <p><strong>题目内容:</strong> {{ previewQuestionData.content }}</p>
+        <div v-if="previewQuestionData.chance && previewQuestionData.chance.length > 0">
+          <p><strong>选项:</strong></p>
+          <el-row v-for="(option, index) in previewQuestionData.chance" :key="index" type="flex" justify="start" align="middle" class="option-row">
+            <el-col :span="24">
+              <el-tag :type="'success'" class="option-tag">
+                {{ option.label }}: {{ option.text }}
+              </el-tag>
+            </el-col>
+          </el-row>
+        </div>
+        <p><strong>学科类型:</strong> {{ previewQuestionData.subject }}</p>
+        <p><strong>难度:</strong> {{ previewQuestionData.difficulty }}</p>
+        <p><strong>创建时间:</strong> {{ previewQuestionData.createtime | formatDate }}</p>
+     </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="previewVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
 import Header from "@/components/Teacher/Header.vue";
 import Aside from "@/components/Teacher/Aside.vue";
+import axios from "axios"; // Import axios for API requests
 
 export default {
   name: "Questions",
-  components: {Aside, Header},
+  components: { Aside, Header },
   data() {
     return {
       collapseBtnClass: "el-icon-s-fold",
       isCollapse: false,
       sideWidth: 200,
       logoTextShow: true,
-      questionList: [], // 存储题目列表数据，每个元素是包含title和content属性的对象
-      newQuestion: "", // 用于绑定输入框中输入的新题目内容
-      activeNames: [], // 控制折叠面板展开状态
-      isAddingQuestion: false // 标记是否正在添加题目，用于按钮加载状态显示
+      questionList: [], // Store question data
+      newQuestion: "", // For binding the input field
+      activeNames: [], // Manage the collapse panel state
+      isAddingQuestion: false, // Flag to show if question is being added
+      currentPage: 1, // Current page for pagination
+      pageSize: 10, // Number of questions per page
+      totalQuestions: 0, // Total number of questions
+      loading: true, // Loading state
+      previewVisible: false, // Control visibility of preview modal
+      previewQuestionData: {}, // Data to be shown in the preview modal
+      questionTypes: {
+        1: '单选题',
+        2: '多选题',
+        3: '填空题',
+        4: '判断题',
+        5: '解答题',
+      },
     };
   },
   methods: {
+    // Toggle the sidebar collapse state
     collapse() {
-      this.isCollapse =!this.isCollapse;
+      this.isCollapse = !this.isCollapse;
       if (this.isCollapse) {
         this.sideWidth = 64;
         this.collapseBtnClass = "el-icon-s-unfold";
@@ -91,59 +165,209 @@ export default {
         this.logoTextShow = true;
       }
     },
+
+    // Add a new question
     addQuestion() {
-      this.isAddingQuestion = true; // 显示按钮加载状态
+      this.isAddingQuestion = true;
       setTimeout(() => {
         if (this.newQuestion.trim() !== "") {
           this.questionList.push({
             title: `题目${this.questionList.length + 1}`,
-            content: this.newQuestion
+            content: this.newQuestion,
+            subjectType: "数学", // Example subject type
+            difficulty: "中等",  // Example difficulty level
+            createdAt: new Date(), // Current time
           });
-          this.newQuestion = ""; // 清空输入框
+          this.newQuestion = ""; // Clear input field
         }
-        this.isAddingQuestion = false; // 隐藏按钮加载状态
+        this.isAddingQuestion = false;
       }, 500);
     },
+
+    // Delete a question
     deleteQuestion(index) {
       this.questionList.splice(index, 1);
+    },
+
+    // Preview a question in a modal
+    previewQuestion(question) {
+      this.previewQuestionData = question; // Set data for preview
+      this.previewVisible = true; // Open the preview modal
+    },
+
+    // Handle page change
+    handlePageChange(page) {
+      this.currentPage = page;
+      this.fetchQuestions();
+    },
+
+    // Fetch questions from backend API
+    async fetchQuestions() {
+      try {
+        const token = this.$store.state.tokens[this.userId];
+        if (!token) {
+          alert("用户未登录，请重新登录！");
+          this.$router.push("/login");
+          return;
+        }
+
+        const response = await axios.get("http://localhost:8080/examcreate/selectList", {
+          params: {
+            pagenum: this.currentPage,
+            pagesize: this.pageSize,
+          },
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          }
+        });
+
+        if (response.data.code === 200) {
+          this.questionList = response.data.data.records.map((item) => ({
+            ...item,
+            subjectType: item.subjectType || "未分类", // Set default values
+            difficulty: item.difficulty || "未知",
+            createdAt: item.createdAt || new Date(),
+          }));
+          this.totalQuestions = response.data.data.total;
+        } else {
+          this.$message.error("获取数据失败");
+        }
+      } catch (error) {
+        console.error("获取数据失败", error);
+        this.$message.error("获取题库失败");
+      } finally {
+        this.loading = false; // Stop loading once data is fetched
+      }
+    },
+
+    // Close preview modal
+    handleClosePreview() {
+      this.previewVisible = false;
+      this.previewQuestionData = {}; // Clear preview data
     }
   },
+
+  // Fetch data when component is created
   created() {
     this.userId = this.$route.query.userId;
-  }
+    this.fetchQuestions();
+  },
+
+  // Format date filter for display
+  filters: {
+    formatDate(value) {
+      if (!value) return '';
+      const date = new Date(value);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    },
+  },
 };
-</script>
 
+</script>
 <style scoped lang="scss">
 .question-add-container {
   display: flex;
   align-items: center;
-  margin-bottom: 15px;
-}
-
-.question-collapse {
-  border: none;
+  margin-bottom: 20px; /* Increased margin for better spacing */
 }
 
 .question-item {
   border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  margin-bottom: 10px;
+  border-radius: 8px;
+  margin-bottom: 20px; /* Increased space between items */
+  background-color: #fff;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.question-item:hover {
+  transform: scale(1.02); /* Slight zoom effect on hover */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .question-title-container {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
+  justify-content: space-between; /* Ensures that title and button are on the same line */
+  align-items: center; /* Vertically aligns items */
+  padding: 12px 15px;
+  background-color: #f9f9f9;
+  border-bottom: 2px solid #e0e0e0;
 }
 
 .question-title {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: bold;
+  color: #333;
+  margin-right: 15px;
+  text-transform: capitalize; /* Capitalize first letters */
+}
+
+.button-group {
+  display: flex;
+  align-items: center;
+}
+
+.preview-button {
+  background-color: #20a0ff;
+  margin-right: 10px;
+}
+
+.delete-button {
+  background-color: #f56c6c;
+  border: none;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.delete-button:hover {
+  background-color: #e74c3c;
+  transform: scale(1.1); /* Zoom effect on hover */
 }
 
 .question-content {
-  padding: 10px;
+  padding: 15px;
+  font-size: 16px;
+  color: #666;
+  line-height: 1.6;
+  border-top: 1px solid #e0e0e0;
+}
+
+.question-meta {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #999;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.subject-type,
+.question-difficulty,
+.created-at {
+  margin-right: 20px;
+}
+
+.el-pagination {
+  margin-top: 30px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.el-pagination .el-button {
+  font-size: 14px; /* Slightly smaller pagination buttons */
+}
+
+.el-pagination .el-button:hover {
+  background-color: #f0f0f0;
+}
+
+/* Modal styling */
+.question-preview p {
+  margin: 10px 0;
+  font-size: 16px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
 }
 </style>