119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<a-modal
|
||
|
|
v-model:open="visible"
|
||
|
|
:title="title"
|
||
|
|
width="800px"
|
||
|
|
:footer="null"
|
||
|
|
:closable="true"
|
||
|
|
@cancel="handleClose"
|
||
|
|
class="map-modal"
|
||
|
|
>
|
||
|
|
<div class="map-modal-content">
|
||
|
|
<a-tabs v-model:activeKey="currentActiveKey">
|
||
|
|
<a-tab-pane
|
||
|
|
v-for="tab in tabsConfig"
|
||
|
|
:key="tab.key"
|
||
|
|
:tab="tab.title"
|
||
|
|
>
|
||
|
|
<!-- 根据 key 动态渲染子组件 -->
|
||
|
|
<div v-if="currentActiveKey === 'basicInfo'" class="tab-pane-container">
|
||
|
|
<!-- 假设 BasicInfo 是预定义的组件 -->
|
||
|
|
<BasicInfo :data="modalData" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="currentActiveKey === 'mapView'" class="tab-pane-container">
|
||
|
|
<!-- 假设 MapView 是预定义的组件 -->
|
||
|
|
<MapView :data="modalData" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="currentActiveKey === 'surrounding'" class="tab-pane-container">
|
||
|
|
<!-- 其他预定义组件 -->
|
||
|
|
<SurroundingInfo :data="modalData" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="empty-placeholder">
|
||
|
|
未找到对应 Key ({{ currentActiveKey }}) 的组件配置
|
||
|
|
</div>
|
||
|
|
</a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
</div>
|
||
|
|
</a-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, watch } from 'vue';
|
||
|
|
// 导入预定义的 Tab 内容组件
|
||
|
|
// 请根据实际路径调整导入地址
|
||
|
|
import BasicInfo from './components/BasicInfo.vue';
|
||
|
|
import MapView from './components/MapView.vue';
|
||
|
|
import SurroundingInfo from './components/SurroundingInfo.vue';
|
||
|
|
|
||
|
|
// 定义 Tab 配置项接口
|
||
|
|
interface TabItem {
|
||
|
|
key: string;
|
||
|
|
title: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 定义 Props
|
||
|
|
const props = defineProps<{
|
||
|
|
visible: boolean;
|
||
|
|
title?: string;
|
||
|
|
activeKey?: string; // 外部控制的当前激活 tab
|
||
|
|
tabsConfig?: TabItem[]; // Tab 配置列表，用于生成 Tab 头
|
||
|
|
data?: any; // 可选：传递给内部组件的数据
|
||
|
|
}>();
|
||
|
|
|
||
|
|
// 定义 Emits
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'update:visible', value: boolean): void;
|
||
|
|
(e: 'change', key: string): void; // 当 tab 切换时触发
|
||
|
|
}>();
|
||
|
|
|
||
|
|
// 内部维护的 activeKey
|
||
|
|
const currentActiveKey = ref<string>(props.activeKey || '');
|
||
|
|
|
||
|
|
// 监听外部传入的 activeKey 变化
|
||
|
|
watch(() => props.activeKey, (newVal) => {
|
||
|
|
if (newVal) {
|
||
|
|
currentActiveKey.value = newVal;
|
||
|
|
}
|
||
|
|
}, { immediate: true });
|
||
|
|
|
||
|
|
// 监听内部 tab 切换，通知父组件
|
||
|
|
watch(currentActiveKey, (newVal) => {
|
||
|
|
emit('change', newVal);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
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 {
|
||
|
|
:deep(.ant-modal-body) {
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-modal-content {
|
||
|
|
min-height: 300px; // 增加高度以容纳内容
|
||
|
|
|
||
|
|
.tab-pane-container {
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-placeholder {
|
||
|
|
color: #999;
|
||
|
|
text-align: center;
|
||
|
|
padding: 40px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|