<!-- 产品选择器组件 -->
|
<script setup lang="ts">
|
import { onMounted, ref } from 'vue';
|
|
import { DICT_TYPE } from '..\..\..\..\..\..\packages\constants\src';
|
|
import { Select } from 'ant-design-vue';
|
|
import { getSimpleProductList } from '#/api/iot/product/product';
|
import { DictTag } from '#/components/dict-tag';
|
|
/** 产品选择器组件 */
|
defineOptions({ name: 'ProductSelector' });
|
|
defineProps<{
|
modelValue?: number;
|
}>();
|
|
const emit = defineEmits<{
|
(e: 'update:modelValue', value?: number): void;
|
(e: 'change', value?: number): void;
|
}>();
|
|
const productLoading = ref(false); // 产品加载状态
|
const productList = ref<any[]>([]); // 产品列表
|
|
/**
|
* 处理选择变化事件
|
* @param value 选中的产品 ID
|
*/
|
function handleChange(value?: number) {
|
emit('update:modelValue', value);
|
emit('change', value);
|
}
|
|
/** 获取产品列表 */
|
async function getProductList() {
|
try {
|
productLoading.value = true;
|
const res = await getSimpleProductList();
|
productList.value = res || [];
|
} catch (error) {
|
console.error('获取产品列表失败:', error);
|
productList.value = [];
|
} finally {
|
productLoading.value = false;
|
}
|
}
|
|
/** 组件挂载时获取产品列表 */
|
onMounted(() => {
|
getProductList();
|
});
|
</script>
|
|
<template>
|
<Select
|
:value="modelValue"
|
@change="(value: any) => handleChange(value)"
|
placeholder="请选择产品"
|
show-search
|
allow-clear
|
class="w-full"
|
option-label-prop="label"
|
:loading="productLoading"
|
>
|
<Select.Option
|
v-for="product in productList"
|
:key="product.id"
|
:label="product.name"
|
:value="product.id"
|
>
|
<div class="py-[4px] flex w-full items-center justify-between">
|
<div class="flex-1">
|
<div class="text-[14px] font-medium mb-[2px] text-foreground">
|
{{ product.name }}
|
</div>
|
<div class="text-[12px] text-muted-foreground">
|
{{ product.productKey }}
|
</div>
|
</div>
|
<DictTag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
|
</div>
|
</Select.Option>
|
</Select>
|
</template>
|
