修改问卷预览逻辑

src/components/questionConfig/QuestionConfig.vue

@@ -62,44 +62,52 @@
                             clearable />
                         非常满意
                     </div>
+                    <div class="null_score" v-else>
+                        未查询到结果,请至题目分值处设置分值
+                    </div>
                 </div>
             </template>
 
 
             <template #options="{ formData }">
                 <div class="options_list_container">
-                    <div v-for="(option) in formData.options" :key="option.id" class="option_item">
+                    <div v-for="(option,index) in formData.options" :key="option.id" class="option_item">
+                        
                         <div class="input_option">
                             <el-input 
                                 v-model="option.content" 
                                 placeholder="请输入选项内容" 
                             />
+                            <!-- 统计题 -->
                             <template v-if="displayMode === 'statistic'">
-                                <el-icon 
+                                <el-icon v-if="Number(questionFormData.questionType) === 0 && Number(index) > 1 ||
+                                               Number(questionFormData.questionType) === 1 && Number(index) > 2  "
                                     class="delete_icon" 
                                     @click="removeOption(option.id)"
                                 >
                                     <Close/>
                                 </el-icon>
-                                <!-- <div class="blank_icon"  v-else></div> -->
+                                <div class="blank_icon"  v-else></div>
                             </template>
                             
                         </div>
+                        <!-- 得分题 -->
                         <div v-if="displayMode === 'scored'" class="score_option">
                             <span class="row_label">选项分值：</span>
                             <el-input 
+                                type="number"
                                 v-model="option.score" 
                                 placeholder="请输入分值" 
                             />
-                            <el-icon 
+                            <el-icon  v-if="Number(questionFormData.questionType) === 3 && Number(index) > 1"
                                 class="delete_icon" 
                                 @click="removeOption(option.id)"
                             >
                                 <Close/>
                             </el-icon>
-                            <!-- <div class="blank_icon"  v-else></div> -->
+                            <div class="blank_icon"  v-else></div>
                         </div>
-                        
+
                     </div>
                 </div>
                 
@@ -167,7 +175,7 @@ const questionFormData = ref<FormData>({
     questionTitleName: '',  
     questionScore: '',   
     questionType: '', 
-    extraConfig: ['required'],  //默认勾选必答题
+    extraConfig: [],  //默认勾选必答题
     options: [],
     evaluationType:0  //默认展示 数字式
  })
@@ -296,7 +304,8 @@ watch(()=>props.defaultFormData,(newVal)=>{
     flex-direction: column;
 
     .num_score,
-    .star_score
+    .star_score,
+    .null_score
     {
         display: flex;
         align-items: center;
@@ -328,6 +337,8 @@ watch(()=>props.defaultFormData,(newVal)=>{
             height: auto;
         }
     } 
+
+
 }
 
 // 选项列表样式
@@ -349,6 +360,13 @@ watch(()=>props.defaultFormData,(newVal)=>{
             display: flex;
             align-items: center;
             padding-left: 92px;
+            .blank_icon{
+                margin-left: 20px;
+                width: 20px !important;
+                height: 20px;
+            }
+
+
         }
         .score_option{
             width: 35%;
@@ -360,6 +378,12 @@ watch(()=>props.defaultFormData,(newVal)=>{
                 font-size: 14px;
                 flex-shrink: 0;
             }
+
+            .blank_icon{
+                margin-left: calc(20px + 6px);
+                width: 20px !important;
+                height: 20px;
+            }
         }
 
         .input_option,
@@ -375,11 +399,7 @@ watch(()=>props.defaultFormData,(newVal)=>{
                     color: #f56c6c;
                 }
             }
-            .blank_icon{
-                margin-left: 20px;
-                width: 20px !important;
-                height: 20px;
-            }
+            
         }
     }
 }

src/components/questionConfig/form.ts

@@ -23,7 +23,7 @@ export const questionFormItemList = ref([
     {
         key: 'questionScore',
         label: '题目分值',
-        type: 'input',
+        type: 'number',
         placeholder: '请输入分值',
         rules: [
             {

src/views/surveyManagement/CreateQuestionnaire.vue

@@ -232,6 +232,10 @@ const currentEditQuestionId = ref()
 // 当前问卷信息是否已经保存
 const isSaveQuestionnaire = ref(true)
 
+
+// 单选/多选选项 临时唯一id索引从 4开始 _默认添加了四个选项
+const addedIndex = ref(4)
+
 // 选中题型时的处理  
 const CheckedQuestionType = (type:any) => {
     console.log('触发操作了',type)
@@ -259,12 +263,48 @@ const SyncQuestionnaireFormData = (params)=>{
 
 // 重置试题表单数据
 const resetQuestionForm = (questionType)=>{
+
+    // 重置逻辑要修改 _ 不同类型表单的重置逻辑不一样
+    let options:any[] = []
+    switch(Number(questionType)){
+        case 0:
+        case 1: 
+        case 3: 
+        {
+            options = [
+                {
+                    content: '',
+                    score: '',
+                    id:1 ,
+                },
+                {
+                    content: '',
+                    score: '',
+                    id:2 ,
+                },
+                {
+                    content: '',
+                    score: '',
+                    id:3 ,
+                },
+                {
+                    content: '',
+                    score: '',
+                    id:4 ,
+                },
+            ]
+            break
+        }
+    }
+
+  
+
     defaultQuestionData.value = {
         questionTitleName: '',  
         questionScore: '',   
         questionType: questionType, 
-        extraConfig: ['required'],  //默认勾选必答题
-        options: [],
+        extraConfig: Number(questionType) === 2 ? [] :  ['required'],  //默认勾选必答题
+        options: [...options],
         evaluationType:0  //默认展示 数字式
     }
 }
@@ -274,7 +314,10 @@ const HandleQuestionChange = (params)=>{
     switch(key){
         case 'question_type':{
             console.log('表单重置了--')
+            
             resetQuestionForm(val)
+
+
         }
     }
 }
@@ -282,10 +325,18 @@ const HandleQuestionChange = (params)=>{
 // 处理试题排序
 const { HandleDragStart, HandleDragEnd } = useHandleMoveUpAndDown(addedQuestionList,42)
 
-
-const addedIndex = ref(1)
 // 添加/修改 试题信息
 const AddQuesiton = (params)=>{
+    // 评分题目 _ 要添加选项的分值判断 _待确认
+    // if(Number(params.questionType) === 3){
+    //     params.options.map(itm=>{
+
+    //     })
+
+    // }
+
+
+
     isSaveQuestionnaire.value = false
     const {formRef,formData} = params
     console.log('获取到试题信息了',formData)
@@ -399,11 +450,13 @@ const SaveQuestionnaire = async ()=>{
 
 // 预览试卷
 const PreviewQuestionnaire =()=>{
-    if(route.query.id){
-        router.push(`/main/previewQuestionnaire?id=${route.query.id}`)
-    }else{
-        ElMessage.warning('请先保存后再预览')
+    // 存储本地存储
+    let finalMsg = {
+        ...(questionnaireInfo.value),
+        questionData:addedQuestionList.value,
     }
+    sessionStorage.setItem('questionnaireTmpMsg',JSON.stringify(finalMsg))
+    router.push(`/main/previewQuestionnaire`)
 }
 
 // 编辑状态 获取问卷信息
@@ -493,10 +546,36 @@ const GoBack = ()=>{
     }
 }
 onMounted(async ()=>{
-    if(route.query.id){
-        await GetQuestionnaireDetail()
+    
+
+    let localQuestionnaireMsg = sessionStorage.getItem('questionnaireTmpMsg')
+    // 先取本地数据__如果有,证明是从预览页返回来的
+    if(localQuestionnaireMsg){
+        let localMsg = JSON.parse(localQuestionnaireMsg)
+
+         const  {assessmentTitle,assessmentIllustrate,questionData,
+                createdAt,teacherName,useStatus
+
+         } = localMsg
+
+        defaultQuestionnaireInfo.value = {
+            assessmentTitle,
+            assessmentIllustrate,
+            createdAt,
+            teacherName,
+            useStatus
+        }
+        addedQuestionList.value = questionData
+        // 获取到后清除数据_防止后续从列表页预览访问过程中的数据污染
+        sessionStorage.removeItem('questionnaireTmpMsg')
+    
     }else{
-        // 创建问卷
+        // 正常编辑问卷
+        if(route.query.id){
+            await GetQuestionnaireDetail()
+        }else{
+            // 创建问卷 状态
+        }
     }
 })
 </script>

src/views/surveyManagement/PreviewQuestionnaire.vue

@@ -65,6 +65,7 @@ const isRequired = (item) => {
   return item.extraConfig && item.extraConfig.includes('required');
 };
 
+// 获取问卷详细信息
 const GetQuestionnaireDetail =async ()=>{
     let res = await getQuestionnaireDetailApi(route.query.id)
     if(res?.code == 200){
@@ -97,7 +98,14 @@ const GetQuestionnaireDetail =async ()=>{
 }
 
 onMounted( async ()=>{
-    await GetQuestionnaireDetail()
+    // 从问卷列表访问的预览
+    if(route.query.id){
+        await GetQuestionnaireDetail()
+    // 从问卷编辑页访问的预览
+    }else{
+        // 拿取本地存储
+        questionaireMsg.value = JSON.parse(sessionStorage.getItem('questionnaireTmpMsg') || '{}')
+    }
 })
 
 </script>
@@ -168,6 +176,10 @@ onMounted( async ()=>{
                     font-weight: normal;
                 }
             }
+            &:hover{
+                box-shadow: 0px 10px 20px 0px rgba(46,100,250,0.1), 
+                            0px -10px 20px 0px rgba(46,100,250,0.1);
+            }
         }
     }
 }