提交 1f814c47 authored 作者: lihuihui's avatar lihuihui
......@@ -38,6 +38,12 @@ export default {
path: '/paper',
icon: 'el-icon-document',
children: [{ name: '我的试卷库', path: '/paper/list' }]
},
{
name: '考试中心',
path: '/exam',
icon: 'el-icon-document',
children: [{ name: '我的考试', path: '/exam/list' }]
}
]
}
......
<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
is-range
v-model="form.value1"
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
>分钟,考生可以登录系统,确认信息。(开考最多60分钟提前登录)
</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-form-item label="欢迎语:" prop="welcome">
<v-editor></v-editor>
</el-form-item>
</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)],
last_time: '',
welcome: ''
}
}
}
}
</script>
<style></style>
<template>
<el-card>
<el-transfer
filterable
:filter-method="filterMethod"
filter-placeholder="请输入城市拼音"
v-model="value"
:data="data"
>
</el-transfer>
<el-card style="margin-top: 20px">
<div>考生的试卷会从以上已选的试卷中随机抽取</div>
<div>考试开始两个小时前,可以对试卷进行替换</div>
</el-card>
</el-card>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = []
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
cities.forEach((city, index) => {
data.push({
label: city,
key: index,
pinyin: pinyin[index]
})
})
return data
}
return {
data: generateData(),
value: [],
filterMethod(query, item) {
return item.pinyin.indexOf(query) > -1
}
}
}
}
</script>
<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-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-form-item label="提前登录:" prop="first_time">
开考前
<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-form-item>
<el-form-item label="欢迎语:" prop="welcome">
<v-editor></v-editor>
</el-form-item>
</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)],
last_time: '',
welcome: ''
}
}
}
}
</script>
<style></style>
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<template v-slot:isEdit="{ row }">
<el-switch v-model="row.isEdit" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
</template>
<template v-slot:isVisible="{ row }">
<el-switch v-model="row.isVisible" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
</template>
<template v-slot:isRequired="{ row }">
<el-switch v-model="row.isRequired" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
</template>
<template v-slot:weight="{ row }">
<el-input v-model="row.weight" active-color="#13ce66" inactive-color="#ff4949"> </el-input>
</template>
</app-list>
</app-card>
</template>
<script>
export default {
data() {
return {
visible: false,
multipleSelection: [] // 选择项
}
},
computed: {
tableOptions() {
return {
// remote: { httpRequest: getAppList },
columns: [
{ label: '已选信息', prop: 'isCheckedInfo' },
{ label: '允许编辑', prop: 'isEdit', slots: 'isEdit' },
{ label: '考生可见', prop: 'isVisible', slots: 'isVisible' },
{ label: '必填', prop: 'isRequired', slots: 'isRequired' },
{ label: '权重', prop: 'weight', slots: 'weight' }
],
data: [
{
isCheckedInfo: '姓名',
isEdit: true,
isVisible: true,
isRequired: true,
weight: '1'
}
]
}
}
}
}
</script>
import AppLayout from '@/components/layout/Index.vue'
const routes = [
{
path: '/exam',
component: AppLayout,
meta: { title: '考试中心' },
children: [
{
path: '',
redirect: '/exam/list'
},
{
path: 'list',
component: () => import('./views/List.vue'),
meta: { title: '我的考试' }
},
{
path: 'newExam',
component: () => import('./views/NewExam.vue'),
meta: { title: '新建考试' }
}
]
}
]
export { routes }
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<template #header-aside>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">新建试卷</el-button>
</template>
<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',
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: 'exam_time' },
{ label: '考试班级', prop: 'exam_class' },
{ label: '应考人数', prop: 'join_num' },
{ label: '完成人数', prop: 'finished_num' },
{ label: '在线人数', prop: 'online_num' },
{ label: '考试状态', prop: 'exam_status' },
{ 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: '未开始'
}
]
}
}
},
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: 'detail',
query: {
paperDetail: JSON.stringify(row)
}
})
},
// 单个删除
handleDelete(row) {
// this.$refs.list.refetch()
}
}
}
</script>
<template>
<app-card>
<el-steps :active="stepsIndex">
<el-step title="基本信息"> </el-step>
<el-step title="选择试卷"></el-step>
<el-step title="个人信息"></el-step>
<el-step title="考试配置"></el-step>
<el-step title="考试配置"></el-step>
</el-steps>
<base-info v-if="stepsIndex === 0" />
<check-paper v-if="stepsIndex === 1" />
<personal-info v-if="stepsIndex === 2" />
<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 type="primary" v-if="stepsIndex == 4">完成</el-button>
</div>
</app-card>
</template>
<script>
import BaseInfo from '../components/BaseInfo.vue'
import CheckPaper from '../components/CheckPaper.vue'
import PersonalInfo from '../components/PersonalInfo.vue'
export default {
components: { BaseInfo, CheckPaper, PersonalInfo },
data() {
return {
stepsIndex: 0
// tabActive: 'baseInfo'
}
},
methods: {
nextStep() {
this.stepsIndex++
},
lastStep() {
this.stepsIndex--
}
}
}
</script>
<style></style>
<template>
<div class="question_bd">
<span class="question_hd_left_title" v-if="item.is_parent === 0">{{ item.question_content }}</span>
<!-- 单选判断 -->
<template v-if="[1, 6].includes(item.question_type) || item.child_question_type === 1">
<div v-for="(item, id) in item.question_options" :key="id" class="options">
<el-radio-group>
<el-radio label="item.options" class="question_bd_desc">
<span class="question_bd_desc_item">{{ item.options }}</span>
</el-radio>
</el-radio-group>
</div>
<div v-if="item.is_parent === 0">正确答案:{{ item.question_answer }}</div>
</template>
<!-- 多选 -->
<template v-if="item.question_type === 2 || item.child_question_type === 2">
<div class="question-option-item" v-for="item in item.question_options" :key="item.id">
<el-checkbox label="item.id" class="question_bd_desc"
><span class="question_bd_desc_item">{{ item.options }}</span>
</el-checkbox>
</div>
<div v-if="item.is_parent === 0">正确答案:{{ item.question_answer }}</div>
</template>
<!-- 简答题 -->
<template v-if="item.question_type === 3 || item.child_question_type === 3">
<el-input type="textarea"></el-input>
<div v-if="item.is_parent === 0">正确答案:{{ item.question_answer }}</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
checkboxValue: false
}
},
props: {
item: {}
},
methods: {
handleScroll(key) {
const PageId = document.querySelector('#page' + key)
this.$emit('handlePosition', PageId.offsetTop)
},
slectSubItem(item) {
console.log(item)
this.$emit('selectSubjectsChange', this.checkboxValue)
}
}
}
</script>
<style lang="scss" scoped>
.question_hd {
display: flex;
justify-content: space-between;
align-items: flex-start;
.question_hd_left {
.question_hd_left_type {
color: #c01c40;
}
.question_hd_left_title {
margin-left: 20px;
font-size: 18px;
}
}
}
.question_bd {
// background: rgb(247, 244, 244);
padding-left: 35px;
.question_bd_desc {
.question_bd_desc_item {
font-size: 18px;
font-weight: 400;
color: #303133;
}
}
}
::v-deep .el-checkbox__label {
color: #c01c40;
}
input {
-webkit-appearance: checkbox;
}
</style>
<template>
<div>
<!-- <div style="margin-top: 32px" v-for="(item, index) in questionList" :key="index" :id="`page${index}`"> -->
<div style="margin-top: 32px">
<div class="question_hd">
<div class="question_hd_left">
<div class="question_hd_left_type">
<input
type="checkbox"
v-model="checkboxValue"
:value="item"
@change="slectSubItem(item)"
v-show="item.is_parent !== 0"
/>
<span v-show="item.is_parent !== 0">
{{ questionType(item) }}
</span>
<div class="question_hd_left_title" v-if="item.is_parent !== 0">{{ item.question_content }}</div>
<div v-for="(item, index) in questionList" :key="index">
<!-- 简单题类型 [1,2,3,4] :根据判断题的类型渲染 -->
<el-card class="boxCard" v-if="signQuestionTypes.includes(item.question_type)" :id="`page${index}`">
<div class="boxHeader">
<div class="headerLeft">
<div class="check">
<input
type="checkbox"
class="checkInpt"
v-model="selectSubjects"
:value="item"
@change="slectSubItem(item)"
/>
</div>
<div class="title">
<div class="titleType">{{ index + 1 }}{{ item.question_title }}</div>
<div class="titleDec" v-html="item.question_content"></div>
</div>
</div>
<div class="pmty"></div>
<div class="headerRight">
<div class="scoreValue">
<span class="lableScore">分数:</span>
<el-input v-model="item.score"></el-input>
</div>
</div>
</div>
<div class="boxMain">
<el-radio-group class="options">
<el-radio v-for="(v, index) in item.question_options" :key="index" :label="v.options" class="option">{{
v.options
}}</el-radio>
</el-radio-group>
</div>
<div class="boxFooter">
<div>正确答案:</div>
<div class="boxAnswer">{{ item.question_answer }}</div>
</div>
</el-card>
<!-- 复杂题类型 [5,6] :根据判断题的类型渲染 复杂利用上面的头部,内部重新写个页面渲染复杂题中的小题-->
<el-card class="boxCard" v-if="intricacyQuestionTypes.includes(item.question_type)" :id="`page${index}`">
<div class="boxHeader">
<div class="headerLeft">
<div class="check">
<input
type="checkbox"
class="checkInpt"
v-model="selectSubjects"
:value="item"
@change="slectSubItem(item)"
/>
</div>
<div class="title">
<div class="titleType">{{ index + 1 }}{{ item.question_title }}</div>
<div class="titleDec" v-html="item.question_content"></div>
</div>
</div>
<div class="headerRight">
<div class="scoreValue">
<span class="lableScore">分数:</span>
<el-input v-model="item.score"></el-input>
</div>
</div>
</div>
<div class="question_hd_right">分数 :<el-input :value="item.question_score"></el-input></div>
</div>
<question-list-item :item="item"></question-list-item>
<div
v-if="item.is_parent !== 0 && [1, 2, 3, 6].includes(item.question_type)"
style="margin-top: 10px"
class="question_ft"
>
正确答案:{{ item.question_answer }}
</div>
<div class="intricacyBoxMain" v-for="(v, index) in item.list" :key="index" style="margintop: 20px">
<div class="intricacyHeader">
<div class="intricacyDsc">
<div class="intricacyTitle">{{ index + 1 }}{{ v.question_title }}</div>
<div class="titleDec" v-html="v.question_content"></div>
</div>
<div class="intricacyScoreValue">
<span class="lableScore">分数:</span>
<el-input v-model="v.score"></el-input>
</div>
<div class="empty"></div>
</div>
<div class="intricacyMain">
<el-radio-group class="options">
<el-radio v-for="(o, index) in v.question_options" :key="index" :label="o.options" class="option">{{
o.options
}}</el-radio>
</el-radio-group>
</div>
<div class="intricacyFooter">
<div>正确答案:</div>
<div class="intricacyAnswer">{{ v.question_answer }}</div>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
import QuestionListItem from './QuestionListItem.vue'
export default {
components: { QuestionListItem },
// 问答、情景、案例
props: {
questionList: {
// 试题数据
type: Array
}
},
data() {
return {
checkboxValue: false
selectSubjects: [], // 选中的题
signQuestionTypes: [1, 2, 3, 6], // 简单题类型
intricacyQuestionTypes: [5, 7, 8] // 复杂题类型
}
},
props: {
item: {},
questionList: []
},
// computed: {
// // 试题类型
// questionType() {
// const questionType = this.questionList.map(item => item.question_type)
// return questionType
// }
// },
methods: {
// 试题类型
questionType(item) {
if (item.question_type === 1) {
return '单选题'
} else if (item.question_type === 2) {
return '多选题'
} else if (item.question_type === 3) {
return '问答题'
} else if (item.question_type === 5) {
return '案例题'
} else if (item.question_type === 6) {
return '判断题'
} else if (item.question_type === 7) {
return '实操题'
} else if (item.question_type === 8) {
return '情景题'
}
},
// 返回点击题号的offsettop
handleScroll(key) {
const PageId = document.querySelector('#page' + key)
this.$emit('handlePosition', PageId.offsetTop)
},
// 选中的数据回传
slectSubItem(item) {
console.log(item)
this.$emit('selectSubjectsChange', this.checkboxValue)
this.$emit('selectSubjectsChange', this.selectSubjects)
}
}
}
</script>
<style lang="scss" scoped>
.question_hd {
display: flex;
justify-content: space-between;
align-items: flex-start;
.question_hd_left {
.question_hd_left_type {
color: #c01c40;
<style lang="scss">
.boxCard {
margin-bottom: 10px;
.boxHeader {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.headerLeft {
flex: 0.75;
display: flex;
.check {
margin-right: 20px;
}
.title {
justify-content: space-around;
.titleType {
width: 200px;
color: #c01c40;
}
}
.checkInpt .title {
display: inline-block;
}
}
.pmty {
flex: 0.05;
}
.headerRight {
flex: 0.2;
display: flex;
position: relative;
.scoreValue {
position: absolute;
top: 0px;
display: flex;
align-items: center;
.lableScore {
width: 100px;
}
}
}
.question_hd_left_title {
margin-left: 20px;
font-size: 18px;
}
.boxMain {
padding-left: 70px;
.options {
display: flex;
flex-direction: column;
.option {
margin-bottom: 5px;
}
}
}
}
.question_bd {
// background: rgb(247, 244, 244);
padding-left: 35px;
.boxFooter {
margin-top: 30px;
padding-left: 40px;
display: flex;
align-items: center;
.boxAnswer {
color: #c01c40;
font-size: 14px;
}
}
.intricacyBoxMain {
padding-left: 70px;
padding-top: 20px;
.options {
display: flex;
flex-direction: column;
.option {
margin-bottom: 5px;
}
}
.intricacyHeader {
display: flex;
align-items: center;
.question_bd_desc {
.question_bd_desc_item {
font-size: 18px;
font-weight: 400;
color: #303133;
.intricacyDsc {
flex: 0.8;
.intricacyTitle {
width: 200px;
color: #c01c40;
}
}
.intricacyScoreValue {
flex: 0.2;
margin-left: 50px;
display: flex;
align-items: center;
.lableScore {
width: 80px;
}
}
}
.intricacyMain {
padding-left: 30px;
}
.intricacyFooter {
margin-top: 10px;
display: flex;
align-items: center;
.intricacyAnswer {
color: #c01c40;
font-size: 14px;
}
}
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论