fix:修改hideColumnNestedObject作用位置

alibaba · Aug 15, 2024 · 5815bd5 · 5815bd5
1 parent 56a6605
commit 5815bd5
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 135 deletions.
diff --git a/packages/form-render/src/render-core/index.tsx b/packages/form-render/src/render-core/index.tsx
@@ -1,103 +1,48 @@
-import { Collapse } from 'antd';
 import React from 'react';
-import sortProperties from '../models/sortProperties';
 import FieldItem from './FieldItem';
 import FieldList from './FieldList';
+import sortProperties from '../models/sortProperties';
 import './index.less';
 
 interface RenderCoreProps {
  schema: any;
  rootPath?: any[] | undefined;
  parentPath?: any[] | undefined;
- [key: string]: any;
-}
+ [key: string]: any
+};
 
 interface RenderItemProps {
  schema: any;
  rootPath?: any[] | undefined;
  path?: any[] | undefined;
  key?: string | undefined;
- hideColumnNestedObject?: false | 'hide' | 'collapse';
-}
+};
 
 const renderItem = (props: RenderItemProps) => {
- let { schema, key, path, rootPath, hideColumnNestedObject } = props;
+ let { schema, key, path, rootPath } = props;
 
  // render List
  if (schema.type === 'array' && schema.items?.type === 'object') {
- if (hideColumnNestedObject === 'hide') {
- return '-';
- } else if (hideColumnNestedObject === 'collapse') {
- return (
- <Collapse
- ghost
- items={[
- {
- key: 'detail',
- label: '查看详情',
- children: (
- <FieldList
- key={key}
- schema={schema}
- path={path}
- rootPath={rootPath}
- renderCore={RenderCore}
- />
- ),
- },
- ]}
- />
- );
- } else {
- return (
- <FieldList
- key={key}
- schema={schema}
- path={path}
- rootPath={rootPath}
- renderCore={RenderCore}
- />
- );
- }
+ return (
+ <FieldList
+ key={key}
+ schema={schema}
+ path={path}
+ rootPath={rootPath}
+ renderCore={RenderCore}
+ />
+ );
  }
 
  // render Objiect | field
  let child: React.ReactNode = null;
 
  // has child schema
  if (schema?.properties && schema?.widgetType !== 'field') {
- child = RenderCore({ schema, parentPath: path, rootPath });
+ child = RenderCore({ schema, parentPath: path, rootPath })
  // path = undefined;
  }
 
- if (schema.type === 'object' && hideColumnNestedObject === 'hide') {
- return '-';
- }
-
- if (schema.type === 'object' && hideColumnNestedObject === 'collapse') {
- return (
- <Collapse
- ghost
- items={[
- {
- key: 'detail',
- label: '查看详情',
- children: (
- <FieldItem
- key={key}
- schema={schema}
- path={path}
- rootPath={rootPath}
- children={child}
- renderCore={RenderCore}
- />
- ),
- },
- ]}
- />
- );
- }
-
  return (
  <FieldItem
  key={key}
@@ -108,43 +53,25 @@ const renderItem = (props: RenderItemProps) => {
  renderCore={RenderCore}
  />
  );
-};
+}
 
 const RenderCore = (props: RenderCoreProps): any => {
- const {
- schema,
- parentPath = [],
- rootPath = [],
- hideColumnNestedObject = false,
- } = props;
+ const { schema, parentPath = [], rootPath = [] } = props;
  if (!schema || Object.keys(schema).length === 0) {
  return null;
  }
 
  // render List.item
  if (schema?.items) {
- return renderItem({
- schema: schema.items,
- path: parentPath,
- rootPath,
- hideColumnNestedObject,
- });
+ return renderItem({ schema: schema.items, path: parentPath, rootPath });
  }
 
  // render Objiect | field
- return sortProperties(Object.entries(schema.properties || {})).map(
- ([key, item]) => {
- const path = [...parentPath, key];
+ return sortProperties(Object.entries(schema.properties || {})).map(([key, item]) => {
+ const path = [...parentPath, key];
 
- return renderItem({
- schema: item,
- path,
- key,
- rootPath,
- hideColumnNestedObject,
- });
- }
- );
-};
+ return renderItem({ schema: item, path, key, rootPath });
+ });
+}
 
 export default RenderCore;
diff --git a/packages/form-render/src/widgets/listDrawer/index.tsx b/packages/form-render/src/widgets/listDrawer/index.tsx
@@ -1,9 +1,5 @@
-
-
-
-
 import React, { useState, useRef } from 'react';
-import { Space, Table, Form, Button, Popconfirm, Tooltip, Divider } from 'antd';
+import { Space, Table, Form, Button, Popconfirm, Tooltip, Divider, Collapse } from 'antd';
 import { ArrowDownOutlined, ArrowUpOutlined, PlusOutlined, InfoCircleOutlined, CloseOutlined, CopyOutlined } from '@ant-design/icons';
 import type { FormListFieldData, FormListOperation, TableColumnsType } from 'antd';
 import sortProperties from '../../models/sortProperties';
@@ -96,7 +92,7 @@ const TableList: React.FC<Props> = (props: any) => {
 
  const handleRepeal = () => {
  if (!indexRef.current && indexRef.current !== 0) {
- operation.remove(fields.length-1);
+ operation.remove(fields.length - 1);
  } else {
  form.setFieldValue([...rootPath, indexRef.current], itemData);
  }
@@ -109,42 +105,77 @@ const TableList: React.FC<Props> = (props: any) => {
  indexRef.current = null;
  };
 
- const columns: any = sortProperties(Object.entries(columnSchema)).map(([dataIndex, item]) => {
- const { required, title, tooltip, width, columnHidden } = item;
- if (columnHidden) {
- return null;
- }
+ const columns: any = sortProperties(Object.entries(columnSchema))
+ .map(([dataIndex, item]) => {
+ const { required, title, tooltip, width, columnHidden } = item;
+ if (columnHidden) {
+ return null;
+ }
 
- const tooltipProps = getTooltip(tooltip);
- return {
- dataIndex,
- width,
- title: (
- <>
- {required && <span style={{ color: 'red', marginRight: '3px' }}>*</span>}
- <span>{title}</span>
- {tooltipProps && (
- <Tooltip placement='top' {...tooltipProps}>
- <InfoCircleOutlined style={{ marginLeft: 6 }} />
- </Tooltip>
- )}
- </>
- ),
- render: (_, field) => {
- const fieldSchema = {
- type: 'object',
- properties: {
- [dataIndex]: {
- ...columnSchema[dataIndex],
- noStyle: true,
- readOnly: true,
+ const tooltipProps = getTooltip(tooltip);
+ return {
+ dataIndex,
+ width,
+ title: (
+ <>
+ {required && (
+ <span style={{ color: 'red', marginRight: '3px' }}>*</span>
+ )}
+ <span>{title}</span>
+ {tooltipProps && (
+ <Tooltip placement="top" {...tooltipProps}>
+ <InfoCircleOutlined style={{ marginLeft: 6 }} />
+ </Tooltip>
+ )}
+ </>
+ ),
+ render: (_, field) => {
+ const fieldSchema = {
+ type: 'object',
+ properties: {
+ [dataIndex]: {
+ ...columnSchema[dataIndex],
+ noStyle: true,
+ readOnly: true,
+ }
+ }
+ };
+ const fieldDataIndex = fieldSchema.properties[dataIndex];
+ const renderColumn = renderCore({
+ schema: fieldSchema,
+ parentPath: [field.name],
+ rootPath: [...rootPath, field.name],
+ });
+ if (
+ (fieldDataIndex?.type === 'array' &&
+ fieldDataIndex?.items?.type === 'object') ||
+ fieldDataIndex?.type === 'object'
+ ) {
+ if (hideColumnNestedObject === 'hide') {
+ return '-';
+ } else if (hideColumnNestedObject === 'collapse') {
+ return (
+ <Collapse
+ ghost
+ items={[
+ {
+ key: 'detail',
+ label: '查看详情',
+ children: renderColumn,
+ },
+ ]}
+ />
+ );
+ } else {
+ return renderColumn;
  }
  }
- };
- return renderCore({ schema: fieldSchema, parentPath: [field.name], rootPath: [...rootPath, field.name],hideColumnNestedObject });
- }
- }
- }).filter(item => item);
+
+ return renderColumn;
+ },
+ };
+ })
+ .filter(item => item);
 
  if (!readOnly && !hideOperate) {
  columns.push({