pbl-teacher-table/src/components/pages/EnglishVoice/component/check.vue

<template>
    <div class="check_box">
        <div class="check_div" v-for="(item, index) in checkData" :key="index">
            <div class="check_div_title">
                <div class="check_div_open" :class="{ active: item.open}" @click="openC(index)"></div>
                <div class="check_div_name">{{ item.name }}</div>
            </div>
            <div class="check_div_children" v-show="item.open">
                <div class="check_div_child" v-for="(item2) in item.children" :key="item2.type" @click="addCheck(item2)">
                    <div class="check_icon">
                        <img :src="item2.icon" alt="">
                    </div>
                    <div class="check_div_child_name">{{ item2.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import u_arrow from '../../../../assets/icon/new/u_arrow.png'
import icon_check_addUser from '../../../../assets/icon/englishVoice/icon_check_addUser.png'
import icon_check_qa from '../../../../assets/icon/englishVoice/icon_check_qa.png'
import icon_check_sentence from '../../../../assets/icon/englishVoice/icon_check_sentence.png'
import icon_check_theme from '../../../../assets/icon/englishVoice/icon_check_theme.png'
import icon_check_user from '../../../../assets/icon/englishVoice/icon_check_user.png'
import icon_check_word from '../../../../assets/icon/englishVoice/icon_check_word.png'
import minxin from '../minxins/minxin'
export default {
    mixins: [minxin],
    props: {
        checkJson: {
            type: Array,
        },
    },
    data() {
        return {
            checkData:[
                {
                    name:'朗读',
                    open: true,
                    children:[
                        {
                            icon:icon_check_word,
                            name:'单词/词组',
                            type:'word'
                        },
                        {
                            icon:icon_check_sentence,
                            name:'句子/短文',
                            type:'sentence'
                        }
                    ]
                },
                {
                    name:'回答',
                    open: true,
                    children:[
                        {
                            icon:icon_check_qa,
                            name:'题目',
                            type:'QA'
                        }
                    ]
                },
                // {
                //     name:'对话',
                //     open: false,
                //     children:[
                //         {
                //             icon:icon_check_addUser,
                //             name:'创建角色',
                //             type:'createRole'
                //         }
                //     ]
                // },
                {
                    name:'主题陈述',
                    open: false,
                    children:[
                        {
                            icon:icon_check_theme,
                            name:'新建主题',
                            type:'theme'
                        }
                    ]
                }
            ],
            checkArray:[]
        }
    },
    methods: {
        openC(index) {
            this.checkData[index].open = !this.checkData[index].open
            this.$forceUpdate()
        },
        addCheck(item){
            if(item.type == 'word'){
                this.checkArray.push({
                    type:'word',
                    title:'',
                    img:'',
                    content:'' //单词/词组  
                })
            }else if(item.type == 'sentence'){
                this.checkArray.push({
                    type:'sentence',
                    title:'',
                    img:'',
                    content:''  //句子/短文
                })
            }else if(item.type == 'QA'){
                this.checkArray.push({
                    type:'QA',
                    title:'',
                    img:'',
                    content:''   //题目
                })
            }else if(item.type == 'theme'){
                this.checkArray.push({
                    type:'theme',
                    title:'', 
                    img:'',
                    content:'' ,  //题目
                    content2:'',   //内容
                    rTime: 1,   //准备时间
                    oTime: 1,   //演讲时间
                })
            }
            this.$forceUpdate()
            this.$emit('setJson', this.checkArray)
        }
    },
    watch: {
        checkJson: {
            handler: function (newVal, oldVal) {
                this.checkArray = this.depthCopy(newVal);
            },
            deep: true,
        }
    },
    mounted(){
        this.checkArray = this.depthCopy(this.checkJson);
    }
}
</script>

<style scoped>
    .check_box{
        width: 100%;
    }

    .check_div{
        width: 100%;
    }
    .check_div + .check_div{
        margin-top: 16px;
    }
    .check_div_title{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    .check_div_open{
        width: 11px;
        height: 11px;
        background-image: url('../../../../assets/icon/new/u_arrow.png');
        background-size: 100% 100%;
        margin-right: 7px;
        cursor: pointer;
        transition: all 0.3s;
        transform: rotate(-90deg);
    }
    .check_div_open.active{
        transform: rotate(0deg);
    }
    .check_div_name{
        font-size: 14px;
        color: #000;
        font-weight: bold;
    }
    .check_div_children{}
    .check_div_child{
        cursor: pointer;
        display: flex;
        width: 100%;
        padding: 8px 8px;
        box-sizing: border-box;
        background: rgb(240, 242, 245);
        border-radius: 4px;
        align-items: center;
    }
    .check_div_child+ .check_div_child{
        margin-top: 8px;
    }
    .check_icon{
        display: flex;
        width: 16px;
        height: 16px;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
    }

    .check_icon > img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .check_div_child_name{}
</style>