jsm-mall-front/src/components/AutocompleteRemote/index.vue

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

<script>
import { debounce } from '@/utils/common'
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    list: {
      type: Array,
      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.other.brandWebsitNumber} ${value.other.brandWebsitName}`
      this.$emit('input', value.other.brandWebsitName)
      this.$emit('change', value)
    },

    // debounceChange: debounce(async function (queryString) {
    //   console.log(333)
    //   let param = {
    //     pageNum: 1,
    //     pageSize: 100,
    //     keyword: queryString,
    //     ...this.params
    //   }
    //   let res = await this.getData(param)
    //   this.data = res.data.records.map(v => {
    //     return {
    //       value: v.brandWebsitName,
    //       other: {
    //         brandWebsitNumber: v.brandWebsitNumber,
    //         label: v.brandWebsitId,
    //         brandPkId: v.brandPkId
    //       }
    //     }
    //   })
    //   console.log(444)
    // }, 500),

    async querySearchAsync(queryString, cb) {
      // if (queryString === '') {
      //   let param = {
      //     pageNum: 1,
      //     pageSize: 100,
      //     keyword: queryString,
      //     ...this.params
      //   }
      //   let res = await this.getData(param)
      //   this.data = res.data.records.map(v => {
      //     return {
      //       // value: `${v.brandWebsitName} ${v.brandWebsitNumber}`,
      //       value: v.brandWebsitName,
      //       other: {
      //         brandWebsitNumber: v.brandWebsitNumber,
      //         brandWebsitName: v.brandWebsitName,
      //         label: v.brandWebsitId,
      //         brandPkId: v.brandPkId
      //       }
      //     }
      //   })
      // } else {
      //   // console.log(222)
      //   this.debounceChange(queryString)
      //   // console.log(555)
      // }
      // 参数处理
      if (queryString) {
        queryString = queryString.trim()
        const ovalStr = queryString
        queryString = queryString.split(' ')
        if (queryString.length > 1) {
          queryString.splice(0, 1)
          queryString = queryString.filter(k => k).join().trim()
        } else {
          queryString = ovalStr
        }
      }
      const param = {
        pageNum: 1,
        pageSize: 100,
        keyword: queryString,
        ...this.params
      }
      const res = await this.getData(param)
      this.data = res.data.records.map(v => {
        return {
          value: `${v.brandWebsitNumber} ${v.brandWebsitName}`,
          // value: v.brandWebsitName,
          other: {
            brandWebsitNumber: v.brandWebsitNumber,
            brandWebsitName: v.brandWebsitName,
            label: v.brandWebsitId,
            brandPkId: v.brandPkId,
            sysWebsitNumber: v.sysWebsitNumber
          }
        }
      })
      // let data = this.data.filter(item => ~item.value.indexOf(queryString))

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

<style></style>