perf：【IoT 物联网】场景联动表单校验规则优化

2025-08-03 22:33:37 +08:00
parent 1a9511bb04
commit 00e193d3e2
5 changed files with 133 additions and 281 deletions
--- a/src/views/iot/rule/scene/form/configs/AlertConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/AlertConfig.vue
@ -20,8 +20,12 @@
        >
          <div class="flex items-center justify-between w-full py-4px">
            <div class="flex-1">
-              <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ config.name }}</div>
-              <div class="text-12px text-[var(--el-text-color-secondary)]">{{ config.description }}</div>
+              <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{
+                config.name
+              }}</div>
+              <div class="text-12px text-[var(--el-text-color-secondary)]">{{
+                config.description
+              }}</div>
            </div>
            <el-tag :type="config.enabled ? 'success' : 'danger'" size="small">
              {{ config.enabled ? '启用' : '禁用' }}
@ -32,10 +36,15 @@
    </el-form-item>

    <!-- 告警配置详情 -->
-    <div v-if="selectedConfig" class="mt-16px p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+    <div
+      v-if="selectedConfig"
+      class="mt-16px p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
+    >
      <div class="flex items-center gap-8px mb-12px">
        <Icon icon="ep:bell" class="text-[var(--el-color-warning)] text-16px" />
-        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ selectedConfig.name }}</span>
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{
+          selectedConfig.name
+        }}</span>
        <el-tag :type="selectedConfig.enabled ? 'success' : 'danger'" size="small">
          {{ selectedConfig.enabled ? '启用' : '禁用' }}
        </el-tag>
@ -43,28 +52,24 @@
      <div class="space-y-8px">
        <div class="flex items-start gap-8px">
          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">描述：</span>
-          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.description }}</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{
+            selectedConfig.description
+          }}</span>
        </div>
        <div class="flex items-start gap-8px">
          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">通知方式：</span>
-          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{
+            getNotifyTypeName(selectedConfig.notifyType)
+          }}</span>
        </div>
        <div v-if="selectedConfig.receivers" class="flex items-start gap-8px">
          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">接收人：</span>
-          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.receivers.join(', ') }}</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{
+            selectedConfig.receivers.join(', ')
+          }}</span>
        </div>
      </div>
    </div>
-
-    <!-- 验证结果 -->
-    <div v-if="validationMessage" class="mt-16px">
-      <el-alert
-        :title="validationMessage"
-        :type="isValid ? 'success' : 'error'"
-        :closable="false"
-        show-icon
-      />
-    </div>
  </div>
 </template>

@ -80,7 +85,6 @@ interface Props {

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

 const props = defineProps<Props>()
@ -91,8 +95,6 @@ const localValue = useVModel(props, 'modelValue', emit)
 // 状态
 const loading = ref(false)
 const alertConfigs = ref<any[]>([])
-const validationMessage = ref('')
-const isValid = ref(true)

 // 计算属性
 const selectedConfig = computed(() => {
@ -110,40 +112,6 @@ const getNotifyTypeName = (type: number) => {
  return typeMap[type] || '未知'
 }

-// 事件处理
-const handleChange = () => {
-  updateValidationResult()
-}
-
-const updateValidationResult = () => {
-  if (!localValue.value) {
-    isValid.value = false
-    validationMessage.value = '请选择告警配置'
-    emit('validate', { valid: false, message: validationMessage.value })
-    return
-  }
-
-  const config = selectedConfig.value
-  if (!config) {
-    isValid.value = false
-    validationMessage.value = '告警配置不存在'
-    emit('validate', { valid: false, message: validationMessage.value })
-    return
-  }
-
-  if (!config.enabled) {
-    isValid.value = false
-    validationMessage.value = '选择的告警配置已禁用'
-    emit('validate', { valid: false, message: validationMessage.value })
-    return
-  }
-
-  // 验证通过
-  isValid.value = true
-  validationMessage.value = '告警配置验证通过'
-  emit('validate', { valid: true, message: validationMessage.value })
-}
-
 // API 调用
 const getAlertConfigs = async () => {
  loading.value = true
@ -184,20 +152,9 @@ const getAlertConfigs = async () => {
  }
 }

-// 监听值变化
-watch(
-  () => localValue.value,
-  () => {
-    updateValidationResult()
-  }
-)
-
 // 初始化
 onMounted(() => {
  getAlertConfigs()
-  if (localValue.value) {
-    updateValidationResult()
-  }
 })
 </script>

--- a/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
@ -39,16 +39,6 @@
        </el-alert>
      </div>
    </div>
-
-    <!-- 验证结果 -->
-    <div v-if="validationMessage" class="mt-16px">
-      <el-alert
-        :title="validationMessage"
-        :type="isValid ? 'success' : 'error'"
-        :closable="false"
-        show-icon
-      />
-    </div>
  </div>
 </template>

@ -66,21 +56,17 @@ const props = defineProps<{

 const emit = defineEmits<{
  (e: 'update:modelValue', value: ActionFormData): void
-  (e: 'validate', result: { valid: boolean; message: string }): void
 }>()

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

 // 状态
 const paramsJson = ref('')
-const validationMessage = ref('')
-const isValid = ref(true)

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

 const handleParamsChange = () => {
@ -90,42 +76,16 @@ const handleParamsChange = () => {
    } else {
      action.value.params = {}
    }
-    updateValidationResult()
  } catch (error) {
-    isValid.value = false
-    validationMessage.value = 'JSON格式错误'
-    emit('validate', { valid: false, message: validationMessage.value })
+    console.error('JSON格式错误:', error)
  }
 }

-const updateValidationResult = () => {
-  // 基础验证
-  if (!action.value.productId || !action.value.deviceId) {
-    isValid.value = false
-    validationMessage.value = '请选择产品和设备'
-    emit('validate', { valid: false, message: validationMessage.value })
-    return
-  }
-
-  if (!action.value.params || Object.keys(action.value.params).length === 0) {
-    isValid.value = false
-    validationMessage.value = '请配置控制参数'
-    emit('validate', { valid: false, message: validationMessage.value })
-    return
-  }
-
-  // 验证通过
-  isValid.value = true
-  validationMessage.value = '设备控制配置验证通过'
-  emit('validate', { valid: true, message: validationMessage.value })
-}
-
 // 初始化
 onMounted(() => {
  if (action.value.params) {
    paramsJson.value = JSON.stringify(action.value.params, null, 2)
  }
-  updateValidationResult()
 })

 // 监听参数变化
--- a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@ -6,7 +6,6 @@
      <MainConditionConfig
        v-model="trigger"
        :trigger-type="trigger.type"
-        @validate="handleMainConditionValidate"
        @trigger-type-change="handleTriggerTypeChange"
      />
    </div>
@ -17,7 +16,6 @@
      <ConditionGroupContainerConfig
        v-model="trigger.conditionGroups"
        :trigger-type="trigger.type"
-        @validate="handleConditionGroupValidate"
        @remove="removeConditionGroup"
      />
    </div>
@ -48,14 +46,6 @@ const emit = defineEmits<{

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

-// 验证状态
-const mainConditionValidation = ref<{ valid: boolean; message: string }>({
-  valid: true,
-  message: ''
-})
-const validationMessage = ref('')
-const isValid = ref(true)
-
 // 初始化主条件
 const initMainCondition = () => {
  // TODO @puhui999: 等到编辑回显时联调
@ -80,76 +70,12 @@ watch(
  { immediate: true }
 )

-const handleMainConditionValidate = (result: { valid: boolean; message: string }) => {
-  mainConditionValidation.value = result
-  updateValidationResult()
-}
-
 const handleTriggerTypeChange = (type: number) => {
  trigger.value.type = type
  emit('trigger-type-change', type)
 }

-// 事件处理
-const handleConditionGroupValidate = () => {
-  updateValidationResult()
-}
-
 const removeConditionGroup = () => {
  trigger.value.conditionGroups = undefined
 }
-
-const updateValidationResult = () => {
-  // 主条件验证
-  if (!mainConditionValidation.value.valid) {
-    isValid.value = false
-    validationMessage.value = mainConditionValidation.value.message
-    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.value) {
-    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>