瀏覽代碼

修改问卷管理卡片页面样式和内容展示逻辑

lm 1 月之前
父節點
當前提交
e04ef03ee4

二進制
src/assets/currentProject/online_desktop.png


二進制
src/assets/currentProject/people_icon.png


二進制
src/assets/currentProject/questionnaire_card_icon.png


二進制
src/assets/currentProject/score_icon.png


二進制
src/assets/currentProject/time_icon.png


二進制
src/assets/currentProject/write_line_icon.png


+ 63 - 12
src/components/questionnaireCard/QuestionnaireCard.vue

@@ -4,12 +4,14 @@
         <!-- 顶部区域:图标 + 标题 -->
         <div class="card_header">
             <!-- 模拟图片中的文档图标 -->
-            <img src="" alt="" class="card-icon" />
+             <span class="card_img">
+                <img :src="questionnaireCardIcon" alt=""/>
+             </span>
             <span class="card_title two_line_ellipsis">{{ questionnaire.title }}</span>
 
             <el-switch
                 :model-value="Boolean(questionnaire.openStatus)"
-                v-if="cardType == 'reviewManage'"
+                v-if="showSwitch"
                 @change="(newVal)=>HandleOnOffChange(newVal,questionnaire.openStatus,questionnaire)"
                 style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
             />
@@ -19,17 +21,34 @@
         <div class="card_meta">
             <div class="meta_row">
                 <!-- 问卷总分 -->
-                <span  v-if="cardType == 'questionnareManage'" class="score_text">{{ questionnaire.assessmentScore }}分</span>
-                <span class="creator_text">{{questionnaire.teacherName}}</span>
+                <span  v-if="cardType == 'questionnareManage'" class="score_text icon_text">
+                    <img :src="scoreIcon" alt="">
+                    {{ questionnaire.assessmentScore }}分</span>
+                
+                <!-- 创建者 -->
+                <span class="creator_text icon_text">
+                    <img :src="peopleIcon" alt="">
+                    {{questionnaire.teacherName}}</span>
                 <!-- 评价类型 -->
-                <span v-if="cardType == 'reviewManage'">{{ typeNumToName(questionnaire.evaluationType).title }}</span>
+                <span class="icon_text" v-if="cardType == 'reviewManage'">
+                    <img :src="questionnaire.evaluationType === 0 ? onlineDektopIcon : writeLineIcon" alt="">
+                    {{ typeNumToName(questionnaire.evaluationType).title }}
+                </span>
                 <!-- 状态文本:根据 cardStatus 动态变色 -->
-                <span :class="['status_text', statusNumToName(questionnaire.cardStatus)?.themeClass ]">
+
+                <!-- ???? -->
+                <span :class="['status_text', statusNumToName(questionnaire.cardStatus)?.themeClass ,'']">
+                    <img src="" alt="">
                     {{ statusNumToName(questionnaire.cardStatus)?.title  }}
                 </span>
             </div>
-            <div class="time_row">
-                <span>{{ questionnaire.time }}</span>
+            <div class="time_row icon_text">
+                <!-- 评价管理的 线下答卷 不显示 时间 -->
+                <template v-if="cardType == 'questionnareManage' || 
+                    cardType == 'reviewManage' && questionnaire.evaluationType === 0">
+                    <img :src="timeIcon" alt="">
+                    {{ questionnaire.time }}
+                </template>
             </div>
         </div>
 
@@ -44,6 +63,17 @@
 
 
 <script setup lang="ts">
+import peopleIcon from '@/assets/currentProject/people_icon.png'
+import timeIcon from '@/assets/currentProject/time_icon.png'
+import writeLineIcon from '@/assets/currentProject/write_line_icon.png'
+
+import onlineDektopIcon from '@/assets/currentProject/online_desktop.png'
+import questionnaireCardIcon from '@/assets/currentProject/questionnaire_card_icon.png'
+
+import scoreIcon from '@/assets/currentProject/score_icon.png'
+
+
+
 interface QuestionnaireItm {
     id:Number,
     title:String,  //标题
@@ -86,6 +116,10 @@ const props = defineProps({
     cardType:{
         type:String as ()=>CardType,  
         required:true
+    },
+    showSwitch:{
+        type:Boolean,
+        default:false
     }
 })
 
@@ -142,13 +176,18 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
         gap:8px;
         padding:0 16px;
 
-        .card-icon {
+        .card_img{
+            flex-shrink: 0;
             width: 40px;
             height: 40px;
-            background-color: #e6f7ff; /* 浅蓝背景 */
-            border-radius: 4px;
-            padding: 4px;
+            background-color: rgba(46, 100, 250,0.1);  /* 浅蓝背景 */
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
+
+        
         .card_title {
             font-size: 14px;
             font-weight: 600;
@@ -169,6 +208,17 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
         gap:12px;
         padding:0 16px;
 
+        .icon_text{
+            display: flex;
+            align-items: center;
+            gap:4px;
+            img{
+                width: 16px;
+                height: 16px;
+            }
+
+        }
+
         .meta_row {
             display: flex;
             align-items: center;
@@ -218,6 +268,7 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
             }
         }
         .time_row {
+            height: 18px;
             color: #999;
         }
     }

+ 6 - 2
src/views/reviewManagement/ReviewManagement.vue

@@ -40,6 +40,7 @@
                         :cardTypeMsg="reviewManageTaskTypeMsg"
                         :questionnaire="questionnaire"
                         cardType="reviewManage"
+                        :showSwitch="questionnaire.evaluationType === 0 ? true : false"
                         @switchOnOff="HandleCardSwitchOnOff"
                     >
                         <template #default="{row}">
@@ -79,15 +80,18 @@
                 </template>
 
                 <template #openStatus="{row}">
-                    <span>
+                    <span v-if="row.evaluationType === 0">
                         <el-switch
                             :model-value="Boolean(row.openStatus)"
                             @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val})"
                             style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
                         />
                     </span>
+                    <span v-else>-</span>
                 </template>
 
+
+
                 <template #operation="{row}">
                     <div class="table_row_option">
 
@@ -174,7 +178,7 @@ interface QuestionnaireItm {
     evaluationStatus:Number,   // 评价状态,1-进行中,2-已结束
     cardStatus:Number,
     openStatus:Boolean,    // 0 关闭   1 开启 
-    evaluationType:Number|String,
+    evaluationType:Number|String,  //评价方式,0-线上匿名,1-线下答卷,2-线上导入,3-线上实名
     evaluationGrade:Array<String>,
     status:Boolean,
 

+ 33 - 13
src/views/reviewManagement/stepComponent/evaluationProgressComponent/EvaluationProgressComponent.vue

@@ -2,22 +2,26 @@
     <div class="page_item end_item">
         <div class="page_search">
             <div class="search_content">
-            <div class="content_left">
-                <TabSearch tabType="box" :defaultTabKey="defautTabKey" 
-                    :tabList="tabList" @tabChange="HandleTabChange">
-                </TabSearch>
-            </div>
-            <div class="content_right">
-                 评价状态:
-                <el-switch v-model="isOpenReviewTask"  style="--el-switch-on-color: #2E64FA"/>
-                <el-button  class="button_background" @click="FinishQuestionnaireTemplateConfig">评价完成</el-button>
-            </div>
+                <div class="content_left">
+                    <TabSearch tabType="box" :defaultTabKey="defautTabKey" 
+                        :tabList="tabList" @tabChange="HandleTabChange">
+                    </TabSearch>
+                </div>
+                <div class="content_right">
+                    <div class="open_switch"> 
+                        <span style="font-size: 14px;"> 评价状态:</span>
+                        <el-switch  v-model="isOpenReviewTask"  style="--el-switch-on-color: #2E64FA"/>
+                    </div>
+                    <el-button  class="button_background" @click="FinishQuestionnaireTemplateConfig">评价完成</el-button>
+                </div>
             </div>
         </div>
         <div class="page_jg_20"></div>
-        <ReviewProcessBarData v-if="defautTabKey == 'reviewProcessBarData'"></ReviewProcessBarData>
-        <ReviewProcessTableData v-if="defautTabKey == 'reviewProcessTableData'"></ReviewProcessTableData>
-        <reviewAccountTableData v-if="defautTabKey == 'reviewAccountTableData'"></reviewAccountTableData>
+        <div class="diagram_container">
+            <ReviewProcessBarData v-if="defautTabKey == 'reviewProcessBarData'"></ReviewProcessBarData>
+            <ReviewProcessTableData v-if="defautTabKey == 'reviewProcessTableData'"></ReviewProcessTableData>
+            <reviewAccountTableData v-if="defautTabKey == 'reviewAccountTableData'"></reviewAccountTableData>
+        </div>
     </div>
 </template>
 
@@ -49,5 +53,21 @@ onMounted(async ()=>{
 
 <style lang="scss" scoped>
 
+.end_item{
+    overflow-y: auto;
+    .diagram_container{
+        overflow: auto;
+    }
+}
+
+.content_right{
+    align-items: center;
+    gap:20px  !important;
+    .open_switch{
+        display: flex;
+        align-items: center;
+        gap:4px;
+    }
+}
 
 </style>

+ 4 - 0
src/views/reviewManagement/stepComponent/evaluationProgressComponent/ReviewProcessBarData.vue

@@ -66,6 +66,10 @@ const HandleChartClick = (index,xName)=>{
 
 <style lang="scss" scoped>
 .bar_container{
+    padding:20px;
+    border:solid #EBEEF5 1px;
+    border-radius: 10px;
+
     .bar_title{
         font-weight: 600;
         font-size: 16px;

+ 1 - 1
src/views/reviewManagement/stepComponent/numberMappingComponent/NumberMappingComponent.vue

@@ -254,7 +254,7 @@ const GetTeachingRelationshipData = async ()=>{
 
       administrativeClassTableData.value = tableData.map(item=>{
         let classOpt = {}
-        item.gradeData.map(grade=>{
+        item?.gradeData.map(grade=>{
           classOpt[grade.evaluationGradeId] = grade.classData
         })
         return {