【功能新增】IoT: 设备选择器

src/views/iot/rule/scene/components/DeviceListener.vue

@@ -19,13 +19,15 @@
       </div>
       <div class="flex items-center mr-60px">
         <span class="mr-10px">产品</span>
-        <el-button type="primary" @click="productSelectFormRef?.open()">
+        <el-button type="primary" @click="productTableSelectRef?.open()">
           {{ !product ? '选择产品' : product.name }}
         </el-button>
       </div>
       <div class="flex items-center mr-60px">
         <span class="mr-10px">设备</span>
-        <el-button type="primary">选择设备</el-button>
+        <el-button type="primary" @click="openDeviceSelect">
+          {{ isEmpty(deviceList) ? '选择设备' : triggerConfig.deviceNames.join(',') }}
+        </el-button>
       </div>
       <!-- 删除触发器 -->
       <div class="device-listener-delete">
@@ -93,20 +95,30 @@
     </div>
     <el-text class="ml-10px!" type="primary" @click="addCondition">添加触发条件</el-text>
   </div>
-  <IoTProductSelectForm ref="productSelectFormRef" @success="handleProductSelect" />
+
+  <IoTProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
+  <IoTDeviceTableSelect
+    ref="deviceTableSelectRef"
+    multiple
+    :product-id="product?.id"
+    @success="handleDeviceSelect"
+  />
 </template>
 
 <script setup lang="ts">
 import { Delete, Plus } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import DeviceListenerCondition from './DeviceListenerCondition.vue'
-import IoTProductSelectForm from '@/views/iot/product/product/components/ProductListSelect.vue'
+import IoTProductTableSelect from '@/views/iot/product/product/components/IoTProductTableSelect.vue'
+import IoTDeviceTableSelect from '@/views/iot/device/device/components/IoTDeviceTableSelect.vue'
 import {
   IotRuleSceneTriggerConditionParameter,
   IotRuleSceneTriggerConfig
 } from '@/api/iot/rule/scene/scene.types'
 import { ProductVO } from '@/api/iot/product/product'
+import { DeviceVO } from '@/api/iot/device/device'
 import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
 
 /** 场景联动之监听器组件 */
 defineOptions({ name: 'DeviceListener' })
@@ -114,7 +126,8 @@ defineOptions({ name: 'DeviceListener' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const triggerConfig = useVModel(props, 'modelValue', emits) as Ref<IotRuleSceneTriggerConfig>
-const productSelectFormRef = ref<InstanceType<typeof IoTProductSelectForm>>()
+
+const message = useMessage()
 
 /** 添加触发条件 */
 const addCondition = () => {
@@ -139,11 +152,28 @@ const removeConditionParameter = (
   conditionParameters.splice(index, 1)
 }
 
+const productTableSelectRef = ref<InstanceType<typeof IoTProductTableSelect>>()
+const deviceTableSelectRef = ref<InstanceType<typeof IoTDeviceTableSelect>>()
 const product = ref<ProductVO>()
+const deviceList = ref<DeviceVO[]>([])
 /** 处理产品选择 */
 const handleProductSelect = (val: ProductVO) => {
   product.value = val
   triggerConfig.value.productKey = val.productKey
+  deviceList.value = []
+}
+/** 处理设备选择 */
+const handleDeviceSelect = (val: DeviceVO[]) => {
+  deviceList.value = val
+  triggerConfig.value.deviceNames = val.map((item) => item.deviceName)
+}
+/** 打开设备选择器 */
+const openDeviceSelect = () => {
+  if (!product.value) {
+    message.warning('请先选择一个产品')
+    return
+  }
+  deviceTableSelectRef.value?.open()
 }
 </script>