rt-sim-training-client/src/views/competitionManage/bankList/dialog-detail.vue

78 lines
1.9 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>
<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;
}
.answer {
line-height: 32px;
padding-left: 0;
color: #000;
}
</style>