edit table

shanhexi · shanhexi · commit 5a80da6e864f · 2023-09-23T14:46:48.000+08:00
diff --git a/chat2db-client/src/blocks/DatabaseTableEditor/ColumnList/index.tsx b/chat2db-client/src/blocks/DatabaseTableEditor/ColumnList/index.tsx
@@ -387,12 +387,14 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
 
   function getColumnListInfo(): IColumnItemNew[] {
     return dataSource.map((i) => {
-      return {
+      const data = {
         ...i,
         tableName: tableDetails?.name,
         databaseName,
         schemaName: schemaName || null,
       };
+      delete data.key;
+      return data;
     });
   }
 
diff --git a/chat2db-client/src/blocks/DatabaseTableEditor/IncludeCol/index.tsx b/chat2db-client/src/blocks/DatabaseTableEditor/IncludeCol/index.tsx
@@ -6,6 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Context } from '../index';
 import { IColumnItemNew, IIndexIncludeColumnItem } from '@/typings';
 import i18n from '@/i18n';
+import { string } from 'sql-formatter/lib/src/lexer/regexFactory';
 
 interface IProps {
   includedColumnList: IIndexIncludeColumnItem[];
@@ -14,29 +15,7 @@ interface IProps {
 const createInitialData = () => {
   return {
     key: uuidv4(),
-    oldName: null,
     name: null,
-    tableName: null,
-    columnType: null,
-    dataType: null,
-    defaultValue: null,
-    autoIncrement: null,
-    comment: null,
-    primaryKey: null,
-    schemaName: null,
-    databaseName: null,
-    typeName: null,
-    columnSize: null,
-    bufferLength: null,
-    decimalDigits: null,
-    numPrecRadix: null,
-    nullableInt: null,
-    sqlDataType: null,
-    sqlDatetimeSub: null,
-    charOctetLength: null,
-    ordinalPosition: null,
-    nullable: null,
-    generatedColumn: null,
   };
 };
 
@@ -49,46 +28,42 @@ const InitialDataSource = [createInitialData()];
 const IncludeCol = forwardRef((props: IProps, ref: ForwardedRef<IIncludeColRef>) => {
   const { includedColumnList } = props;
   const { columnListRef } = useContext(Context);
-  const [dataSource, setDataSource] = useState<IIndexIncludeColumnItem[]>(InitialDataSource);
+  const [dataSource, setDataSource] = useState<any[]>(InitialDataSource);
   const [form] = Form.useForm();
-  const [editingKey, setEditingKey] = useState(dataSource[0]?.key);
+  const [editingKey, setEditingKey] = useState<string | null>(null);
   const isEditing = (record: IIndexIncludeColumnItem) => record.key === editingKey;
 
   useEffect(() => {
     if (includedColumnList.length) {
       setDataSource(
         includedColumnList.map((t) => {
           return {
-            ...t,
             key: uuidv4(),
+            name: t.name,
           };
         }),
       );
     }
   }, [includedColumnList]);
 
   const columnList: IColumnItemNew[] = useMemo(() => {
-    const columnListInfo = columnListRef.current?.getColumnListInfo()?.filter((i) => i.name);
+    const columnListInfo = columnListRef.current?.getColumnListInfo()?.filter((i) => i.name !== null);
     return columnListInfo || [];
   }, []);
 
-  const edit = (record: IIndexIncludeColumnItem) => {
+  const edit = (record: any) => {
     form.setFieldsValue({ ...record });
-    setEditingKey(record.key);
+    setEditingKey(record.key || null);
   };
 
   const addData = () => {
     const newData = createInitialData();
     setDataSource([...dataSource, newData]);
+    console.log([...dataSource, newData]);
     edit(newData);
   };
 
   const deleteData = () => {
-    // if (dataSource.length === 1) {
-    //   message.warning('至少保留一条数据')
-    //   return
-    // }
-
     setDataSource(dataSource.filter((i) => i.key !== editingKey));
   };
 
@@ -103,12 +78,12 @@ const IncludeCol = forwardRef((props: IProps, ref: ForwardedRef<IIncludeColRef>)
     },
     {
       title: i18n('editTable.label.columnName'),
-      dataIndex: 'columnName',
+      dataIndex: 'name',
       // width: '45%',
       render: (text: string, record: IIndexIncludeColumnItem) => {
         const editable = isEditing(record);
         return editable ? (
-          <Form.Item name="columnName" style={{ margin: 0 }}>
+          <Form.Item name="name" style={{ margin: 0 }}>
             <Select options={columnList.map((i) => ({ label: i.name, value: i.name }))} />
           </Form.Item>
         ) : (
@@ -137,24 +112,28 @@ const IncludeCol = forwardRef((props: IProps, ref: ForwardedRef<IIncludeColRef>)
     // },
   ];
 
-  const onValuesChange = (changedValues: any, allValues: any) => {
-    const newDataSource = dataSource?.map((i) => {
-      if (i.key === editingKey) {
+  const handelFieldsChange = (field: any) => {
+    const { value } = field[0];
+    const { name: nameList } = field[0];
+    const name = nameList[0];
+    const newData = dataSource.map((item) => {
+      if (item.key === editingKey) {
         return {
-          ...i,
-          ...allValues,
+          ...item,
+          [name]: value,
         };
       }
-      return i;
+      return item;
     });
-    setDataSource(newDataSource);
+    setDataSource(newData);
   };
 
   const getIncludeColInfo = () => {
     const includeColInfo: IIndexIncludeColumnItem[] = [];
     dataSource.forEach((t) => {
       columnList.forEach((columnItem) => {
         if (t.name === columnItem.name) {
+          delete columnItem.key;
           includeColInfo.push({
             ...columnItem,
           });
@@ -174,7 +153,7 @@ const IncludeCol = forwardRef((props: IProps, ref: ForwardedRef<IIncludeColRef>)
         <Button onClick={addData}>{i18n('editTable.button.add')}</Button>
         <Button onClick={deleteData}>{i18n('editTable.button.delete')}</Button>
       </div>
-      <Form form={form} onValuesChange={onValuesChange}>
+      <Form form={form} onFieldsChange={handelFieldsChange}>
         <Table pagination={false} rowKey="key" columns={columns} dataSource={dataSource} />
       </Form>
     </div>
diff --git a/chat2db-client/src/blocks/DatabaseTableEditor/IndexList/index.tsx b/chat2db-client/src/blocks/DatabaseTableEditor/IndexList/index.tsx
@@ -23,7 +23,7 @@ import { IndexesType, EditColumnOperationType } from '@/constants';
 import { Context } from '../index';
 import i18n from '@/i18n';
 
-const indexesTypeList = [IndexesType['Normal'], IndexesType['Unique'], IndexesType['Fulltext'], IndexesType['Spatial']];
+const indexesTypeList = Object.values(IndexesType);
 
 interface IProps {}
 
@@ -165,7 +165,10 @@ const IndexList = forwardRef((props: IProps, ref: ForwardedRef<IIndexListRef>) =
   };
 
   function getIndexListInfo(): IIndexListInfo {
-    return dataSource;
+    return dataSource.map((i) => {
+      delete i.key;
+      return i;
+    });
   }
 
   useImperativeHandle(ref, () => ({
@@ -254,29 +257,47 @@ const IndexList = forwardRef((props: IProps, ref: ForwardedRef<IIndexListRef>) =
         );
       },
     },
+    // {
+    //   title: i18n('editTable.label.comment'),
+    //   dataIndex: 'comment',
+    //   render: (text: string, record: IIndexItem) => {
+    //     const editable = isEditing(record);
+    //     return editable ? (
+    //       <Form.Item name="comment" style={{ margin: 0 }}>
+    //         <Input />
+    //       </Form.Item>
+    //     ) : (
+    //       <div className={styles.editableCell} onClick={() => edit(record)}>
+    //         {text}
+    //       </div>
+    //     );
+    //   },
+    // },
   ];
 
   const getIncludeColInfo = () => {
     setDataSource(
       dataSource.map((i) => {
         const columnList = includeColRef.current?.getIncludeColInfo();
+        console.log(columnList);
         if (i.key === editingKey && columnList) {
           i.columnList = columnList;
         }
         return i;
       }),
     );
+
     setIncludeColModalOpen(false);
   };
 
   const indexIncludedColumnList: IIndexIncludeColumnItem[] = useMemo(() => {
-    let data: IIndexIncludeColumnItem[] | null = [];
+    let list: IIndexIncludeColumnItem[] = [];
     dataSource.forEach((i) => {
       if (i.key === editingKey) {
-        data = i.columnList;
+        list = i.columnList || [];
       }
     });
-    return data;
+    return list;
   }, [editingKey]);
 
   return (
diff --git a/chat2db-client/src/blocks/DatabaseTableEditor/index.tsx b/chat2db-client/src/blocks/DatabaseTableEditor/index.tsx
@@ -8,6 +8,7 @@ import BaseInfo, { IBaseInfoRef } from './BaseInfo';
 import sqlService, { IModifyTableSqlParams } from '@/service/sql';
 import { IEditTableInfo } from '@/typings';
 import i18n from '@/i18n';
+import lodash from 'lodash';
 
 interface IProps {
   dataSourceId: number;
@@ -73,7 +74,20 @@ export default memo((props: IProps) => {
         refresh: true,
       };
       sqlService.getTableDetails(params).then((res) => {
-        setTableDetails(res || {});
+        const newTableDetails = lodash.cloneDeep(res);
+        newTableDetails.indexList.forEach((i) => {
+          i.columnList = i.columnList.map((j: any) => {
+            let newColumn: any = {};
+            newTableDetails.columnList.forEach((k: any) => {
+              if (j.columnName === k.name) {
+                newColumn = k;
+              }
+            });
+            return newColumn;
+          });
+        });
+        console.log(newTableDetails);
+        setTableDetails(newTableDetails || {});
         setOldTableDetails(res);
       });
     }
diff --git a/chat2db-client/src/constants/editTable.ts b/chat2db-client/src/constants/editTable.ts
@@ -1,13 +1,10 @@
 // 索引类型
 export enum IndexesType {
-  // 普通索引
-  Normal = 'normal',
-  // 唯一索引
-  Unique = 'unique',
-  // 全文索引
-  Fulltext = 'fulltext',
-  // 空间索引
-  Spatial = 'spatial',
+  NormPRIMARY_KEYal = 'PRIMARY_KEY',
+  NORMAL = 'NORMAL',
+  UNIQUE = 'UNIQUE',
+  FULLTEXT = 'FULLTEXT',
+  SPATIAL = 'SPATIAL',
 }
 
 export enum EditColumnOperationType { 
diff --git a/chat2db-client/src/typings/editTable.ts b/chat2db-client/src/typings/editTable.ts
@@ -36,10 +36,30 @@ export interface IColumnItemNew {
   generatedColumn: string | null; // 是否生成列
 }
 
+// 
 export interface IIndexIncludeColumnItem extends IColumnItemNew {
+}
 
+// 后端给的索引内列的数据结构
+export interface IAfterEndIndexIncludeColumnItem {
+  ascOrDesc: string | null; // 升序还是降序
+  cardinality: number | null; // 基数
+  collation: string | null; // 排序规则
+  columnName: string | null; // 列名
+  comment: string | null; // 注释
+  databaseName: string | null; // 数据库名
+  filterCondition: string | null; // 过滤条件
+  indexName: string | null; // 索引名
+  indexQualifier: string | null; // 索引限定符
+  nonUnique: boolean | null; // 是否唯一
+  ordinalPosition: number | null; // 位置
+  schemaName: string | null; // 模式名
+  tableName: string | null; // 表名
+  type: string | null; // 类型
+  pages: number | null; // 页数
 }
 
+
 // 编辑表时索引的数据结构
 export interface IIndexItem {
   key?: string;
