UPDATE: VERSION-20260317

modeler/src/views/decision/rule/PlatformSelect.vue

@@ -3,12 +3,13 @@
     <!-- 平台选择框 -->
     <a-select
       style="width:280px"
-      v-model:value="selectedPlatformId"
-      :placeholder="'请选择平台'"
+      v-model:value="innerPlatformId"
+      placeholder="请选择平台"
+      :disabled="loading"
     >
       <a-select-option
         v-for="item in platforms"
-        :key="item.id"
+        :key="`platform-${item.id}`"
         :value="item.id"
       >
         {{ item.description || item.name || '未命名平台' }}
@@ -18,13 +19,13 @@
     <!-- 组件选择框 -->
     <a-select
       style="width:280px;"
-      v-model:value="selectedComponentId"
-      :placeholder="'请选择组件'"
-      :disabled="!selectedPlatform"
+      v-model:value="innerComponentId"
+      placeholder="请选择组件"
+      :disabled="!innerPlatformId || loading"
     >
       <a-select-option
         v-for="item in selectedPlatformComponents"
-        :key="item.id"
+        :key="`component-${item.id}`"
         :value="item.id"
       >
         {{ item.description || item.name || '未命名组件' }}
@@ -35,134 +36,116 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, watch } from 'vue';
-import type { Platform, PlatformComponent, PlatformComponentPayload, PlatformWithComponents } from '../types';
+import type { Platform, PlatformComponent, PlatformComponentPayload, PlatformWithComponents, PlatformWithComponentsResponse } from '../types';
 import { findAllPlatformWithComponents } from './api';
 
 export default defineComponent({
+  name: 'PlatformSelect',
   props: {
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    payload: {
-      type: [Object,null] as PropType<PlatformComponentPayload | null>,
+    platformId: {
+      type: [Number, null] as PropType<number | null>,
       required: false,
-      default: ({
-        platform: null,
-        component: null,
-      }),
+      default: null,
+    },
+    componentId: {
+      type: [Number, null] as PropType<number | null>,
+      required: false,
+      default: null,
     },
   },
-  emits: [
-    'change',
-  ],
+  emits: {
+    change: (payload: PlatformComponentPayload) => true,
+  },
   setup(props, { emit }) {
+    const loading = ref<boolean>(true);
     const platforms = ref<PlatformWithComponents[]>([]);
-    const platformMapping = ref<Map<number, PlatformWithComponents>>(new Map());
-    const componentsMapping = ref<Map<number, PlatformComponent>>(new Map());
+    const platformMap = ref<Map<number, Platform>>(new Map());
+    const componentMap = ref<Map<number, PlatformComponent>>(new Map());
 
-    const selectedPlatformComponents = ref<PlatformComponent[]>([])
+    const innerPlatformId = ref<number | null>(null);
+    const innerComponentId = ref<number | null>(null);
 
-    const selectedPlatform = ref<PlatformWithComponents|null>(null);
-    const selectedPlatformId = ref<number|null>(null);
+    const selectedPlatformComponents = computed(() => {
+      const platform = platforms.value.find(p => p.id === innerPlatformId.value);
+      return platform?.components || [];
+    });
 
-    const selectedComponent = ref<PlatformComponent|null>(null);
-    const selectedComponentId = ref<number|null>(null);
+    const loadData = async () => {
+      try {
+        loading.value = true;
+        const res: PlatformWithComponentsResponse = await findAllPlatformWithComponents();
+        const data = res.data || [];
 
-    const load = () => {
-      platforms.value = [];
-      platformMapping.value.clear();
-      componentsMapping.value.clear();
+        platforms.value = data;
+        platformMap.value.clear();
+        componentMap.value.clear();
 
-      findAllPlatformWithComponents().then(re => {
-        platforms.value = re.data ?? [];
-        platforms.value.forEach(platform => {
-          platformMapping.value.set(platform.id, platform);
-          if(platform.components){
-            platform.components.forEach(comp=> {
-              componentsMapping.value.set(comp.id, comp)
-            })
-          }
+        data.forEach(platform => {
+          platformMap.value.set(platform.id, platform);
+          platform.components?.forEach(component => {
+            componentMap.value.set(component.id, component);
+          });
         });
-      }).catch(err => {
-        console.error('加载平台组件数据失败：', err);
-      });
+
+        innerPlatformId.value = props.platformId;
+        innerComponentId.value = props.componentId;
+      } catch (err) {
+        console.error('加载平台组件失败:', err);
+      } finally {
+        loading.value = false;
+      }
     };
 
-    const triggerChange = ()=> {
+    const emitChange = () => {
+      // 根据ID获取完整对象
+      const platform = platformMap.value.get(innerPlatformId.value || -1) || null;
+      const component = componentMap.value.get(innerComponentId.value || -1) || null;
+
+      const validComponent = component && component.platformId === innerPlatformId.value
+        ? component
+        : null;
+
       emit('change', {
-        platform: selectedPlatform.value ? {
-          id: selectedPlatform.value?.id,
-          name: selectedPlatform.value?.name,
-          description: selectedPlatform.value?.description,
+        platform: platform ? {
+          id: platform.id,
+          name: platform.name,
+          description: platform.description,
+          scenarioId: platform.scenarioId,
         } : null,
-        component: selectedComponent.value ? {
-          id: selectedComponent.value.id,
-          name: selectedComponent.value.name,
-          description: selectedComponent.value.description,
-          num: selectedComponent.value.num,
-          platformId: selectedComponent.value.platformId,
-          type: selectedComponent.value.type,
-        } : null,
-      })
-    }
+        component: validComponent,
+      } as PlatformComponentPayload);
+    };
 
-    watch(()=> props.payload, (n: PlatformComponentPayload | null | undefined)=> {
-      if(n && n.platform){
-        selectedPlatform.value = platformMapping.value.get(n.platform?.id) ?? null;
-        selectedPlatformId.value = selectedPlatform.value?.id ?? null;
-        selectedPlatformComponents.value = selectedPlatform.value?.components ?? []
-      } else {
-        selectedPlatform.value = null;
-        selectedPlatformId.value = null;
-        selectedPlatformComponents.value = []
+    watch([() => props.platformId, () => props.componentId],
+      ([newPlatformId, newComponentId]) => {
+        if (!loading.value) {
+          innerPlatformId.value = newPlatformId;
+          innerComponentId.value = newComponentId;
+        }
+      },
+      { immediate: true, deep: false },
+    );
+
+    watch(innerPlatformId, (newVal) => {
+      if (newVal !== innerPlatformId.value) {
+        innerComponentId.value = null;
       }
+      emitChange();
+    });
 
-      if(n && n.component){
-        selectedComponent.value = n.component;
-        selectedComponentId.value = selectedComponent.value?.id ?? null;
-      } else {
-        selectedComponent.value = null;
-        selectedComponentId.value = null;
-      }
+    watch(innerComponentId, emitChange);
 
-      console.error('watch',n)
-    }, {deep: true, immediate: true})
-
-
-    watch(()=> selectedPlatformId.value,(n: null | number)=> {
-      if(n && platformMapping.value.get(n)){
-        selectedPlatform.value = platformMapping.value.get(n) ?? null;
-        selectedPlatformComponents.value = selectedPlatform.value?.components ?? []
-      } else {
-        selectedPlatform.value = null;
-        selectedPlatformComponents.value = []
-      }
-      selectedComponentId.value = null;
-
-      triggerChange();
-    })
-
-    watch(()=> selectedComponentId.value,(n: null | number)=> {
-      if(n && componentsMapping.value.get(n)){
-        selectedComponent.value = componentsMapping.value.get(n) ?? null;
-      } else {
-        selectedComponent.value = null;
-      }
-
-      triggerChange();
-    })
-
-    onMounted(() => load());
+    onMounted(() => {
+      loadData();
+    });
 
     return {
+      loading,
       platforms,
       selectedPlatformComponents,
-      selectedPlatform,
-      selectedPlatformId,
-      selectedComponent,
-      selectedComponentId,
+      innerPlatformId,
+      innerComponentId,
     };
-  },
+  }
 });
 </script>