CRM_Montzar/apps/web/src/components/UserMultiSelect.vue

<script setup lang="ts">
import { computed } from 'vue';
import { Select as ASelect } from 'ant-design-vue';

type PickUser = { id: string; fullName: string };

const props = withDefaults(
  defineProps<{
    modelValue: string[];
    users: PickUser[];
    disabled?: boolean;
    /** حداقل تعداد انتخاب (حذف آخرین نفر غیرفعال می‌شود) */
    min?: number;
    addLabel?: string;
    emptyLabel?: string;
  }>(),
  { disabled: false, min: 0, addLabel: 'افزودن', emptyLabel: 'کسی انتخاب نشده' },
);

const emit = defineEmits<{
  'update:modelValue': [ids: string[]];
  change: [ids: string[]];
}>();

const options = computed(() =>
  props.users.map((u) => ({ value: u.id, label: u.fullName })),
);

function onUpdate(value: unknown) {
  const ids = Array.isArray(value) ? value.map(String) : [];
  if (ids.length < props.min && props.modelValue.length >= props.min) {
    emit('update:modelValue', [...props.modelValue]);
    return;
  }
  emit('update:modelValue', ids);
  emit('change', ids);
}
</script>

<template>
  <a-select
    mode="multiple"
    allow-clear
    show-search
    option-filter-prop="label"
    :value="modelValue"
    :options="options"
    :disabled="disabled"
    :placeholder="emptyLabel"
    style="width: 100%"
    @update:value="onUpdate"
  />
</template>