|
|
|
@ -15,55 +15,68 @@
|
|
|
|
|
* limitations under the License. |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
import { defineComponent, ref, watch } from 'vue' |
|
|
|
|
import { defineComponent, onMounted, watch, toRefs } from 'vue' |
|
|
|
|
import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui' |
|
|
|
|
import NavBar from './components/navbar' |
|
|
|
|
import SideBar from './components/sidebar' |
|
|
|
|
import { useDataList } from './use-dataList' |
|
|
|
|
import { useLanguageStore } from '@/store/language/language' |
|
|
|
|
import { useMenuStore } from '@/store/menu/menu' |
|
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
|
|
|
|
|
const Content = defineComponent({ |
|
|
|
|
name: 'Content', |
|
|
|
|
setup() { |
|
|
|
|
const languageStore = useLanguageStore() |
|
|
|
|
const menuStore = useMenuStore() |
|
|
|
|
const { state, changeMenuOption, changeHeaderMenuOptions } = useDataList() |
|
|
|
|
|
|
|
|
|
watch(useI18n().locale, () => { |
|
|
|
|
console.log(123) |
|
|
|
|
onMounted(() => { |
|
|
|
|
menuStore.setMenuKey('home') |
|
|
|
|
changeMenuOption(state) |
|
|
|
|
changeHeaderMenuOptions(state) |
|
|
|
|
genSideMenu(state) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
return { languageStore } |
|
|
|
|
}, |
|
|
|
|
render() { |
|
|
|
|
const { state, getHeaderMenuOptions } = useDataList() |
|
|
|
|
|
|
|
|
|
const headerMenuOptions = getHeaderMenuOptions(state.menuOptions) |
|
|
|
|
watch(useI18n().locale, () => { |
|
|
|
|
changeMenuOption(state) |
|
|
|
|
changeHeaderMenuOptions(state) |
|
|
|
|
genSideMenu(state) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const sideMenuOptions = ref() |
|
|
|
|
const genSideMenu = (state: any) => { |
|
|
|
|
const key = menuStore.getMenuKey |
|
|
|
|
state.sideMenuOptions = |
|
|
|
|
state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0].children || [] |
|
|
|
|
state.isShowSide = state.sideMenuOptions.length !== 0 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const getSideMenuOptions = (item: any) => { |
|
|
|
|
this.languageStore.setMenuKey(item.key) |
|
|
|
|
sideMenuOptions.value = |
|
|
|
|
state.menuOptions.filter((menu) => menu.key === item.key)[0].children || |
|
|
|
|
[] |
|
|
|
|
state.isShowSide = sideMenuOptions.value.length !== 0 |
|
|
|
|
menuStore.setMenuKey(item.key) |
|
|
|
|
genSideMenu(state) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
...toRefs(state), |
|
|
|
|
menuStore, |
|
|
|
|
changeMenuOption, |
|
|
|
|
getSideMenuOptions |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
render() { |
|
|
|
|
return ( |
|
|
|
|
<NLayout style='height: 100%;'> |
|
|
|
|
<NLayoutHeader style='height: 65px;'> |
|
|
|
|
<NLayout style='height: 100%'> |
|
|
|
|
<NLayoutHeader style='height: 65px'> |
|
|
|
|
<NavBar |
|
|
|
|
onHandleMenuClick={getSideMenuOptions} |
|
|
|
|
headerMenuOptions={headerMenuOptions} |
|
|
|
|
languageOptions={state.languageOptions} |
|
|
|
|
profileOptions={state.userDropdownOptions} |
|
|
|
|
onHandleMenuClick={this.getSideMenuOptions} |
|
|
|
|
headerMenuOptions={this.headerMenuOptions} |
|
|
|
|
languageOptions={this.languageOptions} |
|
|
|
|
profileOptions={this.userDropdownOptions} |
|
|
|
|
/> |
|
|
|
|
</NLayoutHeader> |
|
|
|
|
<NLayout has-sider position='absolute' style='top: 65px;'> |
|
|
|
|
{state.isShowSide && ( |
|
|
|
|
<SideBar sideMenuOptions={sideMenuOptions.value} /> |
|
|
|
|
<NLayout has-sider position='absolute' style='top: 65px'> |
|
|
|
|
{this.isShowSide && ( |
|
|
|
|
<SideBar sideMenuOptions={this.sideMenuOptions} /> |
|
|
|
|
)} |
|
|
|
|
<NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'> |
|
|
|
|
<NLayoutContent native-scrollbar={false} style='padding: 16px 22px'> |
|
|
|
|
<router-view /> |
|
|
|
|
</NLayoutContent> |
|
|
|
|
</NLayout> |
|
|
|
|