perf：【IoT 物联网】场景联动触发器优化

src/views/iot/rule/scene/form/sections/TriggerSection.vue

@@ -1,92 +1,46 @@
-<!-- 触发器配置组件 -->
+<!-- 场景触发器配置组件 -->
 <template>
   <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-8px">
-          <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
-          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
-          <el-tag size="small" type="info">{{ triggers.length }}个触发器</el-tag>
-        </div>
-        <div class="flex items-center gap-8px">
-          <el-button
-            type="primary"
-            size="small"
-            @click="addTrigger"
-          >
-            <Icon icon="ep:plus" />
-            添加触发器
-          </el-button>
-        </div>
+      <div class="flex items-center gap-8px">
+        <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
+        <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
+        <el-tag size="small" type="info">场景触发器</el-tag>
       </div>
     </template>
 
-    <div class="p-0">
-      <!-- 空状态 -->
-      <div v-if="triggers.length === 0">
-        <el-empty description="暂无触发器配置，请点击右上角添加触发器按钮开始配置" />
-      </div>
+    <div class="p-16px space-y-16px">
+      <!-- 触发事件类型选择 -->
+      <el-form-item label="触发事件类型" required>
+        <el-select
+          :model-value="trigger.type"
+          @update:model-value="(value) => updateTriggerType(value)"
+          @change="onTriggerTypeChange"
+          placeholder="请选择触发事件类型"
+          class="w-full"
+        >
+          <el-option
+            v-for="option in triggerTypeOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
 
-      <!-- 触发器列表 -->
-      <div v-else class="space-y-16px">
-        <div v-for="(trigger, index) in triggers" :key="`trigger-${index}`" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
-          <div class="flex items-center justify-between mb-16px">
-            <div class="flex items-center gap-8px">
-              <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
-              <span>触发器 {{ index + 1 }}</span>
-              <el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
-                {{ getTriggerTypeName(trigger.type) }}
-              </el-tag>
-            </div>
-            <div>
-              <el-button
-                type="danger"
-                size="small"
-                text
-                @click="removeTrigger(index)"
-                v-if="triggers.length > 1"
-              >
-                <Icon icon="ep:delete" />
-                删除
-              </el-button>
-            </div>
-          </div>
+      <!-- 设备触发配置 -->
+      <DeviceTriggerConfig
+        v-if="isDeviceTrigger(trigger.type)"
+        :model-value="trigger"
+        @update:model-value="updateTrigger"
+      />
 
-          <div class="space-y-16px">
-            <!-- 触发类型选择 -->
-            <el-form-item label="触发类型" required>
-              <el-select
-                :model-value="trigger.type"
-                @update:model-value="(value) => updateTriggerType(index, value)"
-                @change="onTriggerTypeChange(trigger, $event)"
-                placeholder="请选择触发类型"
-                class="w-full"
-              >
-                <el-option
-                  v-for="option in triggerTypeOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :value="option.value"
-                />
-              </el-select>
-            </el-form-item>
-
-            <!-- 设备触发配置 -->
-            <DeviceTriggerConfig
-              v-if="isDeviceTrigger(trigger.type)"
-              :model-value="trigger"
-              @update:model-value="(value) => updateTrigger(index, value)"
-            />
-
-            <!-- 定时触发配置 -->
-            <TimerTriggerConfig
-              v-if="trigger.type === TriggerTypeEnum.TIMER"
-              :model-value="trigger.cronExpression"
-              @update:model-value="(value) => updateTriggerCronExpression(index, value)"
-            />
-          </div>
-        </div>
-      </div>
+      <!-- 定时触发配置 -->
+      <TimerTriggerConfig
+        v-if="trigger.type === TriggerTypeEnum.TIMER"
+        :model-value="trigger.cronExpression"
+        @update:model-value="updateTriggerCronExpression"
+      />
     </div>
   </el-card>
 </template>
@@ -104,37 +58,17 @@ import {
 defineOptions({ name: 'TriggerSection' })
 
 interface Props {
-  triggers: TriggerFormData[]
+  trigger: TriggerFormData
 }
 
 interface Emits {
-  (e: 'update:triggers', value: TriggerFormData[]): void
+  (e: 'update:trigger', value: TriggerFormData): void
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-const triggers = useVModel(props, 'triggers', emit)
-
-/**
- * 创建默认的触发器数据
- */
-const createDefaultTriggerData = (): TriggerFormData => {
-  return {
-    type: TriggerTypeEnum.DEVICE_PROPERTY_POST, // 默认为设备属性上报
-    productId: undefined,
-    deviceId: undefined,
-    identifier: undefined,
-    operator: undefined,
-    value: undefined,
-    cronExpression: undefined,
-    conditionGroups: []
-  }
-}
-
-
-
-
+const trigger = useVModel(props, 'trigger', emit)
 
 // 触发器类型选项
 const triggerTypeOptions = [
@@ -160,23 +94,6 @@ const triggerTypeOptions = [
   }
 ]
 
-// 触发器类型映射
-const triggerTypeNames = {
-  [TriggerTypeEnum.DEVICE_STATE_UPDATE]: '设备状态变更',
-  [TriggerTypeEnum.DEVICE_PROPERTY_POST]: '属性上报',
-  [TriggerTypeEnum.DEVICE_EVENT_POST]: '事件上报',
-  [TriggerTypeEnum.DEVICE_SERVICE_INVOKE]: '服务调用',
-  [TriggerTypeEnum.TIMER]: '定时触发'
-}
-
-const triggerTypeTags = {
-  [TriggerTypeEnum.DEVICE_STATE_UPDATE]: 'warning',
-  [TriggerTypeEnum.DEVICE_PROPERTY_POST]: 'primary',
-  [TriggerTypeEnum.DEVICE_EVENT_POST]: 'success',
-  [TriggerTypeEnum.DEVICE_SERVICE_INVOKE]: 'info',
-  [TriggerTypeEnum.TIMER]: 'danger'
-}
-
 // 工具函数
 const isDeviceTrigger = (type: number) => {
   const deviceTriggerTypes = [
@@ -188,58 +105,47 @@ const isDeviceTrigger = (type: number) => {
   return deviceTriggerTypes.includes(type)
 }
 
-const getTriggerTypeName = (type: number) => {
-  return triggerTypeNames[type] || '未知类型'
-}
-
-const getTriggerTypeTag = (type: number) => {
-  return triggerTypeTags[type] || 'info'
-}
-
 // 事件处理
-const addTrigger = () => {
-  const newTrigger = createDefaultTriggerData()
-  triggers.value.push(newTrigger)
+const updateTriggerType = (type: number) => {
+  trigger.value.type = type
+  onTriggerTypeChange(type)
 }
 
-const removeTrigger = (index: number) => {
-  triggers.value.splice(index, 1)
+const updateTrigger = (newTrigger: TriggerFormData) => {
+  trigger.value = newTrigger
 }
 
-const updateTriggerType = (index: number, type: number) => {
-  triggers.value[index].type = type
-  onTriggerTypeChange(triggers.value[index], type)
+const updateTriggerCronExpression = (cronExpression?: string) => {
+  trigger.value.cronExpression = cronExpression
 }
 
-const updateTrigger = (index: number, trigger: TriggerFormData) => {
-  triggers.value[index] = trigger
-}
-
-const updateTriggerCronExpression = (index: number, cronExpression?: string) => {
-  triggers.value[index].cronExpression = cronExpression
-}
-
-const onTriggerTypeChange = (trigger: TriggerFormData, type: number) => {
+const onTriggerTypeChange = (type: number) => {
   // 清理不相关的配置
   if (type === TriggerTypeEnum.TIMER) {
-    trigger.productId = undefined
-    trigger.deviceId = undefined
-    trigger.identifier = undefined
-    trigger.operator = undefined
-    trigger.value = undefined
-    trigger.conditionGroups = undefined
-    if (!trigger.cronExpression) {
-      trigger.cronExpression = '0 0 12 * * ?'
+    trigger.value.productId = undefined
+    trigger.value.deviceId = undefined
+    trigger.value.identifier = undefined
+    trigger.value.operator = undefined
+    trigger.value.value = undefined
+    trigger.value.mainCondition = undefined
+    trigger.value.conditionGroup = undefined
+    if (!trigger.value.cronExpression) {
+      trigger.value.cronExpression = '0 0 12 * * ?'
     }
   } else {
-    trigger.cronExpression = undefined
+    trigger.value.cronExpression = undefined
     if (type === TriggerTypeEnum.DEVICE_STATE_UPDATE) {
-      trigger.conditionGroups = undefined
-    } else if (!trigger.conditionGroups) {
-      trigger.conditionGroups = []
+      trigger.value.mainCondition = undefined
+      trigger.value.conditionGroup = undefined
+    } else {
+      // 设备属性、事件、服务触发需要条件配置
+      if (!trigger.value.mainCondition) {
+        trigger.value.mainCondition = undefined // 等待用户配置
+      }
+      if (!trigger.value.conditionGroup) {
+        trigger.value.conditionGroup = undefined // 可选的条件组
+      }
     }
   }
 }
 </script>
-
-