fe-manage/src/components/project/ProjectManager.vue

<template>
  <a-select
    :getPopupContainer="
      (triggerNode) => {
        return triggerNode.parentNode || document.body;
      }
    "
    v-model:value="managerArray"
    :placeholder="placeholder"
    :filterOption="false"
    style="width: 100%"
    :options="options"
    allowClear
    showSearch
    :mode="mode"
    :disabled="disabled"
    @popupScroll="memberScroll"
    @search="searchMember"
    @change="change"
  >
    <template v-if="loading" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
</template>
<script>
import { onMounted, reactive, toRefs, watch } from "vue";
import { scrollLoad, throttle } from "@/api/method";
import * as api1 from "@/api/index1";

export default {
  name: "ProjectClass",

  props: {
    value: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    // 'multiple' | 'tags'
    mode: {
      type: String,
      default: "select",
    },
  },
  setup(props, ctx) {
    const state = reactive({
      options: [],
      managerArray: [],
      memberParam: { keyWord: "", pageNo: 1, pageSize: 10 },
      loading: false,
      init: false,
    });

    watch(() => state.memberParam.keyWord, throttle(getMember, 500));
    watch(() => state.memberParam.pageNo, throttle(getPushMember, 500));
    watch(props, init);

    onMounted(() => {
      console.log("onMounted");
      init();
    });

    function getMember() {
      state.loading = true;
      state.options = [];
      getMemberData();
    }

    function getPushMember() {
      state.loading = true;
      getMemberData();
    }

    function getMemberData() {
      console.log("getMemberData");
      api1.getMemberInfo(state.memberParam).then((res) => {
        const list = res.data.data.rows
          .filter((e) => !(props.value + "")?.includes(e.id + ""))
          .map((e) => ({
            label: e.realName,
            value: e.id,
          }));
        if (state.memberParam.pageNo === 1 && props.value) {
          const arrManagerId = (props.value + "").split(",");
          const arrManager = props.name.split(",");
          state.options = [
            ...arrManager.map((e, i) => ({ label: e, value: arrManagerId[i] })),
            ...list,
          ];
        } else state.options.push(...list);
        state.loading = false;
      });
    }

    const memberScroll = (e) => {
      let num = scrollLoad(e);
      if (num === 2) {
        // 如果滑到底部，则加载下一页
        state.memberParam.pageNo++;
      }
    };

    //搜索学员
    const searchMember = (keyWord) => {
      keyWord && (state.memberParam = { keyWord, pageNo: 1, pageSize: 10 });
    };

    function init() {
      console.log("init--", props);
      console.log(Array.isArray(state.managerArray));
      if (
        props.value + "" !==
        (Array.isArray(state.managerArray)
          ? state.managerArray.join(",")
          : state.managerArray + "")
      ) {
        if (props.value) {
          const arrManager = props.name.split(",");
          const arrManagerId = (props.value + "").split(",");
          state.managerArray =
            props.mode === "select" ? props.value : arrManagerId;
          state.options = arrManager.map((e, i) => ({
            label: e,
            value: arrManagerId[i],
          }));
        } else {
          state.managerArray = [];
        }
        // getMemberData();
        return;
      }
      if (!props.value) {
        if (!(state.options && state.options.length)) {
          state.options = [];
          // getMember();
        }
        return;
      }
    }

    function change(e, l) {
      console.log("change", l);
      if (Array.isArray(l)) {
        ctx.emit("update:value", l.map((t) => t.value).join(","));
        ctx.emit("update:name", l.map((t) => t.label).join(","));
      } else {
        ctx.emit("update:value", l.value);
        ctx.emit("update:name", l.label);
      }
    }

    return {
      ...toRefs(state),
      searchMember,
      memberScroll,
      change,
    };
  },
};
</script>