union-question-web/src/modules/questions/views/InsertPaperTitle.vue

<template>
  <section class="content">
    <!-- 正文信息 -->
    <div class="part-box">
      <h1 class="part-box-title">单体录入</h1>
      <el-form
        class="padding-tb-20 form-tight"
        :model="paperTitleForm"
        label-width="150px"
      >
        <el-form-item label="课程名称(代码)">
          <el-select
            v-model="paperTitleForm.courseNo"
            class="dialog-input-width"
            filterable
            clearable
            remote
            placeholder="请输入课程名称(代码)"
            :remote-method="queryCoursesByKeyword"
            @change="searchGenPaper"
            @focus="(e) => queryCoursesByKeyword(e.target.value)"
          >
            <el-option
              v-for="item in courseInfoSelect"
              :key="item.courseNo"
              :label="item.courseInfo"
              :value="item.courseNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="paperTitelDisable" label="试卷名称">
          <el-select
            v-model="paperTitleForm.paperId"
            class="dialog-input-width"
            filterable
            placeholder="请选择"
            sytle="width:220px;"
            @change="searchPaperDetail"
          >
            <el-option
              v-for="item in paperInfoSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="paperDetailDisable" label="试卷大题">
          <el-select
            v-model="paperTitleForm.paperDetailId"
            class="dialog-input-width"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in paperDetailInfoSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型">
          <el-select
            v-model="paperTitleForm.value"
            class="dialog-input-width"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in quesTypes"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="danger" :disabled="nextDisabled" @click="submitForm"
            >下一步
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加试卷弹出框 -->
    <el-dialog
      title="新增试卷"
      :visible.sync="paperDialog"
      width="520px"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
    >
      <el-form
        ref="paperForm"
        :model="paperForm"
        :rules="rules"
        label-position="right"
        label-width="120px"
        inline-message
        class="form-tight"
      >
        <el-form-item label="试卷名称" label-width="120px" prop="name">
          <el-input
            v-model="paperForm.name"
            class="dialog-input-width"
            placeholder="请输入试卷名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitPaperForm('paperForm')"
          >保存</el-button
        >
        <el-button type="danger" plain @click="resetPaperForm('paperForm')"
          >重置</el-button
        >
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { QUESTION_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: [],
      allQuesTypes: [
        { 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: "问答" },
      ],
      quesTypes: [],
      rules: {
        name: [{ required: true, message: "请输入试卷名称", trigger: "blur" }],
      },
    };
  },
  computed: {
    paperTitelDisable() {
      if (this.paperTitleForm.courseNo) {
        return true;
      } else {
        return false;
      }
    },
    paperDetailDisable() {
      console.log(
        "this.paperTitleForm.courseNo:",
        this.paperTitleForm.courseNo
      );
      console.log("this.paperTitleForm.paperId:", this.paperTitleForm.paperId);
      console.log("this.detailsData.length:", this.detailsData.length);
      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() {
    var url =
      QUESTION_API +
      "/org/property/" +
      this.user.rootOrgId +
      "/ROOT_ORG_QUESTION_TYPES";
    this.$http.get(url).then((response) => {
      if (response.data && response.data.length > 0) {
        this.quesTypes = this.allQuesTypes.filter((m) =>
          response.data.includes(m.value)
        );
      }
    });
  },
  methods: {
    //远端查询课程
    queryCoursesByKeyword(query) {
      query = query.trim();
      this.courseLoading = true;
      this.$http
        .get(QUESTION_API + "/course/query?name=" + query + "&enable=true")
        .then((response) => {
          this.courseList = response.data;
          this.courseLoading = false;
        });
    },
    //根据课程查询试卷集合
    searchGenPaper() {
      this.$http
        .get(
          QUESTION_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(QUESTION_API + "/paperDetail/paper/" + this.paperTitleForm.paperId)
        .then((response) => {
          this.detailsData = response.data;
          console.log("response.data:", response.data);
          console.log("this.detailsData:", this.detailsData);
          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(
              QUESTION_API +
                "/importPaper/saveBlankPaper/" +
                this.paperTitleForm.courseNo +
                "/" +
                this.paperForm.name
            )
            .then((response) => {
              var paperId = response.data.paper.id;
              this.$http
                .get(
                  QUESTION_API +
                    "/importPaper/1/500/?courseNo=" +
                    this.paperTitleForm.courseNo
                )
                .then((response) => {
                  this.tableData = response.data.content;
                  this.paperTitleForm.paperDetailId = "";
                  this.paperTitleForm.paperId = paperId;
                  this.searchPaperDetail();
                });
              this.paperDialog = false;
            })
            .catch((error) => {
              this.$notify({ type: "error", message: error.response.data.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 +
          "/" +
          encodeURIComponent(this.paperTitleForm.courseNo) +
          "/" +
          encodeURIComponent(this.paperTitleForm.courseName),
      });
    },
  },
};
</script>