yudao-ui-admin-vue3/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue

<!-- 设备触发配置组件 - 优化版本 -->
<template>
  <div class="flex flex-col gap-16px">
    <!-- 产品和设备选择 -->
    <ProductDeviceSelector
      v-model:product-id="trigger.productId"
      v-model:device-id="trigger.deviceId"
      @change="handleDeviceChange"
    />

    <!-- 主条件配置 -->
    <div v-if="needsConditions" class="space-y-16px">
      <div
        class="flex items-center gap-8px p-12px px-16px bg-blue-50 rounded-6px border border-blue-200"
      >
        <Icon icon="ep:star-filled" class="text-blue-500 text-18px" />
        <span class="text-14px font-600 text-blue-700">主条件配置</span>
        <el-tag size="small" type="primary">必须满足</el-tag>
      </div>

      <MainConditionConfig
        v-model="trigger.mainCondition"
        :trigger-type="trigger.type"
        @validate="handleMainConditionValidate"
      />
    </div>

    <!-- 条件组配置 -->
    <div v-if="needsConditions && trigger.mainCondition" class="space-y-16px">
      <div class="flex items-center justify-between">
        <div
          class="flex items-center gap-8px p-12px px-16px bg-green-50 rounded-6px border border-green-200"
        >
          <Icon icon="ep:connection" class="text-green-500 text-18px" />
          <span class="text-14px font-600 text-green-700">附加条件组</span>
          <el-tag size="small" type="success">与主条件为且关系</el-tag>
          <el-tag size="small" type="info">
            {{ trigger.conditionGroup?.subGroups?.length || 0 }}个子条件组
          </el-tag>
        </div>
        <el-button
          type="primary"
          size="small"
          @click="addConditionGroup"
          v-if="!trigger.conditionGroup"
        >
          <Icon icon="ep:plus" />
          添加条件组
        </el-button>
      </div>

      <!-- 条件组配置 -->
      <ConditionGroupContainerConfig
        v-if="trigger.conditionGroup"
        v-model="trigger.conditionGroup"
        :trigger-type="trigger.type"
        @validate="handleConditionGroupValidate"
        @remove="removeConditionGroup"
      />

      <!-- 空状态 -->
      <div v-else class="py-40px text-center">
        <el-empty description="暂无触发条件">
          <template #description>
            <div class="space-y-8px">
              <p class="text-[var(--el-text-color-secondary)]">暂无触发条件</p>
              <p class="text-12px text-[var(--el-text-color-placeholder)]">
                请使用上方的"添加条件组"按钮来设置触发规则
              </p>
            </div>
          </template>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import ProductDeviceSelector from '../selectors/ProductDeviceSelector.vue'
import MainConditionConfig from './MainConditionConfig.vue'
import ConditionGroupContainerConfig from './ConditionGroupContainerConfig.vue'
import {
  TriggerFormData,
  IotRuleSceneTriggerTypeEnum as TriggerTypeEnum
} from '@/api/iot/rule/scene/scene.types'

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

interface Props {
  modelValue: TriggerFormData
}

interface Emits {
  (e: 'update:modelValue', value: TriggerFormData): void
  (e: 'validate', result: { valid: boolean; message: string }): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

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

// 验证状态
const mainConditionValidation = ref<{ valid: boolean; message: string }>({
  valid: true,
  message: ''
})
const validationMessage = ref('')
const isValid = ref(true)

// 计算属性
const needsConditions = computed(() => {
  return trigger.value.type !== TriggerTypeEnum.DEVICE_STATE_UPDATE
})

// 新的事件处理函数
const handleMainConditionValidate = (result: { valid: boolean; message: string }) => {
  mainConditionValidation.value = result
  updateValidationResult()
}

const addConditionGroup = () => {
  if (!trigger.value.conditionGroup) {
    trigger.value.conditionGroup = {
      subGroups: []
    }
  }
}

// 事件处理
const handleDeviceChange = ({ productId, deviceId }: { productId?: number; deviceId?: number }) => {
  trigger.value.productId = productId
  trigger.value.deviceId = deviceId
  updateValidationResult()
}

const handleConditionGroupValidate = (result: { valid: boolean; message: string }) => {
  updateValidationResult()
}

const removeConditionGroup = () => {
  trigger.value.conditionGroup = undefined
}

const updateValidationResult = () => {
  // 基础验证
  if (!trigger.value.productId || !trigger.value.deviceId) {
    isValid.value = false
    validationMessage.value = '请选择产品和设备'
    emit('validate', { valid: false, message: validationMessage.value })
    return
  }

  // 设备状态变更不需要条件验证
  if (trigger.value.type === TriggerTypeEnum.DEVICE_STATE_UPDATE) {
    isValid.value = true
    validationMessage.value = '设备触发配置验证通过'
    emit('validate', { valid: true, message: validationMessage.value })
    return
  }

  // 主条件验证
  if (!trigger.value.mainCondition) {
    isValid.value = false
    validationMessage.value = '请配置主条件'
    emit('validate', { valid: false, message: validationMessage.value })
    return
  }

  // 主条件详细验证
  if (!mainConditionValidation.value.valid) {
    isValid.value = false
    validationMessage.value = `主条件配置错误: ${mainConditionValidation.value.message}`
    emit('validate', { valid: false, message: validationMessage.value })
    return
  }

  isValid.value = true
  validationMessage.value = '设备触发配置验证通过'
  emit('validate', { valid: isValid.value, message: validationMessage.value })
}

// 监听触发器类型变化
watch(
  () => trigger.value.type,
  () => {
    updateValidationResult()
  }
)

// 监听产品设备变化
watch(
  () => [trigger.value.productId, trigger.value.deviceId],
  () => {
    updateValidationResult()
  }
)
</script>