107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<template>
|
|
<el-dialog v-dialogDrag :close-on-click-moda="false" :title="title" :visible.sync="show" width="860px" :close-on-click-modal="false" :before-close="doClose">
|
|
<div class="ql-editor" v-html="$escapeHTML(`题 目: ${form.topic}`)" />
|
|
<template v-if="checkType(form, 'judge')">
|
|
<div class="answer">
|
|
答 案:
|
|
<template v-for="(el,i) in options">
|
|
<span v-if="el.correct" :key="i">{{ el.content }} </span>
|
|
</template>
|
|
</div>
|
|
|
|
</template>
|
|
<template v-else-if="checkType(form, 'select')">
|
|
<div v-for="(el,i) in options" :key="i" class="option" :label="$str2number(el.id)">
|
|
<span>{{ $asc2chart(i+65) }}. </span>
|
|
<div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
|
|
</div>
|
|
<div class="answer">
|
|
答 案:
|
|
<template v-for="(el,i) in options">
|
|
<span v-if="el.correct" :key="i">{{ $asc2chart(i+65) }} </span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="checkType(form, 'multi')">
|
|
<div v-for="(el,i) in options" :key="i" class="option" :label="$str2number(el.id)">
|
|
<span>{{ $asc2chart(i+65) }}. </span>
|
|
<div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
|
|
</div>
|
|
<div class="answer">
|
|
答 案:
|
|
<template v-for="(el,i) in options">
|
|
<span v-if="el.correct" :key="i">{{ $asc2chart(i+65) }} </span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="checkType(form, 'fill')">
|
|
<div class="answer">
|
|
答 案:
|
|
<template v-for="(el,i) in options">
|
|
<span v-if="el.correct" :key="i">{{ el.content }} </span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="checkType(form, 'answer')">
|
|
<div class="answer">
|
|
答 案:
|
|
<template v-for="(el,i) in options">
|
|
<span v-if="el.correct" :key="i">{{ el.content }} </span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="show = false">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
form: {
|
|
optionList: []
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
title() {
|
|
return '详 情';
|
|
},
|
|
options() {
|
|
return this.form.optionList;
|
|
}
|
|
},
|
|
methods: {
|
|
checkType(option, type) {
|
|
return option.type == type;
|
|
},
|
|
appendIndex(str, index) {
|
|
return `${index + 1}. ${str}`;
|
|
},
|
|
doShow(node) {
|
|
this.form = node.row || {};
|
|
this.show = true;
|
|
},
|
|
doClose(done) {
|
|
this.show = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.option {
|
|
line-height: 22px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.answer {
|
|
line-height: 32px;
|
|
color: #000;
|
|
padding-left: 15px;
|
|
}
|
|
</style>
|