From 73ea5263a35c162cabedd7387c184a987eb5b9b6 Mon Sep 17 00:00:00 2001 From: Vgbire <1053254202@qq.com> Date: Thu, 16 May 2024 15:40:35 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DTable=20dataIndex?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=85=89=E6=A0=87=E6=B6=88=E5=A4=B1=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/table/component/TableBody.tsx | 8 ++++---- .../views/table/component/TableColumnControl.tsx | 15 +++++++-------- apps/low-code/src/views/table/hook/table.tsx | 13 +++++++++---- apps/low-code/src/views/table/index.tsx | 6 +++++- apps/low-code/src/views/table/utils/template.ts | 4 ++-- 5 files changed, 27 insertions(+), 19 deletions(-) diff --git a/apps/low-code/src/views/table/component/TableBody.tsx b/apps/low-code/src/views/table/component/TableBody.tsx index 981f119..4159767 100644 --- 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[]; - setTableColumns: (tableColumns: ColumnType[]) => void; + tableColumns: IColumnType[]; + setTableColumns: (tableColumns: IColumnType[]) => void; dataSource: AnyObject[]; - tableDemoColumns: ColumnType[]; + 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 index 9b0817e..ae3de17 100644 --- 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; - setCurrentColumn: (currentColumn?: ColumnType) => void; - tableColumns: ColumnType[]; - setTableColumns: (tableColumns: ColumnType[]) => 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) => - 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} > diff --git a/apps/low-code/src/views/table/hook/table.tsx b/apps/low-code/src/views/table/hook/table.tsx index 8b6c883..7b5df0a 100644 --- 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>(); + const [currentColumn, setCurrentColumn] = useState(); // 表单项列表 - const [tableColumns, setTableColumns] = useState[]>([ + const [tableColumns, setTableColumns] = useState([ { dataIndex: 'name', title: '名称', + id: uuid(), }, { dataIndex: 'status', title: '状态', + id: uuid(), }, { dataIndex: 'createTime', title: '发送时间', + id: uuid(), }, ]); - const onHeaderCell = (column: ColumnType) => { + 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 index 83007e4..e819a1f 100644 --- 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 { + id?: string; +} + interface TemplateList extends TableAttribute { - columns: ColumnType[]; + 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 index 6571192..144fa8a 100644 --- 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[]; + columns: IColumnType[]; dataSource: AnyObject[]; }