244 lines
6.1 KiB
Vue
244 lines
6.1 KiB
Vue
<template>
|
|
<el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="理论试题" width="80%">
|
|
<query-list-page ref="user" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { listQuestionPage } from '@/api/questionBank.js';
|
|
export default {
|
|
mixins: [
|
|
// WindowResizeHandler
|
|
],
|
|
props: {
|
|
theoryIndexList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
index: 0,
|
|
height: 0,
|
|
loading: false,
|
|
dialogVisible: false,
|
|
pagerConfig: {
|
|
pageSize: 'pageSize',
|
|
pageIndex: 'pageNum'
|
|
},
|
|
queryForm: {
|
|
reset: true,
|
|
labelWidth: '80px',
|
|
queryObject: {
|
|
type: {
|
|
type: 'select',
|
|
label: '类 型',
|
|
config: {
|
|
data: this.$ConstSelect.QuestionTypeList
|
|
}
|
|
},
|
|
topic: {
|
|
type: 'text',
|
|
label: '题 目'
|
|
}
|
|
}
|
|
},
|
|
queryList: {
|
|
query: listQuestionPage,
|
|
selectCheckShow: false,
|
|
indexShow: true,
|
|
afterQuery: this.afterQuery,
|
|
columns: [
|
|
{
|
|
title: '类 型',
|
|
prop: 'type',
|
|
type: 'tag',
|
|
width: '120',
|
|
columnValue: (row) => { return this.$ConstSelect.translate(row.type, 'QuestionTypeList'); },
|
|
tagType: (row) => {
|
|
return '';
|
|
}
|
|
},
|
|
{
|
|
title: '题 目',
|
|
prop: 'topic'
|
|
},
|
|
{
|
|
title: '答 案',
|
|
prop: 'answer',
|
|
type: 'tagMore',
|
|
width: '100',
|
|
columnValue: (row) => { return this.answerTags(row); },
|
|
tagType: (row) => {
|
|
return '';
|
|
}
|
|
},
|
|
{
|
|
title: '创建人',
|
|
prop: 'createUserName',
|
|
width: '100'
|
|
},
|
|
{
|
|
type: 'button',
|
|
title: '操 作',
|
|
width: '100',
|
|
buttons: [
|
|
{
|
|
name: '添加',
|
|
handleClick: this.addQuestion,
|
|
showControl: (row) => { return !row.paper; },
|
|
type: 'success'
|
|
},
|
|
{
|
|
name: '移出',
|
|
handleClick: this.removeQuestion,
|
|
showControl: (row) => { return row.paper; },
|
|
type: 'warning'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
loadInitData() {
|
|
this.$nextTick(() => {
|
|
this.queryList.reload();
|
|
});
|
|
},
|
|
doShow() {
|
|
this.dialogVisible = true;
|
|
this.loadInitData();
|
|
},
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
},
|
|
addQuestion(index, row) {
|
|
this.$set(row, 'paper', true);
|
|
row.score = 0;
|
|
this.$emit('addQuestion', row);
|
|
},
|
|
afterQuery(data) {
|
|
if (data && data.list) {
|
|
const that = this;
|
|
const list = data.list;
|
|
if (list) {
|
|
list.map(elem => {
|
|
this.$set(elem, 'paper', that.theoryIndexList.includes(elem.id));
|
|
});
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
removeQuestion(index, row) {
|
|
this.$set(row, 'paper', false);
|
|
this.$emit('removeQuestion', row);
|
|
},
|
|
answerTags(row) {
|
|
const answer = [];
|
|
row.optionList.forEach((el, i) => {
|
|
switch (row.type) {
|
|
case 'select':
|
|
if (el.correct) {
|
|
answer.push(this.$asc2chart(i + 65));
|
|
}
|
|
break;
|
|
case 'judge':
|
|
if (el.correct) {
|
|
answer.push(el.content);
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
return answer;
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.layer-center {
|
|
width: 900px;
|
|
height: 100%;
|
|
margin: auto;
|
|
background: #fff;
|
|
}
|
|
|
|
.quiz {
|
|
background: #eee;
|
|
height: 100%;
|
|
|
|
&::-webkit-scrollbar {
|
|
display:none
|
|
}
|
|
|
|
&__card {
|
|
height: 100%;
|
|
.dir-item {
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.dir-caption {
|
|
padding-left: 10px;
|
|
line-height: 26px;
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
}
|
|
|
|
&__container {
|
|
height: 100%;
|
|
|
|
&-header {
|
|
height: auto !important;
|
|
|
|
.title {
|
|
font-size: 24px;
|
|
line-height: 60px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.notes {
|
|
color:#606266;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin: 0 20px;
|
|
}
|
|
}
|
|
|
|
&-main {
|
|
.section {
|
|
padding: 5px 20px;
|
|
.caption {
|
|
line-height: 26px;
|
|
}
|
|
.context {
|
|
}
|
|
}
|
|
}
|
|
|
|
&-footer {
|
|
text-align: right;
|
|
position: sticky;
|
|
bottom: 0px;
|
|
padding: 40px ;
|
|
.buttons {
|
|
position: relative;
|
|
bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|