dy-admin-manager/src/components/remote-search/index.vue

<template>
  <div>
    <el-select
      :value="value"
      filterable
      remote
      reserve-keyword
      clearable
      :multiple="multiple"
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="changeValue"
      :style="{ width: this.selectWidt + 'px!important' }"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.userName"
        :value="item.userId"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
const placeholder = {
  setTeachers: "请选择老师",
  setEducations: "请选乐团主管",
};
import { throttle, slice, uniqBy } from "lodash";
import selects from "@/store/modules/selects";
export default {
  name: "remote-search",
  props: ["commit", "number", "value", "width", "multiple"],
  data() {
    return {
      options: [],
      list: [],
      listById: {},
      loading: false,
      constant: this.number || 50,
      placeholder: placeholder[this.commit],
      selectWidt: this.width || 180,
      isFirst: true,
    };
  },
  async mounted() {
    // this.getList();
    this.getOptions()

  },
  methods: {
    async getList() {
      await this.$store.dispatch(this.commit);
      this.list = this.selects[this.enumer[this.commit]];
      const data = {}
      for (const item of this.list) {
        data[item.userId] = item
      }
      this.listById = data
      this.options =
        this.list.length <= this.constant
          ? this.list
          : slice(this.list, 0, this.constant);
    },
    remoteMethod(query) {
      // throttle
      throttle(this.getOptions, 800)(query);
    },
    async getOptions(query) {
      if (query) {
        let flag;
        this.options = this.list.filter((item) => {
          flag =
            item.userName.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
            item.userId == query;
          if (this.multiple) {
            return flag || this.value.includes(item.userId);
          } else {
            return flag || item.userId == this.value;
          }
        });
      } else {
          await this.getList()
          const optionids = this.options.map(item => item.userId)
          const valueItem = this.listById[this.value]
          if (!optionids.includes(this.value) && valueItem) {
            this.options.push(valueItem)
            this.options = uniqBy(this.options, 'userId')
          }
      }
    },
    changeValue(val) {
      this.isFirst = false;
      this.$emit("input", val);
      this.$emit("change", val);
    },
  },
  computed: {
    enumer() {
      return {
        setTeachers: "teachers",
        setEducations: "educations",
      };
    },
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        if (this.multiple) {
          if (val?.length > 0 && this.isFirst) {
           this.getOptions('')
          }
        } else {
          if (val && this.isFirst) {
            this.getOptions('')
          }
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
</style>