student-assessment/src/components/singleSelectQuestionBatchFill/SingleSelectQuestionBatchFill.vue

<!-- 单选题 批量填答 -->
<template>
    <div class="batch_question">
        <!-- 题目行 -->
        <QuestionTitleComponent :titleMsg="titleMsg"  :titleIndex="titleIndex"/>
        
        <Table :hidePagination="true" 
            :tableColumns="tableColumns" 
            :tableData="tableData">
            <template v-for="column in tableColumns.slice(1)" 
                v-slot:[column.name]="{row}" :key="column.name">
                <div class="select_cell" :class="{disabled:!allowEdit}" @click="allowEdit ? HandleCheck(row,column.name,!row[column.name]) : ''">
                    <img :src="row[column.name] ? selectIcon : (allowEdit ? singleUnselectIcon :unselectDisabledIcon) " alt="">
                </div>
            </template>
        </Table>
    </div>

</template>


<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import QuestionTitleComponent from '../QuestionTitleComponent.vue';
import Table from '@/baseComponents/Table.vue';
import { tableColumns } from './table.js';

import selectIcon from '@/assets/studentQuestionnaire/select_icon.png'
import unselectDisabledIcon from '@/assets/studentQuestionnaire/unselect_disabled_icon.png'
import singleUnselectIcon from '@/assets/studentQuestionnaire/single_unselect.svg'


interface TitleMsg {
    questionTitleName:string,
    questionType:number
}

interface TableColumn {
    name:string,
    label:string,
    width:string,
    fixed:string,
    align:string,
    minWdth:string,
    custom:boolean,
}
const props = defineProps({
    titleMsg:{
        type:Object as () => TitleMsg,
        required:true
    },
    titleIndex:{
        type:Number,
        required:true,
    },
    allowEdit:{
        type:Boolean,
        required:true
    },
    customTableColumns:{
        type:Array<TableColumn>,
        default:()=>[]
    },
    defaultTableData:{
        type:Array,
        default:()=>[]
    }
})

const emit = defineEmits(['questionAnswerChange'])

const isFinishEdit = defineModel('isFinishEdit')  //是否已经填写完成


const tableData = ref<any[]>([])

// 处选项的选中
const HandleCheck = (row,key,val)=>{
    // 控制一行只选一个
    tableColumns.value.slice(1).map(item=>{
        row[item.name] = false
    })
    row[key] = val
    emit('questionAnswerChange',tableData.value)
}

watch(()=>props.defaultTableData,(newVal)=>{
    console.log('传递的表数据变化了---',newVal)
    tableData.value = newVal
    emit('questionAnswerChange',tableData.value)
},{immediate:true})


watch(()=>tableData.value,(newVal)=>{
    console.log('当前表格数据变化了',)
    let isFinish = true
    newVal.map(row=>{
        // 选项没有被勾选
        if(Object.values(row).filter(val=>val === true).length < 1){
            isFinish = false
        }
    })
    // 当前问卷全部填写完成
    if(isFinish){
        isFinishEdit.value = true
    }else{
    // 当前问卷没有全部填写完成
        isFinishEdit.value = false
    }
},{deep:true,immediate:true})


watch(()=>props.customTableColumns,(newVal)=>{
    tableColumns.value = [
        {
            name:'teacher',
            label:'',
            width:'100',
            fixed:'',
            align:'center',
            minWdth:'',
        },
        ...newVal
    ]
},{immediate:true,deep:true})

</script>


<style lang="scss" scoped>

.batch_question{
     padding: 10px 20px;

     :deep(.el-table){
        tr th.el-table__cell {
            font-weight: 400;
            color: #666666;
        }
     }
     .select_cell{
        display: flex;
        align-items: center;
        justify-content: center;
        &.disabled{
            cursor: not-allowed;
        }
        img{
            width: 24px;
            height: 24px;
        }
     }
}
</style>