perf: 【IoT 物联网】场景联动优化 MainConditionConfig 的内容直接内联在主组件中

pull/808/head
puhui999 2025-08-07 14:42:25 +08:00
parent 0c952309b7
commit 6a26d8e4e5
2 changed files with 41 additions and 72 deletions

View File

@ -3,11 +3,37 @@
<div class="flex flex-col gap-16px">
<!-- 主条件配置 - 默认直接展示 -->
<div class="space-y-16px">
<MainConditionConfig
v-model="trigger"
:trigger-type="trigger.type"
@trigger-type-change="handleTriggerTypeChange"
/>
<!-- 主条件配置 -->
<div class="flex flex-col gap-16px">
<!-- 主条件配置 -->
<div class="space-y-16px">
<!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
<div
class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
>
<div class="flex items-center gap-12px">
<div class="flex items-center gap-8px text-16px font-600 text-green-700">
<div
class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
>
</div>
<span>主条件</span>
</div>
<el-tag size="small" type="success">必须满足</el-tag>
</div>
</div>
<!-- 主条件内容配置 -->
<MainConditionInnerConfig
:model-value="trigger"
@update:model-value="updateCondition"
:trigger-type="trigger.type"
@validate="handleValidate"
@trigger-type-change="handleTriggerTypeChange"
/>
</div>
</div>
</div>
<!-- 条件组配置 -->
@ -25,7 +51,7 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import MainConditionConfig from './MainConditionConfig.vue'
import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
import ConditionGroupContainerConfig from './ConditionGroupContainerConfig.vue'
import type { Trigger } from '@/api/iot/rule/scene'
@ -45,6 +71,15 @@ const emit = defineEmits<{
const trigger = useVModel(props, 'modelValue', emit)
//
const updateCondition = (condition: Trigger) => {
trigger.value = condition
}
const handleValidate = (result: { valid: boolean; message: string }) => {
emit('validate', result)
}
const handleTriggerTypeChange = (type: number) => {
trigger.value.type = type
emit('trigger-type-change', type)

View File

@ -1,66 +0,0 @@
<!-- 主条件配置组件 -->
<template>
<div class="flex flex-col gap-16px">
<!-- 主条件配置 -->
<!-- TODO @puhui999主条件是不是和附加条件组弄成一个风格都是占一行有个绿条 -->
<div class="space-y-16px">
<!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
<div
class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
>
<div class="flex items-center gap-12px">
<div class="flex items-center gap-8px text-16px font-600 text-green-700">
<div
class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
>
</div>
<span>主条件</span>
</div>
<el-tag size="small" type="success">必须满足</el-tag>
</div>
</div>
<!-- 主条件内容配置 -->
<MainConditionInnerConfig
:model-value="modelValue"
@update:model-value="updateCondition"
:trigger-type="triggerType"
@validate="handleValidate"
@trigger-type-change="handleTriggerTypeChange"
/>
</div>
</div>
</template>
<script setup lang="ts">
import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
import { Trigger } from '@/api/iot/rule/scene'
/** 主条件配置组件 */
defineOptions({ name: 'MainConditionConfig' })
defineProps<{
modelValue: Trigger
triggerType: number
}>()
const emit = defineEmits<{
(e: 'update:modelValue', value: Trigger): void
(e: 'validate', result: { valid: boolean; message: string }): void
(e: 'trigger-type-change', type: number): void
}>()
//
const updateCondition = (condition: Trigger) => {
emit('update:modelValue', condition)
}
const handleValidate = (result: { valid: boolean; message: string }) => {
emit('validate', result)
}
const handleTriggerTypeChange = (type: number) => {
emit('trigger-type-change', type)
}
</script>