minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

phongdt: paging component

Browse Source
This commit is contained in:
Duong Truong Phong
2024-07-05 14:51:25 +07:00
parent 5889e9af0e
commit 46b808cf9c
3 changed files with 137 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/sections/articles/Default.vue
+38 -62
View File
@@ -1,25 +1,29 @@
<script setup lang="ts">
import { isEmpty } from "@/utils/lodash";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
import { getInputValue } from "@/utils/parseSQL";
import { enumPageComponentTemplates } from "@/definitions/enum";
const router = useRouter();
const route = useRoute();
const store = reactive({
component: usePageComponentStore(),
component: useDynamicPageStore(),
});
const _props = defineProps<{
dataResult?: any;
dataResult?: any[];
dataQuery?: string;
component?: any;
label?: any;
label?: string;
}>();
const SETTING_OPTIONS = {
MAX_ELEMENT: 5,
TEMPLATE: "Article",
LAYOUT: "TYPE:Card",
TEMPLATE: "TYPE:Card",
LAYOUT: "TYPE:Card_Default",
};
const COMPONENT = {
taxonomy: enumPageComponentTemplates.ARTICLE,
};
const page = ref(1);
@@ -60,7 +64,7 @@ const handleRouteChange = async (query: any) => {
const param = query[`cpn_${_props.component?.id}`];
if (param) {
const [_, value] = param.split(":") || [];
page.value = value;
page.value = Number(value);
await loadPage(value);
}
};
@@ -81,6 +85,7 @@ const loadPage = async (page: number) => {
}
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 || [];
@@ -107,28 +112,22 @@ const mapActivesToItems = (index: number) => {
</script>
<template>
<section>
<div class="section-container" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
<section v-if="listArticleByCategory?.length > 0">
<div class="section-container">
<div class="section-layout" :style="designObject['div.section']">
<template v-if="listArticleByCategory?.length > 0">
<template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory">
<DynamicComponent
:key="index"
v-if="!isEmpty(component)"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
dataResult: { ...component },
label: mapActivesToItems(Number(index)),
}"
/>
</template>
</template>
<template v-else>
<div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
<template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory" :key="index">
<DynamicComponent
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
dataResult: { ...component },
label: mapActivesToItems(Number(index)),
}"
:component="COMPONENT"
/>
</template>
<div class="button-page flex">
<a class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
<span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
@@ -137,9 +136,9 @@ const mapActivesToItems = (index: number) => {
></path>
</svg>
</i>
</a>
<a v-if="listArticleByCategory?.length > 0" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</a>
<a class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
</span>
<span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
<span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
<i class="el-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
@@ -148,10 +147,11 @@ const mapActivesToItems = (index: number) => {
></path>
</svg>
</i>
</a>
</span>
</div>
</div>
</div>
<div v-html="designObject.styleClasses" style="display: none" v-if="designObject.styles"></div>
</section>
</template>
@@ -165,31 +165,6 @@ const mapActivesToItems = (index: number) => {
&.border-custom {
border-color: #e5e5e5 !important;
}
&.borderLeft {
border-left: 1px solid;
}
&.borderRight {
border-right: 1px solid;
}
&.borderTop {
border-top: 1px solid;
}
&.borderBottom {
border-bottom: 1px solid;
}
}
.empty {
width: 100%;
height: 100%;
min-height: 50px;
background-color: #409eff;
display: flex;
white-space: normal;
justify-content: center;
align-items: center;
h6 {
color: #fff;
}
}
.basic-article {
&.article {
@@ -198,9 +173,6 @@ const mapActivesToItems = (index: number) => {
pointer-events: none;
}
}
&.noData {
border-radius: 6px;
}
.flex {
display: flex;
@@ -218,17 +190,21 @@ const mapActivesToItems = (index: number) => {
.btn-page {
width: 40px;
height: 40px;
padding: 9px 16px;
text-align: center;
line-height: 36px;
border: 1px solid #409eff;
border-radius: 3px;
border-radius: 4px;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
background: #f2f2f2;
cursor: pointer;
color: #222222;
&.active {
background: #409eff;
background: #ed1c24;
color: white;
}
}