fuliqi
2024-06-06 94da5161fcc39a88e0337e67573a3dd96691b39c
试卷管理和试卷模板ui
3个文件已修改
2个文件已添加
1945 ■■■■ 已修改文件
src/api/examTemplate.js 61 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router.js 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Manage/TestPaper/PaperTemplate.vue 522 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Manage/TestPaper/TestPaperGeneration.vue 1024 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Manage/TestPaper/index.vue 332 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/examTemplate.js
New file
@@ -0,0 +1,61 @@
import axios from "./request";
// 获取随机试卷模板分页
export const getExamTemplates = (params) => {
    return axios({
        url: "/api/admin/exam-template/page",
        method: "GET",
        params: params
    })
}
// 获取随机试卷模板列表
export const getExamTemplateList = () => {
    return axios({
        url: "/api/admin/exam-template/list",
        method: "GET"
    })
}
// 通过id获取随机试卷模板
export const getExamTemplateById = (params) => {
    return axios({
        url: "/api/admin/exam-template/" + params,
        method: "GET"
    })
}
// 通过id删除随机试卷模板
export const deleteExamTemplateById = (params) => {
    return axios({
        url: "/api/admin/exam-template/" + params,
        method: "DELETE"
    })
}
// 批量删除随机试卷模板
export const deleteExamTemplateByIds = (params) => {
    return axios({
        url: "/api/admin/exam-template/batch",
        method: "DELETE",
        data: params
    })
}
// 修改随机试卷模板
export const editExamTemplate = (params) => {
    return axios({
        url: "/api/admin/exam-template/",
        method: "PUT",
        data: params
    })
}
// 添加随机试卷模板
export const addExamTemplate = (params) => {
    return axios({
        url: "/api/admin/exam-template/",
        method: "POST",
        data: params
    })
}
src/router.js
@@ -135,6 +135,12 @@
        name: 'TestPaperGeneration',
        component: () => import('@/views/Manage/TestPaper/TestPaperGeneration.vue')
      },
      //随机试卷模板管理
      {
        path: 'paper-template',
        name: 'PaperTemplate',
        component: () => import('@/views/Manage/TestPaper/PaperTemplate.vue')
      },
      // 班级管理
      {
        path: 'class-management',
src/views/Manage/TestPaper/PaperTemplate.vue
New file
@@ -0,0 +1,522 @@
<!-- 试卷管理 -->
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <!-- 带返回的标题 -->
        <TitleIndex title='试卷管理'/>
        <div class="content">
          <div
            style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;display: flex; align-items: center;">
            <el-page-header @back="goBack()">
            </el-page-header>
            <el-button
              type="primary"
              @click="addTemplate"
            >新增模板
            </el-button>
          </div>
          <!-- 搜索 -->
          <div>
            <el-form
              :inline="true"
              :model="queryParam"
              label-width="80px"
            >
              <el-form-item>
                <el-input v-model="queryParam.name" placeholder="模板名" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="queryParam.subjectId"
                  placeholder="全部科目"
                  clearable
                >
                  <el-option v-for="item in subjects" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button
                  style="width:100px;"
                  type="primary"
                  size="small"
                  @click="getPage"
                >查询
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格 -->
          <el-table
            :header-cell-style="getRowClass"
            :data="tableData"
            border
            style="width: 100%;"
            :row-style="{height:'40px'}"
            :cell-style="{padding: '0'}"
          >
            <el-table-column
              align="center"
              prop="name"
              label="模板名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="subjectId"
              label="科目"
            >
              <template slot-scope="scope">
                {{ translate(scope.row.subjectId) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggestTime"
              label="建议时长(分钟)"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="score"
              label="分值"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button type="text">预览</el-button>
                <el-button type="text">编辑</el-button>
                <el-button type="text" @click="deletePaper(scope.row)" class="link-left">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="flex"
            style="justify-content:center;margin-top:20px;"
          >
            <pagination v-show="total>0" :total="total" :page.sync="queryParam.currentPage"
                        :limit.sync="queryParam.pageSize"
                        @pagination="getPage"/>
          </div>
        </div>
        <!-- 添加试卷模板对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="模板名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入模板名称" style="width: 300px"/>
            </el-form-item>
            <el-form-item label="科目" prop="subjectId">
              <el-select v-model="form.subjectId" placeholder="请选择科目" style="width: 300px">
                <el-option
                  v-for="item in subjects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="考试时长(分钟)" prop="suggestTime">
              <el-input-number v-model="form.suggestTime" placeholder="请输入考试时长"/>
            </el-form-item>
            <el-form-item label="多选题得分类型" prop="deductType" v-show="addedQuestionTypes.includes(2)"><!-- 有多选才出现 -->
              <div>
                <el-select v-model="form.deductType" placeholder="请选择多选题得分类型" style="width: 200px;margin-right: 30px">
                  <el-option
                    v-for="item in deductTypeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
                <el-input-number v-model="form.score" placeholder="请输入多选得分分数"
                                 v-show="form.deductType === 2 || form.deductType === 3"/>
              </div>
            </el-form-item>
            <el-form-item prop="questionList" label-width="0">
              <el-table
                :summary-method="getSummaries"
                show-summary
                :data="questionList"
                style="width: 100%;">
                <el-table-column
                  prop="questionType"
                  label="题目类型"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div> {{ translateQuestionType(scope.row.questionType) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="题目数量"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="每题分数">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="editQuestion(scope.row)">
                      编辑
                    </el-button>
                    <el-button
                      type="text"
                      size="small"
                      @click="removeQuestion(scope.row)">
                      移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button type="success" @click="nextAdd()" size="mini" plain>添加</el-button>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <!-- 添加题目对话框 -->
        <el-dialog :title="questionTitle" :visible.sync="questionOpen" width="400px" append-to-body>
          <el-form ref="questionForm" :model="questionForm" :rules="questionRules">
            <el-form-item label="题目类型" prop="questionType">
              <el-select v-model="questionForm.questionType" placeholder="请选择题目类型">
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                  :disabled="addedQuestionTypes.includes(item.value)"/><!-- 禁用已添加的选项 -->
              </el-select>
            </el-form-item>
            <el-form-item label="题目数量" prop="num" style="margin-left: 10px">
              <el-input-number v-model="questionForm.num" placeholder="请输入题目数量" :precision="0"/>
            </el-form-item>
            <el-form-item label="每题分数" prop="score" style="margin-left: 10px">
              <el-input-number v-model="questionForm.score" placeholder="请输入每题分数" :precision="1"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addQuestion">确 定</el-button>
            <el-button @click="questionCancel">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getExamTemplates,
  getExamTemplateById,
  deleteExamTemplateById,
  editExamTemplate,
  addExamTemplate
} from '@/api/examTemplate'
import subjectApi from '@/api/subject'
import Pagination from "@/components/Pagination"
export default {
  components: {Pagination},
  data() {
    var validateDeductType = (rule, value, callback) => {
      const index = this.addedQuestionTypes.findIndex(item => item.questionType === 2)
      if (index && (!value || value === '')) {
        callback(new Error('请选择多选题得分方式'));
      } else {
        callback();
      }
    }
    return {
      // 弹出层标题
      title: "",
      questionTitle: "",
      // 是否显示弹出层
      open: false,
      questionOpen: false,
      // 总条数
      total: 0,
      queryParam: {
        name: null,
        subjectId: null,
        currentPage: 1,
        pageSize: 10
      },
      form: {},
      questionForm: {},
      tableData: [],
      subjects: [],
      deductTypeList: [
        {name: '答错不得分', value: 1},
        {name: '漏选得固定分值,包含错误选项不得分', value: 2},
        {name: '每对一题得相应分值,包含错误选项不得分', value: 3},
      ],
      questionTypeList: [
        {name: '单选题', value: 1},
        {name: '多选题', value: 2},
        {name: '填空题', value: 3},
        {name: '判断题', value: 4},
        {name: '简答题', value: 5},
        {name: '计算题', value: 6},
      ],
      questionList: [],
      addedQuestionTypes: [],// 已添加的题目类型
      // 表单校验
      rules: {
        name: [
          {required: true, message: "试卷名称不能为空", trigger: "blur"}
        ],
        subjectId: [
          {required: true, message: "科目不能为空", trigger: "change"}
        ],
        paperType: [
          {required: true, message: "试卷类型不能为空", trigger: "change"}
        ],
        suggestTime: [
          {required: true, message: "考试时长不能为空", trigger: "blur"}
        ],
        deductType: [
          {validator: validateDeductType, trigger: 'change'}
        ],
      },
      questionRules: {
        questionType: [
          {required: true, message: "题目类型不能为空", trigger: "change"}
        ],
      }
    };
  },
  created() {
    this.getSubjects();
    this.getPage()
  },
  methods: {
    //移除题目
    removeQuestion(row) {
      let index = this.questionList.findIndex(item => item.questionType === row.questionType && item.num === row.num && item.score === row.score);
      this.questionList.splice(index, 1);
      index = this.addedQuestionTypes.findIndex(item => item.questionType === row.questionType)
      this.addedQuestionTypes.splice(index, 1);
    },
    //编辑题目
    editQuestion(row) {
      this.questionReset();
      this.questionForm.questionType = row.questionType
      this.questionForm.num = row.num
      this.questionForm.score = row.score
      this.questionTitle = "编辑题目"
      this.questionOpen = true;
    },
    //题目列表合计方法
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 3) {
          sums[index] = '';
          return;
        }
        if (index === 2) { // 第三列是分数列
          const values = data.map(item => Number(item.score) * Number(item.num) || 0);
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toFixed(2); // 格式化合计值,保留两位小数
            sums[index] += ' 分';
          }
        } else if (index === 1) { // 第二列是题目数量列,在这里展示总数
          const values = data.map(item => Number(item.num) || 0);
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 题';
          } else {
            sums[index] = 'N/A';
          }
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    },
    translate(subjectId) {
      const subject = this.subjects.find(subject => subject.id == subjectId);
      return subject ? subject.name : '未知';
    },
    translateQuestionType(questionTypeId) {
      const questionType = this.questionTypeList.find(questionType => questionType.value == questionTypeId);
      return questionType ? questionType.name : '未知';
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    cancel() {
      this.open = false;
    },
    questionCancel() {
      this.questionOpen = false;
    },
    // 模板表单重置
    reset() {
      this.form = {
        name: null,
        subjectId: null,
        suggestTime: null,
      };
      this.addedQuestionTypes = []
      this.questionList = []
    },
    // 问题表单重置
    questionReset() {
      this.questionForm = {
        questionType: null,
        num: null,
        score: null,
      };
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    },
    //新增模板
    addTemplate() {
      this.reset();
      this.title = "新增模板"
      this.open = true;
    },
    //新增题目
    nextAdd() {
      this.questionReset();
      this.questionTitle = "添加题目"
      this.questionOpen = true;
    },
    deletePaper(row) {
      deleteExamTemplateById(row.id).then(re => {
        if (re.code === 1) {
          this.getPage()
          this.$message.success("删除成功")
        } else {
          this.$message.error(re.message)
        }
      })
    },
    getPage() {
      this.listLoading = true
      getExamTemplates(this.queryParam).then(re => {
        const data = re.data
        this.tableData = data.data
        this.total = data.total
        this.listLoading = false
      })
    },
    // 获取科目
    getSubjects() {
      subjectApi.list().then(re => {
        this.subjects = re.data
      })
    },
    //添加或修改题目
    addQuestion() {
      this.$refs['questionForm'].validate(valid => {
        if (valid) {
          //新增
          if (this.questionTitle === "添加题目") {
            // 将题目类型添加到已添加列表中
            if (!this.addedQuestionTypes.includes(this.questionForm.questionType)) {
              this.addedQuestionTypes.push(this.questionForm.questionType);
            }
            this.questionList.push({
              "questionType": this.questionForm.questionType,
              "num": this.questionForm.num,
              "score": this.questionForm.score
            });
            this.questionOpen = false;
          } else if (this.questionTitle === "编辑题目") {
            let index = this.questionList.findIndex(item => item.questionType === this.questionForm.questionType)
            this.questionList.splice(index, 1, this.questionForm);
            this.questionOpen = false;
          }
        }
      })
    },
    //添加或修改模板
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.deptId && this.form.deptId.length > 0) {
            this.form.deptId = this.form.deptId[this.form.deptId.length - 1]
          }
          let temp = {
            ...this.form,
            category: parseInt(this.form.category)
          };
          if (temp.id != null) {
            updatePoint(temp).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPoint(temp).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset()
              this.getList();
            });
          }
        } else {
          console.log("error")
        }
      })
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}
// 内容
.content {
  width: 1262px;
  margin-bottom: 80px;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 10px;
}
</style>
src/views/Manage/TestPaper/TestPaperGeneration.vue
@@ -3,301 +3,793 @@
  <div class="c">
    <div class="bg">
      <div class="main">
        <!-- 带返回的标题 -->
        <TitleIndex title="试卷生成" />
        <div class="content">
          <!-- 搜索 -->
          <div>
            <el-form
              :inline="true"
              :model="formLabelAlign"
              class="demo-form-inline"
              label-width="80px"
        <div class="paper-main">
          <div class="paper-content">
            <!-- 试题 -->
            <div
              ref="paperContent"
              class="paper-left"
            >
              <el-form-item>
                <el-input
                  v-model="formLabelAlign.type"
                  placeholder="题目名"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="题目类型"
              <div
                class="subject"
                v-for="item in convertDatas"
                :key="item.id"
              >
                <div class="subject-title">
                  <h2>{{ item.name }}</h2>
                  <span>(共 {{ item.count }} 题,合计 {{ item.totalScore }} 分)</span>
                </div>
                <el-card
                  class="box-card"
                  v-for="(sub,index) in item.childs"
                  :id="item.code+(index+1)"
                  :key="sub.id"
                >
                  <el-option
                    label="全部题目"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="选择题"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="判断题"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="简单题"
                    value="beijing"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="全部科目"
                >
                  <el-option
                    label="全部科目"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="语文"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="数学"
                    value="beijing"
                  ></el-option>
                </el-select>
              </el-form-item>
                  <div
                    slot="header"
                    class="clearfix"
                  >
                    <el-tag
                      effect="dark"
                      style="margin-right:10px"
                    > {{ sub.no }}
                    </el-tag>
                    <span>{{ sub.subject }}</span>
                    <span>({{ sub.totalScore }}分)</span>
                    <div
                      v-if="type===2 || type===3"
                      style="float: right; padding: 3px 0"
                    >
                      <el-radio-group v-model="sub.isHook">
                        <el-radio-button
                          :disabled="disabledRead"
                          :label="1"
                          @change.native="isHookButtionCheck(sub)"
                        ><i class="el-icon-check"/></el-radio-button>
                        <el-radio-button
                          :disabled="disabledRead"
                          :label="2"
                          @change.native="isHookButtionCheck(sub)"
                        ><i class="el-icon-close"/></el-radio-button>
                      </el-radio-group>
                      <div
                        v-if="sub.type===1 ||sub.type===2||sub.type===3"
                        style="display: inline;"
                      >
                        <el-input
                          :disabled="true"
                          v-model="sub.score"
                          style="width:50px"
                        ></el-input>
                        <span>分</span>
                      </div>
                      <div
                        v-else
                        style="display: inline;"
                      >
                        <el-input
                          :disabled="disabledRead"
                          v-model="sub.score"
                          style="width:50px"
                        ></el-input>
                        <span>分</span>
                      </div>
              <el-form-item label="">
                <el-button
                  style="width:100px;"
                  type="primary"
                  size="small"
                >查询</el-button>
              </el-form-item>
            </el-form>
                    </div>
                  </div>
                  <el-radio-group
                    v-if="sub.type===1"
                    v-model="sub.examineAnswer"
                  >
                    <el-radio
                      :disabled="disabledAnswer"
                      v-for="o in sub.answers"
                      :key="o.id"
                      :label="o.no"
                      class="answer-radio"
                      @change="answerButtionCheck($event,item,sub)"
                    >{{ o.no }}.{{ o.answer }}
                    </el-radio>
                  </el-radio-group>
                  <el-checkbox-group
                    v-if="sub.type===2"
                    v-model="sub.examineAnswer"
                  >
                    <el-checkbox
                      :disabled="disabledAnswer"
                      v-for="o in sub.answers"
                      :key="o.id"
                      :label="o.no"
                      class="answer-checkbox"
                      @change="answerButtionCheck($event,item,sub)"
                    >{{ o.no }}.{{ o.answer }}
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-radio-group
                    v-if="sub.type===3"
                    v-model="sub.examineAnswer"
                  >
                    <el-radio
                      :disabled="disabledAnswer"
                      label="对"
                      class="answer-radio"
                      @change="answerButtionCheck($event,item,sub)"
                    >对
                    </el-radio>
                    <el-radio
                      :disabled="disabledAnswer"
                      label="错"
                      class="answer-radio"
                      @change="answerButtionCheck($event,item,sub)"
                    >错
                    </el-radio>
                  </el-radio-group>
                  <el-input
                    :disabled="disabledAnswer"
                    v-if="sub.type===4"
                    type="textarea"
                    :rows="2"
                    v-model="sub.examineAnswer"
                    resize="none"
                    maxlength="150"
                    @blur="answerButtionCheck($event,item,sub)"
                  ></el-input>
                  <el-input
                    :disabled="disabledAnswer"
                    v-if="sub.type===5"
                    type="textarea"
                    :rows="10"
                    v-model="sub.examineAnswer"
                    resize="none"
                    maxlength="2000"
                    @blur="answerButtionCheck($event,item,sub)"
                  ></el-input>
                  <div
                    v-if="type!==1"
                    class="subject-remark"
                  >
                    <div class="item">
                      <span class="title">考生答案:</span>
                      <span>{{ converAnswerStr(sub.examineAnswer) }}</span>
                    </div>
                    <div class="item">
                      <span class="title">正确答案:</span>
                      <span>{{ converAnswerStr(sub.correctAnswer) }}</span>
                    </div>
                    <div class="item">
                      <span class="title">考生答案:</span>
                      <span>{{ sub.answerAnalysis }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
            <!-- 答题卡 -->
            <div
              ref="paperLeft"
              class="paper-right"
            >
              <div class="paper-title">
                <h1><i class="el-icon-s-grid"></i>答题卡
                  <span class="downTime"><i
                    class="el-icon-alarm-clock"
                    style=" color: #000; font-weight: bold; font-size: 24px;margin-right: 10px;"
                  ></i>{{ hour ? hourString + ':' + minuteString + ':' + secondString : minuteString + ':' + secondString }}</span>
                </h1>
              </div>
              <el-collapse v-model="answerCardActiveName">
                <el-collapse-item
                  v-for="item in convertDatas"
                  :key="item.id"
                  :name="item.code"
                >
                  <template slot="title">
                    <h2>{{ item.name }}</h2>
                    <span>共{{ item.count }}题</span>
                  </template>
                  <el-button
                    class="answer-button"
                    circle
                    size="small"
                    v-for="index of item.count"
                    :key="index"
                    :id="'answer'+item.code+index"
                    @click.native="jump(item.code+index)"
                  >{{ index }}
                  </el-button>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          <!-- 表格 -->
          <el-table
            :row-style="{height:'38px'}"
            :cell-style="{padding: '0'}"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              prop="title"
              label="题目名"
              align="center"
              width="220"
              min-width="180"
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="题目类型"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="subject"
              label="科目"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="score"
              label="分值"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="reference"
              label="参考答案"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px;text-align: center;">
            <el-button type="primary">生成试卷</el-button>
          </div>
          <div
            class="block"
            style="display: flex; margin-top: 40px;"
          >
            <el-pagination
              style="margin:auto"
              background
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
          <div class="paper-footer">
            <el-button
              v-if="type===1"
              type="success"
              @click.native="btnClick('handPaper')"
            >交卷
            </el-button>
            <el-button
              v-if="type===2"
              type="success"
              @click.native="btnClick('readPaper')"
            >阅卷
            </el-button>
            <el-button
              v-if="type===2"
              type="success"
              @click.native="btnClick('readPaperUpper')"
            >上一个
            </el-button>
            <el-button
              v-if="type===2"
              type="success"
              @click.native="btnClick('readPaperNext')"
            >下一个
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "examinationPaper",
  props: {
    //试卷类型 1 考试 2 阅卷 3 查看
    type: {
      type: Number,
      default: 2,
    },
    //数据源
    dataSource: {
      type: Object,
      default: () => {
        return {
          //试卷ID
          paperId: "",
          //试卷名称
          paperName: "",
          //考生ID
          examineId: "",
          //考生名称
          examineName: "",
          //分数
          score: null,
          //考试时长(分钟)
          examDuration: null,
          //交卷时间
          submissionTime: "",
          //题目集合
          list: [
            {
              //题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题
              type: null,
              //题号
              no: null,
              //题目
              subject: "",
              //题目总分
              totalScore: null,
              //答案集合
              answers: [
                {
                  //答案序号
                  no: "",
                  //答案
                  answer: "",
                },
              ],
              //考生答案
              examineAnswer: null,
              //正确答案
              correctAnswer: null,
              //答案解析
              answerAnalysis: "",
              //是否对错  1.对 2.错
              isHook: null,
              //得分
              score: null,
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      },
      tableData: [
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
        {
          // 选择
          isChoice: false,
          //   题目名称
          title: "秋梨膏",
          type: "判断题",
          subject: "语文",
          score: "1",
          reference: "A",
        },
      ],
      //提交按钮
      multipleSelection: [],
      //倒计小时
      hour: "",
      //倒计分钟
      minute: "",
      //倒计秒
      second: "",
      //计时器
      promiseTimer: "",
      //数据源
      tempDataSource: {},
      //答题卡激活项
      answerCardActiveName: [],
      //组装后数据集
      convertDatas: [],
      //禁止答题
      disabledAnswer: false,
      //禁止阅卷
      disabledRead: false,
    };
  },
  watch: {
    dataSource(newValue, oldValue) {
      Object.assign(this.tempDataSource, newValue);
      this.convertData();
    },
  },
  created() {
    Object.assign(this.tempDataSource, this.dataSource);
    this.convertData();
    if (this.type === 2) {
      this.disabledAnswer = true;
    }
    if (this.type === 3) {
      this.disabledAnswer = true;
      this.disabledRead = true;
    }
  },
  computed: {
    hourString() {
      return this.hour < 10 ? "0" + this.hour : "" + this.hour;
    },
    minuteString() {
      return this.minute < 10 ? "0" + this.minute : "" + this.minute;
    },
    secondString() {
      return this.second < 10 ? "0" + this.second : "" + this.second;
    },
  },
  mounted() {
    if (this.type === 1) {
      let remainTime = this.dataSource.examDuration * 60;
      if (remainTime > 0) {
        this.hour = Math.floor((remainTime / 3600) % 24);
        this.minute = Math.floor((remainTime / 60) % 60);
        this.second = Math.floor(remainTime % 60);
        this.countDowm();
      }
    }
    if (this.type === 2 || this.type === 3) {
      this.convertDatas.forEach((t) => {
        t.childs.forEach((c) => {
          this.answerButtionCheck(c.examineAnswer, t, c);
        });
      });
    }
  },
  methods: {
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    //提交按钮
    onSubmit() {
      console.log("submit!");
    /**
     * 按钮点击事件
     */
    btnClick(type) {
      console.log(this.tempDataSource);
      switch (type) {
        //交卷
        case "handPaper":
          this.$emit("PaperHand", this.tempDataSource);
          break;
        //阅卷
        case "readPaper":
          this.$emit("paperRead", this.tempDataSource);
          break;
        //阅卷 上一个
        case "readPaperUpper":
          this.$emit("paperReadUpper");
          break;
        //阅卷 下一个
        case "readPaperNext":
          this.$emit("paperReadNext");
          break;
      }
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    /**
     * 锚点定位
     */
    // 这儿就是定位
    jump(postion) {
      console.log("postion", postion);
      let jump = this.$refs.paperContent.querySelectorAll("#" + postion);
      // 获取需要滚动的距离
      // 父盒子到浏览器顶部的距离
      let subjectTitleTop = this.$refs.paperContent.offsetTop;
      // 对应的元素到浏览器顶部的距离
      let total = jump[0].offsetTop;
      //实现form锚点定位(使用当前距离减去父元素到顶部距离)
      this.$refs.paperContent.scrollTop = total - subjectTitleTop;
    },
    // 选择
    handleSelectionChange(val) {
    /**
     *对错选择
     */
    isHookButtionCheck(val) {
      console.log(val, "val");
      this.multipleSelection = val;
      if (val.type === 1 || val.type === 2 || val.type === 3) {
        if (val.isHook === 1) {
          val.score = val.totalScore;
        }
        if (val.isHook === 2) {
          val.score = 0;
        }
      }
    },
    /**
     *答题卡选中
     */
    answerButtionCheck(value, parent, child) {
      console.log(value, parent, child);
      let answerId = "answer" + parent.code + child.no;
      let but = this.$refs.paperLeft.querySelectorAll("#" + answerId);
      if (but.length > 0) {
        if (but[0].className.indexOf("answer-button-check") > -1) {
          if (child.examineAnswer && child.examineAnswer.length == 0) {
            but[0].classList.remove("answer-button-check");
          }
        } else {
          if (child.examineAnswer && child.examineAnswer.length > 0) {
            but[0].classList.add("answer-button-check");
          }
        }
      }
    },
    /**
     * 转换答案
     */
    converAnswerStr(answer) {
      if (answer instanceof Array) {
        return answer.join("  ");
      }
      return answer;
    },
    /**
     * 转换数据
     */
    convertData() {
      let sorted = this.groupBy(this.tempDataSource.list, function (item) {
        return [item.type];
      });
      this.convertDatas = [];
      this.answerCardActiveName = [];
      this.orderBy(sorted, "key", "asc");
      sorted.forEach((item) => {
        let totalScore = 0;
        item.value.forEach((t) => {
          totalScore += t.totalScore;
        });
        switch (item.key) {
          case "[1]":
            this.convertDatas.push({
              name: "单选题",
              code: "Single",
              count: item.value.length,
              totalScore: totalScore,
              childs: item.value,
            });
            this.answerCardActiveName.push("Single");
            break;
          case "[2]":
            this.convertDatas.push({
              name: "多选题",
              code: "Multiple",
              count: item.value.length,
              totalScore: totalScore,
              childs: item.value,
            });
            this.answerCardActiveName.push("Multiple");
            break;
          case "[3]":
            this.convertDatas.push({
              name: "判断题",
              code: "Judgment",
              count: item.value.length,
              totalScore: totalScore,
              childs: item.value,
            });
            this.answerCardActiveName.push("Judgment");
            break;
          case "[4]":
            this.convertDatas.push({
              name: "填空题",
              code: "Blank",
              count: item.value.length,
              totalScore: totalScore,
              childs: item.value,
            });
            this.answerCardActiveName.push("Blank");
            break;
          case "[5]":
            this.convertDatas.push({
              name: "简答题",
              code: "Answer",
              count: item.value.length,
              totalScore: totalScore,
              childs: item.value,
            });
            this.answerCardActiveName.push("Answer");
            break;
        }
      });
      console.log(this.convertDatas);
    },
    /**
     * 排序
     * @param {} datas 数组
     * @param {} col 列
     * @param {} type 类型 desc,asc
     * @returns {}
     */
    orderBy(datas, col, type) {
      let m;
      for (let i = 0; i < datas.length; i++) {
        for (let k = 0; k < datas.length; k++) {
          if (type === "asc") {
            if (datas[i][col] < datas[k][col]) {
              m = datas[k];
              datas[k] = datas[i];
              datas[i] = m;
            }
          } else if (type === "desc") {
            if (datas[i][col] > datas[k][col]) {
              m = datas[k];
              datas[k] = datas[i];
              datas[i] = m;
            }
          }
        }
      }
      return datas;
    },
    /**
     * 分组
     * @param array 数据集
     * @param f 函数
     * let sorted = groupBy(list, function(item){ return [item.name];});
     */
    groupBy(array, f) {
      const groups = {};
      const keyValues = [];
      array.forEach(function (o) {
        const group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      Object.keys(groups).map(function (group) {
        return keyValues.push({key: group, value: groups[group]});
      });
      return keyValues;
    },
    /**
     * 倒计时
     */
    countDowm() {
      let self = this;
      clearInterval(this.promiseTimer);
      this.promiseTimer = setInterval(function () {
        if (self.hour === 0 && self.minute === 0 && self.second === 0) {
          self.disabledAnswer = true;
        }
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59;
            self.minute -= 1;
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0;
            self.$emit("countDowmEnd", true);
            clearInterval(self.promiseTimer);
          } else {
            self.second -= 1;
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59;
            self.minute -= 1;
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1;
            self.minute = 59;
            self.second = 59;
          } else {
            self.second -= 1;
          }
        }
      }, 1000);
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}
// 内容
.content {
  width: 1262px;
  margin-bottom: 80px;
  background-color: #fff;
  padding: 20px 40px;
<style lang="scss" scoped>
.main {
  width: 1227px;
  background: white;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 32px 40px 0 40px;
}
.paper-main {
  overflow: hidden;
  .paper-header {
    width: 100%;
    height: 60px;
    background-color: #f7f7f7;
    position: absolute;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .paper-content {
    display: flex;
    // margin-top: 60px;
    .paper-left {
      flex: 1;
      padding: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid #e4e4e4;
      border-top: none;
      height: 580px;
    }
    .paper-right {
      height: 580px;
      width: 300px;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #e4e4e4;
      border-top: none;
    }
  }
}
.paper-footer {
  line-height: 60px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}
.paper-title {
  padding-left: 10px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  /* background: #f7f7f7; */
}
.paper-title h1 {
  font-size: 1.2em;
  margin: 0;
}
.downTime {
  color: rgb(230, 93, 110);
  font-size: 24px;
  font-weight: bold;
  float: right;
  line-height: 1em;
}
.answer-button {
  padding: 0px;
  color: #0a0a0a;
  /* background-color: #ffffff; */
  border-color: #e4e4e4;
  margin-left: 10px;
  width: 30px;
  height: 30px;
}
.answer-button:hover {
  /* background: #ecf1ef; */
  border-color: #e4e4e4;
  color: #0a0a0a;
}
.answer-button-check {
  background: #13ce66;
  border-color: #30b08f;
}
// 单选样式
.answer-radio {
  display: list-item;
  margin: 5px 0px;
  list-style: none;
}
// 多选样式
.answer-checkbox {
  display: list-item;
  margin: 5px 0px;
  list-style: none;
}
.subject-title {
  padding-left: 10px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  /* background: #f7f7f7; */
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.subject-title h2 {
  font-size: 16px;
  display: inline-block;
}
.subject-title span {
  font-size: 16px;
  display: inline-block;
}
.subject-remark {
  /* background: #f7f7f7; */
}
.subject-remark .item {
  display: block;
  padding: 5px;
}
.subject-remark .title {
  font-weight: bold;
}
.el-radio > > > .el-radio__input.is-checked .el-radio__inner {
  background-color: #13ce66;
  border-color: #13ce66;
}
.el-radio-button > > > .el-radio-button__inner {
  padding: 10px;
}
.el-collapse-item h2 {
  width: 150px;
  font-size: 14px;
  display: inline-block;
}
.el-form--label-top > > > .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0px;
}
.el-card {
  margin: 10px;
}
.el-card > > > .el-card__header {
  /* background-color: #ffffff; */
  padding: 0px 10px;
  line-height: 35px;
  font-size: 16px;
}
.el-card > > > .el-card__body {
  padding: 5px 20px;
}
</style>
src/views/Manage/TestPaper/index.vue
@@ -7,64 +7,48 @@
        <TitleIndex title='试卷管理' />
        <div class="content">
          <!-- 试卷生成按钮 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;display: flex; align-items: center;">
            <el-page-header @back="goBack()"/>
            <el-button
              type="primary"
              @click="getCreate"
            >试卷生成</el-button>
            <el-button
              type="primary"
              @click="toTemplate"
            >随机试卷模板</el-button>
          </div>
          <!-- 搜索 -->
          <div>
            <el-form
              :inline="true"
              :model="formLabelAlign"
              class="demo-form-inline"
              :model="queryParam"
              label-width="80px"
            >
              <el-form-item>
                <el-input v-model="formLabelAlign.type"></el-input>
                <el-input v-model="queryParam.id" placeholder="试卷编号" style="width: 120px" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="queryParam.name" placeholder="试卷名" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  v-model="queryParam.subjectId"
                  placeholder="全部科目"
                  clearable
                >
                  <el-option
                    label="全部科目"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="语文"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="数学"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="英语"
                    value="beijing"
                  ></el-option>
                  <el-option v-for="item in subjects" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="选择题"
                  v-model="queryParam.paperType"
                  placeholder="试卷类型"
                  clearable
                >
                  <el-option
                    label="选择题"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="问答题"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="判断题"
                    value="beijing"
                  ></el-option>
                  <el-option label="固定试卷" value="1" />
                  <el-option label="随机试卷" value="2" />
                  <el-option label="随序试卷" value="3" />
                </el-select>
              </el-form-item>
@@ -73,6 +57,7 @@
                  style="width:100px;"
                  type="primary"
                  size="small"
                  @click="getPage"
                >查询</el-button>
              </el-form-item>
            </el-form>
@@ -88,20 +73,40 @@
          >
            <el-table-column
              align="center"
              prop="title"
              prop="id"
              label="试卷编号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="试卷名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="type"
              label="题目类型"
              prop="subjectId"
              label="科目"
            >
              <template slot-scope="scope">
                {{ translate(scope.row.subjectId) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="subject"
              label="科目"
              prop="paperType"
              label="试卷类型"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.paperType === 1">固定试卷</div>
                <div v-else-if="scope.row.paperType === 2">随机试卷</div>
                <div v-else-if="scope.row.paperType === 3">随序试卷</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggestTime"
              label="建议时长(分钟)"
            >
            </el-table-column>
            <el-table-column
@@ -114,120 +119,207 @@
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
              <el-button type="text">预览</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
              <el-button type="text" @click="deletePaper(scope.row)" class="link-left">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="block"
            style="display: flex; margin-top: 40px;"
            class="flex"
            style="justify-content:center;margin-top:20px;"
          >
            <el-pagination
              style="margin:auto"
              background
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
            <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                        @pagination="getPage"/>
          </div>
        </div>
      </div>
        <!-- 添加试卷对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body >
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="试卷名称" prop="name" >
              <el-input v-model="form.name" placeholder="请输入试卷名称" style="width: 300px"/>
            </el-form-item>
            <el-form-item label="科目" prop="subjectId">
              <el-select v-model="form.subjectId" placeholder="请选择科目" style="width: 200px">
                <el-option
                  v-for="item in subjects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="试卷类型" prop="paperType">
              <el-select v-model="form.paperType" placeholder="请选择试卷类型" style="width: 200px">
                <el-option label="固定试卷" value="1" />
                <el-option label="随序试卷" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="考试时长(分钟)" prop="suggestTime">
              <el-input-number v-model="form.suggestTime" placeholder="请输入考试时长"/>
            </el-form-item>
            <el-button type="primary" @click="toCreate">编辑题目</el-button>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import examPaperApi from '@/api/examPaper'
import subjectApi from '@/api/subject'
import Pagination from "@/components/Pagination"
export default {
  components: {Pagination},
  data() {
    return {
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,
      queryParam: {
        id: null,
        paperType: null,
        subjectId: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
      ],
      form: {},
      tableData: [],
      subjects: [],
      // 表单校验
      rules: {
        name: [
          { required: true, message: "试卷名称不能为空", trigger: "blur" }
        ],
        subjectId: [
          { required: true, message: "科目不能为空", trigger: "blur" }
        ],
        paperType: [
          { required: true, message: "试卷类型不能为空", trigger: "blur" }
        ],
        suggestTime: [
          { required: true, message: "考试时长不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created () {
    this.getSubjects();
    this.getPage()
  },
  methods: {
    translate(subjectId) {
      const subject = this.subjects.find(subject => subject.id == subjectId);
      return subject ? subject.name : '未知';
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    //提交按钮
    onSubmit() {
      console.log("submit!");
    cancel(){
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        name: null,
        subjectId: null,
        paperType: null,
      };
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    },
    // 生成试卷
    /** 生成试卷对话框 */
    getCreate() {
      // 跳转到生成页面
      this.reset();
      this.open = true;
      this.title = "试卷配置";
    },
    // 配置试卷题目
    toCreate() {
      //跳转到对应的管理页面
      this.$router.push({
        path: "/manage/test-paper-generation",
      });
    },
    toTemplate() {
      //跳转到模板管理页面
      this.$router.push({
        path: "/manage/paper-template",
      });
    },
    deletePaper (row) {
      examPaperApi.deletePaper(row.id).then(re => {
        if (re.code === 1) {
          this.getPage()
          this.$message.success("删除成功")
        } else {
          this.$message.error(re.message)
        }
      })
    },
    getPage () {
      this.listLoading = true
      examPaperApi.pageList(this.queryParam).then(re => {
        const data = re.data
        this.tableData = data.list
        this.total = data.total
        this.queryParam.pageIndex = data.pageNum
        this.listLoading = false
      })
    },
    // 获取科目
    getSubjects() {
      subjectApi.list().then(re => {
        this.subjects = re.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.deptId && this.form.deptId.length > 0) {
            this.form.deptId = this.form.deptId[this.form.deptId.length - 1]
          }
          let temp = {
            ...this.form,
            category: parseInt(this.form.category)
          };
          if (temp.id != null) {
            updatePoint(temp).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPoint(temp).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset()
              this.getList();
            });
          }
        } else {
          console.log("error")
        }
      })
    },
  },
};
</script>