UPDATE: VERSION-20260316

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

@@ -0,0 +1,168 @@
+<template>
+  <a-space>
+    <!-- 平台选择框 -->
+    <a-select
+      style="width:280px"
+      v-model:value="selectedPlatformId"
+      :placeholder="'请选择平台'"
+    >
+      <a-select-option
+        v-for="item in platforms"
+        :key="item.id"
+        :value="item.id"
+      >
+        {{ item.description || item.name || '未命名平台' }}
+      </a-select-option>
+    </a-select>
+
+    <!-- 组件选择框 -->
+    <a-select
+      style="width:280px;"
+      v-model:value="selectedComponentId"
+      :placeholder="'请选择组件'"
+      :disabled="!selectedPlatformId"
+    >
+      <a-select-option
+        v-for="item in filteredComponents"
+        :key="item.id"
+        :value="item.id"
+      >
+        {{ item.description || item.name || '未命名组件' }}
+      </a-select-option>
+    </a-select>
+  </a-space>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from 'vue';
+import type { Platform, PlatformComponent, PlatformComponentPayload, PlatformWithComponents } from '../types';
+import { findAllPlatformWithComponents } from './api';
+
+export default defineComponent({
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    platform: {
+      type: [Object,null] as PropType<Platform | null>,
+      required: false,
+      default: () => ({}), // 设置默认空对象，避免undefined
+    },
+    component: {
+      type: [Object, null] as PropType<PlatformComponent | null>,
+      required: false,
+      default: () => ({}), // 设置默认空对象，避免undefined
+    },
+  },
+  emits: [
+    // 只保留统一的update事件
+    'update',
+  ],
+  setup(props, { emit }) {
+    // 平台列表
+    const platforms = ref<PlatformWithComponents[]>([]);
+    // 选中的平台ID（兼容props初始值）
+    const selectedPlatformId = ref<number | undefined>(props.platform?.id);
+    // 选中的组件ID（兼容props初始值）
+    const selectedComponentId = ref<number | undefined>(props.component?.id);
+
+    // 平台映射表
+    const platformMapping = ref<Map<number, PlatformWithComponents>>(new Map());
+
+    // 计算属性：根据选中的平台过滤对应的组件列表
+    const filteredComponents = computed<PlatformComponent[]>(() => {
+      if (!selectedPlatformId.value) return [];
+      const currentPlatform = platformMapping.value.get(selectedPlatformId.value);
+      return currentPlatform?.components ?? [];
+    });
+
+    // 封装统一的update事件触发函数
+    const triggerUpdateEvent = () => {
+      // 获取当前选中的平台对象
+      const selectedPlatform = selectedPlatformId.value
+        ? platformMapping.value.get(selectedPlatformId.value) || ({} as Platform)
+        : ({} as Platform);
+
+      // 获取当前选中的组件对象
+      const selectedComponent = selectedComponentId.value
+        ? filteredComponents.value.find(item => item.id === selectedComponentId.value) || ({} as PlatformComponent)
+        : ({} as PlatformComponent);
+
+      // 触发统一的update事件，传递平台和组件信息
+      emit('update', {
+        platform: {
+          id: selectedPlatform.id,
+          name: selectedPlatform.name,
+          description: selectedPlatform.description,
+        },
+        component: selectedComponent,
+      } as PlatformComponentPayload);
+    };
+
+    // 加载平台和组件数据
+    const load = () => {
+      platforms.value = [];
+      platformMapping.value.clear();
+
+      findAllPlatformWithComponents().then(re => {
+        platforms.value = re.data ?? [];
+
+        // 构建平台映射表
+        platforms.value.forEach(platform => {
+          platformMapping.value.set(platform.id, platform);
+        });
+
+        // 数据加载完成后，若有初始平台值，自动匹配组件列表
+        if (props.platform?.id) {
+          selectedPlatformId.value = props.platform.id;
+          // 若有初始组件值，校验是否属于当前平台
+          if (props.component?.id) {
+            const currentComponents = filteredComponents.value;
+            const hasComponent = currentComponents.some(item => item.id === Number(props.component?.id ?? 0));
+            // 若初始组件不属于当前平台，清空组件选中值
+            if (!hasComponent) {
+              selectedComponentId.value = undefined;
+            }
+          }
+        }
+        // 数据加载完成后触发一次update事件
+        triggerUpdateEvent();
+      }).catch(err => {
+        console.error('加载平台组件数据失败：', err);
+      });
+    };
+
+    // 监听平台选择变化
+    watch(selectedPlatformId, () => {
+      // 平台变更时，清空组件选中值
+      selectedComponentId.value = undefined;
+      // 触发统一的update事件
+      triggerUpdateEvent();
+    });
+
+    // 监听组件选择变化
+    watch(selectedComponentId, () => {
+      // 触发统一的update事件
+      triggerUpdateEvent();
+    });
+
+    watch(() => props.platform?.id, (newVal) => {
+      selectedPlatformId.value = newVal;
+    }, { immediate: true }); // 立即执行，确保初始值同步
+
+    watch(() => props.component?.id, (newVal) => {
+      selectedComponentId.value = newVal;
+    }, { immediate: true }); // 立即执行，确保初始值同步
+
+    onMounted(() => load());
+
+    return {
+      platforms,
+      selectedPlatformId,
+      selectedComponentId,
+      filteredComponents,
+    };
+  },
+});
+</script>