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>

    <Modal title="添加标签" :visible="visible" :bg="false">
      <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>
      <template slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button @click="ok">添加</el-button>
      </template>
    </Modal>
  </div>
</template>
<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
import { desDecryptId } from '@/utils/crypto-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 = '') {
      // const bizId_id = window.localStorage.getItem('bizId')
      const bizId_id = desDecryptId(this.$route.query.bizId_id).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;
  }
}
</style>