1

frontend/src/pages/Deploy/ProjectGroup/List/index.tsx

@@ -1,12 +1,13 @@
 import React, {useState} from 'react';
 import {PageContainer} from '@ant-design/pro-layout';
-import {Button, Space, Popconfirm, Tag, App} from 'antd';
+import {Button, Space, Popconfirm, Tag, App, Form, Input, Select, Card} from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
     DeleteOutlined,
     TeamOutlined,
     EnvironmentOutlined,
+    SearchOutlined,
 } from '@ant-design/icons';
 import {getProjectGroupPage, deleteProjectGroup} from './service';
 import type {ProjectGroup, ProjectGroupQueryParams} from './types';
@@ -20,6 +21,7 @@ const ProjectGroupList: React.FC = () => {
     const [modalVisible, setModalVisible] = useState(false);
     const [currentProject, setCurrentProject] = useState<ProjectGroup>();
     const actionRef = React.useRef<ActionType>();
+    const [searchForm] = Form.useForm();
     const {message: messageApi} = App.useApp();
 
     const handleDelete = async (id: number) => {
@@ -53,6 +55,10 @@ const ProjectGroupList: React.FC = () => {
         actionRef.current?.reload();
     };
 
+    const handleSearch = async (values: any) => {
+        actionRef.current?.reload();
+    };
+
     const columns: ProColumns<ProjectGroup>[] = [
         {
             title: '项目组编码',
@@ -61,12 +67,18 @@ const ProjectGroupList: React.FC = () => {
             copyable: true,
             ellipsis: true,
             fixed: 'left',
+            filters: true,
+            filterSearch: true,
+            onFilter: (value: string, record) => record.projectGroupCode.toLowerCase().includes(value.toLowerCase()),
         },
         {
             title: '项目组名称',
             dataIndex: 'projectGroupName',
             width: 150,
             ellipsis: true,
+            filters: true,
+            filterSearch: true,
+            onFilter: (value: string, record) => record.projectGroupName.toLowerCase().includes(value.toLowerCase()),
         },
         {
             title: '项目组描述',
@@ -171,6 +183,56 @@ const ProjectGroupList: React.FC = () => {
 
     return (
         <PageContainer>
+            <Card style={{ marginBottom: 16 }}>
+                <Form
+                    form={searchForm}
+                    layout="inline"
+                    onFinish={handleSearch}
+                    style={{ gap: '16px' }}
+                >
+                    <Form.Item name="projectGroupCode" label="项目组编码">
+                        <Input placeholder="请输入项目组编码" allowClear />
+                    </Form.Item>
+                    <Form.Item name="projectGroupName" label="项目组名称">
+                        <Input placeholder="请输入项目组名称" allowClear />
+                    </Form.Item>
+                    <Form.Item name="type" label="项目组类型">
+                        <Select
+                            placeholder="请选择项目组类型"
+                            allowClear
+                            style={{ width: 200 }}
+                            options={[
+                                { label: '产品型', value: ProjectGroupTypeEnum.PRODUCT },
+                                { label: '项目型', value: ProjectGroupTypeEnum.PROJECT },
+                            ]}
+                        />
+                    </Form.Item>
+                    <Form.Item name="enabled" label="状态">
+                        <Select
+                            placeholder="请选择状态"
+                            allowClear
+                            style={{ width: 120 }}
+                            options={[
+                                { label: '启用', value: true },
+                                { label: '禁用', value: false },
+                            ]}
+                        />
+                    </Form.Item>
+                    <Form.Item>
+                        <Space>
+                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+                                搜索
+                            </Button>
+                            <Button onClick={() => {
+                                searchForm.resetFields();
+                                handleSearch({});
+                            }}>
+                                重置
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+            </Card>
             <ProTable<ProjectGroup>
                 columns={columns}
                 actionRef={actionRef}
@@ -206,12 +268,14 @@ const ProjectGroupList: React.FC = () => {
                 }}
                 request={async (params) => {
                     try {
+                        const formValues = searchForm.getFieldsValue();
                         const queryParams: ProjectGroupQueryParams = {
                             pageSize: params.pageSize,
                             pageNum: params.current,
-                            projectGroupName: params.projectGroupName as string,
-                            projectGroupCode: params.projectGroupCode as string,
-                            enabled: params.enabled as boolean,
+                            projectGroupCode: formValues.projectGroupCode?.trim(),
+                            projectGroupName: formValues.projectGroupName?.trim(),
+                            type: formValues.type,
+                            enabled: formValues.enabled,
                         };
                         const data = await getProjectGroupPage(queryParams);
                         return {