Переглянути джерело

修改创建问卷/问卷预览的文字溢出样式以及 步骤条侧边栏样式

lm 1 місяць тому
батько
коміт
c3cdb2b4ee

+ 37 - 1
src/components/QuestionTypeShow.vue

@@ -7,7 +7,8 @@
         <el-radio v-for="radioItem in questionSubOptions" 
             :key="radioItem.id" 
             :value="radioItem.id"
-        >{{ radioItem.content }}
+        >
+            {{ radioItem.content }}
     </el-radio>
     </el-radio-group>
         
@@ -94,6 +95,13 @@ const questionVal = ref()
 
 
 <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{
@@ -101,6 +109,34 @@ const questionVal = ref()
     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;
+        }
+    }
 }
 
 

+ 18 - 13
src/components/ReviewManagementDetailSideBar.vue

@@ -208,10 +208,12 @@ onMounted(()=>{
     font-size: 16px;
     background-color: white;
     height: 100vh;
-
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
 
     .nav_header {
-      padding: 20px;
+      padding:8px 12px;
       background-color: #2E64FA;
       color:white;
       font-weight: 600;
@@ -232,7 +234,7 @@ onMounted(()=>{
 
 
     .nav_list {
-      height: calc(100% - 88px - 60px);
+      flex: 1 1;
       display: flex;
       flex-direction: column;
       gap:10px;
@@ -242,7 +244,9 @@ onMounted(()=>{
       .nav_item {
         position: relative;
         cursor: pointer;
-         
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
         .step_header_title{
           display: flex;
           align-items: center;
@@ -273,13 +277,15 @@ onMounted(()=>{
         }
 
         .step_bottom{
+          flex:1 1;
           padding:0 8px;
           position: relative;
           .step_guide_line{
             position: absolute;
+            top:-4px;
             left:8px;
             width: 26px;
-            height: calc(100% + 10px);
+            height: calc(100% + 18px);
 
             display: flex;
             flex-direction: column;
@@ -292,36 +298,35 @@ onMounted(()=>{
               min-height: 30px;
             }
           }
-
           .step_content {
             padding:5px 10px 5px 30px;
             font-size: 12px;
             color: #999999;
           }
-
-
         }
 
         &.active_item {
-
           border-radius: 8px 0 0 8px;
           background: rgba(46,100,250,0.1);
           box-shadow: inset 1px -1px 0px 0px #2E64FA;
 
           .step_header_title{
-
             background-color: #2E64FA;
             color: white;
+          }
 
-           
-
-
+          .step_guide_line{
+            top:0px;
+            height: calc(100% + 14px);
           }
           .step_num{
             background-color: white;
             color: #2E64FA;
           }
         }
+        &:last-child{
+          flex:1 1;
+        }
       }
     }
   }

+ 1 - 1
src/components/questionnaireCard/QuestionnaireCard.vue

@@ -9,7 +9,7 @@
                     <span class="card_img">
                         <img :src="questionnaireCardIcon" alt=""/>
                     </span>
-                    <span class="card_title two_line_ellipsis">{{ questionnaire.title }}</span>
+                    <span class="card_title two_line_ellipsis" :title="questionnaire.title">{{ questionnaire.title }}</span>
 
                     <el-switch
                         :model-value="Boolean(questionnaire.openStatus)"

+ 2 - 4
src/views/reviewManagement/stepComponent/numberMappingComponent/NumberMappingComponent.vue

@@ -163,10 +163,8 @@ const GetClassTypeList = async(subjectData)=>{
         }),  
       }
     }) || []
-
-    // 待确认——————
-    searchParmams.value.type = JSON.parse(gradeList.value[0].key).type
-    searchParmams.value.subjectId = JSON.parse(gradeList.value[0].key).subjectId     
+    searchParmams.value.type = searchParmams.value.type || JSON.parse(gradeList.value[0].key).type
+    searchParmams.value.subjectId = searchParmams.value.subjectId || JSON.parse(gradeList.value[0].key).subjectId     
   }
 }
 

+ 25 - 16
src/views/surveyManagement/CreateQuestionnaire.vue

@@ -62,19 +62,18 @@
                 <!-- 已添加题目展示区 -->
                 <ul class="question_list_area">
                     <li v-for="(question,index) in addedQuestionList" :key="question.id">
-                        <div class="question_title" 
-                            :class="{required:question.extraConfig.includes('required')}">
-                            <span>{{index + 1}}.{{ question.questionTitleName }}</span>
+                        <div class="question_title">
+                            <span class="question_name" 
+                                :class="{required:question.extraConfig.includes('required')}"
+                            >{{index + 1}}.{{ question.questionTitleName }}</span>
                             <span class="question_type">[{{ qustionTypeToName(question.questionType) }}]</span>
-
                             
                             <div class="operation table_row_option">
                                 <span class="el_button_editor" @click="EditQuestion(question)">编辑</span>
                                 <span class="el_button_delete" @click="DeleteQuestion(question)">删除</span>
                             </div>
-
-
                         </div>
+                        
                         <QuestionTypeShow 
                             :isHorizontal="question.extraConfig.includes('isHorizontal')"
                             :questionType="Number(question.questionType)"
@@ -118,10 +117,11 @@
                             @dragstart="(e)=>HandleDragStart(e)"
                             @dragend="(e)=>HandleDragEnd(e,question,index)"
                         >
-                        {{ index + 1 }}.{{ question.questionTitleName }}
+                        <span :title="question.questionTitleName" class="one_line_ellipsis">
+                            {{ index + 1 }}.{{ question.questionTitleName }}
+                        </span>
                     </li>
                 </ul>
-
             </div>
         </div>
 
@@ -699,6 +699,7 @@ onMounted(async ()=>{
                 .question_title{
                     display: flex;
                     justify-content: flex-start;
+                    align-items: flex-start;
                     word-break: keep-all;
                     margin-bottom: 20px;
                     .question_type{
@@ -706,18 +707,26 @@ onMounted(async ()=>{
                         margin-left: 8px;
                     }
 
-                    &.required{
-                        position: relative;
-                        padding-left: 5px;
-                        ::before{
-                            content:'*';
-                            position: absolute;
-                            left:0;
-                            color:#F56C6C;
+                    .question_name{
+                        word-break: break-all;
+                        &.required{
+                            position: relative;
+                            padding-right: 6px;
+                            &::after{
+                                position: absolute;
+                                right: 0;
+                                top:0;
+                                content:'*';
+                                width: 5px;
+                                color: #f56c6c;
+                                margin-left: 2px;
+                                font-size: 18px;
+                            }
                         }
                     }
 
                     .operation{
+                        margin-left: 20px;
                         display: none;
                         flex: 1 1;
                         justify-content: flex-end;

+ 2 - 0
src/views/surveyManagement/PreviewQuestionnaire.vue

@@ -164,6 +164,7 @@ onMounted( async ()=>{
                         &::after{
                             position: absolute;
                             right: 0;
+                            top:0;
                             content:'*';
                             width: 5px;
                             color: #f56c6c;
@@ -173,6 +174,7 @@ onMounted( async ()=>{
                     }
                 }
                 .q_type_tag {
+                    word-break: keep-all;
                     color: #2E64FA;
                     font-size: 14px;
                     margin-left: 8px;