generated from Leo_Ding/web-template
加入全局加载效果
This commit is contained in:
Leo_Ding
parent
82b0108091
commit
36f5af21da
@ -1,110 +1,112 @@
|
||||
<template>
|
||||
<a-layout class="layout">
|
||||
<template #default>
|
||||
<!-- 上下布局 -->
|
||||
<template v-if="config.layout === 'topBottom'">
|
||||
<!-- 侧边菜单 -->
|
||||
<template v-if="config.menuMode === 'side'">
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<template #left>
|
||||
<brand :theme="config.headerTheme"></brand>
|
||||
</template>
|
||||
</basic-header>
|
||||
<a-layout>
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `calc(100vh - ${config.headerHeight}px)`,
|
||||
top: `${config.headerHeight}px`,
|
||||
}">
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
<a-spin :spinning="spinning" tip="Loading...">
|
||||
<a-layout class="layout">
|
||||
<template #default>
|
||||
<!-- 上下布局 -->
|
||||
<template v-if="config.layout === 'topBottom'">
|
||||
<!-- 侧边菜单 -->
|
||||
<template v-if="config.menuMode === 'side'">
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<template #left>
|
||||
<brand :theme="config.headerTheme"></brand>
|
||||
</template>
|
||||
</basic-header>
|
||||
<a-layout>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<!-- 混合菜单 -->
|
||||
<template v-if="config.menuMode === 'mix'">
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<template #left>
|
||||
<brand :theme="config.headerTheme"></brand>
|
||||
</template>
|
||||
<basic-menu mode="horizontal" :theme="config.headerTheme" :data-list="topMenuList"></basic-menu>
|
||||
</basic-header>
|
||||
<a-layout>
|
||||
<template v-if="sideMenuList.length">
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `calc(100vh - ${config.headerHeight}px)`,
|
||||
top: `${config.headerHeight}px`,
|
||||
}">
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
</template>
|
||||
<a-layout>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
<a-layout>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 左右布局 -->
|
||||
<template v-if="config.layout === 'leftRight'">
|
||||
<!-- 侧边菜单 -->
|
||||
<template v-if="config.menuMode === 'side'">
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `100vh`,
|
||||
top: 0,
|
||||
}">
|
||||
<template #header>
|
||||
<brand :theme="config.sideTheme"></brand>
|
||||
</template>
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
<a-layout>
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
</basic-header>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
<!-- 混合菜单 -->
|
||||
<template v-if="config.menuMode === 'mix'">
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `100vh`,
|
||||
top: 0,
|
||||
}">
|
||||
<template #header>
|
||||
<brand :theme="config.sideTheme"></brand>
|
||||
</template>
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
<a-layout>
|
||||
<!-- 混合菜单 -->
|
||||
<template v-if="config.menuMode === 'mix'">
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<template #left>
|
||||
<brand :theme="config.headerTheme"></brand>
|
||||
</template>
|
||||
<basic-menu mode="horizontal" :theme="config.headerTheme"
|
||||
:data-list="topMenuList"></basic-menu>
|
||||
</basic-header>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
<a-layout>
|
||||
<template v-if="sideMenuList.length">
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `calc(100vh - ${config.headerHeight}px)`,
|
||||
top: `${config.headerHeight}px`,
|
||||
}">
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
</template>
|
||||
<a-layout>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 左右布局 -->
|
||||
<template v-if="config.layout === 'leftRight'">
|
||||
<!-- 侧边菜单 -->
|
||||
<template v-if="config.menuMode === 'side'">
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `100vh`,
|
||||
top: 0,
|
||||
}">
|
||||
<template #header>
|
||||
<brand :theme="config.sideTheme"></brand>
|
||||
</template>
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
<a-layout>
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
</basic-header>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
<!-- 混合菜单 -->
|
||||
<template v-if="config.menuMode === 'mix'">
|
||||
<basic-side :theme="config.sideTheme" :style="{
|
||||
height: `100vh`,
|
||||
top: 0,
|
||||
}">
|
||||
<template #header>
|
||||
<brand :theme="config.sideTheme"></brand>
|
||||
</template>
|
||||
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
|
||||
</basic-side>
|
||||
<a-layout>
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<basic-menu mode="horizontal" :theme="config.headerTheme"
|
||||
:data-list="topMenuList"></basic-menu>
|
||||
</basic-header>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 顶部菜单，不区分布局方式 -->
|
||||
<template v-if="config.menuMode === 'top'">
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<template #left>
|
||||
<brand :theme="config.headerTheme"></brand>
|
||||
</template>
|
||||
<basic-menu mode="horizontal" :theme="config.headerTheme" :data-list="topMenuList"></basic-menu>
|
||||
</basic-header>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 顶部菜单，不区分布局方式 -->
|
||||
<template v-if="config.menuMode === 'top'">
|
||||
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
|
||||
<template #left>
|
||||
<brand :theme="config.headerTheme"></brand>
|
||||
</template>
|
||||
<basic-menu mode="horizontal" :theme="config.headerTheme" :data-list="topMenuList"></basic-menu>
|
||||
</basic-header>
|
||||
<multi-tab v-if="config.multiTab"></multi-tab>
|
||||
<basic-content></basic-content>
|
||||
</template>
|
||||
</template>
|
||||
</a-layout>
|
||||
|
||||
</a-layout>
|
||||
</a-spin>
|
||||
<config-dialog ref="configDialogRef"></config-dialog>
|
||||
</template>
|
||||
|
||||
@ -127,15 +129,22 @@ defineOptions({
|
||||
})
|
||||
|
||||
useMultiTab()
|
||||
|
||||
const spinning = ref(false)
|
||||
const appStore = useAppStore()
|
||||
const dicsStore = useDicsStore()
|
||||
initData()
|
||||
async function initData() {
|
||||
storage.local.setItem('companyId','C001')
|
||||
await dicsStore.loadProvinces() // 加载省份数据
|
||||
await dicsStore.loadAllDictData() // 加载字典数据
|
||||
await dicsStore.loadOrgTree()
|
||||
try {
|
||||
spinning.value = true
|
||||
storage.local.setItem('companyId', 'C001')
|
||||
await dicsStore.loadProvinces() // 加载省份数据
|
||||
await dicsStore.loadAllDictData() // 加载字典数据
|
||||
await dicsStore.loadOrgTree()
|
||||
spinning.value = false
|
||||
} catch (error) {
|
||||
spinning.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const { sideMenuList, topMenuList } = useMenu()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user