From da354665981e6d04273c2c68cd69069989f82908 Mon Sep 17 00:00:00 2001
From: "www.zerocode.net.cn" <www.zerocode.net.cn@gmail.com>
Date: Tue, 17 Sep 2024 22:20:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E5=92=8C=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=9F=A5=E8=AF=A2=E9=A1=B5=E9=9D=A2=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

开发了一个新的数据模型选择组件（ProjectSelect），它允许用户从个人和团队项目中选择一个数据模型。此组件已集成到数据查询页面，为用户提供了在不同数据模型之间切换的选项，增强了用户体验和数据查询效率。
---
 src/components/ProjectSelect/index.tsx | 87 ++++++++++++++++++++++++++
 src/pages/dataQuery/index.tsx          | 11 +++-
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ProjectSelect/index.tsx

diff --git a/src/components/ProjectSelect/index.tsx b/src/components/ProjectSelect/index.tsx
new file mode 100644
index 0000000..bb15a0b
--- /dev/null
+++ b/src/components/ProjectSelect/index.tsx
@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import { Select, message } from 'antd';
+import { pageProject, recentProject } from "@/services/project";
+
+const { Option, OptGroup } = Select;
+
+interface ProjectSelectProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  style?: React.CSSProperties;
+  size?: 'small' | 'middle' | 'large';
+}
+
+interface DataModel {
+  id: string;
+  projectName: string;
+  type: string;
+}
+
+const ProjectSelect: React.FC<ProjectSelectProps> = ({ value, onChange, style, size = 'middle' }) => {
+  const [dataModels, setDataModels] = useState<DataModel[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetchDataModels();
+  }, []);
+
+  const fetchDataModels = async (searchValue?: string) => {
+    setLoading(true);
+    try {
+      const response = await recentProject({ 
+        page: 1, 
+        limit: 10,
+        projectName: searchValue,
+        order: "updateTime",
+      });
+      if (response && response.data && response.data.records) {
+        setDataModels(response.data.records);
+      }
+    } catch (error) {
+      console.error("Error fetching data models:", error);
+      message.error("Failed to fetch data models");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (value: string) => {
+    fetchDataModels(value);
+  };
+
+  const groupedDataModels = dataModels.reduce((acc, model) => {
+    const key = model.type === '1' ? 'personal' : 'team';
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(model);
+    return acc;
+  }, {} as { personal: DataModel[], team: DataModel[] });
+
+  return (
+    <Select
+      value={value}
+      onChange={onChange}
+      style={style}
+      size={size}
+      placeholder="选择数据模型"
+      showSearch
+      filterOption={false}
+      onSearch={handleSearch}
+      loading={loading}
+    >
+      <OptGroup label="个人项目">
+        {groupedDataModels.personal?.map(model => (
+          <Option key={model.id} value={model.id}>{model.projectName}</Option>
+        ))}
+      </OptGroup>
+      <OptGroup label="团队项目">
+        {groupedDataModels.team?.map(model => (
+          <Option key={model.id} value={model.id}>{model.projectName}</Option>
+        ))}
+      </OptGroup>
+    </Select>
+  );
+};
+
+export default ProjectSelect;
diff --git a/src/pages/dataQuery/index.tsx b/src/pages/dataQuery/index.tsx
index 95a8d3c..6096dab 100644
--- a/src/pages/dataQuery/index.tsx
+++ b/src/pages/dataQuery/index.tsx
@@ -24,6 +24,7 @@ import type { DataNode } from 'antd/es/tree';
 import { ModalForm, ProFormText } from '@ant-design/pro-components';
 import { FolderOutlined, CodeOutlined, ApiOutlined, BarChartOutlined } from '@ant-design/icons';
 import './style.less';
+import ProjectSelect from '@/components/ProjectSelect';
 
 const {Text} = Typography;
 const {Search} = Input;
@@ -292,9 +293,17 @@ const DataQuery: React.FC<QueryProps> = (props) => {
     setOpen(false);
   };
 
+  const [selectedDataModel, setSelectedDataModel] = useState<string | undefined>(undefined);
+
   const actions = <Space direction="vertical">
     <Space wrap>
-      <a onClick={handleOpen}><span style={{marginRight: 8}}>已选表</span><Badge count={selectedTable?.length}/></a>
+      <span style={{marginRight: 8}}>数据模型</span>
+      <ProjectSelect
+        value={selectedDataModel}
+        onChange={(value) => setSelectedDataModel(value)}
+        style={{ width: 200 }}
+        size="small"
+      />
 
       <span style={{marginRight: 8}}>数据源</span>
       <DataSourceSelect