rt-sim-training-client/src/views/competitionManage/bankList/dialog-detail.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;
		padding-left: 20px;
	}

	.answer {
		line-height: 32px;
		color: #000;
		padding-left: 15px;
	}
</style>