zhzf/client/src/components/SimpleCheckItemSelector.vue

<template>
  <BaseSelector
      v-model="cvalue"
      :config="{
        filterable: true,
        remote: false,
        multiple: multiple
      }"
      :option-props="{
        key: 'itemId',
        label: 'itemName',
        value: 'itemId'
      }"
      :data="filteredCheckItems"
      :placeholder="placeholder"
      @change="handleChange"
      @select-load-option="loadCheckItems"
  />
</template>

<script setup>
// 引入组件和API
import { ref, computed, watch, onMounted } from 'vue'
import BaseSelector from './BaseSelector.vue'
import checkItemApi from '@/api/lawenforcement/CheckItem'

// 定义props
const props = defineProps({
  // 是否多选
  multiple: {
    type: Boolean,
    default: false
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: '请选择检查项'
  },
  // v-model绑定值
  modelValue: {
    type: [Array, String, Number],
    default: () => []
  },
})

// 定义emit
const emit = defineEmits(['update:modelValue', 'change'])

// 定义响应式数据
const checkItems = ref([])
const loading = ref(false)

// 内部值的计算属性
const cvalue = computed({
  get: () => props.modelValue,
  set: (val) => {
    // 处理内部值变化并发送到外部
    let formattedValue = val

    // 如果是单选模式且值为数组，取第一个元素
    if (!props.multiple && Array.isArray(formattedValue) && formattedValue.length > 0) {
      formattedValue = formattedValue[0]
    }

    // 如果是多选模式但值不是数组，转换为数组
    if (props.multiple && !Array.isArray(formattedValue)) {
      formattedValue = formattedValue ? [formattedValue] : []
    }

    emit('update:modelValue', formattedValue)
  }
})

// 过滤后的检查项列表
const filteredCheckItems = computed(() => checkItems.value)

// 加载检查项数据
const loadCheckItems = async () => {
  loading.value = true
  try {
    const res = await checkItemApi.getCheckItems()
    checkItems.value = res.data || []

    loading.value = false
  } catch (error) {
    console.error('获取检查项数据失败:', error)
    loading.value = false
  }
}

// 处理选择变更
const handleChange = (val) => {
  // 找到选中的检查项完整信息
  let selectedCheckItems

  if (Array.isArray(val)) {
    selectedCheckItems = checkItems.value.filter(checkItem => val.includes(checkItem.itemId))
  } else {
    const selectedCheckItem = checkItems.value.find(checkItem => checkItem.itemId === val)
    selectedCheckItems = selectedCheckItem ? [selectedCheckItem] : []
  }

  // 触发change事件，传递完整的企业信息
  emit('change', props.multiple ? selectedCheckItems : (selectedCheckItems[0] || null))
}
</script>

<style lang="scss" scoped>

</style>