|
@@ -0,0 +1,433 @@
|
|
|
|
+<template>
|
|
|
|
+ <section class="content">
|
|
|
|
+ <LinkTitlesCustom :currentPaths="['添加试题']" />
|
|
|
|
+ <!-- 正文信息 -->
|
|
|
|
+ <div class="box-body">
|
|
|
|
+ <el-form
|
|
|
|
+ :inline="true"
|
|
|
|
+ :model="formSearch"
|
|
|
|
+ label-position="right"
|
|
|
|
+ label-width="90px"
|
|
|
|
+ >
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="课程">
|
|
|
|
+ <el-select
|
|
|
|
+ class="search_width"
|
|
|
|
+ :disabled="true"
|
|
|
|
+ v-model="course"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ size="small"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in courseList"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ >
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="题型">
|
|
|
|
+ <el-select
|
|
|
|
+ class="search_width"
|
|
|
|
+ v-model="formSearch.questionType"
|
|
|
|
+ @change="searchQuestionPaper"
|
|
|
|
+ placeholder="请选择题型"
|
|
|
|
+ size="small"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in questionTypes"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ >
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="题干">
|
|
|
|
+ <el-input
|
|
|
|
+ class="search_width"
|
|
|
|
+ v-model="formSearch.quesBody"
|
|
|
|
+ placeholder="请输入题干"
|
|
|
|
+ @blur="searchQuestionPaper"
|
|
|
|
+ size="small"
|
|
|
|
+ >
|
|
|
|
+ </el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <div class="search_down">
|
|
|
|
+ <el-button
|
|
|
|
+ size="small"
|
|
|
|
+ type="primary"
|
|
|
|
+ icon="el-icon-circle-check"
|
|
|
|
+ @click="submitQues()"
|
|
|
|
+ >确定</el-button
|
|
|
|
+ >
|
|
|
|
+ <el-button
|
|
|
|
+ size="small"
|
|
|
|
+ type="success"
|
|
|
|
+ icon="el-icon-caret-left"
|
|
|
|
+ :plain="true"
|
|
|
|
+ @click="back()"
|
|
|
|
+ >返回</el-button
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-form>
|
|
|
|
+
|
|
|
|
+ <!-- 页面列表 -->
|
|
|
|
+ <el-table
|
|
|
|
+ :data="tableData"
|
|
|
|
+ border
|
|
|
|
+ style="width: 100%;"
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column type="selection" width="45"> </el-table-column>
|
|
|
|
+ <el-table-column label="课程">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span v-if="scope.row.course != null">{{
|
|
|
|
+ scope.row.course.name
|
|
|
|
+ }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="题型">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.questionType | questionType }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="题干">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span class="small">
|
|
|
|
+ <a
|
|
|
|
+ href="javascript:;"
|
|
|
|
+ @click="prevViewQues(scope.row)"
|
|
|
|
+ v-html="scope.row.quesBody"
|
|
|
|
+ >
|
|
|
|
+ </a>
|
|
|
|
+ </span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <!--分页栏-->
|
|
|
|
+ <div class="page pull-right">
|
|
|
|
+ <el-pagination
|
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
|
+ :current-page="currentPage"
|
|
|
|
+ :page-size="pageSize"
|
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
|
+ :total="total"
|
|
|
|
+ >
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="text-left">
|
|
|
|
+ <el-dialog
|
|
|
|
+ @close="closeQuesDialog"
|
|
|
|
+ v-loading.body="dialogLoading"
|
|
|
|
+ title="试题预览"
|
|
|
|
+ :visible.sync="quesDialog"
|
|
|
|
+ >
|
|
|
|
+ <el-form :model="quesModel" label-position="right" label-width="80px">
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
+ <el-col :xs="10" :sm="10" :md="10" :lg="10">
|
|
|
|
+ <el-form-item label="题型">
|
|
|
|
+ <el-select
|
|
|
|
+ :disabled="true"
|
|
|
|
+ v-model="quesModel.questionType"
|
|
|
|
+ placeholder="题型"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in questionTypes"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ >
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
+ <el-col :xs="30" :sm="30" :md="30" :lg="30">
|
|
|
|
+ <el-form-item label="题干">
|
|
|
|
+ <span v-html="quesModel.quesBody"></span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <!--非套题-->
|
|
|
|
+ <div v-if="quesModel.questionType !== 'NESTED_ANSWER_QUESTION'">
|
|
|
|
+ <el-row
|
|
|
|
+ :gutter="10"
|
|
|
|
+ v-for="(quesOption, index) in quesModel.quesOptions"
|
|
|
|
+ :key="quesOption.number"
|
|
|
|
+ >
|
|
|
|
+ <el-col :xs="30" :sm="30" :md="30" :lg="30">
|
|
|
|
+ <el-form-item :label="index | optionOrderWordFilter">
|
|
|
|
+ <span v-html="quesOption.optionBody"></span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <!--套题-->
|
|
|
|
+ <div v-if="quesModel.questionType === 'NESTED_ANSWER_QUESTION'">
|
|
|
|
+ <el-row
|
|
|
|
+ :gutter="10"
|
|
|
|
+ v-for="(subQuestionModel, index) in quesModel.subQuestions"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <el-col :xs="30" :sm="30" :md="30" :lg="30">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-form-item label="题目">
|
|
|
|
+ <span v-html="subQuestionModel.quesBody"></span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row
|
|
|
|
+ :gutter="10"
|
|
|
|
+ v-for="(subQuesOption, index) in subQuestionModel.quesOptions"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <el-col :xs="30" :sm="30" :md="30" :lg="30">
|
|
|
|
+ <el-form-item :label="index | optionOrderWordFilter">
|
|
|
|
+ <span v-html="subQuesOption.optionBody"></span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-form-item label="答案">
|
|
|
|
+ <span v-html="subQuestionModel.quesAnswer"></span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!--非套题答案-->
|
|
|
|
+ <div v-if="quesModel.questionType !== 'NESTED_ANSWER_QUESTION'">
|
|
|
|
+ <el-form-item label="答案">
|
|
|
|
+ <span v-html="answer"></span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+ </section>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import { QUESTION_API } from "@/constants/constants";
|
|
|
|
+import { QUESTION_TYPES } from "../constants/constants";
|
|
|
|
+import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
|
|
|
|
+export default {
|
|
|
|
+ components: { LinkTitlesCustom },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ formSearch: {
|
|
|
|
+ questionType: "",
|
|
|
|
+ quesBody: ""
|
|
|
|
+ },
|
|
|
|
+ course: "",
|
|
|
|
+ paperId: "",
|
|
|
|
+ paperDetailId: "",
|
|
|
|
+ parentView: "",
|
|
|
|
+ courseList: [],
|
|
|
|
+ tableData: [],
|
|
|
|
+ multipleSelection: [],
|
|
|
|
+ currentPage: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ total: 10,
|
|
|
|
+ courseName: "",
|
|
|
|
+ quesModel: {},
|
|
|
|
+ questionTypes: QUESTION_TYPES,
|
|
|
|
+ quesDialog: false,
|
|
|
|
+ loading: false,
|
|
|
|
+ dialogLoading: false,
|
|
|
|
+ singleRightAnswer: "", //接收单选答案
|
|
|
|
+ multipleRightAnswer: [] //接收多选答案
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //查询列表
|
|
|
|
+ searchQuestionPaper() {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ this.$http
|
|
|
|
+ .get(
|
|
|
|
+ QUESTION_API +
|
|
|
|
+ "/paper/listQuestion/" +
|
|
|
|
+ this.paperId +
|
|
|
|
+ "/" +
|
|
|
|
+ this.currentPage +
|
|
|
|
+ "/" +
|
|
|
|
+ this.pageSize +
|
|
|
|
+ "?quesType=" +
|
|
|
|
+ this.formSearch.questionType +
|
|
|
|
+ "&quesBody=" +
|
|
|
|
+ this.formSearch.quesBody
|
|
|
|
+ )
|
|
|
|
+ .then(response => {
|
|
|
|
+ this.tableData = response.data.content;
|
|
|
|
+ this.total = response.data.totalElements;
|
|
|
|
+ this.loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //分页
|
|
|
|
+ handleCurrentChange(val) {
|
|
|
|
+ this.currentPage = val;
|
|
|
|
+ this.searchQuestionPaper();
|
|
|
|
+ },
|
|
|
|
+ openQuesDialog() {
|
|
|
|
+ this.quesDialog = true;
|
|
|
|
+ },
|
|
|
|
+ closeQuesDialog() {
|
|
|
|
+ this.quesDialog = false;
|
|
|
|
+ this.quesModel = {};
|
|
|
|
+ },
|
|
|
|
+ //预览
|
|
|
|
+ prevViewQues(row) {
|
|
|
|
+ this.quesModel = row;
|
|
|
|
+ this.disposeSelectAnswer();
|
|
|
|
+ this.openQuesDialog();
|
|
|
|
+ },
|
|
|
|
+ //添加试题
|
|
|
|
+ submitQues() {
|
|
|
|
+ if (this.multipleSelection.length === 0) {
|
|
|
|
+ this.$notify({
|
|
|
|
+ type: "error",
|
|
|
|
+ message: "请选择要添加的试题"
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.$confirm("是否添加这些试题?", "提示", {
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
+ cancelButtonText: "取消",
|
|
|
|
+ type: "warning"
|
|
|
|
+ }).then(() => {
|
|
|
|
+ console.log(this.multipleSelection[0]);
|
|
|
|
+ this.$http
|
|
|
|
+ .post(
|
|
|
|
+ QUESTION_API +
|
|
|
|
+ "/paper/selectQuestions/" +
|
|
|
|
+ this.paperId +
|
|
|
|
+ "/" +
|
|
|
|
+ this.paperDetailId,
|
|
|
|
+ this.multipleSelection
|
|
|
|
+ )
|
|
|
|
+ .then(() => {
|
|
|
|
+ this.$notify({
|
|
|
|
+ type: "success",
|
|
|
|
+ message: "添加成功!"
|
|
|
|
+ });
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: "/edit_paper/" + this.paperId + "/" + this.parentView
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ this.$notify({
|
|
|
|
+ type: "error",
|
|
|
|
+ message: "添加失败!"
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //返回
|
|
|
|
+ back() {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: "/edit_paper/" + this.paperId + "/" + this.parentView
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //全选
|
|
|
|
+ handleSelectionChange(val) {
|
|
|
|
+ this.multipleSelection = val;
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 处理选择题答案显示
|
|
|
|
+ * 处理套题下选择题答案显示
|
|
|
|
+ */
|
|
|
|
+ disposeSelectAnswer() {
|
|
|
|
+ this.singleRightAnswer = "";
|
|
|
|
+ this.multipleRightAnswer = [];
|
|
|
|
+ //处理选择题答案显示
|
|
|
|
+ if (
|
|
|
|
+ this.quesModel.questionType == "SINGLE_ANSWER_QUESTION" ||
|
|
|
|
+ this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION"
|
|
|
|
+ ) {
|
|
|
|
+ for (var i = 0; i < this.quesModel.quesOptions.length; i++) {
|
|
|
|
+ var option_i = this.quesModel.quesOptions[i];
|
|
|
|
+ var orderNum_i = String.fromCharCode(65 + i);
|
|
|
|
+ if (
|
|
|
|
+ this.quesModel.questionType == "SINGLE_ANSWER_QUESTION" &&
|
|
|
|
+ option_i.isCorrect == 1
|
|
|
|
+ ) {
|
|
|
|
+ this.singleRightAnswer = orderNum_i;
|
|
|
|
+ }
|
|
|
|
+ if (
|
|
|
|
+ this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION" &&
|
|
|
|
+ option_i.isCorrect == 1
|
|
|
|
+ ) {
|
|
|
|
+ this.multipleRightAnswer.push(orderNum_i);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //处理套题下选择题答案显示
|
|
|
|
+ if (this.quesModel.questionType == "NESTED_ANSWER_QUESTION") {
|
|
|
|
+ var subQuestions = this.quesModel.subQuestions;
|
|
|
|
+ for (var k = 0; k < subQuestions.length; k++) {
|
|
|
|
+ var subQuestion = subQuestions[k];
|
|
|
|
+ if (subQuestion.questionType == "SINGLE_ANSWER_QUESTION") {
|
|
|
|
+ for (var j = 0; j < subQuestion.quesOptions.length; j++) {
|
|
|
|
+ var option_j = subQuestion.quesOptions[j];
|
|
|
|
+ var orderNum_j = String.fromCharCode(65 + j);
|
|
|
|
+ if (option_j.isCorrect == 1) {
|
|
|
|
+ subQuestion["quesAnswer"] = orderNum_j;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (subQuestion.questionType == "MULTIPLE_ANSWER_QUESTION") {
|
|
|
|
+ var subQuestionMultipleRightAnswer = [];
|
|
|
|
+ for (var z = 0; z < subQuestion.quesOptions.length; z++) {
|
|
|
|
+ var option_k = subQuestion.quesOptions[z];
|
|
|
|
+ var orderNum_k = String.fromCharCode(65 + z);
|
|
|
|
+ if (option_k.isCorrect == 1) {
|
|
|
|
+ subQuestionMultipleRightAnswer.push(orderNum_k);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ subQuestion[
|
|
|
|
+ "quesAnswer"
|
|
|
|
+ ] = subQuestionMultipleRightAnswer.sort().toString();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ answer: function() {
|
|
|
|
+ if (this.quesModel.questionType == "SINGLE_ANSWER_QUESTION") {
|
|
|
|
+ return this.singleRightAnswer;
|
|
|
|
+ } else if (this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION") {
|
|
|
|
+ var obj = Object.assign({}, this.multipleRightAnswer); //浅拷贝;
|
|
|
|
+ return obj.sort().toString();
|
|
|
|
+ } else {
|
|
|
|
+ return this.quesModel.quesAnswer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //钩子函数
|
|
|
|
+ created() {
|
|
|
|
+ this.paperId = this.$route.params.id;
|
|
|
|
+ this.courseName = this.$route.params.courseName;
|
|
|
|
+ var courseNo = this.$route.params.courseNo;
|
|
|
|
+ this.paperDetailId = this.$route.params.paperDetailId;
|
|
|
|
+ this.parentView = this.$route.params.parentView;
|
|
|
|
+ this.courseList.push({ name: this.courseName, value: courseNo });
|
|
|
|
+ this.course = this.courseList[0].value;
|
|
|
|
+ this.searchQuestionPaper();
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style></style>
|