teacher-assessment/src/components/questionnaireCard/QuestionnaireCard.vue

<template>
     <ul class="questionnaire_list">
        <li v-for="quesitonnaire in dynamicQuestionnaireList" 
            :key="quesitonnaire.id" class="card_item">
            <!-- 顶部区域：图标 + 标题 -->
            <div class="card_header">
                <!-- 模拟图片中的文档图标 -->
                <img src="" alt="" class="card-icon" />
                <span class="card_title two_line_ellipsis">{{ quesitonnaire.assessmentTitle }}</span>
                <el-switch
                    v-model="quesitonnaire.cardOnOff"
                    v-if="cardType == 'reviewManage'"
                    :active-value="true"
                    @change="(val)=>HandleOnOffChange(val,quesitonnaire)"
                    style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
                />
            </div>

            <!-- 中间区域：元数据 (分数、创建人、状态、时间) -->
            <div class="card_meta">
                <div class="meta_row">
                    <!-- 问卷总分 -->
                    <span  v-if="cardType == 'questionnareManage'" class="score_text">{{ quesitonnaire.assessmentScore }}分</span>
                    <span class="creator_text">管理员</span>
                    <!-- 评价类型 -->
                    <span v-if="cardType == 'reviewManage'">{{ typeNumToName(quesitonnaire.reviewType).title }}</span>
                    <!-- 状态文本：根据 cardStatus 动态变色 -->
                    <span :class="['status_text', statusNumToName(quesitonnaire.cardStatus)?.themeClass ]">
                        {{ statusNumToName(quesitonnaire.cardStatus)?.title  }}
                    </span>
                </div>
                <div class="time_row">
                    <span>{{ quesitonnaire.time }}</span>
                </div>
            </div>

            <div class="page_solid_line"></div>

            <!-- 底部区域：操作按钮 -->
            <div class="card_footer">
                <slot name="default" :row="quesitonnaire"></slot>
            </div>
        </li>
    </ul>



</template>


<script setup lang="ts">
import { ref ,watch} from 'vue'
interface QuestionnaireItm {
    id:Number,
    assessmentTitle:String,  //标题
    assessmentScore?:Number|String,  //总分
    teacherName:String,  //创建人
    time:String,  //卡片展示的时间
    cardStatus:Number,   //1 已使用   0 未使用
    cardOnOff?:Boolean,
    reviewType?:Number|String,  //卡片类型

}

interface StatusItm {
  statusFlag:Number | String,
  title:String,
  themeClass?:'used' | 'unused' | 'ongoing' | 'end' | String
}
interface TypeItm {
  type:Number | String,
  title:String,
}

 // questionnareManage （问卷管理） | reviewManage (评价管理) |  
type CardType = 'questionnareManage' | 'reviewManage'



const props = defineProps({
    questionnaireList:{   //卡片数据
        type:Array<QuestionnaireItm>,
        required:true,
    },
    cardStatusMsg:{  //卡片状态信息
        required:true,
        type:Array<StatusItm>
    },
    cardTypeMsg:{
        type:Array<TypeItm>,
    },
    showSwitch:{   //展示卡片开关
        type:Boolean,
        default:false
    },
    cardType:{
        type:String as ()=>CardType,  
        required:true
    }
})

const dynamicQuestionnaireList = ref<QuestionnaireItm[]>([])
const emit = defineEmits(['switchOnOff'])
// 处理卡片的开关状态
const HandleOnOffChange = (val,row)=>{
    emit('switchOnOff',{id:row.id,onOffVal:val })
}
const statusNumToName=(status:String|Number|null|undefined)=>{
  let result =  props?.cardStatusMsg?.find(item=>item.statusFlag === status)
  if(result){
    return result
  }else{
    return {
      title:'',
      themeClass:''
    }
  }
}

const typeNumToName=(type:String|Number|null|undefined)=>{
  let result =  props?.cardTypeMsg?.find(item=>item.type === type)
  if(result){
    return result
  }else{
    return {
      title:'',
    }
  }
}


watch(()=>props.questionnaireList,(newVal)=>{
    dynamicQuestionnaireList.value = newVal
},{deep:true,immediate:true})
</script>


<style lang="scss" scoped>

/* 列表容器：横向排列，允许换行 */
.questionnaire_list {
        
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;

    
    /* 单个卡片样式 */
    .card_item {
        width: 325px; /* 固定宽度以匹配图片比例 */
        background: #F8FAFE;
        border: 1px solid #EBEEF5;
        border-radius: 10px;
        padding: 16px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap:12px;
      
        /* 头部：图标和标题 */
        .card_header {
            display: flex;
            align-items: center;
            gap:8px;
            padding:0 16px;

            .card-icon {
                width: 40px;
                height: 40px;
                background-color: #e6f7ff; /* 浅蓝背景 */
                border-radius: 4px;
                padding: 4px;
            }
            .card_title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                line-height: 1;
                // max-width: 240px;
            }
        }


        /* 中部：元数据信息 */
        .card_meta {
            font-size: 12px;
            line-height: 16px;
            color: #666;
            display: flex;
            flex-direction: column;
            gap:12px;
            padding:0 16px;

            .meta_row {
                display: flex;
                align-items: center;
                gap: 12px;

                .score_text {
                    color: #333;
                }
                    
                /* 状态颜色控制 */
                .status_text {
                    display: flex;
                    align-items: center;

                    &::before {
                        content: "";
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        margin-right: 6px;
                    }

                    /* 已使用 (蓝色) */
                    &.used {
                        color: #1890ff;
                        &::before {
                            background-color: #1890ff;
                        }
                    }
                    /* 未使用 (灰色) */
                    &.unused,
                    &.end {
                        color: #999;
                        &::before {
                            background-color: #ccc;
                        }
                    }

                    &.ongoing {
                        color: #2BC644;
                        &::before {
                            background-color: #2BC644;
                        }
                    }

                }
            }
            .time_row {
                color: #999;
            }
        }

        /* 底部：按钮组 */
        .card_footer {
            display: flex;
            justify-content: flex-start;
            gap: 12px;
            padding:0 16px;
            // margin-top: auto; /* 将按钮推到底部 */
            :deep(.el-button){
                height: 32px;
                padding: 6px 12px;
                font-size: 14px;
                margin-left: 0px;
            }
        }
    }
}

</style>