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" class="fillType">
        <div class="fillTypeName">{{ `第${i + 1}空` }}</div>
        <el-input
          v-model="answerList[i]"
          class="fillTypeInput"
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4}"
          placeholder="请输入答案"
          @change="onChange"
        />
        <div class="fillTypeBtn">
          <el-button v-if="i>0" class="item__button" type="danger" size="mini" icon="el-icon-delete" circle @click="doRemove(i)" />
        </div>
      </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>
export default {
    props: {
        optionList: {
            type: Array,
            required: true
        },
        type: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            active: 0,
            activeList: [],
            answer: '',
            answerList: ['']
        };
    },
    watch: {
        optionList: {
            deep:true,
            handler:function(newV, oldV) {
                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(el.content);
                    });
                } else if (this.type === 'answer') {
                    this.answer = (this.optionList[0] || {content: ''}).content;
                }
            }
        }
    },
    methods: {
        onChange(e) {
            if (this.type === 'fill') {
                this.$emit('change', this.answerList);
            } else {
                this.$emit('change', e);
            }
        },
        doAppend() {
            this.answerList.push('');
        },
        doModify(el) {
            this.$emit('modify', {model: el, prop: 'value'});
        },
        doRemove(index) {
            this.answerList.splice(index, 1);
        }
    }
};
</script>

<style lang="scss" scoped>
.fillType{
  margin-bottom:10px;display:flex;
}
.fillTypeName{
  margin-right: 10px;height:33px; line-height:33px;
}
.fillTypeInput{
  flex:1;
}
.fillTypeBtn{
  margin-left: 10px;width: 33px;height:33px;
  button{
      vertical-align: top;
      margin-top:2px;
  }
}
</style>