Просмотр исходного кода

✨ feat(admin): enhance permissions and roles management pages

- 优化权限页面筛选功能:选择类型时自动重置页码并重新获取数据
- 角色管理页面添加搜索功能:支持按角色名称或描述搜索
- 角色管理页面添加重置按钮:快速清除搜索条件
- 改进角色管理表格分页:支持页码和每页条数变更事件处理
yourname 8 месяцев назад
Родитель
Сommit
8b2d33dde1
2 измененных файлов с 49 добавлено и 26 удалено
  1. 10 2
      src/client/admin/pages/Permissions.tsx
  2. 39 24
      src/client/admin/pages/Roles.tsx

+ 10 - 2
src/client/admin/pages/Permissions.tsx

@@ -264,9 +264,17 @@ const Permissions: React.FC = () => {
             placeholder="按类型筛选"
             allowClear
             value={searchType}
-            onChange={setSearchType}
+            onChange={(value) => {
+              setSearchType(value);
+              setPagination(prev => ({ ...prev, current: 1 }));
+              fetchPermissions({
+                page: 1,
+                pageSize: pagination.pageSize,
+                keyword: searchKeyword,
+                type: value || undefined
+              });
+            }}
             style={{ width: 150 }}
-            onSelect={handleSearch}
             onClear={handleReset}
           >
             <Option value="module">模块权限</Option>

+ 39 - 24
src/client/admin/pages/Roles.tsx

@@ -376,36 +376,51 @@ React.useEffect(() => {
   ];
 
   return (
-    <div className="p-6">
-      <Spin spinning={rolesLoading || permissionsLoading}>
-        <Card
-          title="角色管理"
-          extra={
-            <Button 
-              type="primary" 
-              icon={<PlusOutlined />} 
+  <div className="p-6">
+    <Spin spinning={rolesLoading || permissionsLoading}>
+      <Card
+        title="角色管理"
+        extra={
+          <Space>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
               onClick={handleAdd}
               loading={createRoleMutation.isPending}
             >
               新建角色
             </Button>
-          }
-        >
-          <Table
-            columns={columns}
-            dataSource={roles}
-            rowKey="id"
-            scroll={{ x: 1000 }}
-            pagination={{
-              showSizeChanger: true,
-              showQuickJumper: true,
-              showTotal: (total: number) => `共 ${total} 条记录`,
-              defaultPageSize: 10,
-              pageSizeOptions: [10, 20, 50, 100],
-            }}
+          </Space>
+        }
+      >
+        <div className="mb-4 flex gap-4">
+          <Input.Search
+            placeholder="搜索角色名称或描述"
+            allowClear
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+            onSearch={handleSearch}
+            style={{ width: 300 }}
           />
-        </Card>
-      </Spin>
+          <Button onClick={handleReset}>重置</Button>
+        </div>
+        
+        <Table
+          columns={columns}
+          dataSource={roles}
+          rowKey="id"
+          scroll={{ x: 1000 }}
+          pagination={{
+            ...pagination,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total: number) => `共 ${total} 条记录`,
+            pageSizeOptions: [10, 20, 50, 100],
+          }}
+          onChange={handleTableChange}
+        />
+      </Card>
+    </Spin>
 
       {/* 角色编辑模态框 */}
       <Modal