IDCOL/webConfig/src/components/sideBar.vue

<template>
    <div class="sideBar_box_low">
        <div class="sideBar_bg" v-if="sideBarType=='on'" @click="click3()"></div>
        <div class="sideBar">
            <div style="line-height:60px;cursor: pointer;" v-if="sideBarType=='on'">
                <el-input class="screen screenEN" v-model="screen" @change="screenChange" :placeholder="version
                ==0?'输入关键字按下回车键搜索':'Input key press return key search'" clearable>
                    <i slot="prefix" class="scree-icon el-icon-search" @click="userCompanyList"></i>
                    <el-select v-model="searchType" @change="searchTypeChange" slot="append" placeholder="请选择" class="search_type">
                        <el-option :label="version == 0?'项目':'project'" value="1"></el-option>
                        <el-option :label="version == 0?'公司':'company'" value="0"></el-option>
                    </el-select>
                </el-input>
            </div>
            <div class="sideBar_box scroll_show">
                <div class="sideBar_list" v-if="projectAll">
                    <p @click="click4()" style="padding-bottom: 0px;" :class="{'sideBar_project_select':projectId == 0}">{{version == 0?'全部项目':'All projects'}}</p>
                </div>
                <div class="sideBar_list" v-for="(obj) in sideBarList" :key="obj.id">
                    <p @click="click1(obj)">
                        <i class="dian"></i>
                        <span class="company_name" :class="{'company_name_EN':version ==1}" :title="obj.name">{{obj.name}}</span>
                        <!-- <i class="el-icon-caret-top" :style="{'transform':(obj.type == '收起' || obj.type == 'Collapse')?'rotate(180deg)':''}"></i> -->
                        <span>{{obj.type}}</span>
                    </p>
                    <div v-if="obj.type == '收起' || obj.type == 'Collapse'">
                        <div :class="{'sideBar_project_select':projectId==item.id&&projectId}" v-for="(item) in obj.project_list"  :key="item.id" @click="click2(item)">
                            <span :title="item.projectname" :id="'sideBar_projectId_'+item.id">- {{item.projectname}}</span>
                        </div>
                    </div>
                </div>
                <p v-if="sideBarList.length == 0 && version == 0" style="text-align: center;font-size: 16px;font-family: PingFangSC-Medium;color: #666666;margin-top: 20px;">无相关项目，请重新输入关键字</p>
                <p v-if="sideBarList.length == 0 && version == 1" style="text-align: center;font-size: 16px;font-family: PingFangSC-Medium;color: #666666;margin-top: 20px;">No related items, please re-enter keywords</p>
            </div>
            <div class="sideBar_button" @click="click3()" :class="{'is_disabled':reportType && reportType != 'table'&&sideBarType=='off'}">
                <img src="../img/projectManagement/sideBarButton.png" height="56" width="34">
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import { mapGetters } from 'vuex'
    export default{
        data(){
            return{
                scroll_time:null,
                screen:'',
                searchType:'1',
            }
        },
        props:['sideBarList','projectId','sideBarListIsOpen','projectSelectFun','sideBarIsOn','sideBarType','reportType','sideBarCompanyList','projectAll'],
        computed:{
            ...mapGetters({
                version:'version',
          })
        },
        mounted(){

        },
        methods:{
             /*侧边栏打开关闭*/
            click1(data){
                this.sideBarListIsOpen(data)
            },
            /*侧边栏里展开收起*/
            click2(data){
                this.projectSelectFun(data)
            },
            click3(){
                this.sideBarIsOn()
                fun(this.version)
                function fun(version){
                    if($(".screenEN").length != 0){
                        if(version == 0){
                            $(".screenEN input").attr('placeholder','输入关键字按下回车键搜索');
                        }else{
                            $(".screenEN input").attr('placeholder','Enter keywords Search by Enter');
                        }
                    }else{
                        setTimeout(function(){
                            fun(version)
                        },100)
                    }
                }
            },
            click4(){
                this.projectAll();
            },
            searchTypeChange(){
                // this.screen = '';
                this.sideBarCompanyList(this.screen,this.searchType);
            },
            screenChange(val){
                this.sideBarCompanyList(val,this.searchType);
            },
            userCompanyList(){
                this.sideBarCompanyList(this.screen,this.searchType);
            },
        },
         watch:{
            sideBarType(curVal){
                let this_ = this;
                if(curVal == 'on' && this.projectId != 0){
                    $('.sideBar .sideBar_box').animate({scrollTop: $('#sideBar_projectId_'+this_.projectId).offset().top - 250 + $('.sideBar .sideBar_box').scrollTop()})
                }
            }
        }
    }
</script>
<style type="text/css" lang="less">
    .sideBar_box_low{
        .sideBar_bg{
            background: #000;
            opacity: 0.1;
            position: absolute;
            width: 100%;height: 100%;
            z-index: 100;
        }
        .sideBar {
            position: absolute;
            width:0px;
            // height:988px;
            height: 100%;
            background:#FFFFFF;
            z-index: 100;
            .screen{
                .el-input__inner{
                    border-left: 0px;
                    border-right: 0px;
                    height: 60px;line-height:60px;border-radius: 0px;
                }
            }
            .el-input--prefix .el-input__inner{
                padding-left: 40px;
            }
            .scree-icon{
                position: relative;
                top: 13px;
                left: -6px;
                display: inline-block;
                width: 40px;height: 40px;
                font-size: 30px;
                // background:url(../img/userManagement/screen.png) no-repeat center;
            }
            .el-input-group__append{
                padding:0 19px;
            }
            .search_type{
                width: 70px;
                .el-input__inner{
                    padding:0px 10px 0 10px;
                    height: 58px;line-height:58px;
                }
            }
            .sideBar_box{
                width: 100%;
                height: calc(100% - 85px);
                padding-bottom: 20px;
                overflow: auto;
                .sideBar_list{
                    width: 290px;
                    p{
                        position: relative;
                        padding: 20px 0 20px 32px;
                        height:25px; 
                        font-size:18px;
                        font-family:PingFangSC-Medium;
                        color:#444444;
                        line-height:25px;
                        cursor: pointer;
                        
                        .dian{
                            position: absolute;
                            top: 27px;
                            left: 12px;
                            display: inline-block;
                            width:10px;
                            height:10px; 
                            background:#FC8440;
                            border-radius: 4px ;
                        }
                        .company_name{
                            display: inline-block;
                            width: calc(100% - 58px);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .company_name_EN{
                            width: calc(100% - 90px);
                        }
                        >:last-child{
                            display: inline-block;
                            float: right;
                            margin-right: 24px;
                            height: 22px;
                            font-size: 16px;
                            font-family: PingFangSC-Regular;
                            color: #666;
                            line-height: 22px;
                            text-decoration: underline;
                        }
                    }
                    .sideBar_project_select{
                        color:#FC8440; 
                    }
                    >div{
                        margin: 0 22px 0 30px;
                        padding: 0 25px;
                        background:rgba(241,241,241,1);
                        border-radius: 4px ;
                        div{
                            padding:18px 0 18px 30px;
                            height:22px; 
                            font-size:16px;
                            font-family:PingFangSC-Medium;
                            color:rgba(68,68,68,1);
                            line-height:22px;
                            cursor: pointer;
                            border-bottom: 1px solid #DBDBDB;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        div:last-child{
                            border-bottom: 0px;
                        }
                        .sideBar_project_select{
                            color:#FC8440; 
                        }
                    }
                }
            }
            .sideBar_button{
                position: absolute;
                height: 56px;
                top: 30px;
                right: -34px;
                cursor: pointer;
            }
        }
    }
</style>