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.
335 lines
11 KiB
335 lines
11 KiB
<template> |
|
<div> |
|
<el-dialog title="选择试卷大纲模板" :visible.sync="listVisible" width="1200px" :close-on-click-modal="false" |
|
@closed="closeDia"> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<label>题型</label> |
|
<el-select v-model="filter.questionType" clearable placeholder="请选择题目类型" @change="initData"> |
|
<el-option v-for="(item, i) in questionTypes" :key="i" :value="item.name"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>搜索</label> |
|
<el-input style="width: 250px;" placeholder="请输入模板名称" prefix-icon="el-icon-search" |
|
v-model="filter.templateName" clearable /> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-button type="primary" @click="add">新增模板</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table :data="list" stripe header-align="center" row-key="libraryId"> |
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
<el-table-column prop="templateName" label="模板名称" align="center" min-width="100"></el-table-column> |
|
<el-table-column prop="questionType" label="题型" align="center" min-width="140"></el-table-column> |
|
<el-table-column prop="outlineNum" label="大题数" align="center" width="60"></el-table-column> |
|
<el-table-column prop="questionNum" label="小题总数" align="center" width="80"></el-table-column> |
|
<el-table-column prop="totalScore" label="总分" align="center" width="60"></el-table-column> |
|
<el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column> |
|
<el-table-column prop="createUser" label="创建人" align="center" width="80"></el-table-column> |
|
<el-table-column label="操作" align="center" width="150"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="useTemplate(scope.row, 0)">使用模板</el-button> |
|
<el-button type="text" @click="edit(scope.row, 1)">编辑</el-button> |
|
<el-button type="text" @click="del(scope.row)">删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" |
|
:total="total"></el-pagination> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="listVisible = false">关闭</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="新增模板" :visible.sync="detailVisible" width="800px" :close-on-click-modal="false"> |
|
<el-form :model="form" :rules="rules" label-width="100px"> |
|
<el-form-item prop="templateName" label="模板名称"> |
|
<el-input placeholder="请输入模板名称" v-model="form.templateName" /> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<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="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 text-right">目标总题数：{{ questionNum }}；目标总分：{{ totalScore }}</p> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="detailVisible = false">取消</el-button> |
|
<el-button type="primary" v-loading="submiting" @click="submit">保存模板</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import _ from 'lodash' |
|
export default { |
|
props: ['visible'], |
|
data () { |
|
return { |
|
arabicToChinese: Util.arabicToChinese, |
|
listVisible: false, |
|
searchTimer: null, |
|
questionTypes: [ |
|
{ |
|
name: '单选题' |
|
}, |
|
{ |
|
name: '多选题' |
|
}, |
|
{ |
|
name: '判断题' |
|
}, |
|
{ |
|
name: '填空题' |
|
}, |
|
{ |
|
name: '问答题' |
|
}, |
|
], |
|
|
|
filter: { |
|
templateName: '', |
|
questionType: '', |
|
}, |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
|
|
detailVisible: false, |
|
originForm: {}, |
|
form: { |
|
templateName: '', |
|
paperOutline: [ |
|
{ |
|
examQuestions: [], |
|
outlineName: '单选题', |
|
questionNum: '', |
|
questionType: '单选题', |
|
targetScore: '', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '多选题', |
|
questionNum: '', |
|
questionType: '多选题', |
|
targetScore: '', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '判断题', |
|
questionNum: '', |
|
questionType: '判断题', |
|
targetScore: '', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '填空题', |
|
questionNum: '', |
|
questionType: '填空题', |
|
targetScore: '', |
|
}, |
|
{ |
|
examQuestions: [], |
|
outlineName: '问答题', |
|
questionNum: '', |
|
questionType: '问答题', |
|
targetScore: '', |
|
}, |
|
], |
|
}, |
|
rules: { |
|
templateName: [ |
|
{ required: true, message: '请输入模板名称', trigger: 'blur' } |
|
], |
|
}, |
|
submiting: false, |
|
|
|
}; |
|
}, |
|
computed: { |
|
questionNum () { |
|
return this.form.paperOutline.reduce((e, j) => (e += +j.questionNum), 0) |
|
}, |
|
totalScore () { |
|
return this.form.paperOutline.reduce((e, j) => (e += +j.targetScore), 0) |
|
} |
|
}, |
|
watch: { |
|
'filter.templateName': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.initData, 500) |
|
}, |
|
visible () { |
|
this.listVisible = this.visible |
|
this.visible && this.getList() |
|
} |
|
}, |
|
mounted () { |
|
this.originForm = _.cloneDeep(this.form) |
|
}, |
|
methods: { |
|
// 获取模板列表 |
|
async getList () { |
|
try { |
|
const res = await this.$post(this.api.examPaperTemplateList, { |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
...this.filter |
|
}) |
|
this.list = res.pageList.records |
|
this.total = res.pageList.total |
|
} catch (e) { } |
|
}, |
|
// 切换页码 |
|
currentChange (val) { |
|
this.page = val |
|
this.getList() |
|
}, |
|
initData () { |
|
this.page = 1 |
|
this.getList() |
|
}, |
|
// 新增 |
|
add () { |
|
this.form = _.cloneDeep(this.originForm) |
|
this.detailVisible = 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) |
|
}, |
|
// 使用模板 |
|
async useTemplate (row) { |
|
const data = await this.getDetail(row.templateId) |
|
this.$parent.form.paperOutline = data.paperOutline |
|
this.closeDia() |
|
}, |
|
// 获取详情 |
|
async getDetail (id) { |
|
const res = await this.$get(this.api.templateDetails, { |
|
id |
|
}) |
|
return res.template |
|
}, |
|
// 编辑 |
|
async edit (row) { |
|
this.detailVisible = true |
|
const data = await this.getDetail(row.templateId) |
|
this.form = data |
|
}, |
|
// 删除 |
|
async del (row) { |
|
try { |
|
await this.$confirm(`确认要删除【${row.templateName}】吗？`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
}) |
|
await this.$post(this.api.deleteTemplate, { |
|
ids: [row.templateId] |
|
}) |
|
Util.successMsg('删除成功') |
|
this.getList() |
|
} catch (e) { } |
|
}, |
|
// 提交 |
|
async submit () { |
|
if (this.submiting) return false |
|
const { form } = this |
|
if (!form.templateName) return Util.warningMsg('请输入模板名称') |
|
let invalid = 0 |
|
for (const e of form.paperOutline) { |
|
if (!e.questionType) { |
|
Util.warningMsg('请选择题型') |
|
invalid = 1 |
|
break |
|
} |
|
if (!e.questionNum) { |
|
Util.warningMsg('请输入目标题数') |
|
invalid = 1 |
|
break |
|
} |
|
if (!e.targetScore) { |
|
Util.warningMsg('请输入目标分值') |
|
invalid = 1 |
|
break |
|
} |
|
} |
|
if (invalid) return false |
|
this.submiting = true |
|
form.createSource = 1 |
|
form.questionNum = this.questionNum |
|
form.totalScore = this.totalScore |
|
form.outlineNum = form.paperOutline.length |
|
form.questionType = [...new Set(form.paperOutline.map(e => e.questionType))].join('、') |
|
try { |
|
await this.$post(this.api.saveExamPaperTemplate, form) |
|
Util.successMsg('保存成功') |
|
this.detailVisible = false |
|
this.submiting = false |
|
this.getList() |
|
} catch (e) { |
|
this.submiting = false |
|
} |
|
}, |
|
// 弹框关闭回调 |
|
closeDia () { |
|
this.$emit('update:visible', false) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.action-icon { |
|
margin-right: 10px; |
|
font-size: 18px; |
|
color: $main-color; |
|
cursor: pointer; |
|
} |
|
</style> |