110 lines
2.6 KiB
Vue
110 lines
2.6 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: '请选择检查项'
|
|||
|
|
},
|
|||
|
|
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>
|