111 lines
2.7 KiB
Vue
111 lines
2.7 KiB
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>
|