提交 fed3d1c7 authored 作者: matian's avatar matian

feat:新增考试中心

上级 6cf762b3
......@@ -2,10 +2,10 @@
<div class="table-list">
<div class="table-list-hd">
<!-- 筛选 -->
<div class="table-list-filter" v-if="filters.length">
<el-form :inline="true" :model="params" ref="filterForm">
<div class="table-list-filter">
<el-form v-if="filters.length" :inline="true" :model="params" ref="filterForm">
<template v-for="item in filters">
<el-form-item :label="item.label" :prop="item.prop" :key="item.prop">
<el-form-item :label="item.label" :prop="item.prop" :key="item.prop" class="filter-form-item">
<template v-if="item.slots">
<slot :name="item.slots" v-bind="{ params }"></slot>
</template>
......@@ -31,29 +31,31 @@
</template>
</el-form-item>
</template>
<el-form-item class="filter-buttons">
<el-form-item class="filter-buttons" v-if="!searchResetSeparateLine">
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
<el-button @click="showMoreFilter" v-if="hasMoreFilter">更多筛选</el-button>
</el-form-item>
</el-form>
<div class="filter-bar">
<div class="filte-bar-left-btns">
<template v-if="searchResetSeparateLine">
<el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
<el-button icon="el-icon-refresh-left" size="small" @click="reset">重置</el-button>
</template>
</div>
<div class="filter-bar-right">
<slot name="filter-bar-right" />
</div>
</div>
</div>
<div class="table-list-hd-aside"><slot name="header-aside" /></div>
</div>
<slot></slot>
<!-- 主体 -->
<div class="table-list-bd">
<slot name="body" v-bind="{ data: dataList }">
<el-table
:data="dataList"
v-loading="loading"
v-bind="$attrs"
v-on="$listeners"
style="height: 100%"
ref="table"
>
<el-table :data="dataList" v-loading="loading" v-bind="$attrs" v-on="$listeners" ref="table">
<template v-for="item in columns">
<el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
<el-table-column v-bind="item" :key="item.prop" v-if="visible(item)" align="center">
<template v-slot:default="scope" v-if="item.slots || item.computed">
<slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot>
<div v-html="item.computed(scope)" v-if="item.computed"></div>
......@@ -63,65 +65,23 @@
</el-table>
</slot>
</div>
<!-- 底部 -->
<div class="table-list-ft">
<div style="padding: 10px 0">
<div>
<slot name="footer"></slot>
</div>
<el-pagination
class="table-list-pagination"
layout="total, prev, pager, next, sizes, jumper"
:layout="pagationLayout"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="page.size"
:total="page.total"
:current-page.sync="page.currentPage"
@size-change="pageSizeChange"
@current-change="fetchList()"
:hide-on-single-page="true"
v-if="hasPagination"
>
</el-pagination>
</div>
<!-- 更多筛选 -->
<el-drawer title="更多筛选" :visible.sync="moreFilterVisible" ref="drawer">
<div class="more-filter-drawer">
<div class="more-filter">
<el-form :model="params" ref="moreFilterForm">
<template v-for="item in moreFilters">
<el-form-item :label="item.label" :prop="item.prop" :key="item.prop">
<template v-if="item.slots">
<slot :name="item.slots" v-bind="{ params }"></slot>
</template>
<template v-else>
<!-- input -->
<el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
<!-- select -->
<el-select
v-model="params[item.prop]"
clearable
v-bind="item"
v-if="item.type === 'select'"
style="width: 100%"
>
<template v-for="(option, index) in item.options">
<el-option
:label="option[item.labelKey] || option.label"
:value="option[item.valueKey] || option.value"
:key="index"
></el-option>
</template>
</el-select>
</template>
</el-form-item>
</template>
</el-form>
</div>
<div class="more-filter-buttons">
<el-button @click="cancelMoreFilter">取 消</el-button>
<el-button type="primary" @click="primaryMoreFilter">确定</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
......@@ -133,8 +93,7 @@ export default {
remote: { type: Object, default: () => ({}) },
// 筛选
filters: { type: Array, default: () => [] },
// 更多筛选
moreFilters: { type: Array, default: () => [] },
searchResetSeparateLine: { type: Boolean, default: false },
// 列表项
columns: { type: Array, default: () => [] },
// 列表数据
......@@ -142,15 +101,15 @@ export default {
// 是否含有翻页
hasPagination: { type: Boolean, default: true },
// 每页多少条数据
limit: { type: Number, default: 20 }
limit: { type: Number, default: 20 },
pagationLayout: { type: String, default: 'total, prev, pager, next, sizes, jumper' }
},
data() {
return {
loading: false,
params: this.remote.params || {},
dataList: this.data,
page: { total: 0, size: this.limit, currentPage: 1 },
moreFilterVisible: false
page: { total: 0, size: this.limit, currentPage: 1 }
}
},
watch: {
......@@ -170,9 +129,6 @@ export default {
computed: {
table() {
return this.$refs.table
},
hasMoreFilter() {
return !!this.moreFilters.length
}
},
methods: {
......@@ -190,24 +146,24 @@ export default {
let params = this.params
// 翻页参数设置
if (this.hasPagination) {
params.page = this.page.currentPage
params.limit = this.page.size
params.page = this.page.currentPage.toString()
params.page_size = this.page.size.toString()
}
// 接口请求之前
if (beforeRequest) {
params = beforeRequest(params, isReset)
}
for (const key in params) {
if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
if (params[key] === '' || params[key] === undefined || params[key] === null) {
delete params[key]
}
}
this.loading = true
httpRequest(params)
.then(res => {
const { data = [], total = 0 } = res.data || {}
this.page.total = total
this.dataList = callback ? callback(data) : data
const { data = {} } = res || {}
this.page.total = parseInt(data.total || 0)
this.dataList = callback ? callback(data) : data.list
})
.catch(() => {
this.page.total = 0
......@@ -226,8 +182,6 @@ export default {
reset() {
// 清空筛选条件
this.$refs.filterForm && this.$refs.filterForm.resetFields()
// 清空更多筛选条件
this.hasMoreFilter && this.$refs.moreFilterForm && this.$refs.moreFilterForm.resetFields()
// 初始化页码
this.page.currentPage = 1
// 刷新列表
......@@ -245,21 +199,6 @@ export default {
},
visible(item) {
return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
},
// 显示更多筛选
showMoreFilter() {
this.moreFilterVisible = true
},
// 取消更多筛选
cancelMoreFilter() {
this.moreFilterVisible = false
// 清空筛选条件
this.$refs.moreFilterForm && this.$refs.moreFilterForm.resetFields()
},
// 确定更多筛选
primaryMoreFilter() {
this.moreFilterVisible = false
this.search()
}
},
beforeMount() {
......@@ -277,11 +216,20 @@ export default {
}
.table-list-hd {
display: flex;
margin-bottom: 10px;
}
.table-list-filter {
flex: 1;
}
.filter-bar {
display: flex;
margin-bottom: 15px;
}
.filte-bar-left-btns {
flex: 1;
}
.el-form--inline .el-form-item {
margin-right: 30px;
}
.table-list-bd {
flex: 1;
}
......@@ -297,21 +245,4 @@ export default {
.el-table-column--selection .cell {
padding: 0 14px !important;
}
.more-filter-drawer {
height: 100%;
display: flex;
flex-direction: column;
padding: 0 20px 20px;
box-sizing: border-box;
}
.more-filter {
flex: 1;
overflow-y: auto;
}
.more-filter-buttons {
display: flex;
.el-button {
flex: 1;
}
}
</style>
import httpRequest from '@/utils/axios'
/**
* 获取知识点/标签
*/
export function getExamList(params) {
return httpRequest.get('/exam/v1/exam/index', { params })
}
<template>
<el-form :model="form" label-width="80px" :label-position="labelPosition">
<el-form-item label="开考前:" prop="exam_name">
<el-input v-model="form.exam_name"></el-input>
</el-form-item>
<el-form-item label="考试时间:" prop="value1">
<el-time-picker
<el-card class="baseInfo_content">
<el-row :span="24">
考试名称:<el-input v-model="exam_name" placeholder="请输入考试名称" style="width: 200px"></el-input>
</el-row>
<el-row :span="24" style="margin-top: 20px">
考试时间:<el-time-picker
is-range
v-model="form.value1"
v-model="exam_time"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
>
</el-time-picker>
</el-form-item>
<el-form-item label="提前登录:" prop="first_time">
开考前
<el-input v-model="form.first_time" style="width: 100px"></el-input
</el-row>
<el-row :span="24" style="margin-top: 20px">
<el-radio>提前登录 </el-radio>
开考前<el-input v-model="form.first_time" style="width: 100px"></el-input
>分钟,考生可以登录系统,确认信息。(开考最多60分钟提前登录)
</el-form-item>
<el-form-item label="限制迟到:" prop="last_time">
开考后
<el-input v-model="form.last_time" style="width: 100px"></el-input
</el-row>
<el-row :span="24" style="margin-top: 20px">
<el-radio>限制结束 </el-radio>
<el-input v-model="form.last_time" style="width: 100px">开考后</el-input
>分钟,不允许考生入场,考中退出的考生不受此影响。
</el-form-item>
<el-form-item label="欢迎语:" prop="welcome">
<v-editor></v-editor>
</el-form-item>
</el-form>
</el-row>
<el-row :span="24" style="margin-top: 20px"> 欢迎语:<v-editor></v-editor> </el-row>
</el-card>
</template>
<script>
......@@ -39,7 +38,7 @@ export default {
labelPosition: 'left',
form: {
exam_name: '',
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
exam_time: [],
last_time: '',
welcome: ''
}
......@@ -48,4 +47,11 @@ export default {
}
</script>
<style></style>
<style lang="scss" scoped>
.baseInfo_content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
</style>
<template>
<el-form :model="form" label-width="80px" :label-position="labelPosition">
<el-form-item label="开学前:" prop="exam_name">
<el-checkbox-group v-model="checkList">
<el-checkbox :label="3">限定登录位置</el-checkbox>
<el-checkbox :label="6">考试承诺书</el-checkbox>
</el-checkbox-group>
<el-card>
<el-form-item label="开考前:" prop="exam_before">
<el-checkbox>限定登录位置 </el-checkbox>
<div>
您可以根据IP地址限制考生登录位置,只允许给定IP地址的考生登录考试。<br />如允许多个IP地址,请用英文逗号隔开。您当前所在网络的IP地址是:172.20.1.1
</div>
</el-form-item>
<el-form-item label="考试时间:" prop="value1">
<el-time-picker
is-range
v-model="form.value1"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
>
</el-time-picker>
<el-form-item>
<el-checkbox>限定登录位置 </el-checkbox>
</el-form-item>
<el-form-item label="提前登录:" prop="first_time">
开考前
<el-input v-model="form.first_time" style="width: 100px"></el-input
>分钟,考生可以登录系统,确认信息。(开考最多60分钟提前登录)
</el-card>
<el-card>
<el-form-item label="考试中:" prop="exam_before">
<el-checkbox>锁定考试 </el-checkbox>
<el-form>
<el-form-item>
记录考生登录考试次数,只允许登录<el-input style="width: 100px"></el-input>
<div>当登录考试次数超过限定次数,系统会阻止考生登录考试</div>
</el-form-item>
<el-form-item label="限制迟到:" prop="last_time">
开考后
<el-input v-model="form.last_time" style="width: 100px"></el-input
>分钟,不允许考生入场,考中退出的考生不受此影响。
<el-form-item>
<el-checkbox>网页考试</el-checkbox>
记录考生离开考试页面次数,每超过<el-input style="width: 100px"></el-input>秒计为离开1次,只允许离开<el-input
style="width: 100px"
></el-input
>
<div>当登录考试次数超过限定次数,系统会阻止考生登录考试</div>
</el-form-item>
<el-form-item label="欢迎语:" prop="welcome">
<v-editor></v-editor>
</el-form>
</el-form-item>
<el-form-item>
<el-checkbox>答题水印 </el-checkbox>
<div>
考生作答页面,使用场次唯一编号和考生准考证号作为背景水印。<br />考生作答过程中截屏或者偷录考试内容,可凭此水印追溯到录屏信息。
</div>
</el-form-item>
<el-form-item label="参加考试">
<el-transfer></el-transfer>
</el-form-item>
</el-card>
</el-form>
</template>
<script>
import VEditor from '@/components/tinymce/Index.vue'
export default {
components: { VEditor },
data() {
return {
labelPosition: 'left',
form: {
exam_name: '',
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
exam_before: '',
exam_process: '',
last_time: '',
welcome: ''
}
......
<template>
<el-card>
<div class="finished_title">测试考试</div>
<div class="login_time item">登录时间段:2022-02-23 00:00:00 - 2022-2-24 00:00:00</div>
<div class="check_exam item">选择考试:xxx</div>
<div class="exam_setting item">
考试配置:<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
</el-card>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.finished_title {
display: flex;
justify-content: center;
font-weight: bold;
font-size: 35px;
}
.item {
margin-top: 30px;
}
</style>
......@@ -19,6 +19,11 @@ const routes = [
path: 'newExam',
component: () => import('./views/NewExam.vue'),
meta: { title: '新建考试' }
},
{
path: 'examDetail',
component: () => import('./views/Detail.vue'),
meta: { title: '考试详情' }
}
]
}
......
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<div style="margin-bottom: 30px">
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">考试信息编辑</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">考试试卷编辑</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">信息采集编辑</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">考试配置编辑</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">复制考试地址</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">转移考生</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">导出明细</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">删除考生</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">添加考生</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">发送成绩信息</el-button>
</div>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleDetail(row)">查看详情</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</app-list>
</app-card>
</template>
<script>
export default {
data() {
return {
visible: false,
multipleSelection: [] // 选择项
}
},
computed: {
tableOptions() {
return {
// remote: { httpRequest: getAppList },
filters: [
{
type: 'input',
prop: 'paperName',
placeholder: '请输入考试名称',
label: '姓名'
},
{
type: 'input',
prop: 'paperLabel',
label: '学校'
},
{
type: 'select',
prop: 'paperType',
placeholder: '请选择考试班级',
options: this.natureList,
labelKey: 'name',
valueKey: 'id',
label: '考生状态'
}
],
columns: [
{ type: 'selection', minWidth: '50px', fixed: 'left' },
{ type: 'index', label: '序号', minWidth: '50px', fixed: 'left' },
{ label: '姓名', prop: 'stu_name' },
{ label: '学校', prop: 'stu_school' },
{ label: '考生状态', prop: 'stu_status' }
],
data: [
{
stu_name: '里斯',
stu_school: '清华',
stu_status: ''
}
]
}
}
},
methods: {
// 新建试卷
handleCreatePaper() {
this.$router.push({
path: 'newExam'
})
},
// 编辑试卷
handleDdit(row) {
console.log(row)
this.$router.push({
path: 'newPapers',
query: {
paperDetail: row,
isEdit: true
}
})
},
handleSelectionChange(val) {
this.multipleSelection = val
console.log(val)
},
// 批量删除
batchDelete() {
console.log('111')
},
// 查看详情
handleDetail(row) {
this.$router.push({
path: 'examDetail'
})
},
// 单个删除
handleDelete(row) {
// this.$refs.list.refetch()
}
}
}
</script>
......@@ -13,6 +13,7 @@
</template>
<script>
import { getExamList } from '../api'
export default {
data() {
return {
......@@ -23,58 +24,38 @@ export default {
computed: {
tableOptions() {
return {
// remote: { httpRequest: getAppList },
remote: {
httpRequest: getExamList,
params: {
name: '',
status: ''
}
},
filters: [
{
type: 'input',
prop: 'paperName',
prop: 'name',
placeholder: '请输入考试名称',
label: '考试名称:'
},
{
type: 'input',
prop: 'paperLabel',
prop: 'papers',
placeholder: '请输入考试试卷',
label: '考试试卷'
},
{
type: 'select',
prop: 'paperType',
placeholder: '请选择考试班级',
options: this.natureList,
labelKey: 'name',
valueKey: 'id',
label: '试卷分类:'
}
],
columns: [
{ type: 'selection', minWidth: '50px', fixed: 'left' },
{ type: 'index', label: '序号', minWidth: '50px', fixed: 'left' },
{ label: '考试ID', prop: 'exam_id' },
{ label: '考试名称', prop: 'exam_name' },
{ label: '考试试卷', prop: 'exam_paper' },
{ label: '考试名称', prop: 'name' },
{ label: '考试试卷', prop: 'papers' },
{ label: '考试时间', prop: 'exam_time' },
{ label: '考试班级', prop: 'exam_class' },
{ label: '应考人数', prop: 'join_num' },
{ label: '完成人数', prop: 'finished_num' },
{ label: '应考人数', prop: 'exam_all' },
{ label: '完成人数', prop: 'exam_complete' },
{ label: '在线人数', prop: 'online_num' },
{ label: '考试状态', prop: 'exam_status' },
{ label: '考试状态', prop: 'status_text' },
{ label: '操作', slots: 'table-x', align: 'right', width: 150 }
],
data: [
{
exam_id: 'KS00122312312312',
exam_name: '金融产品数字化营销2022-2 师资培训(中级)',
exam_paper: '中级正式考卷四',
exam_time: '2022-02-09 19:00:00',
exam_class: '中级 1 班、中级 2 班',
join_num: '12',
finished_num: '10',
online_num: '12',
exam_status: '未开始'
}
]
}
}
......@@ -106,12 +87,10 @@ export default {
console.log('111')
},
// 查看详情
// 查看详情
handleDetail(row) {
this.$router.push({
path: 'detail',
query: {
paperDetail: JSON.stringify(row)
}
path: 'examDetail'
})
},
// 单个删除
......
......@@ -10,22 +10,31 @@
<base-info v-if="stepsIndex === 0" />
<check-paper v-if="stepsIndex === 1" />
<personal-info v-if="stepsIndex === 2" />
<exam-setting v-if="stepsIndex === 3" />
<finished v-if="stepsIndex === 4" />
<div style="float: right">
<el-button type="primary" v-if="stepsIndex != 0" @click="lastStep">上一步</el-button>
<el-button v-if="stepsIndex == 0" type="primary" @click="nextStep">下一步</el-button>
<el-button v-if="stepsIndex == 1" type="primary" @click="nextStep">下一步</el-button>
<el-button v-if="stepsIndex == 2" type="primary" @click="nextStep">下一步</el-button>
<el-button v-if="stepsIndex !== 4" type="primary" @click="nextStep">下一步</el-button>
<el-button type="primary" v-if="stepsIndex == 4">完成</el-button>
</div>
</app-card>
</template>
<script>
import Finished from '../components/Finished.vue'
import BaseInfo from '../components/BaseInfo.vue'
import CheckPaper from '../components/CheckPaper.vue'
import PersonalInfo from '../components/PersonalInfo.vue'
import ExamSetting from '../components/ExamSetting.vue'
export default {
components: { BaseInfo, CheckPaper, PersonalInfo },
components: {
BaseInfo,
Finished,
CheckPaper,
PersonalInfo,
ExamSetting
},
data() {
return {
stepsIndex: 0
......
......@@ -522,6 +522,7 @@ export default {
}
newQuestionList.sort(compare('question_order')) // 大题排序
this.questionList = newQuestionList // 组装完成的试题列表
console.log(this.questionList)
// 根据属性值大小进行排序
function compare(property) {
return function (a, b) {
......@@ -548,15 +549,22 @@ export default {
// 保存试卷
savePaper() {
// 校验单个小题分数是否等于大题分数
// 拿出含有小题的大题
// const questionComplexBig = this.questionList.filter(
// item => item.question_type === 5 || item.question_type === 8 || item.question_type === 7
// )
// // 拿出含有大题的小题
// const questionComplexSmall = questionComplexBig.map(item => item.list)
// console.log(questionComplexBig)
// console.log(questionComplexSmall)
// 校验大题分数和总分数是否相等
const arr = this.questionList.map(item => parseInt(item.score))
const r2 = arr.reduce((pre, item) => (pre += item), 0)
if (r2 !== this.paperTotalScore) {
this.$message.warning('请校验分数')
}
console.log(r2)
console.log(arr)
// const arr = this.questionList.map(item => parseInt(item.score))
// const r2 = arr.reduce((pre, item) => (pre += item), 0)
// if (r2 !== this.paperTotalScore) {
// this.$message.warning('请校验分数')
// }
// console.log(r2)
// console.log(arr)
// console.log(this.questionList)
},
// 删除所选试题
......
......@@ -249,9 +249,10 @@ export default {
confirmButtonText: '确定'
}).then(() => {
// 调用接口
// this.$router.push({
// path: 'detail'
// })
this.$router.push({
path: 'detail',
form: this.form
})
})
} else {
setTimeout(() => {
......
......@@ -29,6 +29,11 @@ export default defineConfig({
target: 'https://question-api.ezijing.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/qbs/, '')
},
'/exam': {
target: 'https://x-exam-admin-api.ezijing.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/exam/, '')
}
}
},
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论