student-assessment/src/components/QuestionTypeShow.vue

<!-- 不同类型问卷题目 的渲染 -->
<template>
    <!-- 单选  -->
    <el-radio-group
        :disabled="!allowEdit"
        @change="HandleChange"
        v-model="questionVal"
        v-if="[0,3].includes(Number(questionType))" 
        :class="{vertical:!isHorizontal}"> 
        <el-radio v-for="radioItem in questionSubOptions" 
            :key="radioItem.id" 
            :value="radioItem.id"
        >
            {{ radioItem.content }}
        </el-radio>
    </el-radio-group>
        
    <!-- 多选 -->
    <el-checkbox-group  
        :disabled="!allowEdit"
        @change="HandleChange"
        v-model="questionVal"
        v-else-if="Number(questionType) === 1" 
        :class="{vertical:!isHorizontal}">

        <el-checkbox 
            v-for="checkItem in questionSubOptions" 
            :key="checkItem.id"
            :label="checkItem.content"
            :value="checkItem.id"
        />
    </el-checkbox-group>

    <!-- 问答题 -->
    <el-input  
        :disabled="!allowEdit"
        @change="HandleChange"
        v-model="questionVal"
        v-else-if="Number(questionType) === 2"
        :autosize="{ minRows:5, maxRows: 5 }" 
        type="textarea" 
        :rows="5"  
        placeholder="不超过2000字"
    />

    <!-- 评价(分)题 5 -->
    <template v-else-if="Number(questionType) === 5 ">
        <!-- 评数题 -->
        <ul class="num_list_score" v-if="Number(evaluationType) === 0 && Number(questionScore)">
            <li v-for="value in Number(questionScore)" 
                :key="value"
                :class="{active:questionVal == value,disabled:!allowEdit}" 
                @click="allowEdit ? HandleNumberScoreChange(value) : ''">
                {{ value }}分
            </li>
        </ul>
        <!-- 评星题 -->
        <div :class="['star_list_score',{disabled:!allowEdit}]" v-else-if="Number(evaluationType) === 1 && Number(questionScore)">
            非常不满意
            <el-rate size="large"   
                v-model="questionVal"
                :disabled="!allowEdit"
                :colors="['#2e64fa','#2e64fa','#2e64fa']"
                :max="Number(questionScore)" 
                @change="HandleChange"
                clearable />
            非常满意
        </div>
    </template>
</template>


<script setup lang="ts">
import {ref} from 'vue'

interface Option {
    content: String
    score?: Number|String,
    id?: Number|string
}
const props = defineProps({
    questionType:{  //题目展示类型  单选0/多选1/问答2/评分单选3 / 评分题4
        type:[Number,String],
        required:true
    },
    isHorizontal:{    //单选/多选 选项 水平/垂直 排列
        type:Boolean,
        default:true,
        required:true
    },
    questionSubOptions:{   // 单选/多选 选项列表
        type:[Array<Option>,null],
    },
    evaluationType:{    //评分题 分值的展示形式  0 数字  1 星星
        type:[Number,String,null],
    },
    questionScore:{   // 评分题 题目的分值
        type:[Number,null]
    },
    allowEdit:{   //是否允许编辑
        type:Boolean,
        default:true
    }

})
const emit = defineEmits(['formChange'])
const questionVal = ref()

const HandleNumberScoreChange = (val:number)=>{
    questionVal.value = val;
    HandleChange(val)
}
const HandleChange = (val)=>{
    emit('formChange',val)
}

</script>


<style lang="scss" scoped>
.el-checkbox-group,
.el-radio-group{
    display: flex;
    flex-direction: row;
    gap: 5px 15px;
    flex-wrap: wrap;
}

.el-checkbox-group.vertical,
.el-radio-group.vertical{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap:5px;
}

.el-checkbox-group,
.el-radio-group
{
    overflow: auto;
    :deep(.el-radio),
    :deep(.el-checkbox){
        display: flex;
        align-items: flex-start;
        height: auto;
        margin: 0;

        .el-radio__input,
        .el-checkbox__input{
            height: 21px;
            display: flex;
            align-items: center;
        }
        .el-radio__label,
        .el-checkbox__label{
            line-height: 21px;
            overflow: auto;
            word-break: break-all !important;
            white-space: normal !important;
        }
    }
}


// 评分题样式
.num_list_score{
  display: flex;
  align-items: center;
  gap:16px;
  color: #CCCCCC;
  line-height: 1;
  font-size: 14px;

  flex-wrap: wrap;
  li{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px ;
      border: 1px solid #CCCCCC;
      width: 44px;
      height: 32px;
      background-color: white;
      cursor: pointer;

      &.active{
          background-color: #2E64FA;
          color: white;
          border:none;
      }

      &.disabled{
        &.active{
          background-color: #CCCCCC;
        }
        cursor: not-allowed !important;
      }
  }
}

// 评星题样式
.star_list_score{
  display: flex;
  align-items: center;
  gap:16px;
  color: #CCCCCC;
  line-height: 1;
  font-size: 14px;

  word-break: keep-all;

  &.disabled{
    cursor: not-allowed;
  }

  .el-rate{
      display: flex;
      flex-wrap: wrap;
      gap:10px 20px;
      height: auto;
      :deep(.el-rate__item){
        .el-rate__icon{
            font-size: 24px;
        }
      }
  }
}

</style>