web-admin/src/components/select-agent/index.vue

<template>
  <a-select
    v-model="selected"
    :placeholder="placeholder"
    :allow-clear="clearable"
    :disabled="disabled"
    :options="optionList"
    allow-search
    popup-container="body"
    v-bind="attrs"
    :trigger-props="{ autoFitPopupMinWidth: true }"
    style="width: 335px !important"
    @change="onChange"
  >
    <template v-if="prefix" #prefix>考点</template>
  </a-select>
</template>

<script setup lang="ts">
  import { ref, useAttrs, watch } from 'vue';
  import { agentQuery } from '@/api/order';

  defineOptions({
    name: 'SelectAgent',
  });
  type ValueType = number | Array<number> | null;

  const props = defineProps<{
    modelValue: ValueType;
    clearable?: boolean;
    disabled?: boolean;
    placeholder?: string;
    multiple?: boolean;
    teachingId: number | null;
    prefix?: boolean;
    flag?: boolean;
  }>();

  const emit = defineEmits(['update:modelValue', 'change']);
  const attrs = useAttrs();

  interface OptionListItem {
    value: number;
    label: string;
  }

  const selected = ref<number | Array<number> | undefined>();
  const optionList = ref<OptionListItem[]>([]);
  const search = async () => {
    optionList.value = [];
    if (!props.teachingId) return;

    const resData = await agentQuery({
      id: props.teachingId,
      flag: props.flag ? props.flag : undefined,
    });

    optionList.value = (resData || []).map((item) => {
      return { ...item, value: item.id, label: item.name };
    });

    if (selected.value) {
      const targetOption = optionList.value.find(
        (item) => item.value === selected.value
      );
      if (!targetOption) {
        emit('update:modelValue', null);
        emit('change', null);
      }
    }
  };

  const onChange = () => {
    const selectedData = props.multiple
      ? optionList.value.filter(
          (item) =>
            selected.value && (selected.value as number[]).includes(item.value)
        )
      : optionList.value.filter((item) => selected.value === item.value);
    emit('update:modelValue', selected.value || null);
    emit('change', props.multiple ? selectedData : selectedData[0]);
  };

  watch(
    () => props.modelValue,
    (val) => {
      selected.value = val || undefined;
    },
    {
      immediate: true,
    }
  );
  watch(
    () => props.teachingId,
    (val, oldval) => {
      if (!val) {
        optionList.value = [];
        selected.value = undefined;
        emit('update:modelValue', selected.value || null);
      } else if (val !== oldval) {
        search();
      }
    },
    {
      immediate: true,
    }
  );
</script>