搜索结果列表页面开发
This commit is contained in:
付民康
193
src/layouts/OrgLayout/index.vue
Normal file
193
src/layouts/OrgLayout/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<DefaultLayout class="org-layout">
|
||||
<template v-if="!isMobile && hasPermission" #headerLeft>
|
||||
<InfoLeft :imgUrl="orgStore.orgInfo?.avatar" :infoText="orgStore.orgInfo?.name" :isFollow="orgStore.isFollow"
|
||||
@followClick="followClickEvent" :infoSubText="`@${orgStore.orgInfo?.full_path}`" />
|
||||
</template>
|
||||
<template v-if="!isMobile && hasPermission" #headerRight>
|
||||
<div class="pl-[32px] w-full h-full">
|
||||
<NavTabs :filter="filterFn" />
|
||||
</div>
|
||||
</template>
|
||||
<template #headerBottom v-if="tabPath && !isMobile">
|
||||
<OrgHeaderInfo v-if="hasPermission" :hideAvatar="false"> </OrgHeaderInfo>
|
||||
</template>
|
||||
<template #bodyHeader v-if="isMobile && hasPermission">
|
||||
<div class="w-full">
|
||||
<InfoLeft :imgUrl="orgStore.orgInfo?.avatar" :infoText="orgStore.orgInfo?.name"
|
||||
:infoSubText="`@${orgStore.orgInfo?.full_path}`" :isFollow="orgStore.isFollow"
|
||||
@followClick="followClickEvent" />
|
||||
<NavTabs :filter="filterFn" />
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<slot v-if="hasPermission && !globalInfo.isNotFound" name="content"></slot>
|
||||
<ErrorPage :code="globalInfo.isNotFound ? 404 : 403" v-else />
|
||||
</template>
|
||||
<template v-if="hasPermission" #sidebar>
|
||||
<NavSidebar :showAvatar="true" :avatarParam="{
|
||||
avatar: orgStore.orgInfo.avatar,
|
||||
name: orgStore.orgInfo.name,
|
||||
infoSubText: `@${orgStore.orgInfo.path}`
|
||||
}" />
|
||||
</template>
|
||||
</DefaultLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import OrgHeaderInfo from '@/views/Org/components/OrgHeaderInfo.vue';
|
||||
import { onMounted, reactive, ref, computed, watch } from 'vue';
|
||||
import DefaultLayout from '@/layouts/DefaultLayout/index.vue';
|
||||
import NavTabs from '@/components/NavTabs/index.vue';
|
||||
import NavSidebar from '@/components/NavSidebar/index.vue';
|
||||
import InfoLeft from '@/components/InfoLeft/index.vue';
|
||||
import ErrorPage from '@/views/ErrorPage/index.vue';
|
||||
import { orgInfoStore } from '@/stores/Org';
|
||||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||||
import { useAccountStore } from '@/stores/user';
|
||||
import setting from '@/setting';
|
||||
import { usePagePermission } from '@/layouts/hooks/usePagePermission';
|
||||
import { emitEvent } from '@/utils/eventBus';
|
||||
import { useGlobalInfoStore } from '@/stores/Global';
|
||||
import { reqCatch } from '@/utils/catch';
|
||||
import * as types from '@/api/org/types';
|
||||
import { getCommunityInfo } from '@/api/org/index';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { usePageResize } from '@/utils/hooks/usePageResize';
|
||||
|
||||
const { isMobile } = usePageResize();
|
||||
const user = useAccountStore();
|
||||
const orgStore = orgInfoStore();
|
||||
const { namespace, followDevCommunity, checkHasFollowedFun, getDevAdvertisement, getDevLogin, getArticleAndFans } = getOrgInfo();
|
||||
const { hasPermission } = usePagePermission(orgStore.access_level, orgStore.isPrivate);
|
||||
const globalInfo = useGlobalInfoStore();
|
||||
globalInfo.updateMenuNum('orgRepos', orgStore.orgInfo.project_count);
|
||||
// globalInfo.updateMenuNum('orgMember', orgStore.orgInfo.member_count);
|
||||
|
||||
const router = useRouter();
|
||||
const tabPath = computed(() => {
|
||||
const ary = router.currentRoute.value.path.split('/');
|
||||
let discussDetail = true;
|
||||
const disIndex = ary.findIndex((item) => item === 'discussion');
|
||||
if (disIndex > 0 && disIndex < ary.length - 1) {
|
||||
discussDetail = false;
|
||||
}
|
||||
return !ary.find((item) => item === 'setting') && discussDetail;
|
||||
});
|
||||
// navTabs卡片过滤
|
||||
const filterObj: {
|
||||
[x: string]: any;
|
||||
} = {
|
||||
讨论: 'DISCUSSION',
|
||||
社区: 'COMMUNITY'
|
||||
};
|
||||
|
||||
const filterFn: any = ref((item: any) => {
|
||||
return true;
|
||||
});
|
||||
const communityHome = ref('');
|
||||
// 监听组织路由变化
|
||||
const { accountInfo } = useAccountStore();
|
||||
// 社区基本信息
|
||||
let lastNameSpace = '';
|
||||
|
||||
const getCommunityInfoFun = async () => {
|
||||
if (lastNameSpace !== namespace.value) {
|
||||
const params: types.commonGroupReqType = {
|
||||
orgId: namespace.value
|
||||
};
|
||||
const { data, error } = await reqCatch(getCommunityInfo, params);
|
||||
if (!error && data) {
|
||||
orgStore.setCommunityUrl({
|
||||
communityUrl: `https://${data.data.custom_domain}`,
|
||||
communityactivityUrl: `https://${data.data.custom_domain}/activelist`
|
||||
});
|
||||
communityHome.value = data.data.custom_domain ? `//${data.data.custom_domain}` : '';
|
||||
orgStore.setCommunityInfo(data.data);
|
||||
// 获取dev社区登陆状态
|
||||
getDevLogin();
|
||||
// 获取社区关注状态
|
||||
if (user.isLogin) {
|
||||
checkHasFollowedFun();
|
||||
}
|
||||
// 获取社区广告
|
||||
getDevAdvertisement();
|
||||
// 获取dev社区文章粉丝数量
|
||||
getArticleAndFans();
|
||||
}
|
||||
}
|
||||
lastNameSpace = namespace.value;
|
||||
};
|
||||
|
||||
// 监听module_setting权限控制，权限变化，项目切换
|
||||
watch(
|
||||
() => [orgStore.orgInfo?.module_setting?.modules, namespace],
|
||||
() => {
|
||||
getCommunityInfoFun();
|
||||
// const obj = orgStore.orgInfo?.module_setting?.modules.find(mod => mod.key === 'COMMUNITY');
|
||||
// if (obj && obj.value === '1') getCommunityInfoFun();// 社区开启
|
||||
|
||||
filterFn.value = (item: any) => {
|
||||
// 判断用户权限
|
||||
const isAllowed = !item.permission || orgStore.access_level >= setting.role[item.permission];
|
||||
// 判断模块是否打开（讨论，社区等）
|
||||
// const param = orgStore.orgInfo?.module_setting?.modules.find(mod => mod.key === filterObj[item.label]);
|
||||
// const isEnabled = !filterObj[item.label] || !!(param && (param as any).value === '1');
|
||||
// return isEnabled && isAllowed;
|
||||
return isAllowed;
|
||||
};
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
flush: 'post',
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// 关注点击
|
||||
const followClickEvent = (val: boolean) => {
|
||||
if (!user.isLogin) {
|
||||
emitEvent('login', { triggerType: '关注组织' });
|
||||
return;
|
||||
}
|
||||
followDevCommunity(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.back-idex {
|
||||
display: block;
|
||||
height: 68px;
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #c7c9d9;
|
||||
vertical-align: top;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
background: url('@/assets/imgs/icon/ic-back@2x.png') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.org-layout {
|
||||
:deep(.g-header-body-right) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user