yudao-ui-admin-vue3/src/views/iot/rule/scene/form/sections/ActionSection.vue

<!-- 执行器配置组件 -->
<!-- todo @puhui999：参考“触发器配置”，简化下。 -->
<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:setting" 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">{{ actions.length }}/{{ maxActions }}</el-tag>
        </div>
        <div class="flex items-center gap-8px">
          <el-button
            type="primary"
            size="small"
            @click="addAction"
            :disabled="actions.length >= maxActions"
          >
            <Icon icon="ep:plus" />
            添加执行器
          </el-button>
        </div>
      </div>
    </template>

    <div class="p-0">
      <!-- 空状态 -->
      <div v-if="actions.length === 0">
        <el-empty description="暂无执行器配置">
          <el-button type="primary" @click="addAction">
            <Icon icon="ep:plus" />
            添加第一个执行器
          </el-button>
        </el-empty>
      </div>

      <!-- 执行器列表 -->
      <div v-else class="space-y-16px">
        <div v-for="(action, index) in actions" :key="`action-${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:setting" class="text-[var(--el-color-success)] text-16px" />
              <span>执行器 {{ index + 1 }}</span>
              <el-tag :type="getActionTypeTag(action.type)" size="small">
                {{ getActionTypeName(action.type) }}
              </el-tag>
            </div>
            <div>
              <el-button
                type="danger"
                size="small"
                text
                @click="removeAction(index)"
                v-if="actions.length > 1"
              >
                <Icon icon="ep:delete" />
                删除
              </el-button>
            </div>
          </div>

          <div class="space-y-16px">
            <!-- 执行类型选择 -->
            <ActionTypeSelector
              :model-value="action.type"
              @update:model-value="(value) => updateActionType(index, value)"
              @change="onActionTypeChange(action, $event)"
            />

            <!-- 设备控制配置 -->
            <DeviceControlConfig
              v-if="isDeviceAction(action.type)"
              :model-value="action"
              @update:model-value="(value) => updateAction(index, value)"
              @validate="(result) => handleActionValidate(index, result)"
            />

            <!-- 告警配置 -->
            <AlertConfig
              v-if="isAlertAction(action.type)"
              :model-value="action.alertConfigId"
              @update:model-value="(value) => updateActionAlertConfig(index, value)"
              @validate="(result) => handleActionValidate(index, result)"
            />
          </div>
        </div>
      </div>

      <!-- 添加提示 -->
      <div v-if="actions.length > 0 && actions.length < maxActions" class="text-center py-16px">
        <el-button type="primary" plain @click="addAction">
          <Icon icon="ep:plus" />
          继续添加执行器
        </el-button>
        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxActions }} 个执行器 </span>
      </div>

      <!-- 验证结果 -->
      <div v-if="validationMessage" class="validation-result">
        <el-alert
          :title="validationMessage"
          :type="isValid ? 'success' : 'error'"
          :closable="false"
          show-icon
        />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import ActionTypeSelector from '../selectors/ActionTypeSelector.vue'
import DeviceControlConfig from '../configs/DeviceControlConfig.vue'
import AlertConfig from '../configs/AlertConfig.vue'
import {
  ActionFormData,
  IotRuleSceneActionTypeEnum as ActionTypeEnum
} from '@/api/iot/rule/scene/scene.types'
import { createDefaultActionData } from '../../utils/transform'

/** 执行器配置组件 */
defineOptions({ name: 'ActionSection' })

interface Props {
  actions: ActionFormData[]
}

interface Emits {
  (e: 'update:actions', value: ActionFormData[]): void
  (e: 'validate', result: { valid: boolean; message: string }): void
}

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

const actions = useVModel(props, 'actions', emit)

// 配置常量
const maxActions = 5

// 验证状态
const actionValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
const validationMessage = ref('')
const isValid = ref(true)

// 执行器类型映射
const actionTypeNames = {
  [ActionTypeEnum.DEVICE_PROPERTY_SET]: '属性设置',
  [ActionTypeEnum.DEVICE_SERVICE_INVOKE]: '服务调用',
  [ActionTypeEnum.ALERT_TRIGGER]: '触发告警',
  [ActionTypeEnum.ALERT_RECOVER]: '恢复告警'
}

const actionTypeTags = {
  [ActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
  [ActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
  [ActionTypeEnum.ALERT_TRIGGER]: 'danger',
  [ActionTypeEnum.ALERT_RECOVER]: 'warning'
}

// 工具函数
const isDeviceAction = (type: number) => {
  return [ActionTypeEnum.DEVICE_PROPERTY_SET, ActionTypeEnum.DEVICE_SERVICE_INVOKE].includes(type)
}

const isAlertAction = (type: number) => {
  return [ActionTypeEnum.ALERT_TRIGGER, ActionTypeEnum.ALERT_RECOVER].includes(type)
}

const getActionTypeName = (type: number) => {
  return actionTypeNames[type] || '未知类型'
}

const getActionTypeTag = (type: number) => {
  return actionTypeTags[type] || 'info'
}

// 事件处理
const addAction = () => {
  if (actions.value.length >= maxActions) {
    return
  }

  const newAction = createDefaultActionData()
  actions.value.push(newAction)
}

const removeAction = (index: number) => {
  actions.value.splice(index, 1)
  delete actionValidations.value[index]

  // 重新索引验证结果
  const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
  Object.keys(actionValidations.value).forEach((key) => {
    const numKey = parseInt(key)
    if (numKey > index) {
      newValidations[numKey - 1] = actionValidations.value[numKey]
    } else if (numKey < index) {
      newValidations[numKey] = actionValidations.value[numKey]
    }
  })
  actionValidations.value = newValidations

  updateValidationResult()
}

const updateActionType = (index: number, type: number) => {
  actions.value[index].type = type
  onActionTypeChange(actions.value[index], type)
}

const updateAction = (index: number, action: ActionFormData) => {
  actions.value[index] = action
}

const updateActionAlertConfig = (index: number, alertConfigId?: number) => {
  actions.value[index].alertConfigId = alertConfigId
}

const onActionTypeChange = (action: ActionFormData, type: number) => {
  // 清理不相关的配置
  if (isDeviceAction(type)) {
    action.alertConfigId = undefined
    if (!action.params) {
      action.params = {}
    }
  } else if (isAlertAction(type)) {
    action.productId = undefined
    action.deviceId = undefined
    action.params = undefined
  }
}

const handleActionValidate = (index: number, result: { valid: boolean; message: string }) => {
  actionValidations.value[index] = result
  updateValidationResult()
}

const updateValidationResult = () => {
  const validations = Object.values(actionValidations.value)
  const allValid = validations.every((v) => v.valid)
  const hasValidations = validations.length > 0

  if (!hasValidations) {
    isValid.value = true
    validationMessage.value = ''
  } else if (allValid) {
    isValid.value = true
    validationMessage.value = '所有执行器配置验证通过'
  } else {
    isValid.value = false
    const errorMessages = validations.filter((v) => !v.valid).map((v) => v.message)
    validationMessage.value = `执行器配置错误: ${errorMessages.join('; ')}`
  }

  emit('validate', { valid: isValid.value, message: validationMessage.value })
}

// 监听执行器数量变化
watch(
  () => actions.value.length,
  () => {
    updateValidationResult()
  }
)
</script>