You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.6 KiB
97 lines
2.6 KiB
<template>
|
|
<div
|
|
class="bk-table rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]"
|
|
>
|
|
<t-header
|
|
:list="invariable.labels"
|
|
bg-color="bg-black-006"
|
|
textColor="text-white"
|
|
/>
|
|
<el-skeleton class="w-full px-[34px]" :loading="loading" animated>
|
|
<template #template>
|
|
<el-skeleton-item
|
|
variant="p"
|
|
class="my-[24px]"
|
|
v-for="item in invariable.pageSize"
|
|
/>
|
|
</template>
|
|
<template #default>
|
|
<div
|
|
v-for="(item, index) in currentData"
|
|
:key="item?.timestamp + index"
|
|
@click="routerLink(item?.hash)"
|
|
>
|
|
<bk-row
|
|
:sequence="invariable.sequence"
|
|
:values="item"
|
|
:colorSequence="invariable.colorSequence"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
<div
|
|
class="bk-pagination flex flex-row items-center justify-end pt-[32px] pr-[34px]"
|
|
>
|
|
<el-pagination
|
|
:page-size="invariable.pageSize"
|
|
layout="prev, pager, next, jumper"
|
|
v-model:current-page="currentPage"
|
|
:total="paginationState.totalPage"
|
|
/>
|
|
<span class="text-white text-[14px] font-normal">Page</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, watchEffect } from 'vue'
|
|
import THeader from '../dBase/tHeader.vue'
|
|
import BkRow from '../dBase/bkRow.vue'
|
|
import { bkTableCollocate } from '../constant'
|
|
import { useRouter } from 'vue-router'
|
|
import { getfindBlockList } from '@src/api/BlockController'
|
|
import { timeConvert } from '@src/utils/string'
|
|
|
|
const invariable = {
|
|
...bkTableCollocate,
|
|
pageSize: 10, // 每一页的数量
|
|
}
|
|
|
|
const router = useRouter()
|
|
const paginationState = reactive({
|
|
totalPage: 0, // 总页数
|
|
})
|
|
|
|
let currentPage = ref(1) // 当前页
|
|
let currentData = ref() // 当前页的数据
|
|
let loading = ref(true) // 骨架屏加载
|
|
// 请求数据
|
|
const initBlock = async (page: number) => {
|
|
const params = {
|
|
pageNum: page,
|
|
pageSize: invariable.pageSize,
|
|
}
|
|
const res = await getfindBlockList(params)
|
|
// 数据请求结束 更新总页数
|
|
paginationState.totalPage =
|
|
Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
|
|
// 更新当前数据
|
|
currentData.value = res.data.rows.map((item: any) => ({
|
|
...item,
|
|
timestamp: timeConvert(item?.timestamp),
|
|
}))
|
|
// 骨架屏隐藏
|
|
loading.value = false
|
|
}
|
|
// 监听分页更新 -> 请求数据
|
|
watchEffect(() => {
|
|
loading.value = true
|
|
initBlock(currentPage.value)
|
|
})
|
|
// 路由跳转
|
|
const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './zExtraStyle.scss';
|
|
</style>
|
|
|