eta_front/src/components/edbLabelList.vue

<template>
    <div class="label-list">
        <draggable
            class="drag-wrap"
            v-model="labelList"
            animation="300"
            @start="dragStartHandler"
            @update="dragEnter"
            @end="movePageLabel"
        >
            <el-tooltip placement="bottom-start" v-for="label in labelList" :key="label.code" :content="getLabelText(label)">
                <div class="label-item" :class="{'active':activeLabelId===label.code}"
                    @click.stop="clickLabel(label)"
                    >
                    <div class="label-icon-label">
                        <img :src="require(`@/assets/img/document_m/label.svg`)">
                    </div>
                    <div class="label-text">{{getLabelText(label)}}</div>
                    <div class="label-icon-close" @click.stop="deleteLabel(label)"> <i class="el-icon-close"></i> </div>
                </div>
            </el-tooltip>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
    components:{draggable},
    props:{
        labelList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        activeLabelId:{ //标签id 一般是指标id/图库图表id
            type:String,
            default:'1'
        },
        currentLang:{ //默认是中文版
            type:String,
            default:'ch'
        }

    },
    data() {
        return {
            dragStartIndex:0
        };
    },
    methods: {
        //决定展示的指标名称为中文还是英文
        getLabelText(label){
            const nameMap = {
                'ch':label.EdbName,
                'en':label.EdbNameEn.length?label.EdbNameEn:label.EdbName
            }
            return nameMap[this.currentLang]
        },
        clickLabel(label){
            this.$emit('clickLabel',label)
        },
        deleteLabel(label){
            this.$emit('deleteLabel',label)
        },
        dragStartHandler({oldIndex}){
            this.dragStartIndex = oldIndex
        },
        dragEnter(){},
        movePageLabel({newIndex}){
            if(this.dragStartIndex===newIndex) return
            this.$emit('moveLabel',{oldIndex:this.dragStartIndex,newIndex})
        },
    },
};
</script>

<style scoped lang="scss">
.label-list{
    width:100%;
    //overflow: hidden;
    .drag-wrap{
        display: flex;
    }
    .label-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        max-width: 256px;
        min-width: 170px;
        box-sizing: border-box;
        padding:8px;
        border:1px solid #DCDFE6;
        background-color: white;
        border-radius: 4px;
        margin-right: 20px;
        position: relative;
        &.active{
            border-color: #409EFF;
            background-color: #ECF5FF;
            .label-text{
                color:#409EFF;
            }
            .label-icon-label img{
                transform:translateX(30px);
                filter:drop-shadow(#409EFF -30px 0px 0px);
            }
            .label-icon-close i{
                color: #409eff !important;;
            }
        }
        .label-icon-label{
            width:14px;
            height:14px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .label-text{
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin:0 5px;
        }
    }
}
</style>