WholeProcessPlatform/frontend/src/components/MapModal/index.vue

<template>
  <a-modal
    :open="visible"
    :title="title"
    width="80vw"
    :footer="null"
    :closable="true"
    @cancel="handleClose"
    :destroyOnClose="true"
    class="map-modal"
  >
    <a-tabs :active-key="currentActiveKey" @change="onTabChange">
      <a-tab-pane v-for="tab in tabsConfig" :key="tab.key" :tab="tab.name">
        <div class="content">
          <!-- 基本信息组件 -->
          <BasicInfo v-if="currentActiveKey === 'basicInfo'" :url="tab.url" />
          <!-- 地图组件 -->
          <!-- <MapView v-else-if="currentActiveKey === 'mapView'" :data="modalData" /> -->
          <!-- 周边配套组件 -->
          <!-- <SurroundingInfo
            v-else-if="currentActiveKey === 'surrounding'"
            :data="modalData"
          /> -->
        </div>
      </a-tab-pane>
      <template #rightExtra>
        <a-tooltip :title="!isEngConfig ? '' : '该电站无专题配置'">
          <a-button type="primary" :disabled="isEngConfig">
            <i class="icon iconfont icon-topic mr-[5px]"></i>
            电站专题
          </a-button></a-tooltip
        >
      </template>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
// 导入预定义的 Tab 内容组件
import BasicInfo from "./components/BasicInfo.vue";
import { useModelStore } from "@/store/modules/model";
import { handleTabs } from "./setting.config";

const modelStore = useModelStore();
const tabsConfig = ref([]);
// 判断是否显示电站专题配置
const isEngConfig = ref(true);
// import MapView from './components/MapView.vue';
// import SurroundingInfo from './components/SurroundingInfo.vue';

// 定义 Tab 配置项接口
interface TabItem {
  key: string;
  title: string;
  url: string;
}

// 定义 Props
const props = defineProps<{
  visible: boolean;
  title?: string;
  activeKey?: string; // 外部控制的当前激活 tab
  data?: any; // 可选：传递给内部组件的数据
}>();

// 定义 Emits
// 添加 'update:activeKey' 以支持 v-model:active-key
const emit = defineEmits<{
  (e: "update:visible", value: boolean): void;
  (e: "change", key: string): void;
}>();

// 内部维护的 activeKey
const currentActiveKey = ref<string>("");

// 监听外部传入的 activeKey 变化，同步到内部状态
watch(
  () => props.activeKey,
  (newVal) => {
    if (newVal && newVal !== currentActiveKey.value) {
      currentActiveKey.value = newVal;
    }
  },
  { immediate: true }
);
watch(
  () => modelStore.params,
  (newVal) => {
    console.log(newVal);
    tabsConfig.value = handleTabs(newVal);
    let value = tabsConfig.value.find((item: any) => item.default);
    currentActiveKey.value = value?.key;
  },
  { deep: true, immediate: true }
);
// 监听内部 tab 切换
const onTabChange = (key: string) => {
  currentActiveKey.value = key;
  // 通知父组件更新 activeKey (支持 v-model)
  // 通知父组件发生了切换事件 (用于业务逻辑，如加载数据)
  emit("change", key);
};

// 关闭弹窗
const handleClose = () => {
  emit("update:visible", false);
};

// 为了方便模板中使用，将 props.data 暴露给模板
const modalData = ref(props.data);
watch(
  () => props.data,
  (newVal) => {
    modalData.value = newVal;
  }
);
</script>

<style lang="scss" scoped>
.map-modal {
  .content {
    min-height: 600px;
  }
}
</style>