phongdt:fix paging

This commit is contained in:
Duong Truong Phong
2024-07-05 15:30:58 +07:00
parent 11ea05de83
commit 0ad19bbcfd
@@ -69,9 +69,6 @@ const handleRouteChange = async (query: any) => {
} }
}; };
onBeforeMount(() => {
if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
});
const loadPage = async (page: number) => { const loadPage = async (page: number) => {
let newDataQuery = ""; let newDataQuery = "";
@@ -92,6 +89,8 @@ const loadPage = async (page: number) => {
} }
}; };
if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
const handleNextPrev = (type: "+" | "-") => { const handleNextPrev = (type: "+" | "-") => {
if (listArticleByCategory.value?.length > 0) { if (listArticleByCategory.value?.length > 0) {
if (type === "+") { if (type === "+") {
@@ -128,25 +127,11 @@ const mapActivesToItems = (index: number) => {
</template> </template>
<div class="button-page flex"> <div class="button-page flex">
<span 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"> <Icon name="ooui:previous-ltr"></Icon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
</i>
</span> </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', 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)"> <span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
<i class="el-icon"> <Icon name="ooui:previous-rtl"></Icon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
></path>
</svg>
</i>
</span> </span>
</div> </div>
</div> </div>