This commit is contained in:
MoreStrive
2024-07-05 13:05:28 +07:00
13 changed files with 40 additions and 132 deletions
+8
View File
@@ -172,3 +172,11 @@ div[layout="ARTICLE_PAGE"] {
.container {
max-width: 1385px;
}
.layout_container {
& > .section_layout {
@apply mt-12 first:mt-0;
}
}
@@ -44,11 +44,11 @@ const drop = (e: any) => {
</script>
<template>
<article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
<article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
<div class="article_miss">
<template v-if="parseData">
<div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
<div class="article_miss_content">
<div class="article_miss_content" :style="LAYOUT_PARSE['content']">
<h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
</h3>
@@ -57,7 +57,7 @@ const drop = (e: any) => {
<div v-else class="empty-box"></div>
</div>
<div v-html="LAYOUT_PARSE.styleClasses"></div>
<div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles" style="display: none"></div>
</article>
</template>
@@ -5,9 +5,9 @@ import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
const router = useRouter();
const route = useRoute();
const store = reactive({
component: usePageComponentStore(),
});
// const store = reactive({
// component: usePageComponentStore(),
// });
const _props = defineProps<{
dataResult?: any;
@@ -79,12 +79,12 @@ const loadPage = async (page: number) => {
} else {
newDataQuery = _props.component?.settings?.dataQuery + ` Page[${page}]`;
}
const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
const data = getInputValue(res?.settings?.dataResult, "OBJECT");
if (Object.keys(data).length > 0) {
totals.value = data.Total;
listArticlePaging.value = data?.Data || [];
}
// const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
// const data = getInputValue(res?.settings?.dataResult, "OBJECT");
// if (Object.keys(data).length > 0) {
// totals.value = data.Total;
// listArticlePaging.value = data?.Data || [];
// }
};
const handleNextPrev = (type: "+" | "-") => {
@@ -15,6 +15,7 @@ const definedDynamicSection: Record<string, any> = {
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT,
[enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]]: NONE_DEFAULT_LAYOUT,
@@ -46,6 +46,11 @@ const SETTING_OPTIONS = computed(() => {
MAX_ELEMENT: 4,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
_setting_options = {
MAX_ELEMENT: 4,
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_setting_options = {
MAX_ELEMENT: 4,
@@ -186,6 +191,15 @@ const CLASS_FOR_SECTION = computed(() => {
3: "col-span-2",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
_classForSection = {
section_layout: "section_layout twelve_col_layout",
0: "col-span-5",
1: "col-span-2",
2: "col-span-2",
3: "col-span-3",
};
break;
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
_classForSection = {
section_layout: "section_layout twelve_col_layout",
@@ -1,5 +0,0 @@
<template>
<div>
aaaaaaaa
</div>
</template>
@@ -1 +0,0 @@
export { default as Misses_Section } from './misses/index.vue'
@@ -1,43 +0,0 @@
<script lang="ts" setup>
import type { PageSection } from "@/server/models/dynamic-page/index";
import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
import { Misses_Section } from "./index";
const _props = defineProps<{
settings?: any;
content?: any;
section: PageSection;
}>();
const definedDynamicSection: Record<string, any> = {
// [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']]: Misses_Section,
};
const getCurrentSection = computed(() => _props.settings.template);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
if (_props.settings) {
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value,
};
}
}
return props;
};
});
</script>
<template>
<component
v-if="definedDynamicSection[getCurrentSection]"
:is="definedDynamicSection[getCurrentSection]"
v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
>
<slot />
</component>
</template>
@@ -1,24 +0,0 @@
<script setup lang="ts">
import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
import type { PageSection } from "@/server/models/dynamic-page/index";
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
const props = defineProps<{
label?: any;
layout?: string;
settings?: any;
content?: any;
section: PageSection;
}>();
</script>
<template>
<DynamicLayout :layout="props.layout" :content="props.content" :settings="props.settings" :section="props.section" />
</template>
<style lang="scss" scoped>
.border-custom {
border-color: #e5e5e5 !important;
}
</style>
@@ -1 +0,0 @@
export { default as Default } from './Default.vue'
@@ -1,43 +0,0 @@
<script lang="ts" setup>
import type { PageSection } from "@/server/models/dynamic-page/index";
import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
import { Default } from "./index";
const _props = defineProps<{
settings?: any;
content?: any;
section: PageSection;
}>();
const definedDynamicSection: Record<string, any> = {
// [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISS']['DEFAULT']]: Default,
};
const getCurrentSection = computed(() => _props.settings.template);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
if (_props.settings) {
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value,
};
}
}
return props;
};
});
</script>
<template>
<component
v-if="definedDynamicSection[getCurrentSection]"
:is="definedDynamicSection[getCurrentSection]"
v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
>
<slot />
</component>
</template>
+4 -3
View File
@@ -160,6 +160,7 @@ export const pageSectionLayouts = {
{ title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_LEFT_TWO'] },
{ title: "6 Cột, phải 5 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FIVE'] },
{ title: "5-3-2-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_THREE_TWO_TWO'] },
{ title: "5-2-2-3", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_TWO_TWO_THREE'] },
{ title: "2-5-3-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_TWO_FIVE_THREE_TWO'] },
{ title: "5 Cột, phải 4 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FOUR'] },
{ title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_RIGHT_TWO'] },
@@ -231,7 +232,7 @@ export const pageComponentTemplates = {
],
[`${enumPageComponentKey.OTHER}`]: [
{ title: "Thời tiết", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER'] },
{ title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES'] },
{ title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK'] },
],
};
@@ -292,7 +293,7 @@ export const pageComponentLayouts = {
[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: [
{ title: "Thời tiết", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]['WEATHER_DEFAULT'] }
],
[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: [
{ title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]['SECURITIES_DEFAULT'] }
[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: [
{ title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_DEFAULT'] }
],
};
+1
View File
@@ -237,6 +237,7 @@ export const enumPageSectionLayouts = {
'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3-MAX:3',
'VERTICAL_FIVE_THREE_TWO_TWO': 'LAYOUT:vertical-TYPE:5;3;2;2-MAX:4',
'VERTICAL_FIVE_TWO_TWO_THREE': 'LAYOUT:vertical-TYPE:5;2;2;3-MAX:4',
'VERTICAL_TWO_FIVE_THREE_TWO': 'LAYOUT:vertical-TYPE:2;5;3;2-MAX:4',
'VERTICAL_ONE_FOUR': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:4-Max:2',
'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5-MAX:2',