添加app端问卷填写静态页面

src/components/AppQuestionnaireQuestionList.vue

@@ -0,0 +1,168 @@
+<!-- 问卷的 试题列表 -->
+<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>

src/components/QuestionTypeShow.vue

@@ -55,17 +55,37 @@
             </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 v-if="Number(evaluationType) === 1 && Number(questionScore)">
+            <!--  PC端 -->
+            <div v-if="deviceType == 'pc'"  
+                :class="['star_list_score pc_star',{disabled:!allowEdit}]" >
+                非常不满意
+                <el-rate size="large"   
+                    v-model="questionVal"
+                    :disabled="!allowEdit"
+                    :colors="['#2e64fa','#2e64fa','#2e64fa']"
+                    :max="Number(questionScore)" 
+                    @change="HandleChange"
+                    clearable />
+                非常满意
+            </div>
+
+             <!-- app端-->
+              <div v-if="deviceType == 'app'"  
+                :class="['star_list_score app_star',{disabled:!allowEdit}]" >
+                <div class="star_explain">
+                    <span>非常不满意</span>
+                    <span>非常满意</span>
+                </div>
+                <el-rate size="large"   
+                    v-model="questionVal"
+                    :disabled="!allowEdit"
+                    :colors="['#2e64fa','#2e64fa','#2e64fa']"
+                    :max="Number(questionScore)" 
+                    @change="HandleChange"
+                    clearable />
+            </div>
+        </template>
     </template>
 </template>
 
@@ -100,6 +120,10 @@ const props = defineProps({
     allowEdit:{   //是否允许编辑
         type:Boolean,
         default:true
+    },
+    deviceType:{
+        type:String,   //pc | app   __ 展示页面的设备类型
+        default:'pc'
     }
 
 })
@@ -223,8 +247,32 @@ const HandleChange = (val)=>{
         .el-rate__icon{
             font-size: 24px;
         }
-      }
-  }
+       }
+   }
+}
+
+
+.app_star{
+    flex-direction: column;
+    gap:calc(4 * var(--app-rpx));
+    font-size:calc(14 * var(--app-rpx));
+    .star_explain{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    :deep(.el-rate){
+        width: 100%;
+        padding:0 calc(16 * var(--app-rpx));
+        gap:calc(12 * var(--app-rpx)) calc(42 * var(--app-rpx));
+        height: auto;
+        .el-rate__item{
+            .el-rate__icon{
+                font-size: calc(24 * var(--app-rpx))
+            }
+        }
+    }
 }
 
 </style>

src/components/commonDictConvert.ts

@@ -46,31 +46,33 @@ export const qustionTypeToName = (type)=>{
     }
 }
 
+
+//  evaluationStatus: number   //评价状态  0-待评价  1-进行中  2-已评价
 type QuestionnaireStatus  = 'done' | 'pending' | 'unfinish' | string
 // 科目教师问卷评价进度 状态转换
-export const fillOutStatusToColor = (status)=>{
-    switch(status){
-        case 'done':
+export const fillOutStatusToColor = (status:number|string)=>{
+    switch(Number(status)){
+        case 2:
             return {color:'#2BC644',label:'已完成',statusName:'已评价'}
-        case 'pending':
+        case 1:
             return {color:'#2E64FA',label:'进行中',statusName:'进行中'}
-        case 'unfinish':
+        case 0:
             return {color:'#999999',label:'未完成',statusName:'待评价'}
     }
 }
 // 整卷填写 的 问卷是否处于未完成 状态
-export const IsSubjectQuestionnaireUnFinish = (status:QuestionnaireStatus)=>{
-    return status === 'unfinish'
+export const IsSubjectQuestionnaireUnFinish = (status:number)=>{
+    return Number(status) === 0
 }
 
 
 // 按题填写的 试题 是否处于已完成状态
 export const IsSplitQuestionnaireFinish = (status)=>{
-    return status === 'done'
+    return Number(status) === 2
 }
 // 按题填写的试题是否处于 未完成状态
 
 export const IsSplitQuestionnaireUnFinish = (status)=>{
-    return status === 'unfinish'
+    return Number(status) === 0
 }
 

src/views/appView/QuestionnaireCommit.vue

@@ -0,0 +1,513 @@
+<template>
+    <div class="app_container">
+        <!-- 问卷头部 -->
+        <div class="questionnaire_head">
+            <h1 class="head_title">{{ questionaireMsg?.assessmentTitle }}</h1>
+            <p class="head_desc">{{ questionaireMsg?.assessmentIllustrate }}</p>
+        </div>
+
+        <!-- 整卷填写问卷内容 -->
+        <AppQuestionnaireQuestionList 
+            :allowEdit="!isCurrentQuestionnaireTaskFinish"
+            :questionaireData="questionaireMsg.questionData" 
+            v-model:questionListRef="questionListRef" 
+            @formListAnswerChange="HandleQuestionnaireFormChange"
+        />
+        <div class="operation">
+            <el-button :class="[isCurrentQuestionnaireTaskFinish ? 'is-disabled' :  'button_background']" 
+                @click="isCurrentQuestionnaireTaskFinish ? '' : HandleFinishReview()">完成本科目</el-button>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed,watch } from 'vue';
+import QuestionnaireQuestionList from '@/components/QuestionnaireQuestionList.vue';
+import AppQuestionnaireQuestionList from '@/components/AppQuestionnaireQuestionList.vue';
+/**
+ * 2. 问卷整体数据
+ */
+
+//  当前问卷任务是否全部完成 ———— 以及问卷是否结束
+const isCurrentQuestionnaireTaskFinish = ref(false) //true  false
+
+
+//  模拟所有教师的问卷数据（目前只有两个）
+const mockTeacherQuestionnaireData = ref([
+    {
+        "id": "661146080469061632",
+        "createdAt": "2026-07-15 09:58",
+        "schoolId": "10007",
+        "teacherId": "510448965049651259",
+        "teacherName": "李敏",
+        "assessmentTitle": "大学生消费情况调查问卷-复制",
+        "assessmentIllustrate": "您好！这次问卷只是针对中小学现状的调查，为心理教育提供依据。本调查问卷无记名，完全保密，请同学们必须如实填写，以利于调查问卷的有效性！谢谢合作！",
+        "assessmentScore": "15.00",
+        "assessmentSortCode": 104,
+        "useStatus": 0,
+        "questionCount": null,
+        "fullScore": null,
+        "questionData": [
+            {
+                "id": "663805618586464256",
+                "createdAt": "2026-07-22 18:06:32",
+                "updatedAt": "2026-07-22 18:06:32",
+                "schoolId": "10007",
+                "assessmentId": "661146080469061632",
+                "questionClass": 0,
+                "questionTitleName": "您的性别*",
+                "questionType": 0,
+                "questionAnswerType": 1,
+                "questionSortRole": 0,
+                "questionSortCode": 1,
+                "questionScore": null,
+                "evaluationType": 0,
+                "answerData": [
+                    {
+                        "id": "663805618636795904",
+                        "createdAt": "2026-07-22 18:06:32",
+                        "updatedAt": "2026-07-22 18:06:32",
+                        "schoolId": "10007",
+                        "assessmentId": "661146080469061632",
+                        "questionId": "663805618586464256",
+                        "questionClass": null,
+                        "questionSortCode": 1,
+                        "answerName": "男",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "663805618645184512",
+                        "createdAt": "2026-07-22 18:06:32",
+                        "updatedAt": "2026-07-22 18:06:32",
+                        "schoolId": "10007",
+                        "assessmentId": "661146080469061632",
+                        "questionId": "663805618586464256",
+                        "questionClass": null,
+                        "questionSortCode": 2,
+                        "answerName": "女",
+                        "answerScore": null
+                    }
+                ],
+                status:'done',
+            },
+            {
+                "id": "663805618678738944",
+                "createdAt": "2026-07-22 18:06:32",
+                "updatedAt": "2026-07-22 18:06:32",
+                "schoolId": "10007",
+                "assessmentId": "661146080469061632",
+                "questionClass": 0,
+                "questionTitleName": "每月消消消消消消消消消消消消消消消消消消消消消费多******用于哪些方面*",
+                "questionType": 1,
+                "questionAnswerType": 1,
+                "questionSortRole": 1,
+                "questionSortCode": 2,
+                "questionScore": null,
+                "evaluationType": 0,
+                "answerData": [
+                    {
+                        "id": "663805618703904768",
+                        "createdAt": "2026-07-22 18:06:32",
+                        "updatedAt": "2026-07-22 18:06:32",
+                        "schoolId": "10007",
+                        "assessmentId": "661146080469061632",
+                        "questionId": "663805618678738944",
+                        "questionClass": null,
+                        "questionSortCode": 1,
+                        "answerName": "伙食",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "663805618708099072",
+                        "createdAt": "2026-07-22 18:06:32",
+                        "updatedAt": "2026-07-22 18:06:32",
+                        "schoolId": "10007",
+                        "assessmentId": "661146080469061632",
+                        "questionId": "663805618678738944",
+                        "questionClass": null,
+                        "questionSortCode": 2,
+                        "answerName": "购置衣物",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "663805618708099073",
+                        "createdAt": "2026-07-22 18:06:32",
+                        "updatedAt": "2026-07-22 18:06:32",
+                        "schoolId": "10007",
+                        "assessmentId": "661146080469061632",
+                        "questionId": "663805618678738944",
+                        "questionClass": null,
+                        "questionSortCode": 3,
+                        "answerName": "日常交际",
+                        "answerScore": null
+                    }
+                ],
+                status:'done',
+            },
+            {
+                "id": "663805618745847808",
+                "createdAt": "2026-07-22 18:06:32",
+                "updatedAt": "2026-07-22 18:06:32",
+                "schoolId": "10007",
+                "assessmentId": "661146080469061632",
+                "questionClass": 0,
+                "questionTitleName": "你希望老师在哪里改进*",
+                "questionType": 2,
+                "questionAnswerType": 1,
+                "questionSortRole": 0,
+                "questionSortCode": 3,
+                "questionScore": null,
+                "evaluationType": 0,
+                "answerData": [],
+                status:'pending',
+            },
+            {
+                "id": "663805618766819328",
+                "createdAt": "2026-07-22 18:06:32",
+                "updatedAt": "2026-07-22 18:06:32",
+                "schoolId": "10007",
+                "assessmentId": "661146080469061632",
+                "questionClass": 1,
+                "questionTitleName": "你对本次问卷调查的感受",
+                "questionType": 5,
+                "questionAnswerType": 1,
+                "questionSortRole": 0,
+                "questionSortCode": 4,
+                "questionScore": "10.00",
+                "evaluationType": 0,
+                "answerData": [],
+                status:'unfinish',
+            },
+            {
+                "id": "663805618787790848",
+                "createdAt": "2026-07-22 18:06:32",
+                "updatedAt": "2026-07-22 18:06:32",
+                "schoolId": "10007",
+                "assessmentId": "661146080469061632",
+                "questionClass": 1,
+                "questionTitleName": "你对本次问卷调查的感受",
+                "questionType": 5,
+                "questionAnswerType": 1,
+                "questionSortRole": 0,
+                "questionSortCode": 5,
+                "questionScore": "15.00",
+                "evaluationType": 1,
+                "answerData": [],
+                status:'unfinish',
+            }
+        ]
+    },
+    {
+        "id": "661148998005952512",
+        "createdAt": "2026-07-15 10:10",
+        "schoolId": "10007",
+        "teacherId": "510448965049651259",
+        "teacherName": "李敏",
+        "assessmentTitle": "必填项传参测试",
+        "assessmentIllustrate": "必填项传参测试",
+        "assessmentScore": "0.00",
+        "assessmentSortCode": 101,
+        "useStatus": 1,
+        "questionCount": null,
+        "fullScore": null,
+        "questionData": [
+            {
+                "id": "661213148149264384",
+                "createdAt": "2026-07-15 14:24:59",
+                "updatedAt": "2026-07-15 14:24:59",
+                "schoolId": "10007",
+                "assessmentId": "661148998005952512",
+                "questionClass": 0,
+                "questionTitleName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
+                "questionType": 1,
+                "questionAnswerType": 1,
+                "questionSortRole": 1,
+                "questionSortCode": 1,
+                "questionScore": null,
+                "evaluationType": 0,
+                "answerData": [
+                    {
+                        "id": "661213148170235904",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148149264384",
+                        "questionClass": null,
+                        "questionSortCode": 1,
+                        "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148174430208",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148149264384",
+                        "questionClass": null,
+                        "questionSortCode": 2,
+                        "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148178624512",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148149264384",
+                        "questionClass": null,
+                        "questionSortCode": 3,
+                        "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148182818816",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148149264384",
+                        "questionClass": null,
+                        "questionSortCode": 4,
+                        "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
+                        "answerScore": null
+                    }
+                ]
+            },
+            {
+                "id": "661213148224761856",
+                "createdAt": "2026-07-15 14:24:59",
+                "updatedAt": "2026-07-15 14:24:59",
+                "schoolId": "10007",
+                "assessmentId": "661148998005952512",
+                "questionClass": 0,
+                "questionTitleName": "必填项测试1",
+                "questionType": 0,
+                "questionAnswerType": 1,
+                "questionSortRole": 1,
+                "questionSortCode": 2,
+                "questionScore": null,
+                "evaluationType": 0,
+                "answerData": [
+                    {
+                        "id": "661213148249927680",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148224761856",
+                        "questionClass": null,
+                        "questionSortCode": 1,
+                        "answerName": "选项1",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148254121984",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148224761856",
+                        "questionClass": null,
+                        "questionSortCode": 2,
+                        "answerName": "选项2",
+                        "answerScore": null
+                    }
+                ]
+            },
+            {
+                "id": "661213148283482112",
+                "createdAt": "2026-07-15 14:24:59",
+                "updatedAt": "2026-07-15 14:24:59",
+                "schoolId": "10007",
+                "assessmentId": "661148998005952512",
+                "questionClass": 0,
+                "questionTitleName": "选项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出测试",
+                "questionType": 0,
+                "questionAnswerType": 1,
+                "questionSortRole": 0,
+                "questionSortCode": 3,
+                "questionScore": null,
+                "evaluationType": 0,
+                "answerData": [
+                    {
+                        "id": "661213148308647936",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148283482112",
+                        "questionClass": null,
+                        "questionSortCode": 1,
+                        "answerName": "选项溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出测试",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148312842240",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148283482112",
+                        "questionClass": null,
+                        "questionSortCode": 2,
+                        "answerName": "选项溢出测试选项溢出测试选项溢溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试出测试选项溢出测试选项溢出测试",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148312842241",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148283482112",
+                        "questionClass": null,
+                        "questionSortCode": 3,
+                        "answerName": "选项溢出测试选项溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试选项溢出测试选项溢出测试",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148317036544",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148283482112",
+                        "questionClass": null,
+                        "questionSortCode": 4,
+                        "answerName": "4354",
+                        "answerScore": null
+                    },
+                    {
+                        "id": "661213148321230848",
+                        "createdAt": "2026-07-15 14:24:59",
+                        "updatedAt": "2026-07-15 14:24:59",
+                        "schoolId": "10007",
+                        "assessmentId": "661148998005952512",
+                        "questionId": "661213148283482112",
+                        "questionClass": null,
+                        "questionSortCode": 5,
+                        "answerName": "789",
+                        "answerScore": null
+                    }
+                ]
+            }
+        ]
+    },
+])
+
+// 模拟问卷响应数据
+const mockResData = computed(()=>mockTeacherQuestionnaireData.value[currentActiveTeacherIndex.value % 2])
+
+// 最终渲染的整体问卷数据
+const questionaireMsg = computed(()=>{
+    let addedQuestionList = mockResData.value.questionData.map(item=>{
+        let options = item.answerData.map(opt=>{
+            return{
+                content: opt.answerName,
+                score: opt.answerScore,
+                id: opt.id
+            }
+        })
+        let extraConfig = []
+        if(Number(item.questionAnswerType) === 1){
+            extraConfig.push('required')
+        }
+        if(Number(item.questionSortRole) === 1){
+            extraConfig.push('isHorizontal')
+        }
+        return {
+            ...item,
+            id:item.id,
+            extraConfig,    // 是否必答 required, 是否横排 isHorizontal
+            options,
+            answer:undefined
+        }
+    })
+    return{
+        assessmentTitle:mockResData.value.assessmentTitle,  //问卷标题
+        assessmentIllustrate:mockResData.value.assessmentIllustrate,  //问卷简介
+        // 问卷试题列表
+        questionData:addedQuestionList
+    }
+})
+
+
+
+/**
+ * 3. 整卷填写相关变量 和操作
+ */
+// 问卷试题 dom
+const questionListRef = ref()
+// 当前选中的待评价科目教师
+const currentActiveTeacherIndex = ref(0) 
+
+// 整卷填写 教师问卷的答案
+const fullQuestionnaireAnswer = ref({})
+
+
+// 接收问卷表单填写信息的变更
+const HandleQuestionnaireFormChange = (val)=>{
+    fullQuestionnaireAnswer.value = val
+}
+// 问卷整卷提交
+const HandleFinishReview = ()=>{
+    fullQuestionnaireAnswer.value = {}
+}
+</script>
+
+
+<style lang="scss" scoped>
+.app_container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    width: 100%;
+    min-height: 100vh;
+    background-color: #ffffff;
+    padding:calc(20 * var(--app-rpx));
+    // 底部的工具栏会占用 44 * var(--app-rpx)
+    // 浏览器访问 底部多占  80 * var(--app-rpx) —— 待完善
+    padding-bottom: calc((64) * var(--app-rpx));
+
+    > * {
+        flex-shrink: 0;
+    }
+
+    /* --- 头部样式 --- */
+    .questionnaire_head {
+        text-align: center;
+        margin-bottom: calc(20 * var(--app-rpx));
+        .head_title {
+            font-size: calc(18 * var(--app-rpx));
+            line-height: calc(25 * var(--app-rpx));
+            font-weight: 600;
+            color: #000;
+            margin-bottom: calc(8 * var(--app-rpx));
+        }
+        .head_desc {
+            font-size:calc(12 * var(--app-rpx));
+            color: #999999;
+            line-height:calc(17 * var(--app-rpx));
+        }
+    }
+
+    .operation{
+        flex: 1 1;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        .el-button{
+            margin-top: calc(40 * var(--app-rpx));
+            width: 100%;
+            height: calc(44 * var(--app-rpx));
+            font-size: calc(16 * var(--app-rpx));
+            font-weight: 600;
+        }
+    }
+}
+
+</style>