123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <template>
- <div class="localtion-falg">
- <div class="select-flag dcenter">
- <el-tag class="localtion-tag" @close="delTags(item)" :key="index" color="#FFF6E7" type="warning" size="small" v-for="(item,index) 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="index" class="default-tag pointer" v-for="(item,index) in queryLocaltionArr" size="small" color="#fff">{{item.Name}}</el-tag>
- </div>
- </div>
- <div class="center" style="margin-top:10px">
- <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", [
- "datasourceId",
- "protocolType"
- ]),
- projectId () {
- return this.$store.getters['layout/projectId']
- }
- },
- 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",this.localtionArr)
- },
- queryData(){
- queryLocaltionFlag({},res => {
- console.log(res)
- this.queryLocaltionArr = res.Content
- })
- },
- //添加位置标签
- addLocaltion(){
- let param = {
- Name: this.localtionName.trim()
- }
- if(!param.Name){
- this.$message("请确定输入字符不为空")
- return false
- }
- addLocaltionFlag(param,res => {
- this.queryData()
- this.$message.success("添加成功")
- this.localtionName = ""
- })
- },
- changeData(){
- this.localtionArr = this.renderData.LocationFlag ? this.renderData.LocationFlag.map(item => {
- return item
- }) : []
- }
- },
- 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>
|