235 lines
9.2 KiB
Vue
235 lines
9.2 KiB
Vue
<template>
|
|
<div style="width: 100%;height: 100%;">
|
|
<div style="margin-top: 10px;position: absolute; right: 50px;">
|
|
<el-button size="small" type="primary" @click="exportPaper">导出试题</el-button>
|
|
<el-button size="small" type="primary" @click="goBack">返回</el-button>
|
|
</div>
|
|
<el-card style="width: 45%;margin-left: 50px;margin-top: 60px;display: inline-block;height: calc(100% - 100px);">
|
|
<div slot="header">
|
|
<span>理论试题列表</span>
|
|
<el-button style="float: right; padding: 3px 0" type="text" @click="addTheoryQuestion">添加试题</el-button>
|
|
<el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" @click="theoryReview">预览</el-button>
|
|
</div>
|
|
<el-table
|
|
:data="theoryQuestionList"
|
|
style="width: 100%"
|
|
height="100%"
|
|
:summary-method="getSummaries"
|
|
:show-summary="showSummary"
|
|
:row-style="handleRowStyle"
|
|
>
|
|
<el-table-column prop="type" label="类型" width="100">
|
|
<template slot-scope="scope">
|
|
<el-tag type="primary" disable-transitions>{{ QuestionTypeMap[scope.row.type] }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="topic" label="题目" show-overflow-tooltip="">
|
|
<template slot-scope="scope">
|
|
<span v-html="scope.row.topic" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="score" label="分值" width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="!scope.row.editScope" @click="editScope(scope.row)">{{ scope.row.score }}</span>
|
|
<i v-if="!scope.row.editScope" class="el-icon-edit" @click="editScope(scope.row)" />
|
|
<el-input-number v-if="scope.row.editScope" v-model="scope.row.score" v-focus="scope.row.editFocus" :controls="noControls" :min="0" size="mini" style="width: 90px" @blur="editScopeBlur(scope.row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="operate" label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<el-button type="warning" size="mini" @click="removeTheoryQuestion(scope.row)">移出</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card style="width: 45%;margin-left: calc(10% - 100px);margin-top: 60px;display: inline-block;height: calc(100% - 100px);">
|
|
<div slot="header">
|
|
<span>实操试题列表</span>
|
|
<el-button style="float: right; padding: 3px 0" type="text" @click="addOperateQuestion">添加试题</el-button>
|
|
<el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" @click="operateReview">预览</el-button>
|
|
</div>
|
|
<el-table
|
|
:data="operateQuestionList"
|
|
style="width: 100%"
|
|
height="100%"
|
|
:row-style="handleRowStyle"
|
|
:summary-method="getSummaries"
|
|
:show-summary="showSummary"
|
|
>
|
|
<el-table-column prop="question" label="实操名称">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.question.name }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="question" label="实操描述">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.question.description }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="score" label="分值">
|
|
<template slot-scope="scope">
|
|
<span v-if="!scope.row.editScope" @click="editScope(scope.row)">{{ scope.row.score }}</span>
|
|
<i v-if="!scope.row.editScope" class="el-icon-edit" @click="editScope(scope.row)" />
|
|
<el-input-number v-if="scope.row.editScope" v-model="scope.row.score" v-focus="scope.row.editFocus" :controls="noControls" :min="0" size="mini" @blur="editScopeBlur(scope.row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="operate" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="warning" size="mini" @click="removeOperateQuestion(scope.row)">移出</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<set-exam-time ref="setExamTime" :theory-question-list="theoryQuestionList" :operate-question-list="operateQuestionList" />
|
|
<theory-review ref="theoryReview" :theory-question-list="theoryQuestionList" />
|
|
<theory-question ref="theoryQuestion" :theory-index-list="theoryIndexList" @addQuestion="addTheoryQuestionList" @removeQuestion="removeTheoryQuestion" />
|
|
<operate-question ref="operateQuestion" :operate-index-list="operateIndexList" @addQuestion="addOperateQuestionList" @removeQuestion="removeOperateQuestion" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TheoryReview from './theoryReview';
|
|
import TheoryQuestion from './theoryQuestion';
|
|
import OperateQuestion from './operateQuestion';
|
|
import SetExamTime from './setExamTime';
|
|
export default {
|
|
name: 'GeneratPaper',
|
|
components: {
|
|
SetExamTime,
|
|
TheoryReview,
|
|
TheoryQuestion,
|
|
OperateQuestion
|
|
},
|
|
data() {
|
|
return {
|
|
QuestionTypeMap: {
|
|
select: '选择题',
|
|
judge: '判断题'
|
|
},
|
|
showSummary: true,
|
|
noControls: false,
|
|
theoryQuestionList: [], // 理论试卷试题列表
|
|
operateQuestionList: [], // 实操试卷试题列表
|
|
theoryIndexList: [], // 理论试卷试题索引列表
|
|
operateIndexList: []// 实操试卷试题索引列表
|
|
};
|
|
},
|
|
methods: {
|
|
removeOperateQuestion(row) {
|
|
const index = this.operateIndexList.indexOf(row.id);
|
|
this.operateIndexList.splice(index, 1);
|
|
this.operateQuestionList.splice(index, 1);
|
|
},
|
|
removeTheoryQuestion(row) {
|
|
const index = this.theoryIndexList.indexOf(row.id);
|
|
this.theoryIndexList.splice(index, 1);
|
|
this.theoryQuestionList.splice(index, 1);
|
|
},
|
|
addTheoryQuestionList(row) {
|
|
if (this.theoryQuestionList.length) {
|
|
this.theoryIndexList.push(row.id);
|
|
this.theoryQuestionList.push(row);
|
|
} else {
|
|
this.theoryIndexList = [row.id];
|
|
this.theoryQuestionList = [row];
|
|
}
|
|
},
|
|
addOperateQuestionList(row) {
|
|
const length = this.operateQuestionList.length;
|
|
if (length) {
|
|
this.operateIndexList.push(row.id);
|
|
this.operateQuestionList.push({id:length + 1, score:0, question: row});
|
|
} else {
|
|
this.operateIndexList = [row.id];
|
|
this.operateQuestionList = [{id:1, score:0, question: row}];
|
|
}
|
|
},
|
|
addTheoryQuestion() {
|
|
this.$refs.theoryQuestion.doShow();
|
|
},
|
|
addOperateQuestion() {
|
|
this.$refs.operateQuestion.doShow();
|
|
},
|
|
goBack() {
|
|
this.$router.go(-1);
|
|
},
|
|
theoryReview() {
|
|
this.$refs.theoryReview.doShow();
|
|
},
|
|
operateReview() {
|
|
},
|
|
editScope(row) {
|
|
this.$set(row, 'editScope', true);
|
|
this.$nextTick(() => {
|
|
this.$set(row, 'editFocus', true);
|
|
});
|
|
},
|
|
editScopeBlur(row) {
|
|
this.$set(row, 'editScope', false);
|
|
this.$set(row, 'editFocus', true);
|
|
if (row.score > 0) {
|
|
this.$set(row, 'isError', false);
|
|
}
|
|
this.showSummary = false;
|
|
|
|
this.$nextTick(() => {
|
|
this.getSummaries({data: this.theoryQuestionList});
|
|
});
|
|
},
|
|
handleRowStyle({row, rowIndex}) {
|
|
return row.isError ? {background: '#F00'} : {background: '#FFF'};
|
|
},
|
|
getSummaries(param) {
|
|
const { data } = param;
|
|
const sums = [];
|
|
sums[0] = '总分';
|
|
const values = data.map(item => Number(item.score));
|
|
if (!values.every(value => isNaN(value))) {
|
|
sums[2] = values.reduce((prev, curr) => {
|
|
const value = Number(curr);
|
|
if (!isNaN(value)) {
|
|
return prev + curr;
|
|
} else {
|
|
return prev;
|
|
}
|
|
}, 0);
|
|
sums[2] += ' 分';
|
|
}
|
|
this.showSummary = true;
|
|
return sums;
|
|
},
|
|
exportPaper() {
|
|
let flag = false;
|
|
this.theoryQuestionList.forEach((item) => {
|
|
if (item.score <= 0) {
|
|
flag = true;
|
|
this.$set(item, 'isError', true);
|
|
}
|
|
});
|
|
this.operateQuestionList.forEach((item) => {
|
|
if (item.score <= 0) {
|
|
flag = true;
|
|
this.$set(item, 'isError', true);
|
|
}
|
|
});
|
|
if (flag) {
|
|
this.$message.error('试题分分值不得为0');
|
|
} else {
|
|
this.$refs.setExamTime.doShow();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/deep/
|
|
.el-card__body{
|
|
height: calc(100% - 47px);
|
|
}
|
|
/deep/
|
|
.el-table__body-wrapper {
|
|
height: calc(100% - 97px) !important;
|
|
}
|
|
</style>
|