116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<template>
|
|
<el-dialog :title="title" :model-value="visible" @update:model-value="handleVisibleChange" width="1200px" append-to-body>
|
|
<el-tabs v-model="activeTab" type="border-card" :key="clubId" @tab-change="handleTabChange">
|
|
<!-- 已加入标签页 -->
|
|
<el-tab-pane label="已加入" name="joined">
|
|
<JoinedMembersTab
|
|
ref="joinedTabRef"
|
|
:club-id="clubId"
|
|
:club-name="clubName"
|
|
:member-limit="memberLimit"
|
|
:current-member-count="currentMemberCount"
|
|
:key="`joined-${clubId}`"
|
|
/>
|
|
</el-tab-pane>
|
|
|
|
<!-- 待审核标签页 -->
|
|
<el-tab-pane label="待审核" name="pending">
|
|
<PendingMembersTab ref="pendingTabRef" :club-id="clubId" :club-name="clubName" :key="`pending-${clubId}`" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="handleClose">关 闭</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, nextTick } from 'vue';
|
|
import JoinedMembersTab from './JoinedMembersTab.vue';
|
|
import PendingMembersTab from './PendingMembersTab.vue';
|
|
|
|
interface Props {
|
|
visible: boolean;
|
|
title: string;
|
|
clubId: string | number;
|
|
clubName: string;
|
|
memberLimit?: number;
|
|
currentMemberCount?: number;
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:visible', value: boolean): void;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const activeTab = ref('joined');
|
|
const joinedTabRef = ref();
|
|
const pendingTabRef = ref();
|
|
|
|
// 监听visible变化
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
activeTab.value = 'joined';
|
|
// 当弹窗打开时，触发当前标签页的数据加载
|
|
nextTick(() => {
|
|
if (activeTab.value === 'joined' && joinedTabRef.value) {
|
|
joinedTabRef.value.getList();
|
|
} else if (activeTab.value === 'pending' && pendingTabRef.value) {
|
|
pendingTabRef.value.getList();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
// 监听clubId变化，重置标签页
|
|
watch(
|
|
() => props.clubId,
|
|
(newClubId) => {
|
|
console.log('MemberManagementDialog: clubId 变化:', newClubId);
|
|
if (newClubId) {
|
|
activeTab.value = 'joined';
|
|
}
|
|
}
|
|
);
|
|
|
|
const handleClose = () => {
|
|
emit('update:visible', false);
|
|
};
|
|
|
|
const handleVisibleChange = (value: boolean) => {
|
|
emit('update:visible', value);
|
|
};
|
|
|
|
/** 标签页切换处理 */
|
|
const handleTabChange = (tabName: string) => {
|
|
console.log('标签页切换到:', tabName);
|
|
|
|
// 根据当前激活的标签页，调用对应组件的刷新方法
|
|
if (tabName === 'joined' && joinedTabRef.value) {
|
|
// 调用已加入成员Tab的刷新方法
|
|
if (typeof joinedTabRef.value.getList === 'function') {
|
|
joinedTabRef.value.getList();
|
|
}
|
|
} else if (tabName === 'pending' && pendingTabRef.value) {
|
|
// 调用待审核成员Tab的刷新方法
|
|
if (typeof pendingTabRef.value.getList === 'function') {
|
|
pendingTabRef.value.getList();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dialog-footer {
|
|
text-align: right;
|
|
}
|
|
</style>
|