teacher-assessment/src/baseComponents/CustomCheckboxForm.vue

<template>
    <div class="custom_check_box">
        <div class="search_tab_head" v-if="props.showOperation && !props.disabled">
            <span class="check_btn">
                <span @click="HandleCheckAllOrNot">
                    <input :checked="checkedList.length == props.selectList.length && props.selectList.length !== 0 " type="checkbox" @change="HandleCheckChange($event)">全选 
                </span>
                <span>
                    已选择
                    <span style="color: #2E64FA;">{{ checkedList.length }}</span>人
                </span>

            </span>

            <FormSearchGroup 
                @searchChange="(params)=>HandleSearchChange(params)"
                
                :searchList="[{
                key:'peopleName',
                type:'input',
                placeholder:'请输入关键词搜索'
            }]"/>
        </div>

        <div class="data_area">
            <slot></slot>
            <div  class="search_content" style="">
                <span 
                    v-for="item in props.selectList" 
                    :key="item.value" 
                    @click="props.disabled ? '' :  HandleCheckOrUncheck(item.value)"
                    :class="{active:checkedList.includes(item.value) || props.disabled  }"
                >{{ item.label }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import FormSearchGroup from './FormSearchGroup.vue';

interface SelectItem {
    label:String,
    value:String
}
const props = defineProps({
    selectList:{
        required:true,
        type:Array<SelectItem>
    },
    disabled:{
        required:false,
        type:Boolean
    },
    defaultCheckedList:{
        required:false,
        type:Array<SelectItem>
    },
    showOperation:{
        type:Boolean,
        default:true
    }
})

const emit  = defineEmits(['boxSearchChange','formItemChange'])


const checkedList = ref([])

const HandleCheckOrUncheck = (item)=>{
    console.log('当前点击的元素',item)
    if(checkedList.value.includes(item)){
        checkedList.value = checkedList.value.filter(checkItm=>checkItm !== item)
    }else{
        checkedList.value.push(item)
    }
    console.log('最终过滤后的值',checkedList.value)
    // 最终的结果值 通知 父组件
    emit('formItemChange',checkedList.value)
}

const HandleCheckAllOrNot = ()=>{
    if(checkedList.value.length == props.selectList.length){
        checkedList.value = []
    }else if(checkedList.value.length < props.selectList.length){
        checkedList.value = props.selectList.map(item=>item.value)
    }
    // 最终的结果值 通知 父组件
    emit('formItemChange',checkedList.value)
}

const  HandleSearchChange = (params)=>{
    console.log('searchParams',params)
    // 要变更搜索列表，传到父组件去变更
    emit('boxSearchChange',params)

}


const HandleCheckChange = (e)=>{
    console.log('选中的值：',e.target.value)
}

watch(()=>props.selectList,(newVal)=>{
    console.log('盒子列表变化了',newVal)
    checkedList.value = []
})

watch(()=>props.defaultCheckedList,(newVal)=>{
    // console.log('获取到默认参数了',newVal)
    if(newVal){
        checkedList.value = newVal
        emit('formItemChange',newVal)
    }
},{immediate:true})
</script>


<style lang="scss" scoped>

.custom_check_box{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:10px;
    line-height: 1.5 !important;

    .search_tab_head{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .check_btn{
            display: flex;
            align-items: center;
            gap:20px;
            >span{
                display: flex;
                align-items: center;
                &:nth-child(1){
                    gap:8px;
                }
            }
        }
    }

    .data_area{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }
    .search_content{
        width: 100%;
        border:dashed #E4E7ED 1px;
        border-radius: 6px;
        padding:10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap:10px;
        min-height:50px;
        max-height: calc(32px * 3 + 2 * 10px + 20px );
        overflow: auto;
        >span{
            border:solid #DCDFE6 1px;
            padding: 6px 18px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            &.active{
                border-color: #2E64FA;
                color:#2E64FA;
            }
            &:hover{
                cursor: pointer;
            }
        }
    }
}



</style>