admin-vue3/src/views/iot/rule/scene/components/action/DeviceControlAction.vue

<template>
  <div class="bg-[#dbe5f6] flex p-10px">
    <div class="">
      <div
        class="flex items-center justify-around mb-10px last:mb-0"
        v-for="(parameter, index) in parameters"
        :key="index"
      >
        <!-- 选择服务 -->
        <el-select
          v-if="IotDeviceMessageTypeEnum.SERVICE === deviceControlConfig.type"
          v-model="parameter.identifier0"
          class="!w-240px mr-10px"
          clearable
          placeholder="请选择服务"
        >
          <el-option
            v-for="thingModel in getThingModelTSLServices"
            :key="thingModel.identifier"
            :label="thingModel.name"
            :value="thingModel.identifier"
          />
        </el-select>
        <el-select
          v-model="parameter.identifier"
          class="!w-240px mr-10px"
          clearable
          placeholder="请选择物模型"
        >
          <el-option
            v-for="thingModel in thingModels(parameter?.identifier0)"
            :key="thingModel.identifier"
            :label="thingModel.name"
            :value="thingModel.identifier"
          />
        </el-select>
        <ThingModelParamInput
          class="!w-240px mr-10px"
          v-model="parameter.value"
          :thing-model="
            thingModels(parameter?.identifier0)?.find(
              (item) => item.identifier === parameter.identifier
            )
          "
        />
        <el-tooltip content="删除参数" placement="top">
          <el-button type="danger" circle size="small" @click="removeParameter(index)">
            <Icon icon="ep:delete" />
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 添加参数 -->
    <div class="flex flex-1 flex-col items-center justify-center w-60px h-a">
      <el-tooltip content="添加参数" placement="top">
        <el-button type="primary" circle size="small" @click="addParameter">
          <Icon icon="ep:plus" />
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
import { ThingModelApi } from '@/api/iot/thingmodel'
import {
  ActionDeviceControl,
  IotDeviceMessageIdentifierEnum,
  IotDeviceMessageTypeEnum,
  IotRuleSceneActionTypeEnum
} from '@/api/iot/rule/scene/scene.types'
import ThingModelParamInput from '../ThingModelParamInput.vue'

/** 设备控制执行器组件 */
defineOptions({ name: 'DeviceControlAction' })

const props = defineProps<{
  modelValue: any
  actionType: number
  productId?: number
  productKey?: string
}>()
const emits = defineEmits(['update:modelValue'])
const deviceControlConfig = useVModel(props, 'modelValue', emits) as Ref<ActionDeviceControl>

const message = useMessage()

/** 执行器参数 */
const parameters = ref<{ identifier: string; value: any; identifier0?: string }[]>([])
const addParameter = () => {
  if (!props.productId) {
    message.warning('请先选择一个产品')
    return
  }
  parameters.value.push({ identifier: '', value: undefined })
}
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
      }
      // 单独处理服务的情况
      if (IotDeviceMessageTypeEnum.SERVICE === deviceControlConfig.value.type) {
        if (!parameter.identifier0) {
          continue
        }
        deviceControlConfig.value.data[parameter.identifier0] = {
          identifier: parameter.identifier,
          value: parameter.value
        }
        continue
      }
      deviceControlConfig.value.data[parameter.identifier] = parameter.value
    }
  },
  { deep: true }
)

/** 初始化设备控制执行器结构 */
const initDeviceControlConfig = () => {
  if (!deviceControlConfig.value) {
    deviceControlConfig.value = {
      productKey: '',
      deviceNames: [],
      type:
        props.actionType === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
          ? IotDeviceMessageTypeEnum.PROPERTY
          : IotDeviceMessageTypeEnum.SERVICE,
      identifier:
        props.actionType === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
          ? IotDeviceMessageIdentifierEnum.PROPERTY_SET
          : IotDeviceMessageIdentifierEnum.SERVICE_INVOKE,
      data: {}
    } as ActionDeviceControl
  } else {
    // 单独处理服务的情况
    if (IotDeviceMessageTypeEnum.SERVICE === deviceControlConfig.value.type) {
      // 参数回显
      parameters.value = Object.entries(deviceControlConfig.value.data).map(([key, value]) => ({
        identifier0: key,
        identifier: value.identifier,
        value: value.value
      }))
      return
    }
    // 参数回显
    parameters.value = Object.entries(deviceControlConfig.value.data).map(([key, value]) => ({
      identifier: key,
      value: value
    }))
  }

  // 确保 data 对象存在
  if (!deviceControlConfig.value.data) {
    deviceControlConfig.value.data = {}
  }
}

/** 获取产品物模型 */
const thingModelTSL = ref<any>()
const getThingModelTSL = async () => {
  if (!props.productId) {
    return
  }
  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(props.productId)
}
const thingModels = computed(() => (identifier?: string): any[] => {
  if (isEmpty(thingModelTSL.value)) {
    return []
  }
  switch (deviceControlConfig.value.type) {
    case IotDeviceMessageTypeEnum.PROPERTY:
      return thingModelTSL.value?.properties || []
    case IotDeviceMessageTypeEnum.SERVICE:
      const service = thingModelTSL.value.services?.find(
        (item: any) => item.identifier === identifier
      )
      return service?.inputParams || []
  }
  return []
})
/** 获取物模型服务 */
const getThingModelTSLServices = computed(() => thingModelTSL.value?.services || [])

/** 监听 productId 变化 */
watch(
  () => props.productId,
  () => {
    getThingModelTSL()
    if (deviceControlConfig.value && deviceControlConfig.value.productKey === props.productKey) {
      return
    }
    // 当产品ID变化时，清空原有数据
    deviceControlConfig.value.data = {}
    parameters.value = []
  }
)

/** 监听执行类型变化 */
watch(
  () => props.actionType,
  (val: any) => {
    if (!val) {
      return
    }
    // 切换执行类型时清空参数
    deviceControlConfig.value.data = {}
    parameters.value = []
    if (val === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET) {
      deviceControlConfig.value.type = IotDeviceMessageTypeEnum.PROPERTY
      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.PROPERTY_SET
    } else if (val === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE) {
      deviceControlConfig.value.type = IotDeviceMessageTypeEnum.SERVICE
      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.SERVICE_INVOKE
    }
  }
)

/** 监听消息类型变化 */
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>