feat:1.drawerList新增drawerProps属性支持配置抽屉相关属性 2.新增hideColumnNestedObject…

…支持设置drawerList表格内部复杂元素的折叠和隐藏
alibaba · Aug 6, 2024 · 56a6605 · 56a6605
1 parent 8653583
commit 56a6605
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 43 deletions.
diff --git a/docs/form-render/api-schema.md b/docs/form-render/api-schema.md
@@ -268,6 +268,10 @@ list: { // list 是字段名
 - 描述：删除确认弹窗属性，参考 <a href="https://ant.design/components/popconfirm-cn#api" target="_blank">Antd PopConfirm Props</a>
 - 类型：`PopConfirmProps`
 
+#### props.drawerProps
+- 描述：`drawerList` 中抽屉的属性，参考 <a href="https://ant.design/components/drawer-cn#api" target="_blank">Antd Drawer Props</a>
+- 类型：`DrawerProps`
+
 #### props.actionColumnProps
 - 描述：`tableList | drawerList | virtualList` 中操作列的属性，参考 <a href="https://ant.design/components/table-cn#column" target="_blank">Antd Table ColumnType</a>。 其中 `title` 使用 `colHeaderText` 代替。
 - 类型：`ColumnType`
@@ -288,6 +292,11 @@ list: { // list 是字段名
 - 描述：是否隐藏删除按钮
 - 类型：`boolean`
 
+#### props.hideColumnNestedObject 
+- 描述：是否隐藏`drawerList`表格内部嵌套复杂元素的情况
+- 类型：`false` | `hide` | `collapse`
+- 默认：`false`
+
 #### props.onAdd
 - 描述：点击添加按钮回调函数
 - 类型：`(operation, { schema, data }) => void`

diff --git a/packages/form-render/src/render-core/index.tsx b/packages/form-render/src/render-core/index.tsx
@@ -1,77 +1,150 @@
+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 } = props;
+ let { schema, key, path, rootPath, hideColumnNestedObject } = props;
 
  // render List
  if (schema.type === 'array' && schema.items?.type === 'object') {
- return (
- <FieldList
- key={key}
- schema={schema}
- path={path}
- rootPath={rootPath}
- renderCore={RenderCore}
- />
- );
+ 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}
+ />
+ );
+ }
  }
 
  // 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}
  schema={schema}
  path={path}
  rootPath={rootPath}
- children= {child}
+ children={child}
  renderCore={RenderCore}
  />
  );
-}
+};
 
-const RenderCore = (props: RenderCoreProps) : any => {
- const { schema, parentPath = [], rootPath = [] } = props;
+const RenderCore = (props: RenderCoreProps): any => {
+ const {
+ schema,
+ parentPath = [],
+ rootPath = [],
+ hideColumnNestedObject = false,
+ } = props;
  if (!schema || Object.keys(schema).length === 0) {
  return null;
  }
- 
+
  // render List.item
  if (schema?.items) {
- return renderItem({ schema: schema.items, path: parentPath, rootPath });
+ return renderItem({
+ schema: schema.items,
+ path: parentPath,
+ rootPath,
+ hideColumnNestedObject,
+ });
  }
 
  // render Objiect | field
- return sortProperties(Object.entries(schema.properties || {})).map(([key, item]) => {
- const path = [...parentPath, key];
-
- return renderItem({ schema: item, path, key, rootPath });
- });
-}
+ return sortProperties(Object.entries(schema.properties || {})).map(
+ ([key, item]) => {
+ const path = [...parentPath, key];
+
+ return renderItem({
+ schema: item,
+ path,
+ key,
+ rootPath,
+ hideColumnNestedObject,
+ });
+ }
+ );
+};
 
-export default RenderCore;
+export default RenderCore;
diff --git a/packages/form-render/src/widgets/listDrawer/drawerForm.tsx b/packages/form-render/src/widgets/listDrawer/drawerForm.tsx
@@ -3,26 +3,26 @@ import { Button, Drawer, Space, ConfigProvider } from 'antd';
 import { translation } from '../utils';
 
 const DrawerForm = (props: any) => {
- const { children, onConfirm, onClose } = props;
+ const { children, onConfirm, onClose, DrawerProps } = props;
 
  const configCtx = useContext(ConfigProvider.ConfigContext);
  const t = translation(configCtx);
 
- let drawerProps: any = { open: true };
- if ((window as any).antdVersion === 'v4')  {
- drawerProps = { visible: true };
+ let drawerProps: any = { ...DrawerProps, open: true };
+ if ((window as any).antdVersion === 'v4') {
+ drawerProps = { ...DrawerProps, visible: true };
  }
 
  return (
  <Drawer
- {...drawerProps}
  width={600}
  title={t('operate')}
+ {...drawerProps}
  onClose={onClose}
  extra={
  <Space>
  <Button onClick={onClose}>{t('cancel')}</Button>
- <Button type='primary' onClick={onConfirm}>
+ <Button type="primary" onClick={onConfirm}>
  {t('confirm')}
  </Button>
  </Space>
@@ -31,6 +31,6 @@ const DrawerForm = (props: any) => {
  {children}
  </Drawer>
  );
-}
+};
 
 export default DrawerForm;
diff --git a/packages/form-render/src/widgets/listDrawer/index.tsx b/packages/form-render/src/widgets/listDrawer/index.tsx
@@ -44,7 +44,7 @@ const TableList: React.FC<Props> = (props: any) => {
  readOnly,
  widgets,
  pagination,
- 
+
  operateBtnType,
  addBtnProps,
  delConfirmProps,
@@ -54,13 +54,15 @@ const TableList: React.FC<Props> = (props: any) => {
  moveDownBtnProps,
  actionColumnProps,
  editorBtnProps,
+ drawerProps,
 
  hideOperate,
  hideDelete,
  hideCopy,
  hideMove,
  hideAdd,
  hideEdit,
+ hideColumnNestedObject,
 
  operation,
  addItem,
@@ -81,7 +83,7 @@ const TableList: React.FC<Props> = (props: any) => {
  const [visible, setVisible] = useState(false);
  const [itemData, setItemData] = useState(null);
  const indexRef = useRef<any>(null);
- 
+
  const handleCopy = (name: number) => {
  const value = form.getFieldValue(rootPath.concat(name));
  copyItem(value);
@@ -139,7 +141,7 @@ const TableList: React.FC<Props> = (props: any) => {
  }
  }
  };
- return renderCore({ schema: fieldSchema, parentPath: [field.name], rootPath: [...rootPath, field.name] });
+ return renderCore({ schema: fieldSchema, parentPath: [field.name], rootPath: [...rootPath, field.name],hideColumnNestedObject });
  }
  }
  }).filter(item => item);
@@ -155,13 +157,13 @@ const TableList: React.FC<Props> = (props: any) => {
  <Space className='fr-list-item-operate' split={operateBtnType !== 'icon' && <Divider type='vertical'/>}>
  {!hideMove && (
  <>
- <FButton 
+ <FButton
  disabled={field.name === 0}
  onClick={() => moveItem(field.name, field.name - 1)}
  icon={<ArrowUpOutlined/>}
  {...moveUpBtnProps}
  />
- <FButton 
+ <FButton
  disabled={field.name === fields.length - 1}
  onClick={() => moveItem(field.name, field.name + 1)}
  icon={<ArrowDownOutlined/>}
@@ -182,14 +184,14 @@ const TableList: React.FC<Props> = (props: any) => {
  </Popconfirm>
  )}
  {!hideCopy && (
- <FButton 
+ <FButton
  onClick={() => handleCopy(field.name)}
  icon={<CopyOutlined/>}
  {...copyBtnProps}
  />
  )}
  {!hideEdit && (
- <FButton 
+ <FButton
  onClick={() => {
  setVisible(true);
  indexRef.current = field.name;
@@ -230,6 +232,7 @@ const TableList: React.FC<Props> = (props: any) => {
  configContext={configContext}
  onClose={handleRepeal}
  onConfirm={hanldeConfirm}
+ DrawerProps={drawerProps}
  >
  {renderCore({ schema: schema.items, parentPath: [fields.length - 1], rootPath: [...rootPath, fields.length - 1] })}
  </FormDrawer>
@@ -238,4 +241,4 @@ const TableList: React.FC<Props> = (props: any) => {
  );
 }
 
-export default TableList;
+export default TableList;