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

<template>
  <a-select
      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>