You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.5 KiB
110 lines
3.5 KiB
1 year ago
|
<script lang="tsx">
|
||
|
|
import { defineComponent, computed } from 'vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { useAppStore } from '@/store/modules/app'
|
||
|
|
import { isUrl } from '@/utils/is'
|
||
|
|
import { pathResolve } from '@/utils/routerHelper'
|
||
|
|
import type { RouteMeta } from 'vue-router'
|
||
|
|
import { ElMenu, ElMenuItem } from 'element-plus'
|
||
|
|
import { usePermissionStore } from '@/store/modules/permission'
|
||
|
|
import { hasOneShowingChild } from '@/layout/components/Menu/src/helper'
|
||
|
|
import { useRenderMenuTitle } from '@/layout/components/Menu/src/components/useRenderMenuTitle'
|
||
|
|
// 头部工具
|
||
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
||
|
|
const { getPrefixCls, variables } = useDesign()
|
||
|
|
const appStore = useAppStore()
|
||
|
|
const layout = computed(() => appStore.getLayout)
|
||
|
|
|
||
|
|
const prefixCls = getPrefixCls('tool-header')
|
||
|
|
const permissionStore = usePermissionStore()
|
||
|
|
const routers = computed(() =>
|
||
|
|
unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
|
||
|
|
)
|
||
|
|
|
||
|
|
const getPath = (route) => {
|
||
|
|
let routePath = route.path
|
||
|
|
if(routePath.startsWith('/')){
|
||
|
|
routePath = route.path
|
||
|
|
}else{
|
||
|
|
routePath = '/'+route.path
|
||
|
|
}
|
||
|
|
if(route.redirect){
|
||
|
|
return route.redirect
|
||
|
|
}else if(route.children){
|
||
|
|
return routePath+getPath(route.children[0])
|
||
|
|
}else{
|
||
|
|
return routePath
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'CategoryHeader',
|
||
|
|
setup() {
|
||
|
|
console.log('useRouter()',useRouter())
|
||
|
|
const { push } = useRouter()
|
||
|
|
// backgroundColor="var(--left-menu-bg-color)"
|
||
|
|
// textColor="var(--left-menu-text-color)"
|
||
|
|
return () => (
|
||
|
|
<div
|
||
|
|
id={`${variables.namespace}-tool-header`}
|
||
|
|
class={[
|
||
|
|
prefixCls,
|
||
|
|
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
|
||
|
|
'dark:bg-[var(--el-bg-color)]'
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<ElMenu style="width:100%"
|
||
|
|
mode="horizontal"
|
||
|
|
backgroundColor="white"
|
||
|
|
textColor="var(--left-menu-bg-color)"
|
||
|
|
activeTextColor="var(--left-menu-text-active-color)"
|
||
|
|
>
|
||
|
|
{{
|
||
|
|
default: () => {
|
||
|
|
const { renderMenuTitle } = useRenderMenuTitle()
|
||
|
|
const categoryRouters = unref(routers).filter(item=>item.meta.hidden!=true&&item.path!='/')
|
||
|
|
console.log('categoryRouters==',categoryRouters)
|
||
|
|
{/* default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) */}
|
||
|
|
return categoryRouters.map((v) => {
|
||
|
|
const meta = (v.meta ?? {}) as RouteMeta
|
||
|
|
const { onlyOneChild } = hasOneShowingChild(v.children, v)
|
||
|
|
const fullPath = isUrl(v.path) ? v.path : pathResolve('/', v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ElMenuItem index={fullPath} onClick={()=>{
|
||
|
|
console.log(v)
|
||
|
|
appStore.setCategoryRoutePath(v.path)
|
||
|
|
}}>
|
||
|
|
{{
|
||
|
|
default: () => renderMenuTitle(meta.title?meta:onlyOneChild?.meta)
|
||
|
|
}}
|
||
|
|
</ElMenuItem>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
</ElMenu>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
$prefix-cls: #{$namespace}-tool-header;
|
||
|
|
|
||
|
|
.#{$prefix-cls} {
|
||
|
|
transition: left var(--transition-time-02);
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep(.el-menu--horizontal>.el-menu-item){
|
||
|
|
border-radius: 5px;
|
||
|
|
height: 40px;
|
||
|
|
margin-right: 10px;
|
||
|
|
background: linear-gradient(to top left,var(--left-menu-bg-color),var(--left-menu-text-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|