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

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-25 14:02:40
-->
<template>
  <a-select
    v-model="selectedValues"
    :multiple="multiple"
    size="medium"
    :placeholder="placeholder"
    :allow-clear="allClear"
    :max-tag-count="maxTagCount"
    @change="handleChange"
  >
    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
      <div class="flex items-center">
        <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-8px rounded-4px" />
        {{ item.name }}
      </div>
    </a-option>
  </a-select>
</template>

<script setup>
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,
  }
});

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>