nguyen van thai
62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } from "@/definitions/enum";
|
|
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
|
|
import { useDynamicPageStore } from '~/stores/dynamic-page';
|
|
const { currentPage } = storeToRefs(useDynamicPageStore());
|
|
const props = defineProps<{
|
|
type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
|
|
}>();
|
|
|
|
const contentParse = computed(() => (currentPage.value.content ? JSON.parse(currentPage.value.content) : {}));
|
|
const defineTypeRecusive = {
|
|
TOP_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT'],
|
|
BOTTOM_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT'],
|
|
};
|
|
|
|
const findDataPosition = computed<any>(() => {
|
|
let result = {};
|
|
switch (props.type) {
|
|
case defineTypeRecusive.TOP_NAVIGATION:
|
|
if (contentParse.value.navigationTop) {
|
|
result =
|
|
currentPage.value.components &&
|
|
currentPage.value.components.find((component: any) => {
|
|
return component.id === contentParse.value.navigationTop;
|
|
});
|
|
}
|
|
break;
|
|
case defineTypeRecusive.BOTTOM_NAVIGATION:
|
|
if (contentParse.value.navigationBottom) {
|
|
result =
|
|
currentPage.value.components &&
|
|
currentPage.value.components.find((component: any) => {
|
|
return component.id === contentParse.value.navigationBottom;
|
|
});
|
|
}
|
|
break;
|
|
default:
|
|
result = {};
|
|
break;
|
|
}
|
|
return result;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<DynamicComponent
|
|
v-if="findDataPosition && findDataPosition?.id"
|
|
:settings="findDataPosition?.settings"
|
|
:component="findDataPosition"
|
|
:content="findDataPosition?.content"
|
|
/>
|
|
<div v-else class="text-center">
|
|
<span>Hãy tạo thành phần "Thanh điều hướng ở đầu trang" để hiển thị thành điều hướng tại đây</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|