thoth-frontend-test/src/components/select/searchPeople.vue

<template>
  <el-select
    v-model="searchValue"
    filterable
    :clearable="clearable"
    remote
    :multiple="multiple"
    :remote-method="remoteMethod"
    :loading="loading"
    :size="size"
    :placeholder="placeholder"
    :disabled="disabled"
    @change="changeSelect"
  >
    <el-option
      v-for="item in options"
      :key="item.idap"
      :label="item.name"
      :value="item.idap"
      @click.native="$emit('memberData', item)"
    >
      <div class="item-style">
        <div class="item-detail">{{ item.deptName }}</div>
        <div style="min-width:80px">{{ item.name }}</div>
        <div class="item-detail">{{ item.idap }}</div>
      </div>
    </el-option>
  </el-select>
</template>
<script>
import { memberQueryMemberInfoByIDAPorName } from '@/api/projectIndex'
export default {
  props: {
    value: {
      type: [String, Array, Object],
      default: '',
      required: false
    },
    placeholder: {
      type: String,
      default: '请输入姓名或邮箱前缀',
      required: false
    },
    size: {
      type: String,
      default: 'small',
      required: false
    },
    multiple: {
      type: Boolean,
      default: false,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    clearable: { // 是否支持清空
      type: Boolean,
      default: true,
      required: false
    }
  },
  data() {
    return {
      searchValue: this.value,
      loading: false,
      memberObj: {},
      options: [],
      firstGetArr: true // 是否第一次获取数组
    }
  },
  watch: {
    value: {
      handler(newV, oldV) {
        if (this.searchValue === newV) {
          return
        }
        if (newV === null) {
          this.multiple ? this.searchValue = [] : this.searchValue = ''
        } else {
          this.searchValue = newV
        }
        const type = Object.prototype.toString.call(this.searchValue)
        if (type.indexOf('Array') < 0) {
          this.remoteMethod(this.searchValue)
        } else if (type.indexOf('Array') > 0 && this.searchValue.length > 0 && this.firstGetArr) {
          this.initMore(this.searchValue)
          this.firstGetArr = false
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initMore(this.searchValue)
  },
  methods: {
    remoteMethod(query) {
      query !== '' ? this.getMember(query) : this.options = []
    },
    initMore(arr) { // 当多人时候，对数组每一个人员进行搜索
      for (const item of arr) {
        this.getMember(item, true)
      }
    },
    async getMember(query, initMore = false) {
      const res = await memberQueryMemberInfoByIDAPorName({ memberIDAP: query })
      if (res.data === null) {
        return
      }
      this.loading = false
      const weakMap = new Map()
      for (const item of res.data) {
        if (!weakMap.has(item.idap)) {
          weakMap.set(item.idap, item)
        }
      }
      initMore ? this.options = [...this.options, ...weakMap.values()] : this.options = [...weakMap.values()]
    },
    changeSelect(e) {
      if (this.searchValue === [] || this.searchValue === '') {
        this.searchValue = null
      }
      this.$emit('update:value', this.searchValue)
      if (this.multiple) {
        this.$emit('change', this.searchValue)
      } else {
        const confirm = this.options.find(item => item.idap === e)
        this.$emit('change', confirm)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.item-style {
  display: flex;
  justify-content: flex-start;
  .item-detail {
    min-width:100px;
    color: #8492a6;
    font-size: 13px;
    overflow:hidden
  }
}
</style>