diff --git a/packages/drip-table-generator/package.json b/packages/drip-table-generator/package.json index 83c62c1d6..82675adc7 100755 --- a/packages/drip-table-generator/package.json +++ b/packages/drip-table-generator/package.json @@ -1,6 +1,6 @@ { "name": "drip-table-generator", - "version": "3.1.4-alpha.6", + "version": "3.1.4-alpha.7", "description": "A visualization tool for generating schema of drip-table.", "main": "dist/index.min.js", "module": "lib/index.js", diff --git a/packages/drip-table-generator/src/layouts/attributes-layout/component-configs/index.tsx b/packages/drip-table-generator/src/layouts/attributes-layout/component-configs/index.tsx index 4416bde09..b05892456 100644 --- a/packages/drip-table-generator/src/layouts/attributes-layout/component-configs/index.tsx +++ b/packages/drip-table-generator/src/layouts/attributes-layout/component-configs/index.tsx @@ -78,15 +78,15 @@ const ComponentConfigForm = < if (typeof iconConfig === 'string') { formData['options.mode'] = 'library'; formData['options.icon'] = iconConfig; - formData['options.iconRender'] = ''; + formData['options.icon.render'] = ''; } else if (typeof iconConfig.name === 'string') { formData['options.mode'] = 'library'; formData['options.icon'] = iconConfig?.name; - formData['options.iconRender'] = ''; + formData['options.icon.render'] = ''; } else { formData['options.mode'] = 'custom'; formData['options.icon'] = ''; - formData['options.iconRender'] = iconConfig?.html || iconConfig?.render; + formData['options.icon.render'] = iconConfig?.html || iconConfig?.render; } } if (columnConfigs.component === 'button') { @@ -125,11 +125,11 @@ const ComponentConfigForm = < if (currentColumn?.component === 'icon') { if (formData['options.mode'] === 'custom') { uiProps.icon = { - render: uiProps.iconRender, + render: uiProps['icon.render'], }; } delete uiProps.mode; - delete uiProps.iconRender; + delete uiProps['icon.render']; } if (dataProps.width && !Number.isNaN(Number(dataProps.width))) { dataProps.width = Number(dataProps.width); diff --git a/packages/drip-table-generator/src/layouts/attributes-layout/component-item-config/index.tsx b/packages/drip-table-generator/src/layouts/attributes-layout/component-item-config/index.tsx index d04214c1a..0645626d2 100644 --- a/packages/drip-table-generator/src/layouts/attributes-layout/component-item-config/index.tsx +++ b/packages/drip-table-generator/src/layouts/attributes-layout/component-item-config/index.tsx @@ -10,6 +10,7 @@ import './index.less'; import { ExclamationCircleTwoTone } from '@ant-design/icons'; import { Result } from 'antd'; import { DripTableExtraOptions } from 'drip-table'; +import cloneDeep from 'lodash/cloneDeep'; import React from 'react'; import { filterAttributes } from '@/utils'; @@ -58,7 +59,7 @@ const ComponentItemConfigForm = < icons: props.icons, }); - const decodeColumnConfigs = (columnConfigs?: DTGTableConfig['columns'][number], defaultData?: Record) => { + const decodeColumnConfigs = (columnConfigs: DTGTableConfig['columns'][number], defaultData?: Record) => { const formData: Record = {}; if (typeof columnConfigs?.title === 'string') { formData.title = columnConfigs.title; @@ -73,6 +74,25 @@ const ComponentItemConfigForm = < formData[`style.${key}`] = columnConfigs.style?.[key]; }); } + if (columnConfigs.component === 'icon') { + const iconConfig = columnConfigs?.options?.icon as Record | string ?? ''; + if (typeof iconConfig === 'string') { + formData['options.mode'] = 'library'; + formData['options.icon'] = iconConfig; + formData['options.icon.render'] = ''; + } else if (typeof iconConfig.name === 'string') { + formData['options.mode'] = 'library'; + formData['options.icon'] = iconConfig?.name; + formData['options.icon.render'] = ''; + } else { + formData['options.mode'] = 'custom'; + formData['options.icon'] = ''; + formData['options.icon.render'] = iconConfig?.html || iconConfig?.render; + } + } + if (columnConfigs.component === 'button') { + formData['options.popconfirm'] = !!columnConfigs.options.popconfirm; + } return formData; }; @@ -99,6 +119,15 @@ const ComponentItemConfigForm = < dataProps[key] = formData[key]; } }); + if (column?.component === 'icon') { + if (formData['options.mode'] === 'custom') { + uiProps.icon = { + render: uiProps['icon.render'], + }; + } + delete uiProps.mode; + delete uiProps['icon.render']; + } if (dataProps.width && !Number.isNaN(Number(dataProps.width))) { dataProps.width = Number(dataProps.width); } @@ -152,7 +181,7 @@ const ComponentItemConfigForm = < primaryKey="key" configs={columnConfig ? columnConfig.attrSchema.filter(item => item.name !== 'width') || [] : []} - data={currentColumnItem} + data={cloneDeep(currentColumnItem)} decodeData={decodeColumnConfigs} encodeData={formData => encodeColumnConfigs(formData, currentColumnItem)} extendKeys={['ui:props', 'options']} diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/group.tsx b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/group.tsx index eb10425cd..e987763a4 100644 --- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/group.tsx +++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/group.tsx @@ -57,7 +57,7 @@ ExtraOptions extends Partial = never, if (columnToRender?.component === 'group') { const options = columnToRender.options; const gutter = options.gutter ?? [0, 0]; - const rootColumn = props.path.length > 0 ? props.tableConfig.columns[props.path[0]] : props.column; + const rootColumn = props.tableConfig.columns[props.columnIndex]; return (
= never, justify={options.horizontalAlign} wrap={options.wrap} className="jfe-drip-table-generator-workstation-table-cell-group-row" - style={{ minHeight: 60 / options.layout.length }} + style={{ minHeight: 40 / options.layout.length }} > { Array.from({ length: colLength }, (v, i) => i).map((col, colIndex) => { const componentIndex = getIndex(options.layout, rowIndex, colIndex); @@ -90,7 +90,7 @@ ExtraOptions extends Partial = never, })} style={{ ...itemColumn && 'style' in itemColumn && 'schema' in itemColumn ? itemColumn.style : {}, - padding: `${gutter[0]}px ${gutter[1]}px`, + margin: `${gutter[0]}px ${gutter[1]}px`, minWidth: `${100 / colLength}%`, width: 'max-content', }} diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/index.less b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/index.less index 41756c58f..fd740fd4a 100644 --- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/index.less +++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/index.less @@ -9,7 +9,7 @@ @prefixCls: jfe-drip-table-generator-workstation-table-cell; .@{prefixCls}-group-wrapper { - min-height: 80px; + min-height: 40px; height: max-content; margin: 1px; width: 100%; @@ -31,6 +31,7 @@ border: 1px solid transparent; text-align: center; word-break: break-word; + padding: 6px; &:hover, &.empty { diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/popover.tsx b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/popover.tsx index 7a26ecd05..10d6cd474 100644 --- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/popover.tsx +++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/popover.tsx @@ -55,12 +55,14 @@ ExtraOptions extends Partial = never,>(props: PopoverCell const options = props.column.options; return ( { e.stopPropagation(); props.onClick?.('column-item', { diff --git a/packages/drip-table-generator/src/table-components/icon.ts b/packages/drip-table-generator/src/table-components/icon.ts index e4f7e3191..8a0918e66 100644 --- a/packages/drip-table-generator/src/table-components/icon.ts +++ b/packages/drip-table-generator/src/table-components/icon.ts @@ -48,7 +48,7 @@ export default { visible: (_1: unknown, formData?: Record) => formData?.['options.mode'] === 'library', }, { - name: 'options.iconRender', + name: 'options.icon.render', group: '属性', 'ui:title': '自定义图标', 'ui:type': 'code-editor', diff --git a/packages/drip-table/package.json b/packages/drip-table/package.json index c553df5c7..e90a761c6 100755 --- a/packages/drip-table/package.json +++ b/packages/drip-table/package.json @@ -1,6 +1,6 @@ { "name": "drip-table", - "version": "3.0.3-alpha.3", + "version": "3.0.3-alpha.4", "description": "A tiny and powerful enterprise-class solution for building tables.", "main": "dist/index.min.js", "module": "lib/index.js",