二级弹框案例

客官°小女子只卖身不卖艺 2023-03-03 06:21 1阅读 0赞

二级弹框案例，如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

<template>
        <div class="zw-dialog">
            <div class="zw-top">
                <p class="zw-word">请选择职位</p>
                <div class="zw-in">
                    
                    <el-input  class="in-put" v-model="jobKeyWord"
                               @click.native="clickSearchInput"
                               clearable
                               @blur="blurSearch"
                               placeholder="请输入职位关键词"></el-input>
                    <div class="in-block" v-show="searchFlag">
                        <ul class="in-ul">
                            
                            <li class="in-li" v-for="(item,i) in searchList"
                                :key="i" @click="clickTwoCatFun(item)"
                                @mousedown= downDrag($event)
                                v-html="item.nameVal"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="zw-middle">
              <span class="zw-tag" v-for="(item,i) in clickTwoNameArr" :key="i">
                {
       {item.nameZh}}
                <i class="el-icon-close" @click="delChoolseTwoItem(item)"></i>
              </span>
                <span class="zw-more">最多选择1个职位类别</span>
                <span class="zw-sure" @click="jobSure">确认</span>
            </div>
            <div class="zw-main">
                <div class="zw-left">
                    <ul class="zw-ul">
                        
                        
                        <li class="zw-li"
                            :class="[clickOneJobNameArr.includes(item.id) ? 'li-active' :'']"
                            v-for="(item,i) in jobClassList"
                            @click="clickJobItem(item)"
                            :key="i" >{
       {item.nameZh}}
                            <span class="li-num" v-if=" countObj[item.id] ">{
       {countObj[item.id]}}</span>
                        </li>
                    </ul>
                </div>
                <div class="zw-right">
                    <div class="right-main">
                        
                        <span class="job-tag"
                              :class="[clickTwoIdArr.includes(twoObj.id) ? 'job-active' :'']"
                              v-for="(twoObj,i) in clickCateObj.list"
                              :key="i" @click="clickTwoCatFun(twoObj)">{
       {twoObj.nameZh}}
                  </span>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "JobClassComp",
            data(){
                return{
                    jobKeyWord:'',//职位关键词
                    searchFlag:false,//是否展示搜索框
                    searchList:[],//搜索数据
                    clickOneJobNameArr:[],//存储点击时一级分类
                    clickTwoNameArr:[],//选中的二级分类
                    clickTwoIdArr:[],//选中的二级分类
                    clickCateObj:{},// 点击选中的一级分类
                    countObj:{},//二级职位被选中时 一级显示数量
                    searchDataList:[], //搜索数据
                    allTwoClassList:[],//所有二级分类
                }
            },
            props:{
                form: Object,
                isEndDateNow: Boolean,
                jobClassList:{
                    type:Array,
                    default() {
                        return [];
                    }
                }
            },
            computed: {
                listLength(){
                    return this.jobClassList.length
                }
            },
            watch:{
                jobKeyWord(val){
                    if(val.length >0){
                        this.searchList = this.searchDataList.filter(item =>{
                            val = val.toUpperCase();
                            let reg = new RegExp("(" + val + ")", "g");
                            let nameVal = item.nameZh.replace(reg, "<span style='color:#437FFF;'>$1</span>");
                            item.nameVal = nameVal;
                            //     return newstr;
                            return item.nameZh.includes(val)
                        })
                        this.searchFlag = true
                    }else {
                        this.searchList = [];
                        this.searchFlag = false
                    }
    
                },
                listLength(val,oldValue){
                    /*  console.log("val==",val)
                      console.log("oldValue==",oldValue)*/
                    if(oldValue === 0 && val >0){
                        //console.log("--22--",this.jobClassList)
                        this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
                        Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
                        this.dealSearchData(); // 处理搜索职位数据
                      //  this.doAllTwoClassData() lzs
                    }
                }
            },
            created() {
                if(this.jobClassList && this.jobClassList.length >0){
                    this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
                    Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
                    this.dealSearchData(); // 处理搜索职位数据
                }
            },
            methods:{
                clickSearchInput(){
                    this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
                },
                //input失去焦点
                blurSearch(){
                    this.searchFlag = false;
                },
                downDrag(el){
                    el.preventDefault();//阻止input失去焦点事件时的影响
                },
                //职位确认
                jobSure(){
                   // this.dialogVisible = false; //add lzs
                    if(this.clickTwoNameArr.length >0){
                        this.form.jobIntensionName = '';
                        this.clickTwoNameArr.forEach(item =>{
                            this.form.jobIntensionName = this.form.jobIntensionName + '，' + item.nameZh ;
                        })
                        this.form.jobIntensionName.length > 0 ? this.form.jobIntensionName = this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length) :'';
                    }else {
                        this.form.jobIntensionName = '';
                    }
                    this.$emit('sureJobMethod',this.clickTwoNameArr)
                },
                clickJobItem(item){//点击职位类别
                    //console.log("item----",item)
                    this.clickCateObj =item;
                    //处理选中 颜色变化
                    if(this.clickOneJobNameArr.length >0){
                        this.clickOneJobNameArr.splice(0, 1);
                        this.clickOneJobNameArr.push(item.id)
                    }else{
                        this.clickOneJobNameArr.push(item.id)
                    }
                },
                //点击二级职位名称
                clickTwoCatFun(obj){
                    //type: search two; =search是点击的搜索框出现，否则就是点击的二级
                    // type === 'search' ? this.jobKeyWord = obj.nameZh : '';
                    if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length ===1 ){
                        this.$message({
                            message: '最多选择1个职位类别哦',
                            type: 'warning'
                        });
                        return
                    }
                    if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length<3){
                        this.clickTwoNameArr.push(obj)
                        this.clickTwoIdArr.push(obj.id)
                        this.form.jobIntensionNameSel.push(obj.id)
                        if(!this.countObj[obj.parentId]){
                            this.countObj[obj.parentId] = 1
                        }else {
                            this.countObj[obj.parentId]++;
                        }
                    }
                },
                //要删除的二级分类,改变选中颜色，改变一级分类统计数量
                delChoolseTwoItem(delObj){
                    // var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
                    let index = this.clickTwoNameArr.findIndex(item =>{
                        return item.id === delObj.id
                    })
                    let formIndex = this.form.jobIntensionNameSel.findIndex(idVal =>{
                        return idVal === delObj.id
                    })
                    this.form.jobIntensionNameSel.splice(formIndex, 1)//删除
                    this.clickTwoNameArr.splice(index, 1)
                    this.clickTwoIdArr.splice(index, 1)
                    if(!this.countObj[delObj.parentId]){
                        this.countObj[delObj.parentId] = 0
                    }else {
                        this.countObj[delObj.parentId]--;
                    }
                },
                //处理搜索的数据
                dealSearchData(){
                    this.jobClassList.forEach(item =>{
                        this.searchDataList = this.searchDataList.concat(item.list)
                    })
                },
    
            }
        }
    </script>
    
    <style scoped lang="less">
        .zw-dialog{
            /*  border: 1px solid red;*/
            width:880px;
            height:550px;
            background:rgba(255,255,255,1);
    
            .zw-top{
                height: 52px;
                width: 100%;
                display: flex;
                /*border: 1px solid green;*/
                border-bottom: 1px solid #EFEFEF ;
                .zw-word{
                    width: 200px;
                    /* text-align: center;*/
                    margin-left: 30px;
                    line-height: 52px;
                    font-size: 16px;
                    color: #333333;
                }
                .zw-in{
                    /* border: 1px solid blue;*/
                    width: calc(100% - 200px);
                    line-height: 52px;
                    .zw-put{
                        border-radius:15px;
                        border:1px solid rgba(224,224,224,1);
                        width: 200px;
                        height: 30px;
                        margin-left: 32px;
                        font-size: 12px;
                        padding-left: 20px;
                    }
                    .in-put{
                        width: 200px;
                        height: 30px;
                        /deep/ .el-input__inner{
                            border-radius:15px;
                            color: #999999;
                            font-size: 12px;
                        }
                        /deep/ input::-webkit-input-placeholder {
                            /* WebKit browsers */
                            font-size: 12px;
                            color: #999999;
                        }
                        /deep/ input:-moz-placeholder{
                            /* Mozilla Firefox 4 to 18 */
                            font-size: 12px;
                            color: #999999;
                        }
                        /deep/ input::-moz-placeholder{
                            /* Mozilla Firefox 19+ */
                            font-size: 12px;
                            color: #999999;
                        }
                        /deep/ input:-ms-input-placeholder{
                            font-size: 12px;
                            color: #999999;
                        }
                    }
                    .in-block{
                        width: 200px;
                        height: 290px;
                        z-index: 11;
                        box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
                        position: relative;
                        background: #ffffff;
                        overflow: scroll;
    
                        .in-ul{
                            padding:5px 0px;
                            .in-li{
                                color: #000000;
                                padding: 10px 20px;
                                line-height: 20px;
                                font-size: 14px;
                                &:hover{
                                    cursor: pointer;
                                    background: #F7F9FD;
                                }
    
                            }
                        }
                    }
    
    
                }
            }
            .zw-middle{
                /*width: 100%;*/
                height: 50px;
                /*  border: 1px solid green;*/
                display: flex;
                align-items: center;
                padding-left: 30px;
                .zw-tag{
                    display: inline-block;
                    border-radius:15px;
                    border:1px solid rgba(67,127,255,1);
                    padding: 5px 12px 5px 10px;
                    margin-right: 16px;
                    font-size:13px;
                    color: #437FFF;
    
                    i{
                        cursor: pointer;
                        padding-left: 4px;
                    }
                }
                .zw-more{
                    color: #CCCCCC;
                    font-size:13px;
                }
                .zw-sure{
                    display: inline-block;
                    width: 72px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background:rgba(67,127,255,1);
                    border-radius:15px;
                    font-size:13px;
                    color: #ffffff;
                    position: absolute;
                    right: 30px;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
            .zw-main{
                display: flex;
                .zw-left{
                    width: 200px;
                    height: 443px;
                    overflow: scroll;
                    /*border: 1px solid red;*/
                    .zw-ul{
                        background:rgba(249,250,251,1);
                        .zw-li{
                            height: 50px;
                            /* line-height: 50px;*/
                            text-align: center;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                            border-left: 4px solid transparent;
                            &:hover{
                                cursor: pointer;
                            }
                            /*border: 1px solid pink;*/
                            .li-num{
                                display: inline-block;
                                background: #437FFF;
                                width: 16px;
                                height: 16px;
                                line-height: 16px;
                                border-radius: 50%;
                                font-size:13px;
                                color:#ffffff;
                                margin-left: 8px;
                            }
                        }
                        .li-active{
                            border-left: 4px solid #437FFF;
                            background:rgba(255,255,255,1);
                        }
                    }
                }
                .zw-right{
                    /*border: 1px solid black;*/
    
                    width: calc(100% - 200px);
                    height: 443px;
                    overflow: scroll;
                    .right-main{
    
                        .job-tag{
                            display: inline-block;
                            margin: 16px 20px;
                            width: 182px;
                            font-size:14px;
                            color: #444444;
                            &:hover{
                                cursor: pointer;
                            }
                        }
                        .job-active{
                            color: #437FFF;
                        }
                    }
                }
    
            }
        }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230208/4cd3e234c3514b039b1863a03b91ba4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/6618b57bd1c748ce9385520c7ce1177a.png