perf: 【IoT 物联网】场景联动优化 MainConditionConfig 的内容直接内联在主组件中
This commit is contained in:
@ -3,12 +3,38 @@
|
|||||||
<div class="flex flex-col gap-16px">
|
<div class="flex flex-col gap-16px">
|
||||||
<!-- 主条件配置 - 默认直接展示 -->
|
<!-- 主条件配置 - 默认直接展示 -->
|
||||||
<div class="space-y-16px">
|
<div class="space-y-16px">
|
||||||
<MainConditionConfig
|
<!-- 主条件配置 -->
|
||||||
v-model="trigger"
|
<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"
|
:trigger-type="trigger.type"
|
||||||
|
@validate="handleValidate"
|
||||||
@trigger-type-change="handleTriggerTypeChange"
|
@trigger-type-change="handleTriggerTypeChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 条件组配置 -->
|
<!-- 条件组配置 -->
|
||||||
<div class="space-y-16px">
|
<div class="space-y-16px">
|
||||||
@ -25,7 +51,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useVModel } from '@vueuse/core'
|
import { useVModel } from '@vueuse/core'
|
||||||
|
|
||||||
import MainConditionConfig from './MainConditionConfig.vue'
|
import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
|
||||||
import ConditionGroupContainerConfig from './ConditionGroupContainerConfig.vue'
|
import ConditionGroupContainerConfig from './ConditionGroupContainerConfig.vue'
|
||||||
import type { Trigger } from '@/api/iot/rule/scene'
|
import type { Trigger } from '@/api/iot/rule/scene'
|
||||||
|
|
||||||
@ -45,6 +71,15 @@ const emit = defineEmits<{
|
|||||||
|
|
||||||
const trigger = useVModel(props, 'modelValue', emit)
|
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) => {
|
const handleTriggerTypeChange = (type: number) => {
|
||||||
trigger.value.type = type
|
trigger.value.type = type
|
||||||
emit('trigger-type-change', type)
|
emit('trigger-type-change', type)
|
||||||
|
|||||||
@ -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>
|
|
||||||
Reference in New Issue
Block a user