NSG_PORTAL_V2/components/dynamic-page/page/layouts/index.vue

<script lang="ts" setup>
import { enumPageKey, enumPageTemplate, enumPageLayouts } from "@/definitions/enum";
import { Home_Default, ARTICLE_LONG_LAYOUT, ARTICLE_NONE_LAYOUT, ARTICLE_NORMAL_LAYOUT, ARTICLE_PAGE_LAYOUT, ARTICLE_SHORT_LAYOUT } from "./index";

const _props = defineProps<{
  settings?: any;
}>();

const definedDynamicPageLayout: Record<string, any> = {
  [enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["DEFAULT"]]: Home_Default,
  [enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["FULL"]]: Home_Default,
  [enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["BACKGROUND_PAGE"]]: Home_Default,

  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_SHORT"]]: ARTICLE_SHORT_LAYOUT,
  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_PAGE"]]: ARTICLE_PAGE_LAYOUT,
  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NORMAL"]]: ARTICLE_NORMAL_LAYOUT,
  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NONE"]]: ARTICLE_NONE_LAYOUT,
  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_LONG"]]: ARTICLE_LONG_LAYOUT,
};

const getCurrentLayout = computed(() => _props.settings?.layout);

const GET_PROPS = computed(() => {
  return () => {
    let props: any = {};
    for (const [key, value] of Object.entries(_props.settings)) {
      props = {
        ...props,
        [key]: value,
      };
    }
    return props;
  };
});
</script>

<template>
    <component 
        v-if="definedDynamicPageLayout[getCurrentLayout]"
        :is="definedDynamicPageLayout[getCurrentLayout]" 
        v-bind="GET_PROPS()"
    >
        <slot />
    </component>
</template>