a-select 下拉框多选搜索

<template>
  <a-modal
    :visible="true"
    :title="title"
    width="510px"
    height="294px"
    :mask-closable="false"
    :closable="true"
    @cancel="handleCancel"
  >
    <div class="modal-box">
      收件人：
      <a-space direction="vertical">
        <a-select
          show-search
          allow-clear
          :filter-option="filterOption"
          :field-names="{ label: 'label', value: 'empNo' }"
          mode="multiple"
          placeholder="请选择人员"
          style="width: 300px"
          option-filter-prop="label"
          @change="handleChange"
          :auto-clear-search-value="false"
          :options="states.personList"
        />
      </a-space>
    </div>

    <template #footer>
      <a-button key="submit" type="primary" @click="clickSumbit">确认并推送邮件</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
/**
 * 日期：2024/11/7
 * 创建者：zhangbing
 * IDE 名称：WebStorm
 * 当前项目名称：NEW_PFS_PC_UI
 * 在项目设置中指定的组织名：
 */
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { clone } from 'lodash-es'
import { API_PERSON_QUERY } from '@/http/category.http'
const emit = defineEmits(['onSuccess', 'onClose'])

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  modalData: {
    type: Object,
    default() {
      return {}
    },
  },
})

const defSubmitInfo = {
  number: '',
}

const states = reactive({
  personList: [],
  submitInfo: {
    empNos: [],
  },
})
// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载')
  handleempNos()
  // 在此执行挂载后的逻辑
})

onUnmounted(() => {
  console.log('组件即将卸载')
  // 在此执行清理工作
})

// 处理收件人
const handleempNos = async () => {
  const res = await API_PERSON_QUERY({ name: '' })
  res.forEach((item, index) => {
    item.label = item.name + '(' + item.empNo + ')'
  })
  states.personList = res

}

const clickSumbit = () => {
  emit('onSuccess', { ...states.submitInfo, id: props.modalData.id })
}
const filterOption = (input, option) => {
  return option.label.includes(input)
}
const handleChange = (value) => {
  states.submitInfo.empNos = value
}
const handleCancel = () => {
  resetConfig()
  emit('onClose')
}

// 取消
const resetConfig = () => {
  states.submitInfo = clone(defSubmitInfo)
}
</script>

<style scoped lang="less">
.modal-box {
  max-height: 60vh;
  padding-right: 20px;
  overflow-y: auto;
}

.modal-footer {
  // width: 180px;
  // height: 32px;
  text-align: center;
  display: flex;
  justify-content: center;

  .modal-button {
    text-align: center;
    display: flex;
    justify-content: space-between;
    width: 180px;
  }
}
</style>