diff --git a/apps/builder/package.json b/apps/builder/package.json index f10b39bd8c..bf42b8173c 100644 --- a/apps/builder/package.json +++ b/apps/builder/package.json @@ -5,7 +5,7 @@ "private": true, "author": "ILLA Cloud ", "license": "Apache-2.0", - "version": "4.3.7", + "version": "4.4.0", "scripts": { "dev": "vite --strictPort --force", "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288 vite build --mode cloud", diff --git a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx index cc742980e2..87979b234f 100644 --- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx +++ b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx @@ -8,6 +8,7 @@ import { ColumnContainer } from "@/page/App/components/InspectPanel/PanelSetters import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector" import { RootState } from "@/store" import { getColumnTypeFromValue } from "@/widgetLibrary/DataGridWidget/columnDeal" +import { UNIQUE_ID_NAME } from "@/widgetLibrary/DataGridWidget/constants" import { getColumnsTypeSetter } from "@/widgetLibrary/DataGridWidget/panelConfig" import { Column } from "../../DragMoveComponent/Column" import { ColumnEmpty } from "../../DragMoveComponent/Empty" @@ -18,8 +19,16 @@ function generateCalcColumnConfig( isCalc: boolean, randomKey: boolean, ): ColumnConfig { + let field + if (key === UNIQUE_ID_NAME) { + field = UNIQUE_ID_NAME + } else if (randomKey) { + field = v4() + } else { + field = `${key}` + } return { - field: randomKey ? v4() : `${key}`, + field, headerName: `${key}`, width: 170, isCalc: isCalc, @@ -142,38 +151,40 @@ const ColumnSetter: FC = (props) => { items={mixedColumns.map((item) => item.field)} > {mixedColumns.length > 0 ? ( - mixedColumns.map((config, index) => ( - { - const finalColumns = mixedColumns.filter( - (item) => item.field !== id, - ) - handleUpdateMultiAttrDSL?.({ - [attrName]: finalColumns, - }) - }} - childrenSetter={getColumnsTypeSetter( - config.columnType, - getColumnTypeFromValue(get(arrayData[0], config.field)), - )} - showDelete={!config.isCalc} - attrPath={`${attrName}.${index}`} - widgetDisplayName={widgetDisplayName} - key={config.field} - id={config.field} - showVisible={true} - label={config.headerName ?? config.field} - visibility={columnVisibilityModel?.[config.field] ?? true} - onVisibilityChange={(visibility) => { - handleUpdateMultiAttrDSL?.({ - ["columnVisibilityModel"]: { - ...columnVisibilityModel, - [config.field]: visibility, - }, - }) - }} - /> - )) + mixedColumns.map((config, index) => + config.field === UNIQUE_ID_NAME ? null : ( + { + const finalColumns = mixedColumns.filter( + (item) => item.field !== id, + ) + handleUpdateMultiAttrDSL?.({ + [attrName]: finalColumns, + }) + }} + childrenSetter={getColumnsTypeSetter( + config.columnType, + getColumnTypeFromValue(get(arrayData[0], config.field)), + )} + showDelete={!config.isCalc} + attrPath={`${attrName}.${index}`} + widgetDisplayName={widgetDisplayName} + key={config.field} + id={config.field} + showVisible={true} + label={config.headerName ?? config.field} + visibility={columnVisibilityModel?.[config.field] ?? true} + onVisibilityChange={(visibility) => { + handleUpdateMultiAttrDSL?.({ + ["columnVisibilityModel"]: { + ...columnVisibilityModel, + [config.field]: visibility, + }, + }) + }} + /> + ), + ) ) : ( )} diff --git a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils.ts index e3b85a05a5..e764b665e1 100644 --- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils.ts +++ b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils.ts @@ -1,6 +1,8 @@ import { isObject, isString } from "lodash-es" +import { v4 } from "uuid" import { isNumber } from "@illa-design/react" import { JSToString, stringToJS } from "@/utils/evaluateDynamicString/utils" +import { UNIQUE_ID_NAME } from "@/widgetLibrary/DataGridWidget/constants" export function dealRawData2ArrayData(rawData: unknown): object[] { if (rawData === undefined || rawData === "" || rawData === null) { @@ -11,10 +13,16 @@ export function dealRawData2ArrayData(rawData: unknown): object[] { return [] } else { if (isObject(rawData[0])) { - return rawData + return rawData.map((item) => { + return { + [UNIQUE_ID_NAME]: v4(), + ...item, + } + }) } else { return rawData.map((item) => { return { + [UNIQUE_ID_NAME]: v4(), field: item, } }) @@ -22,10 +30,16 @@ export function dealRawData2ArrayData(rawData: unknown): object[] { } } else { if (isObject(rawData)) { - return [rawData] + return [ + { + [UNIQUE_ID_NAME]: v4(), + ...rawData, + }, + ] } else { return [ { + [UNIQUE_ID_NAME]: v4(), field: rawData, }, ] diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/constants.ts b/apps/builder/src/widgetLibrary/DataGridWidget/constants.ts new file mode 100644 index 0000000000..8aea997c18 --- /dev/null +++ b/apps/builder/src/widgetLibrary/DataGridWidget/constants.ts @@ -0,0 +1 @@ +export const UNIQUE_ID_NAME = "$uniqueID" diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx index 2c51a9d8fd..be0fdd552a 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx +++ b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx @@ -15,7 +15,6 @@ import { useRef, } from "react" import { useDispatch } from "react-redux" -import { v4 } from "uuid" import { getColor } from "@illa-design/react" import { dealRawData2ArrayData } from "@/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils" import { executionActions } from "@/redux/currentApp/executionTree/executionSlice" @@ -25,6 +24,7 @@ import { getSafeColumn, } from "@/widgetLibrary/DataGridWidget/columnDeal" import { Toolbar } from "./Toolbar" +import { UNIQUE_ID_NAME } from "./constants" import { BaseDataGridProps } from "./interface" export const DataGridWidget: FC = (props) => { @@ -218,7 +218,8 @@ export const DataGridWidget: FC = (props) => { ]) const renderColumns = useMemo(() => { - return columns?.map((column) => { + if (!columns) return [] + const currentColumns: GridColDef[] = columns.map((column) => { const safeColumn = getSafeColumn(column) return safeColumn.columnType === "auto" ? getColumnFromType( @@ -232,6 +233,12 @@ export const DataGridWidget: FC = (props) => { ) : getColumnFromType(safeColumn, triggerEventHandler) }) + const uniqueId = { + field: UNIQUE_ID_NAME, + headerName: "", + type: "string", + } + return [uniqueId, ...currentColumns] }, [arrayData, columns, triggerEventHandler]) const aggregationModel = useMemo(() => { @@ -262,7 +269,7 @@ export const DataGridWidget: FC = (props) => { primaryKey === "—" || !(primaryKey in row) ) { - return v4() + return get(row, UNIQUE_ID_NAME) } else { return get(row, primaryKey) } @@ -303,7 +310,10 @@ export const DataGridWidget: FC = (props) => { ]) triggerEventHandler("onColumnVisibilityModelChange") }} - columnVisibilityModel={columnVisibilityModel} + columnVisibilityModel={{ + [UNIQUE_ID_NAME]: false, + ...columnVisibilityModel, + }} onRowSelectionModelChange={(model) => { handleUpdateMultiExecutionResult([ {