初始化

2025-11-04 18:08:36 +08:00
parent 2dff5e25de
commit daa020f1ec
1370 changed files with 127388 additions and 1 deletions
--- a/doc/基本框架设计/通用分页表格.md
+++ b/doc/基本框架设计/通用分页表格.md
@@ -0,0 +1,154 @@
+## 通用分页表格实现
+
+前端基于VUE的轻量级表格插件 `avue`
+后端分页组件使用Mybatis分页插件 `MybatisPlus`
+
+
+
+> 分页实现流程，以【系统管理-管理员列表】为例
+
+后台vue文件位置目录 `\src\views\modules\sys\user.vue` 
+
+1、`avue`组件的几个通用配置
+
+```html
+<avue-crud ref="crud"
+           :page="page"
+           :data="dataList"
+           :option="tableOption"
+           @search-change="searchChange"
+           @selection-change="selectionChange"
+           @on-load="getDataList">
+</avue-crud>
+```
+
+`avue`定义了很多的事件，其中一个为 `@on-load`当该组件加载的时候，将会调用该方法。同时也对很多数据进行了双向绑定如：`:page="page"` 分页参数、`:data="dataList"` 分页的具体列表数据、`:option="tableOption"` 表格显示的列
+
+
+
+2、通用的列表、搜索
+
+在`avue`规定，表格的构建，是通过JS对象，进行配置的，而不是通过dom，类似于传统的layui，还有一个主要的原因是这个表格，可以同时生成搜索、分页。
+
+```javascript
+import { tableOption } from '@/crud/sys/user'
+```
+
+
+
+我们查看下该类的代码：
+
+```javascript
+export const tableOption = {
+  border: true,
+  selection: true,
+  index: false,
+  indexLabel: '序号',
+  stripe: true,
+  menuAlign: 'center',
+  menuWidth: 350,
+  align: 'center',
+  refreshBtn: true,
+  searchSize: 'mini',
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  viewBtn: false,
+  props: {
+    label: 'label',
+    value: 'value'
+  },
+  column: [{
+    label: '用户名',
+    prop: 'username',
+    search: true
+  }, {
+    label: '邮箱',
+    prop: 'email'
+  }, {
+    label: '手机号',
+    prop: 'mobile'
+  }, {
+    label: '创建时间',
+    prop: 'createTime'
+  }, {
+    label: '状态',
+    prop: 'status',
+    type: 'select',
+    dicData: [
+      {
+        label: '禁用',
+        value: 0
+      }, {
+        label: '正常',
+        value: 1
+      }
+    ]
+
+  }]
+}
+```
+
+这里的 `search: true` 也就是搜索框出现用户名搜索
+
+```javascript
+{
+    label: '用户名',
+    prop: 'username',
+    search: true
+}
+```
+
+具体可以通过[avue官网-crud文档](https://avuejs.com/doc/crud/crud-doc)获取文档进行查询
+
+
+
+3、 通用的搜索和加载
+
+```javascript
+getDataList (page, params) {
+    this.dataListLoading = true
+    this.$http({
+        url: this.$http.adornUrl('/sys/user/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+            Object.assign(
+                {
+                    current: page == null ? this.page.currentPage : page.currentPage,
+                    size: page == null ? this.page.pageSize : page.pageSize
+                },
+                params
+            )
+        )
+    }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+    })
+}
+```
+
+
+
+4、服务端`SysUserController` 
+
+```java
+@RestController
+@RequestMapping("/sys/user")
+public class SysUserController {
+	@Autowired
+	private SysUserService sysUserService;
+	/**
+	 * 所有用户列表
+	 */
+	@GetMapping("/page")
+	@PreAuthorize("@pms.hasPermission('sys:user:page')")
+	public ServerResponseEntity<IPage<SysUser>> page(String username,PageParam<SysUser> page){
+		IPage<SysUser> sysUserPage = sysUserService.page(page, new LambdaQueryWrapper<SysUser>()
+				.eq(SysUser::getShopId, SecurityUtils.getSysUser().getShopId())
+				.like(StrUtil.isNotBlank(username), SysUser::getUsername, username));
+
+		return ServerResponseEntity.success(sysUserPage);
+	}
+}
+```