lw_test/app/home/view/officer/answer.html

{extend name="public/base_el"/}
{block name="css"}
<style>
    #app {
        width: 1200px;
        margin: 0 auto;
    }

    .step {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-info {
        margin-top: 50px;
    }

    .title {
        text-indent: 2em;
        background: white;
        padding-top: 20px;
        font-size: 14px;
    }

    .info-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .evaluate .el-radio-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .evaluate .el-radio-group .el-radio {
        margin-top: 20px;
        width: 500px;
    }

    .evaluate .content {
        box-sizing: border-box;
        width: 1200px;
        height: 600px;
        margin-top: 50px;
    }

    .evaluate .detail-title {
        padding-top: 50px;
        padding-right: 50px;
    }

    .mt-50 {
        margin-top: 30px;
    }

    .title-list {
        padding-top: 10px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        height: 600px;
    }

    .title-list ul {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .title-list li {
        float: left;
        width: 10%;
        height: 35px;
        line-height: 35px;
        border: 1px solid #999;
        text-align: center;
        box-sizing: border-box;
    }

    .title-list .num.finish {
        color: white;
        background: #3da600;
    }

    .title-list .num.current {
        color: white;
        background: #1D6BD0;
    }
</style>
{/block}
{block name="body"}
<div class="step">
    <el-steps style="width: 600px" :active="active" align-center>
        <el-step title="基础信息"></el-step>
        <el-step title="测评试卷"></el-step>
    </el-steps>
</div>

<div class="base-info" v-show="active == 0">
    {include file="officer/answer_base"/}
</div>
<div class="evaluate" v-show="active == 1">
    <div class="title">
        {{list[index].section}}
    </div>
    <div class="content">
        <el-row>
            <el-col :span="17">
                <fieldset style="height:600px;box-sizing: border-box;">
                    <legend>考试题目</legend>
                    <div class="detail-title">{{list[index].no}}、{{list[index].title}}</div>
                    <el-radio-group v-model="answer_detail[list[index].no]">
                        <el-radio
                                :value="option.score"
                                size="large"
                                border
                                :key="list[index].no + '_' + option.score"
                                v-for="option in list[index].option"
                                @change="selectTile"
                        >{{option.title}}
                        </el-radio>
                    </el-radio-group>
                </fieldset>
            </el-col>
            <el-col :span="7" style="height:600px;">
                <div class="title-list">
                    <ul>
                        <li
                                class="num"
                                :class="{finish:answer_detail[item.no] > 0,current:i==index}"
                                :key="item.id"
                                v-for="(item,i) in list"
                                @click="changeTitle(i)"
                        >{{item.no}}
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="info-btn mt-50">
        <el-button type="primary" size="large" @click="onSubmit" v-loading="loading">提交</el-button>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        const base = answer_base();

        base.list = {$list};
        base.active = Vue.ref(0);
        base.answer_detail = Vue.ref({});
        base.index = Vue.ref(0);
        base.selectTile = () => {
            if (base.index.value + 1 == base.list.length) {
                return false;
            }
            base.index.value++;
        }
        base.changeTitle = (i) => {
            base.index.value = i;
        }
        base.loading = Vue.ref(false);
        base.onSubmit = () => {
            if (base.loading.value) {
                return false;
            }
            for (let i = 0; i < base.list.length; i++) {
                if (base.answer_detail.value[i + 1] === undefined) {
                    ElementPlus.ElMessage.error(`第${i + 1}题未填写`);
                    return false;
                }
            }
            base.answer.value.rid = {$id};
            base.loading.value = true;
            postJson("{:url('officer/answerPost')}", {
                id: {$id},
                answer: base.answer.value,
                answer_detail: base.answer_detail.value
            }).then((data) => {
                base.loading.value = false;
                ElementPlus.ElMessage.success('提交成功');
                location.href = "{:url('officer/finish')}";
            })
        }

        return base;
    }
</script>
{/block}