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

<template>
  <a-select
      :getPopupContainer="
                          (triggerNode) => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
      v-model:value="managerArray"
      :placeholder="placeholder"
      :filterOption="false"
      :options="isOpen?options:selectOptions"
      allowClear
      showSearch
      :disabled="disabled"
      @popupScroll="memberScroll"
      @search="searchMember"
      :open="isOpen"
      @change="change"
      @blur="blur"
      :show-arrow="false"
      style="width: 100%"
  >
    <template v-if="loading" #notFoundContent>
      <a-spin size="small"/>
    </template>
  </a-select>
</template>
<script setup>
import {computed, defineEmits, defineProps, onMounted, ref, watch} from "vue";
import {useThrottlePage} from "@/api/request";
import { getTeacherList } from "@/api/Lecturer";
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  mobile: {
    type: String,
    default: ''
  },
  disabled: Boolean,
  placeholder: {
    type: String,
    default: "请输入搜索关键字",
  },
  mode: String
})

const selectOptions = ref([])

const managerArray = computed(() => props.value ===  '' ? null : props.value)

const emit = defineEmits({})

const isOpen = ref(false)
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}
const memberParam = ref({name: '', pageNo:1, pageSize: 999,teacherType:2 ,status:1})

const userList = ref([])
const loading = ref(false)
const getOutTeacher = () => {
  getTeacherList(memberParam.value).then(res=>{
    if(res.data.code == 200){
      userList.value = res.data.data.records
      loading.value = false
    }
  })
}
const options = computed(() => userList.value.map(e => ({

  // label: e.name + '(' + e.userNo + ')' + e.organizationName,
  label:e.name,
  value: e.name,
  ...e,
  audienceList: null
})))

watch(props, init)

function init() {
  //第一次进来 编辑赋值
  // if (props.value && (props.value + '') !== selectOptions.value.map(e => e.value).join(',')) {
  //   selectOptions.value = (props.value + '').split(',').map((e, i) => ({label: props.name.split(',')[i], value: e}))
  // }
}

onMounted(() => {
  console.log('onMounted')
  init()
  getOutTeacher()
})


const memberScroll = ({target: {scrollHeight, scrollTop, clientHeight}}) => {
  scrollHeight === (clientHeight + scrollTop) && memberParam.value.pageNo++
};
const debounceObject = debounce(getOutTeacher,1000)
//搜索学员
const searchMember = (keyword) => {
  console.log('searchMember', keyword)
  loading.value = true
  isOpen.value = true
  userList.value = []
  memberParam.value.pageNo = 1
  memberParam.value.teacherType=2
  memberParam.value.name = keyword
  console.log('searchMember', memberParam.value)
  debounceObject()
};

function blur() {
  isOpen.value = false
  memberParam.value.name = ''
  memberParam.value.pageNo = 1
  memberParam.value.teacherType=2
}

function change(e, l) {
  memberParam.value.name = ''
  memberParam.value.teacherType=2
  memberParam.value.pageNo = 1
  isOpen.value = false
  Array.isArray(l) && (selectOptions.value = l)
  Array.isArray(selectOptions.value) && emit('onChange', e, l)
    emit('update:name', l?.label)
    emit('update:value', l?.value)
    emit('update:mobile', l?.label)
}

</script>