auto-solution/modeler/src/views/decision/rule/PlatformSelect.vue

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