fix: 修复Table dataIndex设置光标消失的问题

Vgbire · May 16, 2024 · 73ea526 · 73ea526
1 parent 27dc012
commit 73ea526
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 19 deletions.
diff --git a/apps/low-code/src/views/table/component/TableBody.tsx b/apps/low-code/src/views/table/component/TableBody.tsx
@@ -1,15 +1,15 @@
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { ColumnType } from 'antd/lib/table';
+import { IColumnType } from '..';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Table } from 'antd';
 import { AnyObject } from 'src/types';
 import { TableAttribute } from './TableGlobalControl';
 
 export interface TableBodyProps {
-  tableColumns: ColumnType<any>[];
-  setTableColumns: (tableColumns: ColumnType<any>[]) => void;
+  tableColumns: IColumnType[];
+  setTableColumns: (tableColumns: IColumnType[]) => void;
   dataSource: AnyObject[];
-  tableDemoColumns: ColumnType<any>[];
+  tableDemoColumns: IColumnType[];
   addTableColumns: () => void;
   tableAttribute: TableAttribute;
 }

diff --git a/apps/low-code/src/views/table/component/TableColumnControl.tsx b/apps/low-code/src/views/table/component/TableColumnControl.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { ColumnType } from 'antd/lib/table';
+import { IColumnType } from '..';
 import { CloseOutlined } from '@ant-design/icons';
 import { Selection } from '@libs/ui';
 import {
@@ -18,10 +18,10 @@ import { renderTypeList } from '../utils/const';
 import { generateRender, getRenderTemplate } from '../utils/renderTemplate';
 
 interface TableColumnControlProps {
-  currentColumn: ColumnType<AnyObject>;
-  setCurrentColumn: (currentColumn?: ColumnType<AnyObject>) => void;
-  tableColumns: ColumnType<AnyObject>[];
-  setTableColumns: (tableColumns: ColumnType<AnyObject>[]) => void;
+  currentColumn: IColumnType;
+  setCurrentColumn: (currentColumn?: IColumnType) => void;
+  tableColumns: IColumnType[];
+  setTableColumns: (tableColumns: IColumnType[]) => void;
   dataSource: AnyObject[];
   setDataSource: (dataSource: AnyObject[]) => void;
   addTableColumns: () => void;
@@ -76,8 +76,7 @@ export const TableColumnControl = (props: TableColumnControlProps) => {
         }
       }
       const index = tableColumns.findIndex(
-        (column: ColumnType<any>) =>
-          column.dataIndex === currentColumn.dataIndex
+        (column: IColumnType) => column.dataIndex === currentColumn.dataIndex
       );
       const column = form.getFieldsValue(true);
       setCurrentColumn(column);
@@ -92,7 +91,7 @@ export const TableColumnControl = (props: TableColumnControlProps) => {
         form={form}
         onValuesChange={onValuesChange}
         labelCol={{ span: 6 }}
-        key={currentColumn.dataIndex as string}
+        key={currentColumn.id}
       >
         <Form.Item label="标题" name="title">
           <Input />

diff --git a/apps/low-code/src/views/table/hook/table.tsx b/apps/low-code/src/views/table/hook/table.tsx
@@ -1,32 +1,36 @@
 import React, { useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { ColumnType } from 'antd/lib/table';
+import { IColumnType } from '..';
 import { AnyObject } from 'src/types';
-import { shortUuid } from 'src/utils';
+import { shortUuid, uuid } from 'src/utils';
 import { TableAttribute } from '../component/TableGlobalControl';
 
 // 在modal模板需要用到Table，复用代码封装了Table Hook
 export const useTableHook = () => {
   // 当前选中的表单项索引
-  const [currentColumn, setCurrentColumn] = useState<ColumnType<any>>();
+  const [currentColumn, setCurrentColumn] = useState<IColumnType>();
 
   // 表单项列表
-  const [tableColumns, setTableColumns] = useState<ColumnType<any>[]>([
+  const [tableColumns, setTableColumns] = useState<IColumnType[]>([
     {
       dataIndex: 'name',
       title: '名称',
+      id: uuid(),
     },
     {
       dataIndex: 'status',
       title: '状态',
+      id: uuid(),
     },
     {
       dataIndex: 'createTime',
       title: '发送时间',
+      id: uuid(),
     },
   ]);
 
-  const onHeaderCell = (column: ColumnType<any>) => {
+  const onHeaderCell = (column: IColumnType) => {
     return {
       onClick: (e) => {
         e.stopPropagation();
@@ -90,6 +94,7 @@ export const useTableHook = () => {
     const column = {
       title: '默认',
       dataIndex: 'default' + shortUuid(),
+      id: uuid(),
     };
     tableColumns.splice(
       index === -1 ? tableColumns.length : index + 1,

diff --git a/apps/low-code/src/views/table/index.tsx b/apps/low-code/src/views/table/index.tsx
@@ -17,8 +17,12 @@ import {
 import { useTableHook } from './hook/table';
 import { getTableTemplate } from './utils/template';
 
+export interface IColumnType extends ColumnType<any> {
+  id?: string;
+}
+
 interface TemplateList extends TableAttribute {
-  columns: ColumnType<any>[];
+  columns: IColumnType[];
   dataSource: AnyObject[];
   templateId: string;
 }

diff --git a/apps/low-code/src/views/table/utils/template.ts b/apps/low-code/src/views/table/utils/template.ts
@@ -1,10 +1,10 @@
-import { ColumnType } from 'antd/lib/table';
+import { IColumnType } from '..';
 import { AnyObject } from 'src/types';
 import { prettierCode } from 'src/utils';
 import { TableAttribute } from '../component/TableGlobalControl';
 
 export interface TemplateTableAttribute extends TableAttribute {
-  columns: ColumnType<any>[];
+  columns: IColumnType[];
   dataSource: AnyObject[];
 }