zfire-newmall-admin/src/components/AutocompleteProduct/index.vue

<template>
  <div @click="handlerClick">
    <el-autocomplete
      clearable 
      id="autocompleteId"
      ref="autocomplete"
      style="width: 100%"
      v-model="selectItem"
      :fetch-suggestions="querySearchAsync"
      placeholder="请选择"
      :debounce="0"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    getData: {
      type: Function,
      default: () => {}
    },
    params: {
      type: Object,
      default: {
        type: '',
        brandId: ''
      }
    }
  },
  data() {
    return {
      selectItem: this.value
    }
  },
  watch: {
    value(newValue) {
      this.selectItem = newValue
    }
  },
  methods: {
    handlerClick() {
      this.$emit('click')
    },

    handleSelect(value) {
      this.selectItem = value.value
      this.$emit('input', value.value)
      this.$emit('change', value)
    },

    async querySearchAsync(queryString, cb) {
      let param = {
        pageNum: 1,
        pageSize: 100,
        params: [
          { param: 'a.product_brand_id', compare: '=', value: this.params.productBrandId },
          { param: 'a.main_id', compare: '=', value: this.params.mainId },
          { param: 'a.small_id', compare: '=', value: this.params.smallId },
          { param: 'a.series_id', compare: '=', value: this.params.seriesId },
          { param: 'a.name', compare: 'like', value: queryString }
        ]
      }
      let res = await this.getData(param)
      this.data = res.data.records.map(v => {
        return {
          value: `${v.name}`,
          other: {
            productId: v.productId,
            mainImg: v.mainImg,
            insideImg: v.insideImg,
            outImg: v.outImg,
            partImgs: v.partImgs,
            otherImgs: v.otherImgs,
            smallId: v.smallId,
            smallName: v.smallName,
            seriesId: v.seriesId,
            seriesName: v.seriesName
          }
        }
      })
      // let data = this.data.filter(item => ~item.value.indexOf(queryString))

      cb(this.data)
    }
  }
}
</script>

<style></style>