ソースを参照

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

puhui999 9 ヶ月 前
コミット
6a26d8e4e5

+ 41 - 6
src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue

@@ -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)

+ 0 - 66
src/views/iot/rule/scene/form/configs/MainConditionConfig.vue

@@ -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>