pms-iot-vue/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue

<!-- 设备触发配置组件 -->
<template>
  <div class="flex flex-col gap-16px">
    <!-- 主条件配置 - 默认直接展示 -->
    <div class="space-y-16px">
      <!-- 主条件配置 -->
      <div class="flex flex-col gap-16px">
        <!-- 主条件配置 -->
        <div class="space-y-16px">
          <!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
          <div
            class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
          >
            <div class="flex items-center gap-12px">
              <div class="flex items-center gap-8px text-16px font-600 text-green-700">
                <div
                  class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
                >
                  主
                </div>
                <span>主条件</span>
              </div>
              <el-tag size="small" type="success">必须满足</el-tag>
            </div>
          </div>

          <!-- 主条件内容配置 -->
          <MainConditionInnerConfig
            :model-value="trigger"
            @update:model-value="updateCondition"
            :trigger-type="trigger.type"
            @trigger-type-change="handleTriggerTypeChange"
          />
        </div>
      </div>
    </div>

    <!-- 条件组配置 -->
    <div class="space-y-16px">
      <!-- 条件组配置 -->
      <div class="flex flex-col gap-16px">
        <!-- 条件组容器头部 -->
        <div
          class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
        >
          <div class="flex items-center gap-12px">
            <div class="flex items-center gap-8px text-16px font-600 text-green-700">
              <div
                class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
              >
                组
              </div>
              <span>附加条件组</span>
            </div>
            <el-tag size="small" type="success">与"主条件"为且关系</el-tag>
            <el-tag size="small" type="info">
              {{ trigger.conditionGroups?.length || 0 }} 个子条件组
            </el-tag>
          </div>
          <div class="flex items-center gap-8px">
            <el-button
              type="primary"
              size="small"
              @click="addSubGroup"
              :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
            >
              <Icon icon="ep:plus" />
              添加子条件组
            </el-button>
            <el-button type="danger" size="small" text @click="removeConditionGroup">
              <Icon icon="ep:delete" />
              删除条件组
            </el-button>
          </div>
        </div>

        <!-- 子条件组列表 -->
        <div
          v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
          class="space-y-16px"
        >
          <!-- 逻辑关系说明 -->
          <div class="relative">
            <div
              v-for="(subGroup, subGroupIndex) in trigger.conditionGroups"
              :key="`sub-group-${subGroupIndex}`"
              class="relative"
            >
              <!-- 子条件组容器 -->
              <div
                class="border-2 border-orange-200 rounded-8px bg-orange-50 shadow-sm hover:shadow-md transition-shadow"
              >
                <div
                  class="flex items-center justify-between p-16px bg-gradient-to-r from-orange-50 to-yellow-50 border-b border-orange-200 rounded-t-6px"
                >
                  <div class="flex items-center gap-12px">
                    <div class="flex items-center gap-8px text-16px font-600 text-orange-700">
                      <div
                        class="w-24px h-24px bg-orange-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
                      >
                        {{ subGroupIndex + 1 }}
                      </div>
                      <span>子条件组 {{ subGroupIndex + 1 }}</span>
                    </div>
                    <el-tag size="small" type="warning" class="font-500">组内条件为"且"关系</el-tag>
                    <el-tag size="small" type="info"> {{ subGroup?.length || 0 }}个条件 </el-tag>
                  </div>
                  <el-button
                    type="danger"
                    size="small"
                    text
                    @click="removeSubGroup(subGroupIndex)"
                    class="hover:bg-red-50"
                  >
                    <Icon icon="ep:delete" />
                    删除组
                  </el-button>
                </div>

                <SubConditionGroupConfig
                  :model-value="subGroup"
                  @update:model-value="(value) => updateSubGroup(subGroupIndex, value)"
                  :trigger-type="trigger.type"
                  :max-conditions="maxConditionsPerGroup"
                />
              </div>

              <!-- 子条件组间的"或"连接符 -->
              <div
                v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
                class="flex items-center justify-center py-12px"
              >
                <div class="flex items-center gap-8px">
                  <!-- 连接线 -->
                  <div class="w-32px h-1px bg-orange-300"></div>
                  <!-- 或标签 -->
                  <div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
                    <span class="text-14px font-600 text-orange-600">或</span>
                  </div>
                  <!-- 连接线 -->
                  <div class="w-32px h-1px bg-orange-300"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div
          v-else
          class="p-24px border-2 border-dashed border-orange-200 rounded-8px text-center bg-orange-50"
        >
          <div class="flex flex-col items-center gap-12px">
            <Icon icon="ep:plus" class="text-32px text-orange-400" />
            <div class="text-orange-600">
              <p class="text-14px font-500 mb-4px">暂无子条件组</p>
              <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'

import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
import SubConditionGroupConfig from './SubConditionGroupConfig.vue'
import type { Trigger } from '@/api/iot/rule/scene'

/** 设备触发配置组件 */
defineOptions({ name: 'DeviceTriggerConfig' })

const props = defineProps<{
  modelValue: Trigger
  index: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: Trigger): void
  (e: 'trigger-type-change', type: number): void
}>()

const trigger = useVModel(props, 'modelValue', emit)

const maxSubGroups = 3 // 最多 3 个子条件组
const maxConditionsPerGroup = 3 // 每组最多 3 个条件

/**
 * 更新条件
 * @param condition 条件对象
 */
const updateCondition = (condition: Trigger) => {
  trigger.value = condition
}

/**
 * 处理触发器类型变化事件
 * @param type 触发器类型
 */
const handleTriggerTypeChange = (type: number) => {
  trigger.value.type = type
  emit('trigger-type-change', type)
}

/** 添加子条件组 */
const addSubGroup = async () => {
  if (!trigger.value.conditionGroups) {
    trigger.value.conditionGroups = []
  }

  // 检查是否达到最大子组数量限制
  if (trigger.value.conditionGroups?.length >= maxSubGroups) {
    return
  }

  // 使用 nextTick 确保响应式更新完成后再添加新的子组
  await nextTick()
  if (trigger.value.conditionGroups) {
    trigger.value.conditionGroups.push([])
  }
}

/**
 * 移除子条件组
 * @param index 子条件组索引
 */
const removeSubGroup = (index: number) => {
  if (trigger.value.conditionGroups) {
    trigger.value.conditionGroups.splice(index, 1)
  }
}

/**
 * 更新子条件组
 * @param index 子条件组索引
 * @param subGroup 子条件组数据
 */
const updateSubGroup = (index: number, subGroup: any) => {
  if (trigger.value.conditionGroups) {
    trigger.value.conditionGroups[index] = subGroup
  }
}

/** 移除整个条件组 */
const removeConditionGroup = () => {
  trigger.value.conditionGroups = undefined
}
</script>