New file |
| | |
| | | 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 |
| | | }) |
| | | } |
| | |
| | | name: 'TestPaperGeneration', |
| | | component: () => import('@/views/Manage/TestPaper/TestPaperGeneration.vue') |
| | | }, |
| | | //随机试卷模板管理 |
| | | { |
| | | path: 'paper-template', |
| | | name: 'PaperTemplate', |
| | | component: () => import('@/views/Manage/TestPaper/PaperTemplate.vue') |
| | | }, |
| | | // 班级管理 |
| | | { |
| | | path: 'class-management', |
New file |
| | |
| | | <!-- 试卷管理 --> |
| | | <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> |
| | | |
| | | |
| | |
| | | <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> |
| | | |
| | |
| | | <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> |
| | | |
| | |
| | | style="width:100px;" |
| | | type="primary" |
| | | size="small" |
| | | @click="getPage" |
| | | >查询</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | > |
| | | <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 |
| | |
| | | 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> |