lingji-work-fe/src/components/common-select/index.vue

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-25 14:02:40
-->
<template>
  <Select
    v-model:value="selectedValues"
    :mode="multiple ? 'multiple' : undefined"
    size="middle"
    :placeholder="placeholder"
    :allowClear="allClear"
    :showSearch="allowSearch"
    showArrow
    :maxTagCount="maxTagCount"
    @change="handleChange"
  >
    <Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
      {{ item.name }}
    </Option>
  </Select>
</template>

<script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue';

const props = defineProps({
  modelValue: {
    type: [Array, String, Number],
    default: () => [],
  },
  multiple: {
    type: Boolean,
    default: true,
  },
  placeholder: {
    type: String,
    default: '全部',
  },
  options: {
    type: Array,
    default: () => [],
  },
  maxTagCount: {
    type: Number,
    default: 3,
  },  
  allClear: {
    type: Boolean,
    default: true,
  },
  allowSearch: {
    type: Boolean,
    default: false,
  }
});

const emits = defineEmits(['update:modelValue', 'change']);

const selectedValues = ref(props.multiple ? [] : '');

watch(
  () => props.modelValue,
  (newVal) => {
    selectedValues.value = newVal;
  },
  { immediate: true },
);

watch(selectedValues, (newVal) => {
  emits('update:modelValue', newVal);
});

const handleChange = (value) => {
  selectedValues.value = value;
  emits('change', value);
};
</script>