thoth-frontend-test/src/components/Tag/index.vue

<template>
  <div class="tips-wrapper">
    <span>
      <el-tag
        v-for="item in value"
        :key="item"
        closable
        size="small"
        type="info"
        @close="() => tabClose(item)">
          {{ item }}
        </el-tag>
    </span>
    <span class="add-tag" @click="addTag">打标</span>

    <!-- 弹窗 -->
    <div v-if="visible" class="tag_dialogbox">
      <div class="box">
        <div class="title">
          <span class="line" />
          <span class="name">设置标签</span>
          <i class="el-icon-close icon" @click="visible = false" />
        </div>
        <div class="body">
          <div class="tag-from_item">
            <div class="tag-from__label">标签：</div>
            <div class="tag-from__content">
              <el-select
              ref="select"
              v-model="tagSelectValue"
              style="width: 100%;"
              multiple
              remote
              filterable
              allow-create
              default-first-option
              :placeholder="placeholder"
              :remote-method="remoteMethod"
              @click.stop
              @change="change"
            >
              <el-option
                v-for="(item, itemIndex) in options"
                :key="itemIndex"
                :label="item"
                :value="item"
              >
                {{ item }}
              </el-option>
            </el-select>
            </div>
          </div>
        </div>
        <div class="footer">
          <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="ok">确定</el-button>
        </div>
      </div>
      <div class="bg" />
    </div>
  </div>
</template>
<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
import { desDecryptId } from '@/utils/crypto-js.js'
import { taskGetTag } from '@/api/common'
// import Modal from '@/components/modal'

export default {
  name: 'Tag',
  // components: { Modal },
  directives: { Clickoutside },
  props: {
    value: {
      required: false,
      type: Array,
      default: () => []
    },
    type: {
      required: false,
      type: String,
      default: () => ''
    },
    placeholder: {
      required: false,
      type: String,
      default: () => '请选择标签'
    }
  },
  data() {
    return {
      visible: false,
      isAddTag: true,
      options: [],
      tagSelectValue: [],
      tagValue: []
    }
  },
  methods: {
    change() {
      this.tagSelectValue = Array.from(new Set(this.tagSelectValue))
      this.options = Array.from(new Set([...this.options, ...this.tagSelectValue]))
    },
    close() {
      this.visible = false
    },
    tabClose(item) {
      const newTagValue = [...this.value].filter(elm => elm !== item)
      this.$emit('input', newTagValue)
      this.$emit('change', newTagValue)
    },
    ok() {
      this.$emit('input', this.tagSelectValue)
      this.$emit('change', this.tagSelectValue)

      this.close()
    },
    addTag() {
      this.remoteMethod()
      this.tagSelectValue = Array.from(new Set(this.value))
      this.options = Array.from(new Set([...this.options, ...this.value]))
      this.visible = true
    },
    remoteMethod(searchTag = '') {
      if (!this.$route.query.bizId) return
      // const bizId_id = analysisBizId_id(this.$route.query.bizId)
      // const bizId_id = window.localStorage.getItem('bizId')
      const bizId_id = desDecryptId(this.$route.query.bizId).replace(/_.*/, '')
      console.log(bizId_id)
      taskGetTag({
        type: this.type,
        searchTag,
        bizId: bizId_id
      }).then(res => {
        if (res.code === 200) {
          this.options = res.data.map(elm => elm.tag)
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.tips-wrapper {
  display: inline-block;
}

/deep/ .el-select__tags {
  max-width: calc(100% - 100px) !important;
}

.el-tag {
  margin-left: 5px;
  user-select: none;
}

.add-tag {
  color: #00a0ff;
  margin-left: 10px;
  cursor: pointer;
}

/deep/ .el-select {
  /deep/ .el-input__inner {
    border: 1px solid rgba(220, 223, 230) !important;
  }
}

.tag_dialogbox {
  .box {
    position: fixed;
    top:20vh;
    left: calc(50% - 250px);
    width: 500px;
    min-height: 180px;
    // overflow: auto;
    background: #fff;
    z-index: 1000;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    .title {
      padding: 5px 0px 5px 18px;
      // border-bottom: 1px solid #eee;
      position: relative;
      .line {
        display: inline-block;
        width: 4px;
        height: 18px;
        background: #409eff;
        border-radius: 1px;
        vertical-align: text-top;
      }
      .name {
        margin-left: 6px;
        color: rgba(0,0,0,.85);
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        word-wrap: break-word;
      }
      .icon {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 16px;
        color: #909399;
        cursor: pointer;
      }
    }
    .body {
      padding: 15px 20px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
      // height: calc(80vh - 118px);
      overflow: auto;
      .tag-from .el-form-item__content {
        width: calc(100% - 100px);
      }
      .tag-from_item{
        display: flex;
        .tag-from__label {
          width: 50px;
        }
        .tag-from__content {
          flex: 1;
          /deep/.el-input__inner {
            border: 1px solid #c0c4cc!important;
          }
        }
      }
    }
    .footer {
      padding: 0 20px 15px;
      text-align: right;
      // border-top: 1px solid #eee;
      background: #fff;
    }
  }
  .bg {
    background: rgba(000, 000, 000, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
  }
}
</style>