examcloud-admin-web/src/modules/questions/views/InsertPaperTitle.vue

<template>
  <div>
    <section class="content">
      <div class="box box-info box_width_lg">
        <!-- 头信息 -->
        <div class="box-header with-border">
          <h3 class="box-title">试题类型选择</h3>
        </div>
        <!-- 正文信息 -->
        <div class="box-body">
          <el-form
            :inline="true"
            :model="paperTitleForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-form-item label="课程名称(代码)" class="pull-left">
                <el-select
                  @change="searchGenPaper"
                  style="width: 193px;"
                  v-model="paperTitleForm.courseNo"
                  filterable
                  remote
                  placeholder="请输入课程名称(代码)"
                  :remote-method="queryCoursesByKeyword"
                >
                  <el-option
                    v-for="item in courseInfoSelect"
                    :key="item.courseNo"
                    :label="item.courseInfo"
                    :value="item.courseNo"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row v-if="paperTitelDisable">
              <el-form-item label="试卷名称" class="pull-left">
                <el-select
                  v-model="paperTitleForm.paperId"
                  filterable
                  placeholder="请选择"
                  @change="searchPaperDetail"
                  sytle="width:220px;"
                >
                  <el-option
                    v-for="item in paperInfoSelect"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
                <el-button type="info" @click="insertPaper">新增试卷</el-button>
              </el-form-item>
            </el-row>
            <el-row v-if="paperDetailDisable">
              <el-form-item label="试卷大题" class="pull-left">
                <el-select
                  v-model="paperTitleForm.paperDetailId"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in paperDetailInfoSelect"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="题型" class="pull-left">
                <el-select
                  v-model="paperTitleForm.value"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in quesTypes"
                    :label="item.label"
                    :value="item.value"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label=" " class="pull-left">
                <el-button
                  type="primary"
                  :disabled="nextDisabled"
                  @click="submitForm"
                  >下一步
                </el-button>
              </el-form-item>
            </el-row>
          </el-form>

          <!-- 添加试卷弹出框 -->
          <el-dialog title="新增试卷" v-model="paperDialog" size="tiny">
            <el-form
              :inline="true"
              :model="paperForm"
              ref="paperForm"
              :rules="rules"
              label-position="right"
              label-width="90px"
            >
              <el-row>
                <el-form-item label="试卷名称" label-width="120px" prop="name">
                  <el-input
                    class="pull_length"
                    v-model="paperForm.name"
                    auto-complete="off"
                    placeholder="请输入试卷名称"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row class="pull_center">
                <el-button type="primary" @click="submitPaperForm('paperForm');"
                  >保 存</el-button
                >
                <el-button type="danger" @click="resetPaperForm('paperForm');"
                  >重 置</el-button
                >
              </el-row>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { CORE_API, Q_API } from "../constants/constants";
import { mapState } from "vuex";
export default {
  data() {
    return {
      paperTitleForm: {
        courseNo: "",
        courseName: "",
        paperId: "",
        paperDetailId: "",
        value: ""
      },
      paperForm: {
        name: ""
      },
      paperDialog: false,
      courseList: [],
      tableData: [],
      detailsData: [],
      quesTypes: [
        { value: "SINGLE_ANSWER_QUESTION", label: "单选" },
        { value: "MULTIPLE_ANSWER_QUESTION", label: "多选" },
        { value: "BOOL_ANSWER_QUESTION", label: "判断" },
        { value: "FILL_BLANK_QUESTION", label: "填空" },
        { value: "TEXT_ANSWER_QUESTION", label: "问答" }
      ],
      rules: {
        name: [{ required: true, message: "请输入试卷名称", trigger: "blur" }]
      }
    };
  },
  methods: {
    //远端查询课程
    queryCoursesByKeyword(query) {
      query = query.trim();
      if (query) {
        if (!(query.indexOf("(") > -1 && query.indexOf(")") > -1)) {
          this.courseLoading = true;
          this.$http
            .get(CORE_API + "/course/query?name=" + query + "&enable=true")
            .then(response => {
              this.courseList = response.data;
              this.courseLoading = false;
            });
        }
      } else {
        this.courseList = [];
      }
    },
    //根据课程查询试卷集合
    searchGenPaper() {
      this.$http
        .get(
          Q_API + "/importPaper/1/500/?courseNo=" + this.paperTitleForm.courseNo
        )
        .then(response => {
          this.tableData = response.data.content;
        });
      this.paperTitleForm.paperId = "";
      this.paperTitleForm.paperDetailId = "";
    },
    //根据试卷查询大题
    searchPaperDetail() {
      this.$http
        .get(Q_API + "/paperDetail/paper/" + this.paperTitleForm.paperId)
        .then(response => {
          this.detailsData = response.data;
          for (var i = 0; i < this.detailsData.length; i++) {
            if (!this.detailsData[i].name) {
              this.detailsData[i].name = "默认大题";
            }
          }
        });
      this.paperTitleForm.paperDetailId = "";
    },
    //新增试卷
    insertPaper() {
      this.paperDialog = true;
    },
    //重置
    resetPaperForm(formData) {
      this.$refs[formData].resetFields();
    },
    //提交新增试卷
    submitPaperForm(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          for (let course of this.courseList) {
            if (course.code == this.paperTitleForm.courseNo) {
              this.paperTitleForm.courseName = course.name;
            }
          }
          console.log("课程名称：" + this.paperTitleForm.courseName);
          this.$http
            .post(
              Q_API +
                "/importPaper/saveBlankPaper/" +
                this.paperTitleForm.courseNo +
                "/" +
                this.paperForm.name
            )
            .then(response => {
              console.log("需要查到的课程id：", response);
              var paperId = response.data.paper.id;
              this.$http
                .get(
                  Q_API +
                    "/importPaper/1/500/?courseNo=" +
                    this.paperTitleForm.courseNo
                )
                .then(response => {
                  this.tableData = response.data.content;
                  this.paperTitleForm.paperDetailId = "";
                  this.paperTitleForm.paperId = paperId;
                });
              this.paperDialog = false;
            })
            .catch(error => {
              this.$notify({ type: "error", message: error.body.msg });
              this.paperDialog = false;
            });
        } else {
          return false;
        }
      });
    },
    //提交
    submitForm() {
      var path = "";
      switch (this.paperTitleForm.value) {
        case "SINGLE_ANSWER_QUESTION":
        case "MULTIPLE_ANSWER_QUESTION":
          path = "edit_select_question";
          break;
        case "TEXT_ANSWER_QUESTION":
        case "FILL_BLANK_QUESTION":
        case "BOOL_ANSWER_QUESTION":
          path = "edit_other_question";
          break;
      }
      for (let course of this.courseList) {
        if (course.code == this.paperTitleForm.courseNo) {
          this.paperTitleForm.courseName = course.name;
        }
      }
      console.log(path);
      this.$router.push({
        path:
          path +
          "/" +
          this.paperTitleForm.paperId +
          "/" +
          this.paperTitleForm.paperDetailId +
          "/" +
          this.paperTitleForm.value +
          "/" +
          this.paperTitleForm.courseNo +
          "/" +
          this.paperTitleForm.courseName
      });
    }
  },
  computed: {
    paperTitelDisable() {
      if (this.paperTitleForm.courseNo) {
        return true;
      } else {
        return false;
      }
    },
    paperDetailDisable() {
      if (
        this.paperTitleForm.courseNo &&
        this.paperTitleForm.paperId &&
        this.detailsData.length > 0
      ) {
        return true;
      } else {
        return false;
      }
    },
    nextDisabled() {
      if (
        this.paperTitleForm.courseNo &&
        this.paperTitleForm.paperId &&
        this.paperTitleForm.paperDetailId &&
        this.paperTitleForm.value
      ) {
        return false;
      } else {
        return true;
      }
    },
    //获取课程的集合
    courseInfoSelect() {
      var courseList = [];
      for (let course of this.courseList) {
        var courseInfo = course.name + "(" + course.code + ")";
        var courseNo = course.code;
        courseList.push({ courseNo: courseNo, courseInfo: courseInfo });
      }
      return courseList;
    },
    //获取试卷的集合
    paperInfoSelect() {
      var paperList = [];
      for (let paper of this.tableData) {
        var paperId = paper.id;
        var paperName = paper.name;
        paperList.push({ id: paperId, name: paperName });
      }
      return paperList;
    },
    //获取大题的集合
    paperDetailInfoSelect() {
      var paperDetaliList = [];
      for (let paperDetail of this.detailsData) {
        var paperDetailId = paperDetail.id;
        var paperDetailName = paperDetail.name;
        paperDetaliList.push({ id: paperDetailId, name: paperDetailName });
      }

      return paperDetaliList;
    },
    routeType() {
      return this.$route.params.type;
    },
    ...mapState({ user: state => state.user })
  },
  //初始化
  created() {
    this.queryCoursesByKeyword();
  }
};
</script>
<style scoped>
.box_width_lg {
  width: 600px;
}
</style>