Skip to content

C
center-qa
提交 d0d86881 authored 作者: matian's avatar matian
浏览文件
操作

feat:试卷中心代码提交

上级 ba8d7473
隐藏空白字符变更
内嵌 并排
正在显示 包含 1683 行增加 和 19 行删除
src/modules/paper/components/AddPaper.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<el-drawer size="50%" v-bind="$attrs" v-on="$listeners">
<!-- 选题组卷添加试卷第一步 -->
<div v-show="isShowFirstStep">
<app-list v-bind="tableOptions" ref="list" style="padding-left: 30px"> </app-list>
<el-button type="primary" class="nextStep" @click="nextStep">下一步</el-button>
</div>
<!-- 选题组卷添加试卷第二步 -->
<div class="isShowNextStep" style="padding-left: 30px" v-show="isShowNextStep">
<el-form>
<el-form-item label="试题分值设置方式：">
<el-radio-group>
<el-radio label="批量设置"></el-radio>
<el-radio label="逐题设置"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="您此次选择的试题总数："> 25</el-form-item>
<el-form-item label="此次试卷总分："> 100</el-form-item>
<el-form-item label="已设置试题总分：">0 </el-form-item>
<el-divider></el-divider>
<el-form-item label="单选题：">
<span>数量：8</span>
<span>分值：0</span>
<el-button type="primary" class="settingScore" @click="batchSetting">批量设置分数</el-button>
</el-form-item>
<el-form-item label="多选题：" class="titleSetting">
<span>数量：8</span>
<span>分值：0</span>
<el-button type="primary" class="settingScore">批量设置分数</el-button>
</el-form-item>
<el-form-item label="判断题：" class="titleSetting">
<span>数量：8</span>
<span>分值：0</span>
<el-button type="primary" class="settingScore">批量设置分数</el-button>
</el-form-item>
<el-form-item label="问答题：" class="titleSetting">
<span>数量：8</span>
<span>分值：0</span>
<span class="settingScore">此题型只能在试卷详情页面逐一设置</span>
</el-form-item>
<el-form-item label="情景题：" class="titleSetting">
<span>数量：8</span>
<span>分值：0</span>
<span class="settingScore">此题型只能在试卷详情页面逐一设置</span>
</el-form-item>
<el-form-item label="案例题：" class="titleSetting">
<span>数量：8</span>
<span>分值：0</span>
<span class="settingScore">此题型只能在试卷详情页面逐一设置</span>
</el-form-item>
<el-form-item class="nextStep">
<el-button type="primary" @click="lastStep">上一步</el-button>
<el-button type="primary" style="margin-left: 20px" @click="saveSetting">保存</el-button>
</el-form-item>
</el-form>
</div>
<BatchSetting :visible.sync="visible" />
</el-drawer>
</template>
<script>
import BatchSetting from './BatchSetting.vue'
export default {
components: {
BatchSetting
},
data() {
return {
visible: false,
isShowFirstStep: true,
isShowNextStep: false
}
},
computed: {
tableOptions() {
return {
// remote: { httpRequest: getAppList },
filters: [
{
type: 'input',
prop: 'name',
placeholder: '请选择题目类型',
options: this.staffList,
size: 'small',
label: '题目类型'
},
{
type: 'select',
prop: 'name1',
placeholder: '请选择题目难度等级',
options: this.staffList,
labelKey: 'name',
valueKey: 'id',
size: 'small',
label: '难度等级'
},
{
type: 'input',
prop: 'name2',
placeholder: '请选择试题分类',
options: this.staffList,
size: 'small',
label: '试题分类'
},
{
type: 'select',
prop: 'name3',
placeholder: '请输入题目标题内容',
options: this.natureList,
labelKey: 'name',
valueKey: 'id',
size: 'small',
label: '题目标题'
},
{
type: 'select',
prop: 'name4',
placeholder: '请输入题干内容',
options: this.natureList,
labelKey: 'name',
valueKey: 'id',
size: 'small',
label: '题干内容'
},
{
type: 'select',
prop: 'name5',
placeholder: '请输入知识点',
options: this.natureList,
labelKey: 'name',
valueKey: 'id',
size: 'small',
label: '知识点'
}
],
columns: [
{ type: 'selection', minWidth: '50px', fixed: 'left' },
{ type: 'index', label: '序号', minWidth: '50px', fixed: 'left' },
{ label: '题目类型', prop: 'name' },
{ label: '试卷分类', prop: 'alias_name' },
{ label: '题目标题', prop: 'desc' },
{ label: '知识点', prop: 'desc2' },
{ label: '难度等级', prop: 'desc3' },
{ label: '更新人', prop: 'desc4' }
],
data: [
{
index: 1,
name: 'dfshfh'
},
{
index: 1,
name: 'dfshfh'
},
{
index: 1,
name: 'dfshfh'
}
]
}
}
},
methods: {
// 下一步
nextStep() {
this.isShowFirstStep = false
this.isShowNextStep = true
},
// 上一步
lastStep() {
this.isShowFirstStep = true
this.isShowNextStep = false
},
// 保存
saveSetting() {
this.$emit('update:visible', false)
},
batchSetting() {
console.log('bsdhfsjhfb')
this.visible = true
}
}
}
</script>
<style lang="scss" scoped>
.nextStep {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.settingScore {
margin-left: 120px;
}
</style>
src/modules/paper/components/AutomaticPaper.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<el-drawer size="80%" v-bind="$attrs" v-on="$listeners">
<div slot="header" class="clearfix">
<span>试卷列表</span>
</div>
<el-form :model="form" style="padding-left: 30px">
<!-- 组卷题库 -->
<el-form-item label="组卷题库：">
<el-radio-group v-model="form.paperType">
<el-radio label="0">我的题库</el-radio>
<el-radio label="1">公共题库</el-radio>
</el-radio-group>
</el-form-item>
<!-- 自动组卷规则 -->
<el-form-item label="自动组卷规则：">
<el-table ref="mytable" :data="table_data" style="width: 100%" class="paperRule">
<el-table-column
align="center"
v-for="(item, index, key) in table_columns"
:item="item"
:key="key"
:index="index"
:label="item.label"
>
<template slot-scope="scope">
<!-- 多选 -->
<el-select v-model="scope.row[item.prop]" v-if="scope.row.edit && item.type === 'select'">
{{ scope.row[item.prop] }}
<el-option v-for="(el, index) in item.options" :key="index" :label="el.label" :value="el.value">
</el-option>
</el-select>
<!-- 数量 -->
<el-input-number
v-if="scope.row.edit && item.type === 'input' && item.prop === 'question_num'"
size="small"
v-model="scope.row[item.prop]"
:placeholder="'请输入' + item.label"
:min="1"
:max="20"
></el-input-number>
<!-- 分值 -->
<el-input-number
v-if="scope.row.edit && item.type === 'input' && item.prop === 'question_score'"
size="small"
v-model="scope.row[item.prop]"
:placeholder="'请输入' + item.label"
:min="1"
:max="30"
>
</el-input-number>
<span v-if="!scope.row.edit && item.prop === 'questionType'">{{
subOptionType[scope.row[item.prop]]
}}</span>
<span v-if="!scope.row.edit && item.prop === 'difficulty'">{{
difficultyOptionType[scope.row[item.prop]]
}}</span>
<span v-if="!scope.row.edit && item.prop === 'question_num'">{{ scope.row[item.prop] }}</span>
<span v-if="!scope.row.edit && item.prop === 'question_score'">{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 编辑 -->
<el-button
type="primary"
icon="el-icon-edit"
circle
size="mini"
v-if="!scope.row.edit"
@click="handleEdit(scope.$index, scope.row)"
></el-button>
<!-- 保存 -->
<el-button
circle
size="mini"
type="success"
:plain="true"
icon="el-icon-check"
v-if="scope.row.edit"
@click="handleSave(scope.$index, scope.row)"
></el-button>
<el-button
style="margin-left: 10px"
circle
icon="el-icon-minus"
size="mini"
:plain="true"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<!-- editData -->
<el-table :data="editData" :show-header="false">
<el-table-column
align="center"
v-for="(item, index, key) in add_columns"
:item="item"
:key="key"
:index="index"
:label="item.label"
>
<template slot-scope="scope">
<!-- 多选 -->
<el-select v-model="scope.row[item.prop]" v-if="item.type === 'select'">
<el-option v-for="(el, index) in item.options" :key="index" :label="el.label" :value="el.value">
</el-option>
</el-select>
<!-- 数量 -->
<el-input-number
v-if="item.type === 'input' && item.prop === 'question_num_add'"
size="small"
v-model="scope.row[item.prop]"
:placeholder="'请输入' + item.label"
:min="1"
:max="20"
></el-input-number>
<!-- 分值 -->
<el-input-number
v-if="item.type === 'input' && item.prop === 'question_score_add'"
size="small"
v-model="scope.row[item.prop]"
:placeholder="'请输入' + item.label"
:min="1"
:max="30"
>
</el-input-number>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-plus"
circle
slot="reference"
@click="saveEdit(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 您计划自动组卷的试题情况： -->
<el-form-item label="您计划自动组卷的试题情况：">
<!-- 您计划自动组卷的试题情况 -->
<div class="automatic">
<div class="automatic_questionNum">试题数量总数：{{ getTotalQuestionNum }}</div>
<div class="automatic_totalScore">试卷总分：XXX</div>
</div>
<div>
<el-table ref="mytable" :data="getSituationData" style="width: 100%">
<el-table-column
align="center"
v-for="(item, index, key) in situation_columns"
:item="item"
:key="key"
:index="index"
:label="item.label"
>
<template slot-scope="scope">
<span v-if="item.prop === 'questionType'">{{ subOptionType[scope.row.questionType] }}</span>
<span v-if="item.prop === 'questionDesc'">
难 / {{ scope.row.newItem.items[0].num }} / {{ scope.row.newItem.items[0].score }} 易 /
{{ scope.row.newItem.items[1].num }} / {{ scope.row.newItem.items[1].score }} 中 /
{{ scope.row.newItem.items[2].num }} / {{ scope.row.newItem.items[2].score }}
</span>
<span v-if="item.prop === 'questionTotal'"
>{{ scope.row.newItem.tNum }} / {{ scope.row.newItem.tScore }}</span
>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" class="autoClick" @click="autoClick" :disabled="table_data.length < 1"
>自动组卷</el-button
>
</el-form-item>
</el-form>
</el-drawer>
</template>
<script>
export default {
data() {
return {
// 组卷题库
form: {
paperType: '0'
},
// 组卷规则默认输入框值
editData: [
{
questionType_add: '',
difficulty_add: '',
question_num_add: 1,
question_score_add: 1,
question_category_add: '',
edit: false
}
],
is_delete: true, // 是否可删除
// 自动组卷规则：
table_columns: [
{
prop: 'questionType',
label: '题目类型',
type: 'select',
options: [
{
value: '0',
label: '单选题'
},
{
value: '1',
label: '多选题'
},
{
value: '2',
label: '判断题'
},
{
value: '3',
label: '问答题'
},
{
value: '4',
label: '情景题'
},
{
value: '5',
label: '案例题'
}
]
},
{
prop: 'difficulty',
label: '难度',
type: 'select',
options: [
{
value: '0',
label: '难'
},
{
value: '1',
label: '易'
},
{
value: '2',
label: '中'
}
]
},
{
prop: 'question_num',
label: '数量',
type: 'input'
},
{
prop: 'question_score',
label: '分值',
type: 'input'
},
{
prop: 'question_category',
label: '题目类别',
type: 'select',
options: [
{
value: '0',
label: '难'
},
{
value: '0',
label: '易'
},
{
value: '0',
label: '高'
}
]
}
],
// 自动组卷规则编辑框属性
add_columns: [
{
prop: 'questionType_add',
label: '题目类型',
type: 'select',
options: [
{
value: '0',
label: '单选题'
},
{
value: '1',
label: '多选题'
},
{
value: '2',
label: '判断题'
},
{
value: '3',
label: '问答题'
},
{
value: '4',
label: '情景题'
},
{
value: '5',
label: '案例题'
}
]
},
{
prop: 'difficulty_add',
label: '难度',
type: 'select',
options: [
{
value: '0',
label: '难'
},
{
value: '1',
label: '易'
},
{
value: '2',
label: '中'
}
]
},
{
prop: 'question_num_add',
label: '数量',
type: 'input'
},
{
prop: 'question_score_add',
label: '分值',
type: 'input'
},
{
prop: 'question_category_add',
label: '题目类别',
type: 'select',
options: [
{
value: '0',
label: '难'
},
{
value: '1',
label: '易'
},
{
value: '2',
label: '高'
}
]
}
],
// 计划组卷试题情况
situation_columns: [
{
prop: 'questionType',
label: '题目类型'
},
{
prop: 'questionDesc',
label: '难度 / 数量 / 分值'
},
{
prop: 'questionTotal',
label: '小计 (数量 / 分值）'
}
],
// 表格数据
table_data: [],
// select之后回显数据
subOptionType: {
0: '单选题',
1: '多选题',
2: '判断题',
3: '问答题',
4: '情景题',
5: '案例题'
},
// 题难度回显
difficultyOptionType: {
0: '难',
1: '易',
2: '中'
}
}
},
computed: {
// 试题数量总数
getTotalQuestionNum() {
const totalNum = this.table_data.map(item => item.question_num)
const r = totalNum.reduce((pre, item) => (pre += item), 0) // 计算数组总和
return r
},
// 试题情况
getSituationData() {
// 对每次天加的数据进行计算分值和数量
const getNumsAndScores = (diffValue, type) => {
const data = this.table_data
if (type === 'num') {
// 数量
const numArray = data?.filter(item => item.difficulty === diffValue).map(val => val.question_num)
const init = 0
const totalNum = numArray.reduce((prev, cur) => prev + cur, init)
return totalNum
} else if (type === 'score') {
// 分值
const numArray = data?.filter(item => item.difficulty === diffValue).map(val => val.question_score)
const init = 0
const totalScore = numArray.reduce((prev, cur) => prev + cur, init)
return totalScore
}
}
const getLastData = () => {
const newItem = {
items: [
{
type: '难',
num: getNumsAndScores('0', 'num'),
score: getNumsAndScores('0', 'score')
},
{
type: '易',
num: getNumsAndScores('1', 'num'),
score: getNumsAndScores('1', 'score')
},
{
type: '中',
num: getNumsAndScores('2', 'num'),
score: getNumsAndScores('2', 'score')
}
],
tNum: getNumsAndScores('0', 'num') + getNumsAndScores('1', 'num') + getNumsAndScores('2', 'num'),
tScore: getNumsAndScores('0', 'score') + getNumsAndScores('1', 'score') + getNumsAndScores('2', 'score')
}
this.table_data.forEach(item => {
item.newItem = newItem
}) // 每次添加的数据进行加上newItem选项
return this.deteleObjectItem(this.table_data) // 去重，添加每个题型会累加，需要根据题的类型去重
}
const data = getLastData() // 赋值
return data
}
},
methods: {
// 去重方法 ---根据题的类型去重
deteleObjectItem(obj) {
const newArr = []
const newIndex = []
obj.forEach(item => {
if (newIndex.indexOf(item.questionType) === -1) {
newIndex.push(item.questionType)
newArr.push(item)
}
})
return newArr
},
autoClick() {},
// 新增列表项
saveEdit(row) {
console.log(row)
const newData = {
questionType: row.questionType_add,
difficulty: row.difficulty_add,
question_num: row.question_num_add,
question_score: row.question_score_add,
question_category: row.question_category_add,
edit: false
}
if (newData?.questionType && newData?.difficulty && newData?.question_num >= 1 && newData?.question_score >= 1) {
this.table_data.push(newData)
const addData = [
{
questionType_add: null,
difficulty_add: null,
question_num_add: 1,
question_score_add: 1,
question_category_add: null,
edit: false
}
]
this.editData = addData // 重置
} else {
this.$message({
message: '试题规则不能为空！',
type: 'warning'
})
}
},
// 编辑
handleEdit(index, row) {
console.log(row, '----')
row.edit = true
},
// 删除
handleDelete(index, row) {
console.log(index, row)
this.table_data.splice(index, 1) // 前端删除
// 下面掉接口删除-------
this.$message({
message: '删除成功！',
type: 'success'
})
},
// 保存
handleSave(index, row) {
console.log(index, row)
row.edit = false
delete this.table_data[index].add
this.$message({
message: '保存成功！',
type: 'success'
})
}
}
}
</script>
<style lang="scss" scoped>
.autoClick {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.editList {
// padding-left: 100px;
display: flex;
justify-content: space-around;
align-items: center;
}
.automatic {
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 50px;
color: #909399;
font-size: 16px;
.automatic_questionNum {
margin-right: 50px;
}
}
::v-deep .paperRule .el-table__empty-text {
display: none;
}
::v-deep .paperRule .el-table__empty-block {
min-height: 0;
}
</style>
src/modules/paper/components/BatchSetting.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<el-dialog v-bind="$attrs" v-on="$listeners" :modal="false" width="20%">
<el-form>
<el-form-item>单选题</el-form-item>
<el-form-item>数量：8</el-form-item>
<el-form-item label="每道试题分值"> <el-input></el-input></el-form-item>
<el-form-item>
<el-button type="primary" @click="saveSetting">保存</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
export default {
methods: {
saveSetting() {
this.$emit('update:visible', false)
}
}
}
</script>
<style></style>
src/modules/paper/components/QuestionList.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<div style="margin-top: 32px">
<el-row :gutter="20">
<!-- 试题列表 -->
<el-col :span="18">
<el-card id="questionMain"
><div slot="header" class="clearfix">
<span class="clearfix_tit"> 试题列表</span>
<el-button class="clearfix_del" type="primary" @click="delCheckedQuestion" v-if="questionList.length > 0"
>删除所选试题</el-button
>
<el-button class="clearfix_add" type="primary" @click="addPaper">添加试题</el-button>
</div>
<!-- 题目列表 -->
<!-- <el-card v-for="(item, index) in questionList"> -->
<QuestionListItem
:questionList="questionList"
:key="index"
ref="listItemRef"
@handlePosition="handlePosition"
@selectSubjectsChange="selectSubjectsChange"
:disabled="selectQuestion.length === 0"
/>
<!-- </el-card> -->
<!-- 选题组卷无数据情况下显示 -->
<div class="nonePaper" v-show="questionList.length === 0">
<el-result icon="info" subTitle="该试卷无试题，去添加试题吧"></el-result>
</div>
</el-card>
</el-col>
<!-- 题目序号列表 -->
<el-col :span="4" v-if="questionList.length > 0">
<el-card style="position: fixed">
<div class="titleIndex">
<ul>
<li v-for="(item, index) in questionList" :key="index" @click="titleClick(index)">
<div :class="currentIndex === index + 1 ? `titleItem` : ''">{{ index + 1 }}</div>
</li>
</ul>
<div style="margin-top: 10px; display: flex; justify-content: center; align-items: center">
<el-button type="primary" @click="savePaper">保存试卷</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<AutomaticPaper :visible.sync="visible" v-if="paperMode === '自动组卷'" />
<addPaper :visible.sync="visible" v-else />
</div>
</template>
<script>
import QuestionListItem from './QuestionListItem.vue'
import AutomaticPaper from './AutomaticPaper.vue'
import addPaper from './AddPaper.vue'
export default {
components: {
QuestionListItem,
addPaper,
AutomaticPaper
},
props: {
paperMode: {
type: String,
default: ''
}
},
data() {
return {
visible: false, // 控制增加试题弹框显示还是隐藏
// questionList: [],
questionList: [
{
id: '1',
tag: '1',
type: '单择题',
title: 'hqduuhdqj',
answer: '11111',
radioList: [
{ desc: 'fgweyfg', id: '0' },
{ desc: '1223', id: '1' }
],
score: 5
},
{
id: '2',
tag: '2',
type: '多选题',
title: 'hqduuhdqj',
answer: 'hfgwhrfgiuwhfiu',
checkList: [
{ desc: 'jdks', id: '1' },
{ desc: 'fsf', id: '2' }
],
score: 2
},
{
id: '3',
tag: '3',
type: '简答题',
title: 'hqduuhdqj',
answer: 'hfgwhrfgiuwhfiu',
score: 1
},
{
id: '5',
tag: '1',
type: '判断题',
title: 'hqduuhdqj',
answer: 'hfgwhrfgiuwhfiu',
radioList: [
{ desc: 'fgweyfg', id: '0' },
{ desc: '1223', id: '1' }
],
score: 1
},
{
id: '8',
tag: '7',
type: '情景题',
title: 'hqduuhdqj',
answer: 'hfgwhrfgiuwhfiu',
questionTtem: [
{
id: '6',
tag: '1',
type: '判断题',
title: '123234444',
answer: 'hfgwhrfgiuwhfiu',
radioList: [
{ desc: 'fgweyfg', id: '0' },
{ desc: '1223', id: '1' }
],
score: 3
},
{
id: '7',
tag: '1',
type: '判断题',
title: '5657567',
answer: 'hfgwhrfgiuwhfiu',
radioList: [
{ desc: 'fgweyfg', id: '0' },
{ desc: '1223', id: '1' }
],
score: 4
}
],
score: 2
}
],
currentIndex: 1,
selectQuestion: []
}
},
methods: {
// 增加试题
addPaper() {
console.log('dfjsf')
this.visible = true
},
// 切换题目编号
titleClick(index) {
this.currentIndex = index + 1
this.$refs.listItemRef.handleScroll(index)
},
// 试题列表滑动指定位置
handlePosition(offsetTop) {
// document.getElementById('questionMain').scrollTo(0, offsetTop)
window.scrollTo(0, offsetTop)
},
// 保存试卷
savePaper() {
// 校验小题分数和总分数是否相等
const arr = this.questionList.map(item => item.score)
const r2 = arr.reduce((pre, item) => (pre += item), 0)
console.log(r2)
console.log(arr)
console.log(this.questionList)
},
// 删除所选试题
delCheckedQuestion() {
console.log('删除的题目序号', this.selectQuestion)
},
selectSubjectsChange(val) {
this.selectQuestion = val
}
}
}
</script>
<style lang="scss">
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.bg-purple {
background: #d3dce6;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.nonePaper {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
#questionMain {
// height: calc(100vh - 450px);
overflow: auto;
.clearfix {
.clearfix_tit {
color: #c01c40;
font-size: 20px;
font-weight: bold;
}
.clearfix_del {
float: right;
padding: 10px 5px;
margin-right: 20px;
}
.clearfix_add {
float: right;
padding: 10px 5px;
margin-right: 20px;
}
}
}
.titleIndex {
ul {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
li {
flex: 1;
width: 20%;
min-width: 20%;
max-width: 20%;
margin-top: 10px;
div {
border-radius: 50px;
width: 24px;
height: 24px;
font-size: 14px;
text-align: center;
border: 2px solid #ccc;
color: #666;
cursor: pointer;
}
}
.titleItem {
background-color: rgb(194, 43, 43);
}
}
}
</style>
src/modules/paper/components/QuestionListItem.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<div>
<el-card style="margin-top: 32px" v-for="(item, index) in questionList" :key="index" :id="`page${index}`">
<div class="question_hd">
<div class="question_hd_left">
<div class="question_hd_left_type">
<!-- <span> -->
<input type="checkbox" v-model="checkboxValue" :value="item" @change="slectSubItem(item)" />
{{ index + 1 }}、{{ item.type }}
<!-- </span > -->
<span class="question_hd_left_title">{{ item.title }}</span>
</div>
</div>
<div class="question_hd_right">
<el-form ref="form" label-width="100px" :model="item.form">
<el-form-item label="分数"> <el-input v-model="item.score"></el-input> </el-form-item>
</el-form>
</div>
</div>
<div class="question_bd">
<!-- 单选判断 -->
<template v-if="item.tag === '1'">
<div v-for="(item, index) in item.radioList" :key="index" class="options">
<el-radio-group>
<el-radio label="item.id" class="question_bd_desc">
<span class="question_bd_desc_item">{{ item.desc }}</span>
</el-radio>
</el-radio-group>
</div>
</template>
<!-- 多选 -->
<template v-if="item.tag === '2'">
<div class="question-option-item" v-for="item in item.checkList" :key="item.id">
<el-checkbox label="item.id" class="question_bd_desc"
><span class="question_bd_desc_item">{{ item.desc }}</span>
</el-checkbox>
</div>
</template>
<!-- 简答题 -->
<template v-if="item.tag === '3'">
<el-input type="textarea" class="question_bd_desc"></el-input>
</template>
</div>
<div style="margin-top: 10px" class="question_ft">正确答案：{{ item.answer }}</div>
</el-card>
</div>
</template>
<script>
export default {
props: {
questionList: {
type: Array
}
},
data() {
return {
checkboxValue: [],
selectSubjects: [],
isChecked: false
}
},
mounted() {},
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>
src/modules/paper/components/QuestionNum.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<el-card>
<div class="titleIndex">
<ul>
<li
:class="currentIndex === index ? `dotItem` : ''"
v-for="(item, index) in list"
:key="index"
@click="TitleClick(index)"
>
{{ index + 1 }}
</li>
</ul>
<div style="margin-top: 10px; display: flex; justify-content: center; align-items: center">
<el-button type="primary">保存试卷</el-button>
</div>
</div>
</el-card>
</template>
<script>
export default {
props: {
list: {
type: Array
}
},
data() {
return {
indexList: [],
currentIndex: 0 // 当前点击题号
}
},
methods: {
TitleClick(index) {
this.currentIndex = index
this.$emit('indexClick', `${index + 1}`)
}
}
}
</script>
<style lang="scss">
.titleIndex {
ul {
display: flex;
justify-content: space-around;
align-items: center;
li {
border-radius: 50px;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 150%;
text-align: center;
border: 2px solid #ccc;
color: #666;
cursor: pointer;
}
.dotItem {
background-color: rgb(243, 190, 190);
}
}
}
</style>
src/modules/paper/index.js
浏览文件 @ d0d86881
......@@ -14,6 +14,24 @@ const routes = [
path: 'list',
component: () => import('./views/List.vue'),
meta: { title: '我的试卷库' }
},
{
path: 'newPaper',
name: 'newPaper',
component: () => import('./views/NewPaper.vue'),
meta: { title: '新建试卷' }
},
{
path: 'newPapers',
name: 'newPaper',
component: () => import('./views/NewPaper.vue'),
meta: { title: '编辑试卷' }
},
{
path: 'detail',
name: 'detail',
component: () => import('./views/Detail.vue'),
meta: { title: '试卷详情' }
}
]
}
......
src/modules/paper/views/Detail.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<div>
<!-- 试卷描述 -->
<el-card>
<el-descriptions :column="2" class="descriptionsCon">
<template slot="extra">
<el-button type="primary" @click="editPaper">编辑试卷</el-button>
</template>
<el-descriptions-item label="试卷名称">{{ paperDetail.paperName }}</el-descriptions-item>
<el-descriptions-item label="标签">1111</el-descriptions-item>
<el-descriptions-item label="试卷分类">{{ paperDetail.paperType }}</el-descriptions-item>
<el-descriptions-item label="组卷模式">{{ paperDetail.paperMode }}</el-descriptions-item>
<el-descriptions-item label="试卷总分">{{ paperDetail.paperTotalScore }}</el-descriptions-item>
<el-descriptions-item label="及格分数">{{ paperDetail.paperPassScore }}</el-descriptions-item>
<el-descriptions-item label="考试时长">40分钟</el-descriptions-item>
<el-descriptions-item label="最短交卷时长">20分钟</el-descriptions-item>
<el-descriptions-item label="试题顺序">固定</el-descriptions-item>
<el-descriptions-item label="多次考试">是</el-descriptions-item>
<el-descriptions-item label="多次考试成绩计算规则">平均计算法 </el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 试卷列表 -->
<QuestionList :paperMode="paperDetail.paperMode" />
</div>
</template>
<script>
import QuestionList from '../components/QuestionList.vue'
export default {
components: { QuestionList },
computed: {
paperDetail() {
return JSON.parse(this.$route.query.paperDetail)
}
},
watch: {
paperDetail: {
paperDetail: {
immediate: true,
handler(data) {
this.form = Object.assign({}, this.form, data)
}
}
}
},
methods: {
// 编辑试卷
editPaper() {
this.$router.push({
path: 'newPaper',
query: {
paperDetail: this.paperDetail,
isEdit: true
}
})
}
}
}
</script>
<style lang="scss" scoped></style>
src/modules/paper/views/List.vue
浏览文件 @ d0d86881
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<template #header-aside>
<el-button type="primary" icon="el-icon-plus" @click="visible = true">新建试题</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleCreatePaper">新建试卷</el-button>
<el-button type="primary" icon="el-icon-plus" @click="batchDelete">批量删除</el-button>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleView(row)">查看</el-button>
<el-button type="text" @click="handleSettings(row)">设置</el-button>
<el-button type="text" @click="handleDdit(row)">编辑</el-button>
<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>
import { getAppList } from '../api'
// import { getAppList } from '../api'
const paperMode = [
{ label: '选题组卷', value: 0 },
{ label: '自动组卷', value: 1 }
]
export default {
data() {
return {
visible: false
visible: false,
multipleSelection: [] // 选择项
}
},
computed: {
tableOptions() {
return {
remote: { httpRequest: getAppList },
// remote: { httpRequest: getAppList },
filters: [
{
type: 'input',
prop: 'paperName',
placeholder: '请输入试卷名称',
label: '试卷名称：'
},
{
type: 'select',
prop: 'paperMode',
placeholder: '请选择组卷模式',
options: paperMode,
labelKey: 'label',
valueKey: 'value',
label: '组卷模式：'
},
{
type: 'input',
prop: 'paperLabel',
placeholder: '请输入试卷标签',
label: '标签：'
},
{
type: 'select',
prop: 'paperType',
placeholder: '请选择试卷分类',
options: this.natureList,
labelKey: 'name',
valueKey: 'id',
label: '试卷分类：'
}
],
columns: [
{ label: '应用名称', prop: 'name' },
{ label: '应用别名', prop: 'alias_name' },
{ label: '应用描述', prop: 'desc' },
{ type: 'selection', minWidth: '50px', fixed: 'left' },
{ type: 'index', label: '序号', minWidth: '50px', fixed: 'left' },
{ label: '组卷模式', prop: 'paperMode' },
{ label: '试卷分类', prop: 'paperType' },
{ label: '试卷名称', prop: 'paperName' },
{ label: '总分', prop: 'paperTotalScore' },
{ label: '及格分数', prop: 'paperPassScore' },
{ label: '更新人', prop: 'update_name' },
{ label: '更新时间', prop: 'update_time' },
{ label: '操作', slots: 'table-x', align: 'right', width: 150 }
],
data: [
{
paperMode: '选题组卷',
paperType: '测试',
paperName: '期中考试',
paperTotalScore: 100,
paperPassScore: 60,
update_name: '张三',
update_time: '2022-02-18'
}
]
}
}
},
methods: {
// 创建成功刷新列表
handleCreateSuccess() {
this.$refs.list.refetch()
// 新建试卷
handleCreatePaper() {
this.$router.push({
path: 'newPaper',
query: { isEdit: false }
})
},
// 编辑试卷
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')
},
// 查看
handleView(row) {
this.$router.push({ name: 'appView', params: { id: row.id }, query: { appid: row.id } })
// 查看详情
handleDetail(row) {
this.$router.push({
path: 'detail',
query: {
paperDetail: JSON.stringify(row)
}
})
},
handleSettings(row) {
this.$router.push({ path: '/settings/users', query: { appid: row.id } })
// 单个删除
handleDelete(row) {
// this.$refs.list.refetch()
}
}
}
......
src/modules/paper/views/NewPaper.vue 0 → 100644
浏览文件 @ d0d86881
<template>
<el-form ref="form" :model="form" label-width="160px" :label-position="labelPosition">
<el-row>
<el-col :span="8">
<el-form-item
label="试卷名称"
prop="paperName"
:rules="[{ message: '请输入试卷名称', required: true, trigger: 'blur' }]"
>
<el-input v-model="form.paperName" placeholder="请输入试卷名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="试卷用途" prop="paperUse">
<el-radio-group v-model="form.paperUse">
<el-radio label="0">考试</el-radio>
<el-radio label="1">作业</el-radio>
<el-radio label="2" v-if="form.paperUse !== '0'">课后作业</el-radio>
<el-radio label="3" v-if="form.paperUse !== '0'">课程测试</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="标签" prop="label">
<el-input v-model="form.label" placeholder="请输入试卷标签" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="试卷分类" prop="classification">
<el-select v-model="form.classification" placeholder="请选择试卷分类" style="width: 100%">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="组卷模式" prop="paperMode">
<el-select v-model="form.paperMode" placeholder="请选择组卷模式" style="width: 100%">
<el-option label="自动组卷" :value="0"> </el-option>
<el-option label="选题组卷" :value="1"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="试题顺序"
:rules="[{ message: '请选择试题顺序', required: true, trigger: 'change' }]"
style="padding-left: 20px"
v-if="form.paperMode === 1"
>
<el-radio-group v-model="form.order">
<el-radio label="0">固定</el-radio>
<el-radio label="1">随机</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item
label="试卷总分"
prop="paperTotalScore"
:rules="[{ message: '请输入试卷总分', required: true, trigger: 'blur' }]"
>
<el-input-number
:controls="false"
:step="1"
v-model="form.paperTotalScore"
:min="0"
:max="200"
placeholder="请输入试卷总分"
style="width: 100%"
:precision="0"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="及格分数"
prop="paperPassScore"
:rules="[{ message: '请输入及格分数', required: true, trigger: 'blur' }]"
style="padding-left: 20px"
>
<el-input-number
:controls="false"
:step="1"
v-model="form.paperPassScore"
:min="0"
:max="200"
placeholder="请输入及格分数"
style="width: 100%"
:precision="0"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item
label="考试时长"
prop="examDuration"
:rules="[{ message: '请输入考试时长', required: true, trigger: 'blur' }]"
>
<el-input-number
v-model="form.examDuration"
:controls="false"
:min="1"
:max="150"
placeholder="请输入考试时长"
style="width: 90%"
:precision="0"
></el-input-number
>&nbsp;分钟
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="最短交卷时长"
prop="minSubtime"
:rules="[{ message: '请输入考试时长', required: true, trigger: 'blur' }]"
style="padding-left: 20px"
>
<el-input-number
v-model="form.minSubtime"
:controls="false"
:min="1"
:max="150"
placeholder="请输入考试时长"
style="width: 90%"
:precision="0"
></el-input-number
>&nbsp;分钟
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="多次考试" :rules="[{ required: true, trigger: 'blur' }]">
<el-radio-group v-model="form.moreExam">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="多次考试成绩计算规则" style="padding-left: 20px" v-if="form.moreExam === '1'">
<el-radio-group v-model="form.rule">
<el-radio label="0">平均计算法</el-radio>
<el-radio label="1">最高得分法</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-row style="margin-top: 30px">
<el-button @click="handleCancel" style="margin-left: 100px">取消</el-button>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button type="primary" @click="handleSubmitSelect">保存并选择试题</el-button>
</el-row>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
labelPosition: 'left',
btnDisabled: false,
options: [
{ label: '测试', value: 1 },
{ label: '考试', value: 2 },
{ label: '模拟', value: 3 }
],
form: {
paperName: '', // 试卷名称
paperUse: '0', // 试卷用途
label: '', // 标签
classification: 1, // 试卷分类
paperMode: 0, // 组卷模式
order: '0', // 试题顺序
paperTotalScore: undefined, // 试卷总分
paperPassScore: undefined, // 及格分数
examDuration: undefined, // 考试时长
minSubtime: undefined, // 最短交卷时长
moreExam: '1', // 多次考试
rule: '0' // 多次考试成绩计算规则
}
}
},
computed: {
paperDetail() {
return this.$route.query.paperDetail
},
isEdit() {
return this.$route.query.isEdit
}
},
watch: {
paperDetail: {
immediate: true,
handler(data) {
this.form = Object.assign({}, this.form, data)
}
}
},
methods: {
// 取消
handleCancel() {
history.go(-1)
},
// 保存
handleSubmit() {
this.$refs.form.validate(valid => {
if (valid) {
this.$confirm('保存成功！', {
confirmButtonText: '确定'
}).then(() => {
history.go(-1)
})
} else {
// 表单校验不通过聚焦至第一个不通过的输入框
// const isError = document.getElementsByClassName('is-error')
// isError[0].querySelector('input').focus()
// return false
}
})
},
// 保存并选择试题
handleSubmitSelect() {
this.$refs.form.validate(valid => {
if (valid) {
this.$confirm('保存成功！', {
confirmButtonText: '确定'
}).then(() => {
// 待确认
})
} else {
// // 表单校验不通过聚焦至第一个不通过的输入框
// const isErrors = document.getElementsByClassName('is-error')
// isErrors[0].querySelector('el-input').focus()
// return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
:v-deep .el-input-number .el-input-number__decrease {
display: none;
}
:v-deep .el-input-number .el-input-number__increase {
display: none;
}
::v-deep .el-input-number .el-input__inner {
padding-left: 15px;
text-align: left;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论