添加问卷预览交互 和 取消试题编辑

src/components/QuestionTypeShow.vue

@@ -1,16 +1,19 @@
 <template>
     <!-- 单选  -->
-    <el-radio-group 
+    <el-radio-group
+        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>
+        >{{ radioItem.content }}
+    </el-radio>
     </el-radio-group>
         
     <!-- 多选 -->
     <el-checkbox-group 
+        v-model="questionVal"
         v-else-if="Number(questionType) === 1" 
         :class="{vertical:!isHorizontal}">
 
@@ -24,6 +27,7 @@
 
     <!-- 问答题 -->
     <el-input  
+        v-model="questionVal"
         v-else-if="Number(questionType) === 2"
         :autosize="{ minRows:5, maxRows: 5 }" 
         type="textarea" 
@@ -34,13 +38,18 @@
     <!-- 评价(分)题 5 -->
     <template v-else-if="Number(questionType) === 5 ">
         <ul class="num_score" v-if="Number(evaluationType) === 0 && Number(questionScore)">
-            <li v-for="value in Number(questionScore)">
+            <li v-for="value in Number(questionScore)" 
+                :key="value"
+                :class="{active:questionVal == value}" 
+                @click="questionVal = value">
                 {{ value }}分
             </li>
         </ul>
         <div class="star_score" v-else-if="Number(evaluationType) === 1 && Number(questionScore)">
             非常不满意
-            <el-rate size="large" 
+            <el-rate size="large"   
+                v-model="questionVal"
+                :colors="['#2e64fa','#2e64fa','#2e64fa']"
                 :max="Number(questionScore)" 
                 clearable />
             非常满意
@@ -50,6 +59,7 @@
 
 
 <script setup lang="ts">
+import {ref} from 'vue'
 
 interface Option {
     content: String
@@ -78,6 +88,8 @@ const props = defineProps({
 
 })
 
+const questionVal = ref()
+
 </script>
 
 
@@ -100,6 +112,7 @@ const props = defineProps({
     gap:16px;
     color: #CCCCCC;
     line-height: 1;
+    font-size: 14px;
 }
 .num_score{
     flex-wrap: wrap;
@@ -111,8 +124,14 @@ const props = defineProps({
         border: 1px solid #CCCCCC;
         width: 44px;
         height: 32px;
-        font-size: 14px;
         background-color: white;
+        cursor: pointer;
+
+        &.active{
+            background-color: #2E64FA;
+            color: white;
+            border:none;
+        }
     }
 }
 

src/components/questionConfig/QuestionConfig.vue

@@ -122,7 +122,7 @@
             <template #submit="{formRef,formData}">
                 <div class="action_bar">
                     <el-button class="button_background" @click="HandleAddConfirm({formRef,formData})">确定</el-button>
-                    <el-button class="button_refresh">取消</el-button>
+                    <el-button class="button_refresh" @click="HandleCancel({formRef,formData})">取消</el-button>
                 </div>
             </template>
         </Form>
@@ -268,6 +268,11 @@ const HandleAddConfirm = async (params:any)=>{
     })
 }
 
+const HandleCancel =  async (params:any)=>{
+    const {formRef} = params
+    formRef.resetFields()
+    emit('cancel')
+}
 
 // 同步监听 1
 watch(()=>props.defaultFormData,(newVal)=>{

src/router/index.ts

@@ -23,25 +23,26 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        name: 'surveyManagement',
+        name: 'surveyManagement',  //问卷管理
         component: () => import('@/views/surveyManagement/SurveyManagement.vue')
       },
       {
         path: 'createQuestionnaire',
-        name: 'createQuestionnaire',
+        name: 'createQuestionnaire',    //创建问卷
         component: () => import('@/views/surveyManagement/CreateQuestionnaire.vue')
       },
       {
         path: 'previewQuestionnaire',
-        name: 'previewQuestionnaire',
+        name: 'previewQuestionnaire',  //预览问卷
         component: () => import('@/views/surveyManagement/PreviewQuestionnaire.vue')
       },
       
       {
         path: 'reviewManagement',
-        name: 'reviewManagement',
+        name: 'reviewManagement',   //评价管理
         component: () => import('@/views/reviewManagement/ReviewManagement.vue')
       },
+      
       {
         path: 'reviewAnalysis',
         name: 'reviewAnalysis',

src/views/surveyManagement/CreateQuestionnaire.vue

@@ -94,9 +94,10 @@
                     <div   v-else class="question_itm_edit">
                         <QuestionConfig  
                             :displayMode="selectedQuestionGetScore ? 'scored' : 'statistic'"
-                            @confirm="AddQuesiton"
                             :defaultFormData="defaultQuestionData"
                             @formChange="HandleQuestionChange"
+                            @confirm="AddQuesiton"
+                            @cancel="selectedQuestionType = ''"
                         ></QuestionConfig>
                     </div>
                  </div>
@@ -480,7 +481,8 @@ const GetQuestionnaireDetail =async ()=>{
                 return{
                     content: opt.answerName,
                     score: opt.answerScore,
-                    id: opt.questionId
+                    // id: opt.questionId
+                    id: opt.id
                 }
             })
 
@@ -493,7 +495,8 @@ const GetQuestionnaireDetail =async ()=>{
             }
             return {
                 ...item,
-                id:item.assessmentId,
+                // id:item.assessmentId,
+                id:item.id,
                 extraConfig,    // 是否必答 required, 是否横排 isHorizontal
                 options
             }

src/views/surveyManagement/PreviewQuestionnaire.vue

@@ -76,7 +76,8 @@ const GetQuestionnaireDetail =async ()=>{
                 return{
                     content: opt.answerName,
                     score: opt.answerScore,
-                    id: opt.questionId
+                    // id: opt.questionId
+                    id: opt.id
                 }
             })
             let extraConfig = []
@@ -88,7 +89,8 @@ const GetQuestionnaireDetail =async ()=>{
             }
             return {
                 ...item,
-                id:item.assessmentId,
+                // id:item.assessmentId,
+                id:item.id,
                 extraConfig,    // 是否必答 required, 是否横排 isHorizontal
                 options
             }
@@ -121,13 +123,14 @@ onMounted( async ()=>{
     /* --- 头部样式 --- */
     .questionnaire_head {
         text-align: center;
-        margin-bottom: 40px;
+        margin-bottom: 30px;
 
         .head_title {
             font-size: 24px;
+            line-height: 34px;
             font-weight: bold;
             color: #000;
-            margin-bottom: 16px;
+            margin-bottom: 10px;
         }
 
         .head_desc {
@@ -150,7 +153,7 @@ onMounted( async ()=>{
             .question_header {
                 display: flex;
                 align-items: baseline;
-                margin-bottom: 15px;
+                margin-bottom: 16px;
                 font-size: 14px;
                 color: #000;