ibms-web/src/components/config_point/location_flag.vue

<template>
    <div class="localtion-falg">
        <div class="select-flag dcenter">
            <el-tag class="localtion-tag" @close="delTags(item)" :key="item" color="#FFF6E7" type="warning" size="small" v-for="item in localtionArr" closable>{{item}}</el-tag>
        </div>
        <div class="localtion-do-point dcenter pointer">更多可用标签</div>
        <div class="localtion-view">
            <div class="location-tag-view">
                <el-tag @click="addToActive(item.Name)" :key="item.Name" class="default-tag pointer" v-for="item in queryLocaltionArr" size="small" color="#fff">{{item.Name}}</el-tag>
            </div>
        </div>
        <div class="center">
            <el-input v-model="localtionName" style="width:200px;margin-right:10px;"></el-input>
            <el-button type="primary" @click="addLocaltion">新增标签</el-button>
        </div>
    </div>
</template>
<script>
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import {
        queryLocaltionFlag,
        updateLocaltionFlag,
        delLocaltionFlag,
        addLocaltionFlag
    } from "@/fetch/point_http"
    export default {
        name: 'localtion-flag',
        props: {
            renderData: {
                type: Object,
                default:function(){
                    return {
                        LocationFlag: []
                    }
                }
            }
        },
        data() {
            return {
                localtionArr: [],
                localtionName: "",
                queryLocaltionArr: []
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        created() {},
        mounted() {
            this.queryData()
            this.changeData()
        },
        methods: {
            //将标签添加到活跃标签中
            addToActive(val){
                console.log(val)
                this.localtionArr.push(val)
                this.changeTags()
            },
            //删除已有标签
            delTags(val){
                this.localtionArr = this.localtionArr.map(item => {
                    if(item == val){
                        return undefined
                    }else{
                        return item
                    }
                }).filter(d => d);
                console.log(this.localtionArr)
                this.changeTags()
            },
            changeTags(){
                this.renderData.LocationFlag = this.localtionArr
                this.$emit("changeTag")
            },
            queryData(){
                queryLocaltionFlag({},res => {
                    console.log(res)
                    this.queryLocaltionArr = res.Content
                })
            },
            //添加位置标签
            addLocaltion(){
                let param = {
                    Name: this.localtionName
                }
                addLocaltionFlag(param,res => {
                    this.queryData()
                    this.$message.success("添加成功")
                    this.localtionName = ""
                })
            },
            changeData(){
                this.localtionArr = this.renderData.LocationFlag || []
            }
        },
        watch: {
            renderData: {
                deep: true,
                handler: function(){
                    this.changeData()
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
.localtion-falg{
    height: 300px;
    overflow: hidden;
    .select-flag{
        height: 80px;
        width: 540px;
        line-height: 40px;
        border-bottom: 1px solid #DEE3F3;
        overflow-y: auto;
    }
    .localtion-do-point{
        height: 30px;
        width: 112px;
        line-height: 30px;
        background-color: #EEFAFF;
        font-size: 12px;
        color: #8E9CC1;
        text-align: center;
    }
    .localtion-tag{
        border-radius: 100px;
        color: #F5A623;
        border-color: #F5A623;
        margin-right: 10px;
    }
    .localtion-view{
        height: 115px;
        margin-top: 10px;
        .location-tag-view{
            margin-left: 20px;
            height: 100%;
            overflow-y: auto;
            .default-tag{
                border-color: #C2CEDB;
                color:#8E9CC1;
                border-radius: 100px;
                margin-right: 10px;
            }
        }
    }
}
</style>