【功能完善】IoT: 场景联动执行器配置

src/views/iot/rule/scene/components/action/ActionExecutor.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="m-10px">
+    <!-- TODO puhui999: 产品设备回显 -->
     <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
       <div class="flex items-center mr-60px">
         <span class="mr-10px">执行动作</span>
@@ -32,7 +33,7 @@
       >
         <span class="mr-10px">设备</span>
         <el-button type="primary" @click="handleSelectDevice" size="small" plain>
-          {{ isEmpty(deviceList) ? '选择设备' : deviceList.map(d => d.deviceName).join(',') }}
+          {{ isEmpty(deviceList) ? '选择设备' : deviceList.map((d) => d.deviceName).join(',') }}
         </el-button>
       </div>
       <!-- 删除执行器 -->
@@ -91,9 +92,9 @@ import {
   ActionAlert,
   ActionConfig,
   ActionDeviceControl,
-  IotRuleSceneActionTypeEnum,
+  IotDeviceMessageIdentifierEnum,
   IotDeviceMessageTypeEnum,
-  IotDeviceMessageIdentifierEnum
+  IotRuleSceneActionTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
 
 /** 场景联动之执行器组件 */
@@ -139,15 +140,6 @@ const initActionConfig = () => {
   }
 }
 
-// 监听执行类型变化，初始化对应配置
-watch(
-  () => actionConfig.value.type,
-  () => {
-    initActionConfig()
-  },
-  { immediate: true }
-)
-
 // 产品和设备选择
 const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
 const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
@@ -188,4 +180,18 @@ const handleDeviceSelect = (val: DeviceVO[]) => {
     actionConfig.value.deviceControl.deviceNames = val.map((item) => item.deviceName)
   }
 }
+
+// 监听执行类型变化，初始化对应配置
+watch(
+  () => actionConfig.value.type,
+  () => {
+    initActionConfig()
+  },
+  { immediate: true }
+)
+
+/** 初始化 */
+onMounted(() => {
+  initActionConfig()
+})
 </script>

src/views/iot/rule/scene/components/action/DeviceControlAction.vue

@@ -12,6 +12,7 @@
         <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
       </el-select>
     </div>
+    <!-- TODO puhui999: 处理服务参数 -->
     <div class="">
       <div
         class="flex items-center justify-around mb-10px last:mb-0"
@@ -31,6 +32,7 @@
             :value="thingModel.identifier"
           />
         </el-select>
+        <!-- TODO puhui999: 输入框调整，数值型使用数字输入框校验边界，bool 值使用开关，枚举值使用下拉选择，时间值使用时间选择器 -->
         <el-input v-model="parameter.value" class="!w-240px mr-10px" placeholder="请输入值">
           <template v-if="getUnitName(parameter.identifier)" #append>
             {{ getUnitName(parameter.identifier) }}
@@ -62,6 +64,7 @@ import {
   IotDeviceMessageIdentifierEnum,
   IotDeviceMessageTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
+import { isEmpty } from '@/utils/is'
 
 /** 设备控制执行器组件 */
 defineOptions({ name: 'DeviceControlAction' })
@@ -78,6 +81,10 @@ const message = useMessage()
 /** 执行器参数 */
 const parameters = ref<{ identifier: string; value: any }[]>([])
 const addParameter = () => {
+  if (!props.productId) {
+    message.warning('请先选择一个产品')
+    return
+  }
   if (parameters.value.length >= thingModels.value.length) {
     message.warning(`该产品只有${thingModels.value.length}个物模型！！！`)
     return
@@ -87,6 +94,23 @@ const addParameter = () => {
 const removeParameter = (index: number) => {
   parameters.value.splice(index, 1)
 }
+watch(
+  () => parameters.value,
+  (newVal) => {
+    if (isEmpty(newVal)) {
+      return
+    }
+    for (const parameter of newVal) {
+      if (isEmpty(parameter.identifier)) {
+        break
+      }
+      deviceControlConfig.value.data[parameter.identifier] = parameter.value
+    }
+    console.log(deviceControlConfig.value)
+  },
+  { deep: true }
+)
+
 // 初始化设备控制执行器结构
 const initDeviceControlConfig = () => {
   if (!deviceControlConfig.value) {
@@ -97,6 +121,12 @@ const initDeviceControlConfig = () => {
       identifier: IotDeviceMessageIdentifierEnum.PROPERTY_SET,
       data: {}
     } as ActionDeviceControl
+  } else {
+    // 参数回显
+    parameters.value = Object.entries(deviceControlConfig.value.data).map(([key, value]) => ({
+      identifier: key,
+      value: value
+    }))
   }
 
   // 确保data对象存在
@@ -105,51 +135,6 @@ const initDeviceControlConfig = () => {
   }
 }
 
-// 初始化
-onMounted(() => {
-  initDeviceControlConfig()
-  if (props.productId) {
-    getThingModelTSL()
-  }
-})
-
-// 监听productId变化
-watch(
-  () => props.productId,
-  (newVal) => {
-    if (newVal) {
-      getThingModelTSL()
-      // 当产品ID变化时，清空原有数据
-      deviceControlConfig.value.data = {}
-    } else {
-      thingModelTSL.value = undefined
-    }
-  }
-)
-
-// 监听消息类型变化
-watch(
-  () => deviceControlConfig.value.type,
-  () => {
-    // 切换消息类型时清空参数
-    deviceControlConfig.value.data = {}
-    if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.PROPERTY) {
-      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.PROPERTY_SET
-    } else {
-      deviceControlConfig.value.identifier = ''
-    }
-  }
-)
-
-// 监听identifier变化
-watch(
-  () => deviceControlConfig.value.identifier,
-  () => {
-    // 切换identifier时清空参数
-    deviceControlConfig.value.data = {}
-  }
-)
-
 /** 获取产品物模型 */
 const thingModelTSL = ref<any>()
 const getThingModelTSL = async () => {
@@ -163,6 +148,9 @@ const getThingModelTSL = async () => {
   }
 }
 const thingModels = computed((): any[] => {
+  if (isEmpty(thingModelTSL.value)) {
+    return []
+  }
   switch (deviceControlConfig.value.type) {
     case IotDeviceMessageTypeEnum.PROPERTY:
       return thingModelTSL.value.properties
@@ -188,4 +176,40 @@ const getUnitName = computed(() => (identifier: string) => {
   // }
   return ''
 })
+
+// 监听 productId 变化
+watch(
+  () => props.productId,
+  (newVal) => {
+    if (!newVal) {
+      thingModelTSL.value = undefined
+      parameters.value = []
+      return
+    }
+    getThingModelTSL()
+    // 当产品ID变化时，清空原有数据
+    deviceControlConfig.value.data = {}
+  },
+  { immediate: true }
+)
+
+// 监听消息类型变化
+watch(
+  () => deviceControlConfig.value.type,
+  () => {
+    // 切换消息类型时清空参数
+    deviceControlConfig.value.data = {}
+    parameters.value = []
+    if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.PROPERTY) {
+      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.PROPERTY_SET
+    } else if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.SERVICE) {
+      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.SERVICE_INVOKE
+    }
+  }
+)
+
+// 初始化
+onMounted(() => {
+  initDeviceControlConfig()
+})
 </script>

src/views/iot/rule/scene/index.vue

@@ -69,9 +69,12 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <!-- TODO @puhui999：触发器数组 => 触发器，然后展示 x 个？ ps：执行器数组也类似哈。-->
-      <el-table-column label="触发器数组" align="center" prop="triggers" />
-      <el-table-column label="执行器数组" align="center" prop="actions" />
+      <el-table-column label="触发器" align="center" prop="triggers">
+        <template #default="{ row }"> {{ row.triggers?.length }}个 </template>
+      </el-table-column>
+      <el-table-column label="执行器" align="center" prop="actions">
+        <template #default="{ row }"> {{ row.actions?.length }}个 </template>
+      </el-table-column>
       <el-table-column
         label="创建时间"
         align="center"