refinery-admin/src/components/autocomplete/index.vue

<template>
  <el-select
    v-model="params[config.querykey]"
    filterable
    remote
    clearable
    reserve-keyword
    :placeholder="config.placeholder"
    :remote-method="remoteMethod"
    @clear="list = []"
    :disabled="isDisabled"
    @change="change"
  >
    <el-option
      v-for="(item, index) in list"
      :key="item.id + index"
      :label="item[config.labelKey]"
      :value="item[config.valueKey]"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    params: Object,
    config: Object,
    // config: {
    //   serveTarget: {}, // 远程搜索接口
    //   autocompleteKey: "", //远程搜索接口参数名
    //   labelKey: "", //接口返回数据label名
    //   valueKey: "", //接口返回数据唯一值
    //   querykey: "", //查询接口参数名
    // },
  },
  data() {
    return {
      text: "",
      list: [],
      isDisabled: false,
    };
  },
  watch: {
    "config.echoId": {
      handler(nval, oval) {
        this.list = [];
        this.isDisabled = !!this.config.isDisabled;
        if (nval) {
          let resultName = this.config.echoName.replace(/\s*/g, "");
          if (!resultName) return;
          this.remoteMethod(resultName);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 远程搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        let type = this.$utils.typeJudgment(this.config.autocompleteKey);
        // if (!type.includes("Object") && !type.includes("String")) {
        //   this.loading = false;
        //   this.$message.warning("config.autocompleteKey格式有误");
        //   return;
        // }
        let params = {};
        if (type.includes("Object")) {
          params[this.config.autocompleteKey.key] = query;
          params["enableMark"] = this.config.autocompleteKey.enableMark;
        }
        if (
          type.includes("String") ||
          type.includes("Undefined") ||
          type.includes("Null")
        ) {
          // 接口为get类型时需将autocompleteKey值设为空
          console.log();
          this.config.autocompleteKey
            ? (params[this.config.autocompleteKey] = query)
            : (params = query);
        }
        this.config.serveTarget(params).then((res) => {
          this.loading = false;
          if (res.data.length) {
            this.list = res.data;
          } else this.list = [];
        });
      } else {
        this.list = [];
      }
    },
    change(val) {
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="scss" scoped></style>