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

<template>
  <a-select
      :getPopupContainer="
                          (triggerNode) => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
      v-model:value="managerArray"
      :placeholder="placeholder"
      :options="options"
      allowClear
      showSearch
      mode="multiple"
      :disabled="disabled"
      @search="searchMember"
      @change="change"
      @blur="blur"
      @focus="focus"
      :show-arrow="true"
      style="width: 100%"
      :maxTagTextLength="3"
      :maxTagCount="4"
  >
    <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 {throttle} from "@/api/method";
import {getUserList} from "@/api/Lecturer.js";

const props = defineProps({
  disabled: Boolean,
  placeholder: {
    type: String,
    default: "请输入搜索关键字",
  },
  arrayList:{
    type: Array,
    default: ()=>[]
  },
  type: {
    type: Number,
    default: 0
  },
  value: {
    type: String,
    default: ''
  }
})
const emit = defineEmits({})
const managerArray = ref([])
const loading = ref(false)
onMounted(()=>{
  managerArray.value = props.arrayList
  options.value = props.arrayList
})
const options = ref([])
const getList = () => {
  getUserList(keyword.value).then(res=>{
    loading.value = false
    if(res.data.code == 200){
      options.value = res.data.data.list.map(e => ({
        label: e.realName + e.userNo,
        value: e.id,
        userId: e.id,
        userNo: e.userNo,
        userName: e.realName,
      }))
      console.log(options.value,'xixixixi')
    }
  }).catch(()=>{
    loading.value = false
    options.value =[]
  })
}
const throttList = throttle(getList, 600);
const keyword = ref('')
//搜索学员
const searchMember = (val) => {
  options.value = []
  loading.value = true
  keyword.value = val
  throttList()
};
const focus = () => {
  options.value =[]
  loading.value = true
  keyword.value = ''
  getList()
}
function blur() {
  keyword.value = ''
}

function change(e, l) {
  console.log(e, l,'xixixixiixix')
  keyword.value = ''
  l?.map(item => item.type = props.type)
  if (Array.isArray(l)) {
    emit('update:arrayList',l)
    emit('update:value', l.map(t => t.value).join(','))
  }
}

</script>