|
|
@@ -16,7 +16,6 @@ const props = defineProps({
|
|
|
|
|
|
const columnstest = ref(props.ColumnsList)
|
|
|
|
|
|
-const visible = ref(false)
|
|
|
const tableData = ref<VxeGridProps<any>>({
|
|
|
border: true,
|
|
|
round: true,
|
|
|
@@ -35,6 +34,7 @@ const tableData = ref<VxeGridProps<any>>({
|
|
|
columnConfig: { resizable: true, useKey: true },
|
|
|
rowConfig: { isHover: true }
|
|
|
})
|
|
|
+const pageInfo = ref({ pageNo: 1, pageSize: 10, total: 0 })
|
|
|
|
|
|
const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
|
|
|
@@ -71,20 +71,12 @@ const getTableColumns = async () => {
|
|
|
// 获取表格数据
|
|
|
const getTableData = (val: any) => {
|
|
|
tableData.value.data = val.tableData
|
|
|
- // 保存页长以及当前页码
|
|
|
- // tableData.value.data = datatest.value
|
|
|
- // await $api
|
|
|
- // .getBookingTableData({
|
|
|
- // other_filed: '',
|
|
|
- // ...filterdataobj.value
|
|
|
- // })
|
|
|
- // .then((res: any) => {
|
|
|
- // if (res.code === 200) {
|
|
|
- // tableData.value.data = res.data
|
|
|
- // }
|
|
|
- // })
|
|
|
- // .finally(() => {
|
|
|
- // })
|
|
|
+ if (!props.propsType) {
|
|
|
+ pageInfo.value.pageNo = val.cp
|
|
|
+ pageInfo.value.pageSize = val.ps
|
|
|
+ pageInfo.value.total = val.rc
|
|
|
+ console.log(pageInfo.value)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 实现行点击样式
|
|
|
@@ -113,11 +105,31 @@ onMounted(() => {
|
|
|
defineExpose({
|
|
|
getTableData
|
|
|
})
|
|
|
+const getpaginationTableData = () => {
|
|
|
+ $api
|
|
|
+ .SubscribePagination({
|
|
|
+ cp: pageInfo.value.pageNo,
|
|
|
+ ps: pageInfo.value.pageSize
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ pageInfo.value.total = Number(res.data.rc)
|
|
|
+ pageInfo.value.pageNo = res.data.cp
|
|
|
+ pageInfo.value.pageSize = res.data.ps
|
|
|
+ tableData.value.data = res.data.tableData
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="SettingTable">
|
|
|
- <vxe-grid class="radius-bottom" ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
|
|
|
+ <vxe-grid
|
|
|
+ :class="props.propsType ? 'radius-bottom' : ''"
|
|
|
+ ref="tableRef"
|
|
|
+ :style="{ border: 'none' }"
|
|
|
+ v-bind="tableData"
|
|
|
+ >
|
|
|
<template #empty>
|
|
|
<div class="empty">No data</div>
|
|
|
</template>
|
|
|
@@ -146,11 +158,27 @@ defineExpose({
|
|
|
</template>
|
|
|
</vxe-grid>
|
|
|
</div>
|
|
|
+ <div class="pagination" v-if="!props.propsType">
|
|
|
+ <span>Total {{ pageInfo.total }}</span>
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pageInfo.pageNo"
|
|
|
+ v-model:page-size="pageInfo.pageSize"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="pageInfo.total"
|
|
|
+ :pager-count="5"
|
|
|
+ @size-change="getpaginationTableData"
|
|
|
+ @current-change="getpaginationTableData"
|
|
|
+ background
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.SettingTable {
|
|
|
- padding: 0 24px 20px 24px;
|
|
|
+ padding: 0 24px 0 24px;
|
|
|
+}
|
|
|
+.radius-bottom {
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
}
|
|
|
.font_family::before {
|
|
|
color: var(--color-btn-danger-bg);
|
|
|
@@ -170,4 +198,17 @@ defineExpose({
|
|
|
color: var(--color-neutral-1);
|
|
|
padding: 15px 0 33px 37px;
|
|
|
}
|
|
|
+.pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid var(--color-border);
|
|
|
+ border-top: none;
|
|
|
+ margin: 0 24px 20px 24px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 0 0 6px 6px;
|
|
|
+}
|
|
|
+:deep(.el-icon svg) {
|
|
|
+ width: 1em !important;
|
|
|
+}
|
|
|
</style>
|