You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
395 lines
12 KiB
395 lines
12 KiB
<template> |
|
<div class="page"> |
|
<Breadcrumb :data="crumbs" /> |
|
<p class="page-name mb">试卷</p> |
|
<el-form :model="form" :rules="rules" class="input-form model" label-width="140px"> |
|
<el-form-item prop="name" label="试卷名称"> |
|
<el-input style="width: 940px" placeholder="请输入试卷名称" v-model="form.name" clearable maxlength="100" /> |
|
</el-form-item> |
|
<div class="item-line"> |
|
<el-form-item prop="particularYear" label="年份"> |
|
<el-date-picker v-model="form.particularYear" type="year" placeholder="请选择年份"> |
|
</el-date-picker> |
|
</el-form-item> |
|
<el-form-item required label="所属试卷分类"> |
|
<el-cascader placeholder="请选择所属试卷分类" :options="types" v-model="cascaderValue" :props="cascaderProps" clearable |
|
style="width: 100%"> |
|
</el-cascader> |
|
</el-form-item> |
|
</div> |
|
<div class="item-line"> |
|
<el-form-item prop="paperType" label="建议用途"> |
|
<el-select v-model="form.paperType" clearable placeholder="请选择建议用途"> |
|
<el-option v-for="(item, i) in paperTypes" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="suggestTime" label="估计用时"> |
|
<el-input placeholder="请输入估计用时" v-model="form.suggestTime"> |
|
<template slot="append">分钟</template> |
|
</el-input> |
|
</el-form-item> |
|
</div> |
|
<div class="item-line"> |
|
<el-form-item prop="columnId" label="所属专业"> |
|
<el-select v-model="form.professionalId" clearable placeholder="请选择所属专业"> |
|
<el-option v-for="(item, i) in professionals" :key="i" :label="item.professionalName" |
|
:value="item.professionalId" filter></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="difficult" label="试卷难度"> |
|
<el-select v-model="form.difficult" clearable placeholder="请选择试卷难度"> |
|
<el-option v-for="(item, i) in difficults" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</div> |
|
<el-form-item prop="userName" label="试卷说明"> |
|
<Ueditor @ready="editorReady" /> |
|
</el-form-item> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="flex j-between m-b-20"> |
|
<p>默认模板</p> |
|
<el-button type="primary" size="small" @click="showTemplate">选择大纲模板</el-button> |
|
</div> |
|
<el-table :data="form.paperOutline" stripe header-align="center" row-key="id"> |
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
<el-table-column prop="outlineName" label="大题" align="center" min-width="120"> |
|
<template slot-scope="scope">第{{ arabicToChinese(scope.$index + 1) }}大题</template> |
|
</el-table-column> |
|
<el-table-column prop="name" label="题型" align="center" min-width="120"> |
|
<template slot-scope="scope"> |
|
<el-select v-model="scope.row.questionType" placeholder="请选择题型"> |
|
<el-option v-for="(item, i) in questionTypes" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="name" label="目标题数" align="center" min-width="120"> |
|
<template slot-scope="scope"> |
|
<el-input placeholder="请输入目标题数" v-model.number="scope.row.questionNum" type="number" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="name" label="目标分值" align="center" min-width="120"> |
|
<template slot-scope="scope"> |
|
<el-input placeholder="请输入目标分值" v-model="scope.row.targetScore" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" align="center" width="120"> |
|
<template slot-scope="scope"> |
|
<i class="el-icon-circle-plus-outline action-icon" @click="addLine(scope.$index)"></i> |
|
<i class="el-icon-remove-outline action-icon" @click="delLine(scope.$index)"></i> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<p class="m-t-10 m-b-20 text-right">目标总题数：{{ questionCount }}；目标总分：{{ score }}</p> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="flex j-between a-center"> |
|
<p>选择试题</p> |
|
<div> |
|
<el-button type="primary" @click="submit(0)">一键分配分值</el-button> |
|
<el-button type="primary" @click="submit(1)">自动选题</el-button> |
|
</div> |
|
</div> |
|
|
|
<ul class="ques"> |
|
<li v-for="(item, i) in form.paperOutline" :key="i"> |
|
<div class="top"> |
|
<div> |
|
<span class="serial">第{{ arabicToChinese(i + 1) }}大题</span> |
|
<el-input placeholder="请输入大题名称" v-model="item.outlineName" /> |
|
</div> |
|
<div> |
|
<el-button type="primary" @click="submit(0)">一键分配分值</el-button> |
|
<el-button type="primary" @click="submit(1)">批量添加</el-button> |
|
<el-button type="danger" @click="submit(1)">批量删除试题</el-button> |
|
</div> |
|
</div> |
|
<p class="sum">本大题共{{ item.questionNum }}小题，共{{ item.targetScore }}分</p> |
|
</li> |
|
</ul> |
|
|
|
</el-form> |
|
<div class="btns"> |
|
<el-button @click="submit(0)">保存草稿</el-button> |
|
<el-button type="primary" @click="submit(1)">发布</el-button> |
|
<el-button v-if="$route.query.id" @click="preview">预览</el-button> |
|
<el-button @click="back">取消</el-button> |
|
</div> |
|
|
|
<Template :visible.sync="templateVisible" /> |
|
</div> |
|
</template> |
|
<script> |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import Ueditor from '@/components/ueditor' |
|
import Breadcrumb from '@/components/breadcrumb' |
|
import Template from './template' |
|
export default { |
|
components: { Ueditor, Breadcrumb, Template }, |
|
data () { |
|
return { |
|
crumbs: [ |
|
{ |
|
name: '试卷管理', |
|
route: 'list' |
|
}, |
|
{ |
|
name: '创建试卷' |
|
}, |
|
], |
|
libraryId: this.$route.query.libraryId, |
|
headers: { |
|
token: Util.local.get(Setting.tokenKey) |
|
}, |
|
arabicToChinese: Util.arabicToChinese, |
|
types: [], |
|
cascaderValue: [], |
|
cascaderProps: { |
|
checkStrictly: true, |
|
label: "classificationName", |
|
value: "classificationId" |
|
}, |
|
paperTypes: [ |
|
{ |
|
id: 0, |
|
name: '练习' |
|
}, |
|
{ |
|
id: 1, |
|
name: '考核' |
|
}, |
|
{ |
|
id: 2, |
|
name: '竞赛' |
|
}, |
|
], |
|
professionals: [], |
|
difficults: [ |
|
{ |
|
id: 1, |
|
name: '简单' |
|
}, |
|
{ |
|
id: 2, |
|
name: '普通' |
|
}, |
|
{ |
|
id: 3, |
|
name: '较难' |
|
}, |
|
{ |
|
id: 4, |
|
name: '难' |
|
}, |
|
], |
|
questionTypes: [ |
|
{ |
|
name: '单选题' |
|
}, |
|
{ |
|
name: '多选题' |
|
}, |
|
{ |
|
name: '判断题' |
|
}, |
|
{ |
|
name: '填空题' |
|
}, |
|
{ |
|
name: '问答题' |
|
}, |
|
], |
|
|
|
richEditor: { |
|
object: null, |
|
parameterName: '', |
|
instance: null |
|
}, |
|
form: { |
|
classificationId: '', |
|
difficult: '', |
|
libraryId: '', |
|
name: '', |
|
paperMethod: '', |
|
paperType: '', |
|
particularYear: '', |
|
professionalId: '', |
|
remarks: '', |
|
score: '', |
|
questionCount: 0, |
|
suggestTime: '', |
|
paperOutline: [ |
|
{ |
|
examQuestions: [], |
|
outlineName: '单选题', |
|
questionNum: '10', |
|
questionType: '单选题', |
|
targetScore: '20.0', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '多选题', |
|
questionNum: '5', |
|
questionType: '多选题', |
|
targetScore: '15.0', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '判断题', |
|
questionNum: '5', |
|
questionType: '判断题', |
|
targetScore: '10.0', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '填空题', |
|
questionNum: '5', |
|
questionType: '填空题', |
|
targetScore: '15.0', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '问答题', |
|
questionNum: '3', |
|
questionType: '问答题', |
|
targetScore: '40.0', |
|
}, |
|
], |
|
}, |
|
rules: { |
|
name: [ |
|
{ required: true, message: '请输入试卷名称', trigger: 'blur' } |
|
], |
|
particularYear: [ |
|
{ required: true, message: '请选择年份', trigger: 'change' } |
|
], |
|
paperType: [ |
|
{ required: true, message: '请选择建议用途', trigger: 'change' } |
|
], |
|
suggestTime: [ |
|
{ required: true, message: '请输入估计用时', trigger: 'blur' } |
|
], |
|
name: [ |
|
{ required: true, message: '请输入试卷名称', trigger: 'blur' } |
|
], |
|
}, |
|
templateVisible: false, |
|
}; |
|
}, |
|
computed: { |
|
questionCount () { |
|
return this.form.paperOutline.reduce((e, j) => (e += +j.questionNum), 0) |
|
}, |
|
score () { |
|
return this.form.paperOutline.reduce((e, j) => (e += +j.targetScore), 0) |
|
} |
|
}, |
|
mounted () { |
|
this.getType() |
|
this.getProfessional() |
|
}, |
|
methods: { |
|
// 获取试卷分类 |
|
async getType () { |
|
try { |
|
const res = await this.$post(this.api.examClassificationList, { |
|
libraryId: this.libraryId, |
|
}) |
|
const data = res.treeList |
|
this.handleType(data) |
|
this.types = data |
|
} catch (e) { } |
|
}, |
|
// 获取所属专业 |
|
async getProfessional () { |
|
try { |
|
const res = await this.$post(this.api.queryProfessional, { |
|
pageNum: 1, |
|
pageSize: 1000, |
|
}) |
|
this.professionals = res.pageList.records |
|
} catch (e) { } |
|
}, |
|
// 处理树形 |
|
handleType (list) { |
|
list.map(e => { |
|
if (e.children && e.children.length) { |
|
this.handleType(e.children) |
|
} else { |
|
delete e.children |
|
} |
|
}) |
|
}, |
|
editorReady (instance) { |
|
// this.richEditor.instance = instance |
|
// let currentContent = this.richEditor.object[this.richEditor.parameterName] |
|
// this.richEditor.instance.setContent(currentContent) |
|
// // 光标定位到Ueditor |
|
// this.richEditor.instance.focus(true) |
|
}, |
|
// 选择大纲模板 |
|
showTemplate () { |
|
this.templateVisible = true |
|
}, |
|
// 试卷大纲添加行 |
|
addLine (i) { |
|
this.form.paperOutline.splice(i + 1, 0, { |
|
examQuestions: [], |
|
outlineName: '', |
|
questionNum: '', |
|
questionType: '', |
|
targetScore: '', |
|
}) |
|
}, |
|
// 试卷大纲移除行 |
|
delLine (i) { |
|
this.form.paperOutline.length > 1 && this.form.paperOutline.splice(i, 1) |
|
}, |
|
// 提交 |
|
submit () { |
|
|
|
}, |
|
// 返回 |
|
back () { |
|
|
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.action-icon { |
|
margin-right: 10px; |
|
font-size: 18px; |
|
color: $main-color; |
|
cursor: pointer; |
|
} |
|
|
|
.ques { |
|
li { |
|
padding: 15px; |
|
margin: 20px 0 10px; |
|
border: 1px solid #dbdbdb; |
|
} |
|
|
|
.top { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.serial { |
|
margin-right: 10px; |
|
font-size: 13px; |
|
} |
|
|
|
.sum { |
|
margin: 15px 0; |
|
font-size: 13px; |
|
color: $main-color; |
|
} |
|
} |
|
</style> |