修改封装表格分页函数

.prettierrc.js

@@ -1,9 +1,39 @@
-// @ts-check
+// @see: https://www.prettier.cn
 
-/** @type {import("prettier").Config} */
 export default {
+	// 超过最大值换行
+	printWidth: 200,
+	// 缩进字节数
+	tabWidth: 1,
+	// 使用制表符而不是空格缩进行
+	useTabs: true,
+	// 结尾不用分号(true有，false没有)
+	semi: true,
+	// 使用单引号(true单引号，false双引号)
+	singleQuote: true,
+	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+	quoteProps: 'as-needed',
+	// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
 	bracketSpacing: true,
-  singleQuote: false,
+	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
-  arrowParens: "avoid",
+	trailingComma: 'all',
-  trailingComma: "none"
+	// 在JSX中使用单引号而不是双引号
+	jsxSingleQuote: true,
+	//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
+	arrowParens: 'avoid',
+	// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
+	insertPragma: false,
+	// 指定要使用的解析器，不需要写文件开头的 @prettier
+	requirePragma: false,
+	// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+	proseWrap: 'preserve',
+	// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+	htmlWhitespaceSensitivity: 'css',
+	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+	endOfLine: 'auto',
+	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+	rangeStart: 0,
+	rangeEnd: Infinity,
+
+	vueIndentScriptAndStyle: false, // Vue文件脚本和样式标签缩进
 };

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bunny-admin-element",
+	"name": "bunny-admin-element-i18n",
 	"version": "1.0.0",
 	"private": true,
 	"type": "module",
@@ -14,13 +14,13 @@
 		"vite",
 		"esm"
 	],
-  "homepage": "https://gitee.com/BunnyBoss/bunny-admin-element.git",
+	"homepage": "https://gitee.com/BunnyBoss/bunny-admin-element-thin-i18n",
 	"repository": {
 		"type": "git",
-    "url": "https://gitee.com/BunnyBoss/bunny-admin-element.git"
+		"url": "https://gitee.com/BunnyBoss/bunny-admin-element-thin-i18n"
 	},
 	"bugs": {
-    "url": "https://gitee.com/BunnyBoss/bunny-admin-element.git/issues"
+		"url": "https://gitee.com/BunnyBoss/bunny-admin-element-thin-i18n/issues"
 	},
 	"license": "MIT",
 	"author": {

src/components/TableBar/src/TablePlus.vue

@@ -1,48 +0,0 @@
-<template>
-	<div class="main">
-		<pure-table
-			ref="tableRef"
-			:adaptiveConfig="{ offsetBottom: 108 }"
-			:columns="column"
-			:data="dataList"
-			:header-cell-style="cellHeaderStyle"
-			:loading="loading"
-			:size="size"
-			adaptive
-			align-whole="center"
-			border
-			row-key="id"
-			table-layout="auto"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { cellHeaderStyle } from '@/components/TableBar/utils/tableStyle';
-import PureTable from '@pureadmin/table';
-import type { PropType } from 'vue';
-
-// * 传入数据
-defineProps({
-	// 表格数据
-	dataList: {
-		type: Array<any>,
-		default: [],
-	},
-	// 表格列字段
-	column: {
-		type: Array<any>,
-		default: [],
-	},
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	size: {
-		type: String as PropType<any>,
-		default: 'default',
-	},
-});
-</script>
-
-<style lang="scss" scoped></style>

src/components/TableBar/src/TablePlusPage.vue

@@ -1,75 +0,0 @@
-<template>
-	<div class="main mt-2 p-2 bg-bg_color">
-		<pure-table
-			ref="tableRef"
-			:adaptiveConfig="{ offsetBottom: 108 }"
-			:columns="column"
-			:data="dataList"
-			:header-cell-style="cellHeaderStyle"
-			:loading="loading"
-			:pagination="pagination"
-			:paginationSmall="size === 'small'"
-			:size="size"
-			adaptive
-			align-whole="center"
-			border
-			row-key="id"
-			table-layout="auto"
-			@selection-change="handleSelectionChange"
-			@page-size-change="handleSizeChange"
-			@page-current-change="handleCurrentChange"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { cellHeaderStyle } from '@/components/TableBar/utils/tableStyle';
-import PureTable from '@pureadmin/table';
-import type { PropType } from 'vue';
-
-// * 传入数据
-defineProps({
-	// 表格数据
-	dataList: {
-		type: Array<any>,
-		default: [],
-	},
-	// 表格列字段
-	column: {
-		type: Array<any>,
-		default: [],
-	},
-	// 是否加载
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	// 页面字体大小，small | default | large
-	size: {
-		type: String as PropType<any>,
-		default: 'default',
-	},
-	// 分页器参数
-	pagination: {
-		type: Object,
-		default: Object,
-	},
-	// 一页大小变化
-	handleSelectionChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 分页大小变化
-	handleSizeChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 当前页变化
-	handleCurrentChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-});
-</script>
-
-<style lang="scss" scoped></style>

src/components/TableBar/src/TablePlusQuery.vue

@@ -1,100 +0,0 @@
-<template>
-	<div class="main">
-		<el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-			<slot name="tableForm" />
-		</el-form>
-
-		<div class="mt-2 p-2 bg-bg_color">
-			<pure-table
-				ref="tableRef"
-				:adaptiveConfig="{ offsetBottom: 108 }"
-				:columns="column"
-				:data="dataList"
-				:header-cell-style="cellHeaderStyle"
-				:loading="loading"
-				:pagination="pagination"
-				:paginationSmall="size === 'small'"
-				:size="size"
-				adaptive
-				align-whole="center"
-				border
-				row-key="id"
-				table-layout="auto"
-				@selection-change="handleSelectionChange"
-				@page-size-change="handleSizeChange"
-				@page-current-change="handleCurrentChange"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import { cellHeaderStyle } from '@/components/TableBar/utils/tableStyle';
-import PureTable from '@pureadmin/table';
-
-// * 传入数据
-defineProps({
-	// 表格数据
-	dataList: {
-		type: Array<any>,
-		default: [],
-	},
-	// 表格列字段
-	column: {
-		type: Array<any>,
-		default: [],
-	},
-	// 是否加载
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	// 页面字体大小，small | default | large
-	size: {
-		type: String as PropType<any>,
-		default: 'default',
-	},
-	// 分页器参数
-	pagination: {
-		type: Object,
-		default: Object,
-	},
-	// 一页大小变化
-	handleSelectionChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 分页大小变化
-	handleSizeChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 当前页变化
-	handleCurrentChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 表单参数
-	form: {
-		type: Object as PropType<any>,
-		default: Object,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-dropdown-menu__item i) {
-	margin: 0;
-}
-
-.main-content {
-	margin: 24px 24px 0 !important;
-}
-
-.search-form {
-	:deep(.el-form-item) {
-		margin-bottom: 12px;
-	}
-}
-</style>

types/pagination/pagination.ts

@@ -0,0 +1,7 @@
+// 分页参数接口
+export interface Pagination {
+	currentPage: number;
+	pageSize: number;
+	total: number;
+	pageSizes: number[];
+}