platformFront/src/components/basicKnow/searchTerm.vue

<template>
  <div>
    <!-- <div
      class="test_box"
      contenteditable="true"
      v-html="innerText"
      @input="handleInput"
      @focus="isChange = false"
    ></div>-->

    <div class="source" @click="getfouce">
      <div class="select">
        <transition-group name="flip-list">
          <span
            v-for="(item,index) in items"
            :key="item.conceptId"
            draggable="true"
            class="items"
            @dragstart="dragstart(item)"
            @dragenter="dragenter(item)"
            @dragend="dragend(item)"
          >
            {{item.conceptName}}
            <i class="el-icon-close" @click.stop="delTag(index)"></i>
          </span>
        </transition-group>
        <input
          class="inp"
          @mousedown.stop
          ref="inputVal"
          @blur="unblur"
          v-model="value"
          @input="handleInput"
        />
      </div>
      <ul class="list" v-if="conceptList.length>0 && onshow">
        <li
          @mousedown.prevent
          class="item"
          @click="getTag(item)"
          v-for="(item,index) in conceptList"
          :key="index"
        >
          {{item.conceptName}}
          <img src />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from '@api/knowledgeTree.js';
export default {
  name: 'searchTerm',
  props: ['type'],
  data() {
    return {
      conceptList: [],
      oldNum: 0,
      newNum: 0,
      value: '',
      items: [],
      listL: [],
      onshow: false
    };
  },
  watch: {
    items(newVal, oldVal) {
      // TO DO
      let arr = [];
      newVal.forEach(item => {
        arr.push(item.conceptId);
      });
      this.$emit('updata:list',arr)
    }
  },
  methods: {
    handleInput(event) {
      const param = {
        excludedConceptIds: [],
        libType: this.type,
        name: this.value
      };
      api
        .searchConcept(param)
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;
            this.conceptList = data;
            this.onshow = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getfouce() {
      this.$refs.inputVal.focus();
    },
    getTag(item) {
      var v = this.items.some(el => {
        return el.conceptName == item.conceptName;
      });
      if (v) {
        return;
      }
      this.items.push(item);
      this.onshow = true;
    },
    delTag(index) {
      this.items.splice(index, 1);
    },
    unblur() {
      this.onshow = false;
      this.value = '';
      
    },
    shuffle() {
      this.items = _.shuffle(this.items);
    },
    // 记录初始信息
    dragstart(value) {
      this.oldNum = value;
    },
    // 做最终操作
    dragend(value) {
      if (this.oldNum != this.newNum) {
        let oldIndex = this.items.indexOf(this.oldNum);
        let newIndex = this.items.indexOf(this.newNum);
        let newItems = [...this.items];
        console.log(oldIndex);
        // 删除老的节点
        newItems.splice(oldIndex, 1);
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldNum);
        // this.items一改变，transition-group就起了作用
        this.items = [...newItems];
      }
    },
    // 记录移动过程中信息
    dragenter: function(value) {
      this.newNum = value;
    }
  }
};
</script>

<style lang="less" scoped>
.address-placeholder {
  line-height: 27px;
  height: 27px;
  color: #a2a2a2;
  position: absolute;
  left: 16px;
  top: 0;
  opacity: 0.7;
  font-size: 12px;
}
.test_box {
  width: 300px;
  min-height: 40px;
  max-height: 300px;
  outline: 0;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  line-height: 40px;
  padding: 0 16px;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  margin-top: 6px;
}
.list {
  width: 318px;
  height: 200px;
  position: absolute;
  z-index: 1001;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px 0;
  overflow-y: auto;
  .item {
    padding: 0 10px;
  }
  .item:hover {
    background: #f5f7fa;
  }
}

.source {
  width: 300px;
  min-height: 40px;
  outline: 0;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  line-height: 40px;
  padding: 0 16px;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  margin-top: 6px;

  .select {
    .items {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      border-radius: 5px;
      padding: 3px 4px;
      background: #48c5d7;
      margin: 0 5px;
      display: inline-block;
    }
    .inp {
      width: 80px;
      height: 30px;
      border: none;
    }
  }
}
</style>