|
|
|
|
@ -13,36 +13,60 @@
|
|
|
|
|
</el-header>
|
|
|
|
|
|
|
|
|
|
<el-main>
|
|
|
|
|
<!-- 加载中显示 -->
|
|
|
|
|
<el-spin v-if="loading" size="large" />
|
|
|
|
|
<!-- 筛选部分 -->
|
|
|
|
|
<div class="filter-container">
|
|
|
|
|
<el-row gutter={20} class="filter-row">
|
|
|
|
|
<!-- 学科筛选 -->
|
|
|
|
|
<el-col :span="7">
|
|
|
|
|
<el-select v-model="selectedSubject" placeholder="选择学科" @change="filterQuestions" class="filter-item">
|
|
|
|
|
<el-option label="数学" value="数学" />
|
|
|
|
|
<el-option label="语文" value="语文" />
|
|
|
|
|
<el-option label="英语" value="英语" />
|
|
|
|
|
<el-option label="物理" value="物理" />
|
|
|
|
|
<el-option label="化学" value="化学" />
|
|
|
|
|
<el-option label="无" value="" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- 添加题目部分 -->
|
|
|
|
|
<div class="question-add-container" v-if="!loading">
|
|
|
|
|
<el-input
|
|
|
|
|
placeholder="请输入题目内容"
|
|
|
|
|
v-model="newQuestion"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 60%; margin-right: 10px;"
|
|
|
|
|
/>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="addQuestion"
|
|
|
|
|
icon="el-icon-plus"
|
|
|
|
|
:loading="isAddingQuestion"
|
|
|
|
|
>
|
|
|
|
|
添加题目
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 题型筛选 -->
|
|
|
|
|
<el-col :span="7">
|
|
|
|
|
<el-select v-model="selectedType" placeholder="选择题型" @change="filterQuestions" class="filter-item">
|
|
|
|
|
<el-option label="单选题" value="1" />
|
|
|
|
|
<el-option label="多选题" value="2" />
|
|
|
|
|
<el-option label="填空题" value="3" />
|
|
|
|
|
<el-option label="判断题" value="4" />
|
|
|
|
|
<el-option label="解答题" value="5" />
|
|
|
|
|
<el-option label="无" value="" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- 重置和添加题目按钮 -->
|
|
|
|
|
<el-col :span="10" class="button-group">
|
|
|
|
|
<el-button type="primary" @click="resetFilters" class="reset-btn">重置</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="addQuestion"
|
|
|
|
|
icon="el-icon-plus"
|
|
|
|
|
:loading="isAddingQuestion"
|
|
|
|
|
class="add-btn"
|
|
|
|
|
>
|
|
|
|
|
添加题目
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 加载中显示 -->
|
|
|
|
|
<el-spin v-if="loading" size="large" />
|
|
|
|
|
|
|
|
|
|
<!-- 题目列表展示 -->
|
|
|
|
|
<el-list v-if="!loading">
|
|
|
|
|
<el-list v-if="!loading && filteredQuestions.length > 0">
|
|
|
|
|
<el-list-item
|
|
|
|
|
v-for="(question, index) in questionList"
|
|
|
|
|
v-for="(question, index) in filteredQuestions"
|
|
|
|
|
:key="question.id"
|
|
|
|
|
class="question-item"
|
|
|
|
|
>
|
|
|
|
|
<div class="question-item-content">
|
|
|
|
|
<!-- 题目标题和操作按钮 -->
|
|
|
|
|
<div class="question-title-container">
|
|
|
|
|
<span class="question-title">{{ question.id }}</span>
|
|
|
|
|
<div class="button-group">
|
|
|
|
|
@ -62,13 +86,12 @@
|
|
|
|
|
/>
|
|
|
|
|
</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>
|
|
|
|
|
<span class="created-at">创建时间: {{ question.createtime }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -99,7 +122,7 @@
|
|
|
|
|
<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-row v-for="(option, index) in previewQuestionData.chance" :key="index" class="option-row">
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-tag :type="'success'" class="option-tag">
|
|
|
|
|
{{ option.label }}: {{ option.text }}
|
|
|
|
|
@ -121,7 +144,7 @@
|
|
|
|
|
<script>
|
|
|
|
|
import Header from "@/components/Teacher/Header.vue";
|
|
|
|
|
import Aside from "@/components/Teacher/Aside.vue";
|
|
|
|
|
import axios from "axios"; // Import axios for API requests
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Questions",
|
|
|
|
|
@ -132,76 +155,38 @@ export default {
|
|
|
|
|
isCollapse: false,
|
|
|
|
|
sideWidth: 200,
|
|
|
|
|
logoTextShow: true,
|
|
|
|
|
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: '解答题',
|
|
|
|
|
},
|
|
|
|
|
questionList: [],
|
|
|
|
|
filteredQuestions: [],
|
|
|
|
|
newQuestion: "",
|
|
|
|
|
isAddingQuestion: false,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
totalQuestions: 0,
|
|
|
|
|
loading: true,
|
|
|
|
|
previewVisible: false,
|
|
|
|
|
previewQuestionData: {},
|
|
|
|
|
selectedSubject: "",
|
|
|
|
|
selectedType: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// Toggle the sidebar collapse state
|
|
|
|
|
collapse() {
|
|
|
|
|
this.isCollapse = !this.isCollapse;
|
|
|
|
|
if (this.isCollapse) {
|
|
|
|
|
this.sideWidth = 64;
|
|
|
|
|
this.collapseBtnClass = "el-icon-s-unfold";
|
|
|
|
|
this.logoTextShow = false;
|
|
|
|
|
} else {
|
|
|
|
|
this.sideWidth = 200;
|
|
|
|
|
this.collapseBtnClass = "el-icon-s-fold";
|
|
|
|
|
this.logoTextShow = true;
|
|
|
|
|
}
|
|
|
|
|
this.sideWidth = this.isCollapse ? 64 : 200;
|
|
|
|
|
this.collapseBtnClass = this.isCollapse ? "el-icon-s-unfold" : "el-icon-s-fold";
|
|
|
|
|
this.logoTextShow = !this.isCollapse;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Add a new question
|
|
|
|
|
addQuestion() {
|
|
|
|
|
this.isAddingQuestion = true;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (this.newQuestion.trim() !== "") {
|
|
|
|
|
this.questionList.push({
|
|
|
|
|
title: `题目${this.questionList.length + 1}`,
|
|
|
|
|
content: this.newQuestion,
|
|
|
|
|
subjectType: "数学", // Example subject type
|
|
|
|
|
difficulty: "中等", // Example difficulty level
|
|
|
|
|
createdAt: new Date(), // Current time
|
|
|
|
|
});
|
|
|
|
|
this.newQuestion = ""; // Clear input field
|
|
|
|
|
}
|
|
|
|
|
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
|
|
|
|
|
this.previewQuestionData = question;
|
|
|
|
|
this.previewVisible = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 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];
|
|
|
|
|
@ -223,38 +208,83 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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.questionList = response.data.data.records;
|
|
|
|
|
this.totalQuestions = response.data.data.total;
|
|
|
|
|
this.filterQuestions();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("获取数据失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("获取数据失败", error);
|
|
|
|
|
this.$message.error("获取题库失败");
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false; // Stop loading once data is fetched
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
filterQuestions() {
|
|
|
|
|
let filteredQuestions = this.questionList;
|
|
|
|
|
|
|
|
|
|
if (this.selectedSubject) {
|
|
|
|
|
filteredQuestions = filteredQuestions.filter(item => item.subject === this.selectedSubject);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.selectedType) {
|
|
|
|
|
filteredQuestions = filteredQuestions.filter(item => item.questiontype === parseInt(this.selectedType));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.filteredQuestions = filteredQuestions;
|
|
|
|
|
this.totalQuestions = filteredQuestions.length;
|
|
|
|
|
this.currentPage = 1;
|
|
|
|
|
this.fetchQuestions();
|
|
|
|
|
this.loading = false;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
resetFilters() {
|
|
|
|
|
this.selectedSubject = "";
|
|
|
|
|
this.selectedType = "";
|
|
|
|
|
this.filterQuestions();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
deleteQuestion(index) {
|
|
|
|
|
this.filteredQuestions.splice(index, 1);
|
|
|
|
|
this.totalQuestions -= 1;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async addQuestion() {
|
|
|
|
|
if (!this.newQuestion) {
|
|
|
|
|
this.$message.warning("请输入题目内容");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.isAddingQuestion = true;
|
|
|
|
|
try {
|
|
|
|
|
const response = await axios.post("http://localhost:8080/examcreate/addQuestion", {
|
|
|
|
|
content: this.newQuestion,
|
|
|
|
|
});
|
|
|
|
|
if (response.data.code === 200) {
|
|
|
|
|
this.newQuestion = "";
|
|
|
|
|
this.fetchQuestions();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("添加题目失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("添加题目失败", error);
|
|
|
|
|
this.$message.error("添加题目失败");
|
|
|
|
|
} finally {
|
|
|
|
|
this.isAddingQuestion = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Close preview modal
|
|
|
|
|
handleClosePreview() {
|
|
|
|
|
this.previewVisible = false;
|
|
|
|
|
this.previewQuestionData = {}; // Clear preview data
|
|
|
|
|
}
|
|
|
|
|
this.previewQuestionData = {};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 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 '';
|
|
|
|
|
@ -263,111 +293,68 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.question-add-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 20px; /* Increased margin for better spacing */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-item {
|
|
|
|
|
border: 1px solid #e0e0e0;
|
|
|
|
|
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);
|
|
|
|
|
<style scoped>
|
|
|
|
|
.filter-container {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-title-container {
|
|
|
|
|
.filter-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
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;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-title {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
text-transform: capitalize; /* Capitalize first letters */
|
|
|
|
|
.filter-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.delete-button:hover {
|
|
|
|
|
background-color: #e74c3c;
|
|
|
|
|
transform: scale(1.1); /* Zoom effect on hover */
|
|
|
|
|
.reset-btn, .add-btn {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 38px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-content {
|
|
|
|
|
.question-item {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #666;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
border-top: 1px solid #e0e0e0;
|
|
|
|
|
//border: 1px solid #ddd;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-meta {
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #999;
|
|
|
|
|
.question-title-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subject-type,
|
|
|
|
|
.question-difficulty,
|
|
|
|
|
.created-at {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
.preview-button, .delete-button {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-pagination {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
.question-content {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-pagination .el-button {
|
|
|
|
|
font-size: 14px; /* Slightly smaller pagination buttons */
|
|
|
|
|
.question-meta {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-pagination .el-button:hover {
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
.option-row {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Modal styling */
|
|
|
|
|
.question-preview p {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
.option-tag {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
