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

<!-- 当前时间条件配置组件 -->
<template>
  <div class="flex flex-col gap-16px">
    <el-row :gutter="16">
      <!-- 时间操作符选择 -->
      <el-col :span="8">
        <el-form-item label="时间条件" required>
          <el-select
            :model-value="condition.operator"
            @update:model-value="(value) => updateConditionField('operator', value)"
            placeholder="请选择时间条件"
            class="w-full"
          >
            <el-option
              v-for="option in timeOperatorOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
              <div class="flex items-center justify-between w-full">
                <div class="flex items-center gap-8px">
                  <Icon :icon="option.icon" :class="option.iconClass" />
                  <span>{{ option.label }}</span>
                </div>
                <el-tag :type="option.tag as any" size="small">{{ option.category }}</el-tag>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 时间值输入 -->
      <el-col :span="8">
        <el-form-item label="时间值" required>
          <el-time-picker
            v-if="needsTimeInput"
            :model-value="timeValue"
            @update:model-value="handleTimeValueChange"
            placeholder="请选择时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            class="w-full"
          />
          <el-date-picker
            v-else-if="needsDateInput"
            :model-value="timeValue"
            @update:model-value="handleTimeValueChange"
            type="datetime"
            placeholder="请选择日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="w-full"
          />
          <div v-else class="text-[var(--el-text-color-placeholder)] text-14px">
            无需设置时间值
          </div>
        </el-form-item>
      </el-col>

      <!-- 第二个时间值（范围条件） -->
      <el-col :span="8" v-if="needsSecondTimeInput">
        <el-form-item label="结束时间" required>
          <el-time-picker
            v-if="needsTimeInput"
            :model-value="timeValue2"
            @update:model-value="handleTimeValue2Change"
            placeholder="请选择结束时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            class="w-full"
          />
          <el-date-picker
            v-else
            :model-value="timeValue2"
            @update:model-value="handleTimeValue2Change"
            type="datetime"
            placeholder="请选择结束日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="w-full"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { IotRuleSceneTriggerTimeOperatorEnum } from '@/views/iot/utils/constants'
import type { TriggerCondition } from '@/api/iot/rule/scene'

/** 当前时间条件配置组件 */
defineOptions({ name: 'CurrentTimeConditionConfig' })

const props = defineProps<{
  modelValue: TriggerCondition
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: TriggerCondition): void
}>()

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

// 时间操作符选项
const timeOperatorOptions = [
  {
    value: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
    label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
    icon: 'ep:arrow-left',
    iconClass: 'text-blue-500',
    tag: 'primary',
    category: '时间点'
  },
  {
    value: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
    label: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.name,
    icon: 'ep:arrow-right',
    iconClass: 'text-green-500',
    tag: 'success',
    category: '时间点'
  },
  {
    value: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
    label: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.name,
    icon: 'ep:sort',
    iconClass: 'text-orange-500',
    tag: 'warning',
    category: '时间段'
  },
  {
    value: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
    label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
    icon: 'ep:position',
    iconClass: 'text-purple-500',
    tag: 'info',
    category: '时间点'
  },
  {
    value: IotRuleSceneTriggerTimeOperatorEnum.TODAY.value,
    label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
    icon: 'ep:calendar',
    iconClass: 'text-red-500',
    tag: 'danger',
    category: '日期'
  }
]

// 计算属性：是否需要时间输入
const needsTimeInput = computed(() => {
  const timeOnlyOperators = [
    IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
    IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
    IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
    IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value
  ]
  return timeOnlyOperators.includes(condition.value.operator as any)
})

// 计算属性：是否需要日期输入
const needsDateInput = computed(() => {
  return false // 暂时不支持日期输入，只支持时间
})

// 计算属性：是否需要第二个时间输入
const needsSecondTimeInput = computed(() => {
  return condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
})

// 计算属性：从 param 中解析时间值
const timeValue = computed(() => {
  if (!condition.value.param) return ''
  const params = condition.value.param.split(',')
  return params[0] || ''
})

// 计算属性：从 param 中解析第二个时间值
const timeValue2 = computed(() => {
  if (!condition.value.param) return ''
  const params = condition.value.param.split(',')
  return params[1] || ''
})

/**
 * 更新条件字段
 * @param field 字段名
 * @param value 字段值
 */
const updateConditionField = (field: any, value: any) => {
  condition.value[field] = value
}

/**
 * 处理第一个时间值变化
 * @param value 时间值
 */
const handleTimeValueChange = (value: string) => {
  const currentParams = condition.value.param ? condition.value.param.split(',') : []
  currentParams[0] = value || ''

  // 如果是范围条件，保留第二个值；否则只保留第一个值
  if (needsSecondTimeInput.value) {
    condition.value.param = currentParams.slice(0, 2).join(',')
  } else {
    condition.value.param = currentParams[0]
  }
}

/**
 * 处理第二个时间值变化
 * @param value 时间值
 */
const handleTimeValue2Change = (value: string) => {
  const currentParams = condition.value.param ? condition.value.param.split(',') : ['']
  currentParams[1] = value || ''
  condition.value.param = currentParams.slice(0, 2).join(',')
}

/** 监听操作符变化，清理不相关的时间值 */
watch(
  () => condition.value.operator,
  (newOperator) => {
    if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
      // 今日条件不需要时间参数
      condition.value.param = ''
    } else if (!needsSecondTimeInput.value) {
      // 非范围条件只保留第一个时间值
      const currentParams = condition.value.param ? condition.value.param.split(',') : []
      condition.value.param = currentParams[0] || ''
    }
  }
)
</script>