interface.vue

<template>
    <el-popover placement="right" width="380" trigger="click" class="interface">
        <div class="devicePopUp">
           <ul>
                <li><span class="pop-title">设备编码:</span><span class="pop-content">{{item.devId}}</span></li>
                <li><span class="pop-title">接口名称:</span><span class="pop-content">{{item.ifDescription?item.ifDescription:'N/A'}}</span></li>
                <li><span class="pop-title">接口类型:</span><span class="pop-content">{{item.ifTypeDesc?item.ifTypeDesc:'N/A'}}</span></li>
                <li><span class="pop-title">IP地址:</span><span class="pop-content">{{item.ifHash?item.ifHash:'N/A'}}</span></li>
                <li><span class="pop-title">管理状态:</span><span class="pop-content">{{item.adminStatusDesc?item.adminStatusDesc:'N/A'}}</span></li>
                <li><span class="pop-title">显示状态:</span><span class="pop-content">{{item.statusDesc?item.statusDesc:'N/A'}}</span></li>
                <li><span class="pop-title">操作状态:</span><span class="pop-content">{{item.operationStatusDesc?item.operationStatusDesc:'N/A'}}</span></li>
                <li><span class="pop-title">接口速度:</span><span class="pop-content">{{item.ifspeed?item.ifspeed:'N/A'}}</span></li>
                <li><span class="pop-title">接口别名:</span><span class="pop-content">{{item.ifAlias?item.ifAlias:'N/A'}}</span></li>
                <li><span class="pop-title">物理地址:</span><span class="pop-content">{{item.phyAddress?item.phyAddress:'N/A'}}</span></li>
                <li><span class="pop-title">上次改变时间:</span><span class="pop-content">{{item.lastChangeTime?item.lastChangeTime:'N/A'}}</span></li>
                <li><span class="pop-title">VPN:</span><span class="pop-content">{{item.vpnName?item.vpnName:'N/A'}}</span></li>
           </ul>
        </div>
        <div slot="reference">
            <i class="interfaceEntity" @contextmenu.prevent="handleClick(item)">
                <i class="icon icon-checked" v-if="item.checked"></i>
            </i>
            <!--①子接口模式不判断主接口的状态，都可以进入子接口界面-->
            <!--在子接口界面：-->
            <!--;是否可以删除，跟主接口的判断是一样的，不是用户现在操作的VPN的业务是不可以删除的-->
            <!--(界面直接隐藏掉)-->
            <!--新增时，有一种特殊的情况：如果子接口没有关联业务，但是IP不为“N/A”(也就是IP地址不为空时是不能进行【新增业务】操作的，对应的字段为ifHash)-->
            <div  v-if="ifType=='2'">
                <!--子接口-->
                <!--业务那块 灰色的子接口不能右键操作了-->
                <div v-if="item.class!='icon-gray-port'">
                    <p class="tooltip" v-if="item.isClick" v-on:click="handlePopUp(item,$event)">
                        <i :class="item | deviceClassFilter" class="icon"></i>
                        <span>选择子接口</span>
                    </p>
                </div>
            </div>
            <div v-else>
                <!--物理接口-->
                <div v-if="item.vpnName != dataSet.vpnName">
                    <!--不同名不可删除-->
                    <div v-if="item.class=='icon-blue-port'&& item.isClick">
                        <!--<p class="tooltip"  v-on:click="handlePopUp(item,$event)">-->
                        <!--<i :class="item | deviceClassFilter" class="icon"></i>-->
                        <!--<span>{{item | deviceTextFilter}}</span>-->
                        <!--</p>-->
                    </div>
                    <div v-else>
                        <p class="tooltip" v-if="item.class!='icon-gray-port' && item.isClick"  v-on:click="handlePopUp(item,$event)">
                            <i :class="item | deviceClassFilter" class="icon"></i>
                            <span>{{item | deviceTextFilter}}</span>
                        </p>
                    </div>
                </div>
                <div v-else>
                    <p class="tooltip" v-if="item.class!='icon-gray-port' && item.isClick"  v-on:click="handlePopUp(item,$event)">
                        <i :class="item | deviceClassFilter" class="icon"></i>
                        <span>{{item | deviceTextFilter}}</span>
                    </p>
                </div>
            </div>
        </div>
    </el-popover>
</template>

<script>
export default {
    name: "interface",
    props: {
        item: {
            type: Object,
            required: true
        },
        ifType: {
            type: String
        },
        dataSet:{
            type: Object,
            default: function () {
                return {devId: '',ifType:'',vpnName:'' }
            }
        }
    },
    methods: {
        handleClick(item) {
            //console.log(item)
            this.$emit('right-click',item)
        },
        //点击li弹出选项
        handlePopUp(item,event){
            this.$emit('pop-up-click',item,event)
        }
    },
    filters: {
        deviceClassFilter:function (val) {
            let  textClass ="";
            let  valClass = val.class
            let type = val.sceneType
            switch (valClass) {
                case "icon-green-port":
                    if(type == '1'){
                        textClass='icon-contact'
                    }else {
                        textClass='icon-eyes'
                    }
                    break;
                case "icon-blue-port":
                    if(type == '1'){
                        textClass='icon-del'
                    }else {
                        textClass='icon-eyes'
                    }
                    break
                default:
                    textClass = ""
            }
            return textClass
        },
        deviceTextFilter:function (val) {
            let  text ="";
            let  valClass = val.class
            let  type = val.sceneType
            switch (valClass) {
                case "icon-green-port":
                    if(type == '1'){
                        text='关联业务'
                    }else {
                        text='选择子接口'
                    }
                    break;
                case "icon-blue-port":
                    if(type == '1'){
                        text='删除业务'
                    }else {
                        text='选择子接口'
                    }
                    break
                default:
                    text = ""
            }
            return text
        }
    }

}
</script>

<style lang="scss">
.interface {
    position: relative;cursor: pointer;
    .interfaceEntity{
        display:block;height:19px;width:26px;line-height: 19px;text-align: center;
        .icon-checked{
            background:url("../../../assets/actualView/checked.png") no-repeat center;width:10px;height: 10px;
        }
    }
    .tooltip{
        position: absolute;right:0;bottom:10px;z-index: 999999;
        width:110px;height:30px;line-height:30px;color:#fff;background-color:#2F323E;box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.2);
        i{margin:0 8px;}
    }
    .el-checkbox.device-check{
        position: absolute;top:6px;right:12px;
        .el-checkbox__inner{width:12px;height:12px;border-radius:50%;}
        .el-checkbox__inner:after{height:6px;left:3px;top:1px;}
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background-color:#ff0400;
            border-color:#ff0400;
        }
        .el-checkbox__input.is-focus .el-checkbox__inner{border-color:#ff0400}
        &:hover{
            .el-checkbox__inner{border-color:#ff0400}
        }
    }
}
.el-popover.el-popper{
    .devicePopUp{
        li{
            line-height:25px;
            .pop-title{margin-right:10px}
        }
    }
}
</style>