pc-component-v5/packages/info/src/SearchInput.vue

<template>
  <a-select
    show-search
    :value="selectValue"
    style="width: 200px"
    :allow-clear="true"
    :not-found-content="fetching ? undefined : null"
    :placeholder="$t('lang.QueryConditionComplex.pleaseInputTheContent')"
    :options="options"
    @search="searchDatas"
    @change="selectChanged"
  >
    <template v-if="fetching" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
</template>  
    
<script>
import Common from '../../common/Common';
import { message } from 'ant-design-vue';
// 防抖处理(避免重复请求)
const debounce = (fn, delay) => {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};
export default {
  props: {
    value: {
      type: String,
      default: null,
    },
    apiUrl: {
      type: String,
      default: null,
    },
    apiResponseDataTextFiledName: {
      type: String,
      default: null,
    },
  },
  emits: ['update:value'],
  data() {
    return {
      selectValue: null,
      fetching: false,
      options: [{ value: '请输入查询内容', label: '请输入查询内容' }],
    };
  },
  watch: {
    apiResponseDataTextFiledName: {
      handler(newValue) {
        console.log(newValue, 'apiResponseDataTextFiledName');
      },
      immediate: true,
    },
  },

  methods: {
    // 搜索事件
    searchDatas:debounce(function(value){
      this.getDatas(value);
      this.$emit('update:value', value);
    },600),

    // 选择后更新值
    selectChanged(value) {
      this.selectValue = value;
      this.$emit('update:value', value);
    },

    // 请求获取搜索数据
    getDatas(value) {
      const that = this;
      if (!value) {
        return;
      }
      that.options = [];
      that.fetching = true;
      let filedName;
      const params = { start: 0, length: 99999, condition: value };
      if (that.apiResponseDataTextFiledName && that.apiResponseDataTextFiledName.includes('->')) {
        filedName = that.apiResponseDataTextFiledName.split('->')[1];
      }
      $.ajax({
        type: 'get',
        url: Common.getApiURL(that.apiUrl),
        data: params,
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function ({ errorCode, errorMessage, datas }) {
          if (errorCode == 0) {
            if (datas && datas.length) {
              // 数据处理（value，label）
              datas.forEach(item => {
                if (filedName) {
                  item.value = item[filedName];
                  item.label = item[filedName];
                  that.options.push(item);
                } else {
                  that.options.push({ value: item, label: item });
                }
              });
            }
          } else {
            message.warning(errorMessage);
          }
          that.fetching = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
          that.fetching = false;
        },
      });
    },
  },
};
</script>