rt-sim-training-client/src/views/competitionManage/bankList/item-answer.vue

<template>
  <div>
    <template v-if="type=='select'">
      <el-radio-group v-model="active" @change="onChange">
        <el-radio v-for="(el,i) in optionList" :key="i" :label="i"> 选项-{{ $asc2chart(65+i) }} </el-radio>
      </el-radio-group>
    </template>
    <template v-if="type=='judge'">
      <el-radio-group v-model="active" @change="onChange">
        <el-radio :label="0"> √ </el-radio>
        <el-radio :label="1"> × </el-radio>
      </el-radio-group>
    </template>
    <template v-if="type=='multi'">
      <el-checkbox-group v-model="activeList" @change="onChange">
        <el-checkbox v-for="(el,i) in optionList" :key="i" :label="i"> 选项-{{ $asc2chart(65+i) }} </el-checkbox>
      </el-checkbox-group>
    </template>
    <template v-if="type==='fill'">
      <div v-for="(el, i) in answerList" :key="i" style="margin-bottom: 5px;">
        <div>{{ `第${i + 1}空` }}</div>
        <item-rich v-model="el.value" :remove="i>0" @modify="doModify(el)" @remove="doRemove(i)" />
      </div>
      <el-button class="item__button" type="primary" size="mini" icon="el-icon-plus" @click="doAppend" />
    </template>
    <template v-if="type==='answer'">
      <el-input
        v-model="answer"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入答案"
        @change="onChange"
      />
    </template>
  </div>
</template>

<script>
import ItemRich from './item-rich';
export default {
    components: {
        ItemRich
    },
    props: {
        optionList: {
            type: Array,
            required: true
        },
        type: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            active: 0,
            activeList: [],
            answer: '',
            answerList: [{value: ''}]
        };
    },
    watch: {
        optionList(val) {
            if (this.type === 'judge' || this.type === 'select') {
                this.active = this.optionList.findIndex(ele => ele.correct);
            } else if (this.type === 'multi') {
                this.activeList = [];
                this.optionList.forEach((el, i) => {
                    if (el.correct) {
                        this.activeList.push(i);
                    }
                });
            } else if (this.type === 'fill') {
                this.answerList = [];
                this.optionList.forEach(el => {
                    this.answerList.push({value: el.content});
                });
            } else if (this.type === 'answer') {
                this.answer = (this.optionList[0] || {content: ''}).content;
            }
        }
        // answerList: {
        //     handler(val) {
        //         this.onChange(val);
        //     },
        //     deep: true
        // }
    },
    methods: {
        onChange(e) {
            this.$emit('change', e);
        },
        doAppend() {
            this.answerList.push({value: ''});
        },
        doModify(el) {
            this.$emit('modify', {model: el, prop: 'value'});
            console.log('-----------', this.answerList);
        },
        doRemove(index) {
            this.answerList.splice(index, 1);
        }
    }
};
</script>

<style lang="scss" scoped>
</style>