yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/pipechecker/components/DeptSelect.vue

<template>
    <el-select
      :model-value="modelValue"
      :placeholder="placeholder"
      :clearable="clearable"
      :multiple="multiple"
      :collapse-tags="collapseTags"
      :collapse-tags-tooltip="collapseTagsTooltip"
      class="!w-240px"
      @update:model-value="handleChange"
      @clear="handleClear"
    >
      <el-option
        v-for="dept in deptList"
        :key="dept.id"
        :label="dept.name"
        :value="dept.id"
      />
    </el-select>
  </template>
  
  <script setup lang="ts">
  import { getSimpleDeptList } from '@/api/system/dept'
  import type { DeptVO } from '@/api/system/dept'
  import { PropType } from 'vue'
  
  const props = defineProps({
    modelValue: {
      type: [String, Array] as PropType<string | string[] | undefined>,
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择部门'
    },
    clearable: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    collapseTags: {
      type: Boolean,
      default: true
    },
    collapseTagsTooltip: {
      type: Boolean,
      default: true
    }
  })
  
  const emit = defineEmits(['update:modelValue', 'change', 'clear'])
  
  const deptList = ref<DeptVO[]>([])
  
  // 获取部门列表
  const getDeptOptions = async () => {
    const res = await getSimpleDeptList()
    deptList.value = res
  }
  
  // 处理选择变化
  const handleChange = (value: string | string[]) => {
    console.log(value)
    emit('update:modelValue', value)
    emit('change', value)
  }
  
  // 处理清除
  const handleClear = () => {
    emit('update:modelValue', undefined)
    emit('change', undefined)
    emit('clear')
  }
  
  // 组件挂载时获取部门列表
  onMounted(() => {
    getDeptOptions()
  })
  </script>