student-assessment/src/components/AppQuestionnaireQuestionList.vue

<!-- 问卷的 试题列表 -->
<template>
    <ul class="question_list" ref="questionListRef">
        <li
            :id="item.id"
            v-for="(item, index) in questionaireData"
            :key="item.id"
            class="question_card">
            <!-- 题目行 -->
            <QuestionTitleComponent :titleIndex="index" :titleMsg="item"/>
            <!-- 题目内容区域 -->
            <div class="question_body">
                <QuestionTypeShow 
                    deviceType="app"
                    :allowEdit="allowEdit"
                    :isHorizontal="item.extraConfig.includes('isHorizontal')"
                    :questionType="Number(item.questionType)"
                    :questionSubOptions="item.options"
                    :evaluationType="Number(item.evaluationType)"
                    :questionScore="Number(item.questionScore)"
                    @formChange="(val)=>HandleFormChange(val,item.id)"
                ></QuestionTypeShow>
            </div>
        </li>
    </ul>
</template>


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

import QuestionTypeShow from '@/components/QuestionTypeShow.vue';
import QuestionTitleComponent from './QuestionTitleComponent.vue';

interface QuestionOpt {
    content: string,  //选项名称
    score: Number|String,   //选项分数
    id: string
}

interface QuestionMsg {
    id:string,
    extraConfig:string[],    // 是否必答 required, 是否横排 isHorizontal
    options:QuestionOpt[],   //单选、多选的选项配置
    answer:string | [] | undefined | null,     //问题答案
    questionTitleName:string,   //问题名称
    questionType:number,    //问题类型
    questionAnswerType:number,    // 是否必答，0-否，1-是
    questionSortRole:number,   // 0-竖排，1-横排
    questionScore:string,  //问题满分
    evaluationType:string,  // 评分题 的 分值展示形式  0数字式 1星星式
    answerData?:[],    //同options
}

const props = defineProps({
    questionaireData:{
        type:Object as ()=>QuestionMsg[],
        required:true
    }, 
    allowEdit:{    //是否允许编辑
        type:Boolean,
        default:true
    }
})

const emit = defineEmits(['formListAnswerChange'])

const questionListRef = defineModel('questionListRef')

const formQuestionAnswerList = ref<Record<string, any>>({})
const HandleFormChange = (val:any,keyId:string)=>{
    formQuestionAnswerList.value[keyId] = val
    emit('formListAnswerChange',formQuestionAnswerList.value)
}
</script>



<style lang="scss" scoped>

 .question_list{
    display: flex;
    flex-direction: column;
    gap:calc(32 * var(--app-rpx));

    /* --- 题目卡片样式 --- */
    .question_card {
        :deep(.question_header){
            font-size:calc(16 * var(--app-rpx));
            margin-bottom:calc(16 * var(--app-rpx));
            .q_title {
                &.required_mark {
                    padding-right:calc(6 * var(--app-rpx));
                    &::after{
                        width: calc(5 * var(--app-rpx));
                        margin-left: calc(2 * var(--app-rpx));
                        font-size: calc(16 * var(--app-rpx));
                    }
                }
            }
            .q_type_tag {
                font-size:calc(16 * var(--app-rpx));
                margin-left: calc(8 * var(--app-rpx));
            }
        }

        .question_body{
            :deep(.el-checkbox-group),
            :deep(.el-radio-group){
                gap: calc(5 * var(--app-rpx)) calc(15 * var(--app-rpx));
            }

            :deep(.el-checkbox-group.vertical),
            :deep(.el-radio-group.vertical){
                gap:calc(5 * var(--app-rpx));
            }

            :deep(.el-checkbox-group),
            :deep(.el-radio-group){
                .el-radio,
                .el-checkbox{
                    .el-radio__input,
                    .el-checkbox__input{
                        height:calc(22 * var(--app-rpx));
                        .el-radio__inner,
                        .el-checkbox__inner{
                            width: calc(14 * var(--app-rpx));
                            height: calc(14 * var(--app-rpx));
                        }
                        .el-radio__inner::after{
                            width:calc(4 * var(--app-rpx));
                            height:calc(4 * var(--app-rpx));
                        }
                        .el-checkbox__inner::after{
                            height:calc(7 * var(--app-rpx));
                            left:calc(4 * var(--app-rpx));
                            top:calc(1 * var(--app-rpx));
                            width:calc(3 * var(--app-rpx));
                            border-width: calc(1 * var(--app-rpx));;
                        }
                    }
                    .el-radio__label,
                    .el-checkbox__label{
                        line-height:calc(22 * var(--app-rpx));
                        font-size: calc(16 * var(--app-rpx));
                    }
                }
            }

            :deep(.el-textarea){
                font-size:calc(16 * var(--app-rpx));
            }

            :deep(.num_list_score){
                gap:calc(16 * var(--app-rpx));
                font-size:calc(16 * var(--app-rpx));
                li{
                    border-radius:calc(4 * var(--app-rpx));
                    border: calc(1 * var(--app-rpx)) solid #CCCCCC;
                    width: calc(54 * var(--app-rpx));
                    height:calc(32 * var(--app-rpx));

                }
            }
        }
    }
}
</style>