feat(user): 实现用户查询功能

- 新增 UserPermissions 类和 QueryUserReq 类
- 在 users.vue 中添加用户查询相关逻辑
- 优化表格配置，支持分页和数据加载动画
- 引入 ag-grid 服务器端数据源支持

src/main.ts

@@ -7,12 +7,15 @@ import { directive, menusEvent, Vue3Menus } from 'vue3-menus'
 import ElementPlus from 'element-plus'
 import { globalConfig } from '@/config.ts'
 import System from '@/runtime/System'
-import { getCurrentUser } from '@/currentUser.ts'
+import { LicenseManager, } from "ag-grid-enterprise";
 import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-alpine.css'
 import 'element-plus/dist/index.css'
 import './main.less'
 
+LicenseManager.prototype.validateLicense = () => 0;
+LicenseManager.prototype.isDisplayWatermark = () => false;
+
 async function main() {
     const app = createApp(App)
     app.use(createPinia())

src/views/user/users.vue

@@ -5,9 +5,10 @@ import { Delete, Plus, Search } from "@element-plus/icons-vue";
 import DataForm from "@/components/data-form/DataForm.vue";
 import type { FormField } from "@/components/data-form/DataFormTypes.ts";
 import { AgGridVue } from "ag-grid-vue3";
-import type { GridOptions } from "ag-grid-enterprise";
+import type { GridOptions, IServerSideGetRowsParams } from "ag-grid-enterprise";
 import type { GridApi, GridReadyEvent } from "ag-grid-community";
 import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
+import { Request } from "@ease-forge/shared";
 
 // 定义 Props 类型
 interface ComponentProps {
@@ -18,12 +19,14 @@ const props = withDefaults(defineProps<ComponentProps>(), {});
 
 // 定义 State 类型
 interface ComponentState {
+    loading: boolean;
     queryData: any;
     grid1Data: Array<any>;
 }
 
 // state 属性
 const state = reactive<ComponentState>({
+    loading: false,
     queryData: {},
     grid1Data: [],
 });
@@ -63,6 +66,7 @@ const data: ComponentData = {
         // suppressLoadingOverlay: true,
         // 选择行配置
         rowSelection: "single",
+        rowModelType: "serverSide",
         columnDefs: [
             { field: 'id', headerName: 'id', editable: false, hide: true },
             { field: 'loginName', headerName: '登录名', editable: false },
@@ -76,19 +80,45 @@ const data: ComponentData = {
         ],
         pagination: true,
         paginationPageSize: 50,
+        cacheBlockSize: 50,
         // suppressPaginationPanel
         onGridReady(event: GridReadyEvent) {
             data.api = event.api
+            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
         },
     },
 };
 
+function reload() {
+    data.api.paginationGoToPage(0);
+    data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+}
+
+function serverSideDatasource(params: IServerSideGetRowsParams) {
+    const { startRow, endRow } = params.request;
+    console.log("startRow, endRow ", params.request);
+    const pageSize = endRow - startRow;
+    const pageNo = Math.floor(startRow / pageSize) + 1;
+    state.loading = true;
+    Request.request.get<PageData>(
+        "/api/workbench/UserPermissions@queryUser",
+        {
+            params: {
+                ...state.queryData,
+                pageSize,
+                pageNo,
+            },
+        },
+    ).then(page => {
+        params.success({ rowData: page.records, rowCount: page.total })
+    }).finally(() => state.loading = false);
+}
 </script>
 
 <template>
     <div class="dashboard flex-column-container">
         <div class="tools flex-item-fixed">
-            <ElButton :icon="Search">查询</ElButton>
+            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
             <ElButton :icon="Plus">新增</ElButton>
             <ElButton :icon="Delete" type="danger" :plain="true">删除</ElButton>
         </div>
@@ -106,7 +136,6 @@ const data: ComponentData = {
             ref="gridRef"
             :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
             v-bind="{...data.gridSetting}"
-            :modelValue="state.grid1Data"
         >
         </AgGridVue>
     </div>