'syncModal接口接入'

src/components/SyncModal/SyncModal.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { Modal, Table } from 'antd';
-import { useModel } from 'umi';
+import { useModel, useRequest } from 'umi';
 import { useState } from 'react';
 import styles from './SyncModal.less';
 import ATooltip from '../Tooltip';
-
+import { fetchApi } from '@/utils/request';
+import { firstCharToLowerCase } from '@/utils/tool';
 
 const columns = [
   {
     title: '文件夹名称',
-    dataIndex: 'name',
-    width: 120,
+    dataIndex: 'projName',
+    width: 200,
     render: (text: string) => (
       <ATooltip title={text} placement="topLeft">
         {text}
@@ -24,7 +25,7 @@ const columns = [
   },
   {
     title: '描述',
-    dataIndex: 'address',
+    dataIndex: 'notice',
     render: (text: string) => (
       <ATooltip title={text} placement="topLeft">
         {text}
@@ -40,48 +41,14 @@ interface DataType {
   address: string;
 }
 
-const data: DataType[] = [
-  {
-    key: '1',
-    name: 'John BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    key: '4',
-    name: 'Disabled User',
-    age: 99,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    key: '5',
-    name: 'Disabled User',
-    age: 99,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    key: '6',
-    name: 'Disabled User',
-    age: 99,
-    address: 'Sidney No. 1 Lake Park',
-  },
-];
-
 export default function SyncModal() {
   const { initialState: { currentUser } = {} } = useModel('@@initialState');
   const [modalVisible, setModalVisible] = useState(true);
+  const { loading, data } = useRequest(async () => {
+    return await fetchApi('project/queryProjectListByUserId', {
+      userId: currentUser!.id,
+    });
+  });
 
   return (
     <Modal
@@ -91,14 +58,26 @@ export default function SyncModal() {
       cancelText="取消"
       okText="确定"
       width={540}
+      onCancel={() => setModalVisible(false)}
     >
-      <div className={styles.title}>选择「与我有关的文件夹」，并同步到「我的电脑/工作空间」中</div>
+      <div className={styles.title}>
+        选择「与我有关的文件夹」，并同步到「我的电脑/工作空间」中
+      </div>
       <Table
         className={styles.table}
+        rowKey="id"
+        loading={loading}
         rowSelection={{
           type: 'checkbox',
-          onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+          onChange: (
+            selectedRowKeys: React.Key[],
+            selectedRows: DataType[],
+          ) => {
+            console.log(
+              `selectedRowKeys: ${selectedRowKeys}`,
+              'selectedRows: ',
+              selectedRows,
+            );
           },
           getCheckboxProps: (record: DataType) => ({
             disabled: record.name === 'Disabled User', // Column configuration not to be checked
@@ -107,9 +86,9 @@ export default function SyncModal() {
         }}
         pagination={false}
         columns={columns}
-        dataSource={data}
+        dataSource={data || []}
         scroll={{ y: 200 }}
       />
     </Modal>
-  )
-}
+  );
+}