<!-- 试卷管理 -->
|
<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-button
|
type="primary"
|
@click="getCreate"
|
>试卷生成</el-button>
|
<el-button
|
type="primary"
|
@click="toTemplate"
|
>随机试卷模板</el-button>
|
</div>
|
<!-- 搜索 -->
|
<div>
|
<el-form
|
:inline="true"
|
:model="queryParam"
|
label-width="80px"
|
>
|
<el-form-item>
|
<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="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>
|
<el-select
|
v-model="queryParam.paperType"
|
placeholder="试卷类型"
|
clearable
|
>
|
<el-option label="固定试卷" value="1" />
|
<el-option label="随机试卷" value="2" />
|
<el-option label="随序试卷" value="3" />
|
</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="id"
|
label="试卷编号"
|
>
|
</el-table-column>
|
<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="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
|
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.pageIndex" :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: 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>
|
|
</template>
|
<script>
|
import examPaperApi from '@/api/examPaper'
|
import subjectApi from '@/api/subject'
|
import Pagination from "@/components/Pagination"
|
export default {
|
components: {Pagination},
|
data() {
|
return {
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 总条数
|
total: 0,
|
queryParam: {
|
id: null,
|
paperType: null,
|
subjectId: null,
|
pageIndex: 1,
|
pageSize: 10
|
},
|
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();
|
},
|
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>
|
<style scoped lang="scss">
|
.flex {
|
display: flex;
|
}
|
// 内容
|
.content {
|
width: 1262px;
|
margin-bottom: 80px;
|
background-color: #fff;
|
padding: 20px 40px;
|
border-radius: 10px;
|
}
|
</style>
|
