shequ/application/admin/view/servicegrade/detail.html

<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/addons/exam/js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/exam/css/common.css"></link>

<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/exam/js/element-ui/index.css"/>
<script src="__CDN__/assets/addons/exam/js/element-ui/index.js"></script>

<div id="app">

    <el-card class="box-card" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
            <span>用户提交情况</span>
            <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>

        <div v-for="(question, index) in row.questions" :key="index" class="question-item">
            <div class="el-descriptions">
                <div class="el-descriptions__body">
                    <table class="el-descriptions__table is-bordered">
                        <tbody>

                        <tr class="el-descriptions-row">
                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width ">标题</th>
                            <td colspan="9" class="el-descriptions-item__cell el-descriptions-item__content">{{index+1}}.<span v-html="question.title"></span></td>
                        </tr>
                        <tr class="el-descriptions-row">
                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width ">选项</th>
                            <td colspan="9" class="el-descriptions-item__cell el-descriptions-item__content">
                                <div v-if="question.kind !== 'FILL'">
                                    <div v-for="(option, indexOption) in question.options_json" :key="indexOption" class="option-item">
                                        {{option.key}}：{{option.value}}
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr class="el-descriptions-row">
                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width">类型</th>
                            <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content th-fix-width">
                                <el-tag size="small" effect="plain" v-if="question.kind == 'JUDGE'">判断</el-tag>
                                <el-tag size="small" effect="plain" v-else-if="question.kind == 'SINGLE'" type="success">单选</el-tag>
                                <el-tag size="small" effect="plain" v-else-if="question.kind == 'MULTI'" type="info">多选</el-tag>

                            </td>


                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width">用户选择</th>
                            <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content" v-if="question.kind == 'JUDGE' || question.kind == 'SINGLE' || question.kind == 'MULTI'" :class="['answer-right']">
                                <div>{{getUserAnswer(index) || '未答'}}</div>
                            </td>


                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </el-card>

</div>

<script>
    var row = {:html_entity_decode(str_replace('&quot;', "'", json_encode($row)))};
    //console.log(row);
    var app = new Vue({
        el: '#app',
        data: {
            row: row,
        },
        computed: {

            /**
             * 获取用户答案
             * @returns {function(*): string|*}
             */
            getUserAnswer() {
                return function (questionIndex) {
                    return this.row.user_answers && this.row.user_answers[questionIndex] ? this.row.user_answers[questionIndex].answer : '';
                }
            },

        },
        created() {

        },
        methods: {

        }
    })
</script>
<style>
    .answer-right {
        background: #E1F3D8;
    }

    .answer-fail {
        background: #FDE2E2;
    }

    .question-item {
        padding: 15px;
    }

    .option-item {
        margin-left: 10px;
    }

    .th-fix-width {
        width: 100px;
        text-align: center !important;
    }

    .fill-answer-item {
        margin-right: 20px;
    }
</style>