108 lines
3.3 KiB
Vue
108 lines
3.3 KiB
Vue
<template>
|
|
<GiPageLayout
|
|
:margin="true"
|
|
:default-collapsed="false"
|
|
:header-style="isDesktop ? { padding: 0, borderBottomWidth: 0 } : { borderBottomWidth: '1px' } "
|
|
>
|
|
<template v-if="isDesktop" #left>
|
|
<a-tabs v-model:active-key="activeKey" type="rounded" position="left" hide-content size="large" @change="change">
|
|
<a-tab-pane v-for="(item) in menuList" :key="item.key">
|
|
<template #title>
|
|
<div style="display: flex; align-items: center">
|
|
<GiSvgIcon :name="item.icon" :size="18" style="margin-right: 4px" />
|
|
{{ item.name }}
|
|
</div>
|
|
</template>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</template>
|
|
<template #header>
|
|
<a-tabs v-if="!isDesktop" v-model:active-key="activeKey" type="rounded" position="top" size="large" @change="change">
|
|
<a-tab-pane v-for="(item) in menuList" :key="item.key" :title="item.name">
|
|
<template #title>
|
|
<div style="display: flex; align-items: center">
|
|
<GiSvgIcon :name="item.icon" :size="18" style="margin-right: 4px" />
|
|
{{ item.name }}
|
|
</div>
|
|
</template>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</template>
|
|
<transition name="fade-slide" mode="out-in" appear>
|
|
<component :is="menuList.find((item) => item.key === activeKey)?.value"></component>
|
|
</transition>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="tsx">
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import SystemRegulation from './repository.vue'
|
|
import RegulationProposal from './proposal/index.vue'
|
|
import RegulationType from './type/index.vue'
|
|
import ProcessManagement from './confirm.vue'
|
|
import { useDevice } from '@/hooks'
|
|
|
|
defineOptions({ name: 'RegulationManagement' })
|
|
|
|
const { isDesktop } = useDevice()
|
|
|
|
const data = [
|
|
{ name: '制度公告', key: 'system-regulation', icon: 'file-text', value: SystemRegulation, path: '/regulation/system-regulation' },
|
|
{ name: '制度提案', key: 'proposal', icon: 'edit', value: RegulationProposal, path: '/regulation/proposal' },
|
|
{ name: '制度公示', key: 'process-management', icon: 'workflow', value: ProcessManagement, path: '/regulation/process-management' },
|
|
{ name: '制度类型', key: 'type', icon: 'tag', value: RegulationType, path: '/regulation/type' },
|
|
|
|
]
|
|
|
|
const menuList = computed(() => {
|
|
return data
|
|
})
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// 根据当前路由确定激活的标签页
|
|
const activeKey = computed(() => {
|
|
const currentPath = route.path
|
|
const menuItem = menuList.value.find(item => item.path === currentPath)
|
|
return menuItem ? menuItem.key : menuList.value[0].key
|
|
})
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
// 路由变化时会自动更新activeKey
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
const change = (key: string | number) => {
|
|
const menuItem = menuList.value.find(item => item.key === key)
|
|
if (menuItem) {
|
|
router.push(menuItem.path)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.gi_page {
|
|
padding-top: 0;
|
|
}
|
|
|
|
:deep(.arco-tabs-nav-vertical.arco-tabs-nav-type-line .arco-tabs-tab) {
|
|
margin: 0;
|
|
padding: 8px 16px;
|
|
|
|
&:hover {
|
|
background: var(--color-fill-1);
|
|
|
|
.arco-tabs-tab-title {
|
|
&::before {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.arco-tabs-tab-active {
|
|
background: rgba(var(--primary-6), 0.08);
|
|
}
|
|
}
|
|
</style> |