pbl-teacher-table/src/components/pages/test/dataCom/cascader.vue

<template>
    <div class="cascader">
        <div class="title" @click="showBox">{{ checkArray.length ? setCheckName(checkArray) : '点击选择教研室范围' }}</div>
        <div class="box" v-if="show" v-loading="loading">
            <div class="inputBox">
                <input v-model="searchTerm" placeholder="输入教师名字搜索" />
                <i class="search" @click="searchTeacher"></i>
            </div>
            <div class="options">
                <div v-if="filteredOptions.length" class="ul">
                    <div @click="selectOption(option)" v-for="(option, index) in filteredOptions" :key="index"
                        class="li" :class="{ active: checkF === option.id }">
                        <span>{{ option.name }}</span>
                    </div>
                </div>
                <div v-if="children.length" class="ul">
                    <div v-for="(option, index) in children" :key="index" class="li" @click="selectOption2(option)"
                        :class="{ active: checkF2 === option.id }">
                        <span>{{ option.name }}</span>
                    </div>
                </div>
                <div v-else-if="checkF" class="ul">
                    <div class="liNone">无子分类</div>
                </div>
                <div v-if="teacher.length" class="ul">
                    <div class="li" @click="checkAll()"
                    :class="{ active: panCheckAll === 1 }"><span>全部</span> </div>
                    <div v-for="(teacher, index) in teacher" :key="index" class="li" @click="selectOption3(teacher)"
                    :class="{ active: checkTeacher(teacher) === 2 }">
                        <span>{{ teacher.name }}</span>
                    </div>
                </div>
                <div v-else-if="checkF2" class="ul">
                    <div class="liNone">暂无教师</div>
                </div>
            </div>
            <div class="button">
                <el-button size="small" @click="reset">重置</el-button>
                <el-button type="primary" size="small" @click="confirm">确认</el-button>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Cascader',
    props: {
        options: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            searchTerm: '',
            filteredOptions: this.options,
            checkF: "",
            checkF2: "",
            children: [],
            teacher: [],
            loading: false,
            show: false,
            checkArray: [],
            checkArray2: []
        };
    },
    computed: {
        setCheckName() {
            return function (arr) {
                let content = ''
                if(arr.length < 3){
                    content = arr.map((item) => item.name).join(" 、 ");
                }else {
                    content = arr.slice(0, 2).map((item) => item.name).join(" 、 ") + "...共"+arr.length+"位老师";
                }
                return content;
            };
        },
        checkTeacher() {
            return function (teacher) {
                let a = 1
                this.checkArray2.forEach(element => {
                   if (element.userid == teacher.userid) {
                       a = 2
                   }
                   
                });
                return a
            };
        },
        panCheckAll(){
            if(this.teacher.length && this.checkArray2.length){
                let userid = this.checkArray2.map((item) => item.userid)
                let userid2 = this.teacher.map((item) => item.userid)
                let userid3 = this.arrayToArray(userid, userid2)
                if(userid2.length == userid3.length){
                    return 1
                }else{
                    return 2
                }
            }else{
                return 2
            }
        }
    },
    methods: {
        showBox(){
            if(this.show){
                this.reset()
            }else{
                this.checkArray2 = JSON.parse(JSON.stringify(this.checkArray));
            }
            this.show = !this.show
        },
        arrayToArray(arrayo, arrayt) {
            let array1 = arrayo;
            let array2 = arrayt;

            let commonElements = [];

            for (let i = 0; i < array1.length; i++) {
                for (let j = 0; j < array2.length; j++) {
                if (array1[i] === array2[j]) {
                    commonElements.push(array1[i]);
                }
                }
            }
            return commonElements;
        },
        reset() {
            this.checkArray2 = []
            this.checkF = ''
            this.checkF2 = ''
            this.teacher = [],
            this.children = []
        },
        confirm() {
            this.checkArray = JSON.parse(JSON.stringify(this.checkArray2));
            let array = this.checkArray.map(item => item.userid)
            this.$emit('setTeacher', array)
            this.show = false
        },
        selectOption(option) {
            console.log(option);
            this.checkF2 = '';
            this.teacher = []
            this.checkF = option.id;
            this.children = option.child;
            this.$forceUpdate();
        },
        selectOption2(option) {
            this.checkF2 = option.id;
            this.teacher = []
            this.loading = true
            let params = {
                cid: option.id,
                name: this.searchTerm,
                userid: this.$route.query.userid
            };
            this.ajax
                .get(this.$store.state.api + "getTypeTeacher", params)
                .then((res) => {
                    this.teacher = res.data[0];
                    this.loading = false

                })
                .catch((err) => {
                    this.loading = false;
                    console.error(err);
                });
        },
        searchTeacher() {
            if(!this.checkF2){
                this.$message.error('请先选择子分类');
            }
            this.teacher = []
            this.loading = true
            let params = {
                cid: this.checkF2,
                name: this.searchTerm,
                userid: this.$route.query.userid
            };
            this.ajax
                .get(this.$store.state.api + "getTypeTeacher", params)
                .then((res) => {
                    this.teacher = res.data[0];
                    this.loading = false

                })
                .catch((err) => {
                    this.loading = false;
                    console.error(err);
                });
        },
        selectOption3(teacher){
            if(this.checkTeacher(teacher) == 1){
                this.checkArray2.push(teacher)
            }else {
                this.checkArray2 = this.checkArray2.filter(item => item.userid != teacher.userid)
            }
        },
        checkAll(){
            let userid = this.checkArray2.map((item) => item.userid)
            let userid2 = this.teacher.map((item) => item.userid)
            if(this.panCheckAll == 1){
                this.checkArray2 = this.checkArray2.filter(item => !userid2.includes(item.userid))
            }else{
                let userAarray = this.arrayToArray(userid, userid2)
                let teacher = this.teacher.filter(item => !userAarray.includes(item.userid))
                teacher.forEach(item => {
                    this.checkArray2.push(item)
                })
            }
        },
    }
};
</script>

<style scoped>
.cascader {
    position: relative;
}

.cascader>.title {
    min-width: 300px;
    background: #fff;
    border-radius: 5px;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #00000066;
}

.box {
    position: absolute;
    z-index: 999;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 3px 2px #0000002b;
}

.inputBox {
    padding: 5px 8px;
    border-bottom: 1px solid #c4c4c4;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    position: relative
}

.inputBox>input {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #c4c4c4;
    outline: none;
}

.inputBox>.search {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background: url("../../../../assets/icon/test/test_search.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.options {
    height: 200px;
    display: flex;
}

.options>.ul {
    height: 100%;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    width: 135px;
    border-right: 1px solid #c4c4c4;
    /* width: 100%; */
    text-align: center;
}

.options>.ul:nth-child(3) {
    border-right: none;
}

.options>.ul>.li.active,
.options>.ul>.li:hover {
    color: #3681FC;
}

.options>.ul>.li,
.options>.ul>.liNone {
    cursor: pointer;
    padding: 10px 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button {
    padding: 5px 8px;
    border-top: 1px solid #c4c4c4;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 100%;
}
</style>