奥集能文档中心

Appearance

4.4 报表设计 ​

4.4.1 ReportViewDesign 组件 ​

文档路径: src/executor/design/reportModal/reportViewDesign/index.tsx

4.4.1.1 功能概述 ​

ReportViewDesign 是一个用于设计和配置报表的 React 组件。它提供了一个可调整宽度的布局，包含报表渲染区域和配置面板，方便用户实时查看和修改报表内容。

4.4.1.2 组件结构 ​

  • Propscurrent: IView

    当前报表视图对象，包含报表的相关数据和状态。

  • 状态管理key: 通过 useCtrlUpdate 钩子生成，用于触发组件更新。 mainWidth: number 配置面板的宽度，初始值为 400，用户可通过拖拽调整宽度。 notifyEmitter: Emitter 用于在组件间发送通知的事件发射器。

4.4.1.3 主要功能 ​

  • 报表渲染区域

    使用 ReportRender 组件渲染报表内容。 通过 React.useMemo 优化渲染，依赖于 current。

  • 配置面板

    使用 Config 组件提供报表的配置功能。 配置面板位于右侧，可通过拖拽调整宽度。 宽度范围限制为 400px 至 800px。

  • 可调整布局

    使用 Resizable 组件实现右侧配置面板的宽度调整。 调整宽度时，更新 mainWidth 状态。

4.4.1.4 代码结构 ​

  • 布局

    使用 antd 的 Layout 组件实现整体布局。 Layout.Content 用于显示报表渲染区域。 Layout.Sider 用于显示配置面板。

  • 关键子组件ReportRender: 渲染报表内容。 Config: 提供报表的配置功能。

  • 事件处理onResize: 监听配置面板宽度调整事件，更新 mainWidth 状态。

4.4.1.5 示例代码 ​

以下是组件的基本使用示例：

typescript
import ReportViewDesign from './reportViewDesign';
import { IView } from '@/ts/core';

const Example = () => {
  const currentView: IView = {
    // 初始化报表视图数据
  };

  return <ReportViewDesign current={currentView} />;
};

export default Example;

4.4.1.6 注意事项 ​

  • 性能优化

    使用 React.useMemo 优化子组件的渲染，避免不必要的重复渲染。

  • 宽度限制

    配置面板的宽度调整范围为 400px 至 800px，超出范围将被限制。

  • 事件发射器

    notifyEmitter 用于在组件间传递事件，确保报表渲染和配置的联动性。

4.4.1.7 依赖组件和库 ​

  • antd: 提供布局组件。
  • devextreme-react: 提供 Resizable 组件。
  • @/ts/base/common: 提供 Emitter 类，用于事件管理。
  • @/hooks/useCtrlUpdate: 自定义钩子，用于控制组件更新。

4.4.2 WorkFormDesign 组件 ​

文件路径: src/components/DataStandard/ReportForm/index.tsx

4.4.2.1 功能概述 ​

WorkFormDesign 是一个用于设计和配置办事报表的 React 组件。 它提供了一个可调整宽度的布局，包含报表渲染区域和配置面板，支持用户选择报表项和行信息，并实时更新配置。

4.4.2.2 组件结构 ​

  • Propscurrent: IForm 当前表单对象，包含表单的相关数据和状态。

  • 状态管理

    key: 通过 useCtrlUpdate 钩子生成，用于触发组件更新。

    selectIndex: number 当前选中的报表项索引，初始值为 -1。

    selectRow: XFloatRowsInfo | undefined 当前选中的行信息，初始值为 undefined。

    mainWidth: number 配置面板的宽度，初始值为 400，用户可通过拖拽调整宽度。

    notifyEmitter: Emitter 用于在组件间发送通知的事件发射器。

4.4.2.3 主要功能 ​

  • 报表渲染区域

    使用 ReportRender 组件渲染报表内容。 支持选择报表项和行信息，通过 onItemSelected 和 onRowSelected 回调更新状态。 使用 React.useMemo 优化渲染，依赖于 current。

  • 配置面板

    使用 Config 组件提供报表的配置功能。 配置面板位于右侧，可通过拖拽调整宽度。 宽度范围限制为 400px 至 800px。 配置面板根据选中的报表项和行信息动态更新。

  • 可调整布局

    使用 Resizable 组件实现右侧配置面板的宽度调整。 调整宽度时，更新 mainWidth 状态。

4.4.2.3 代码结构 ​

  • 布局 使用 antd 的 Layout 组件实现整体布局。 Layout.Content 用于显示报表渲染区域。 Layout.Sider 用于显示配置面板。

  • 关键子组件ReportRender: 渲染报表内容，支持选择报表项和行信息。 Config: 提供报表的配置功能，动态响应选中的报表项和行信息。

  • 事件处理onItemSelected: 更新选中的报表项索引。 onRowSelected: 更新选中的行信息。 onResize: 监听配置面板宽度调整事件，更新 mainWidth 状态。

4.4.2.4 示例代码 ​

以下是组件的基本使用示例：

typescript
import WorkFormDesign from './ReportForm';
import { IForm } from '@/ts/core';

const Example = () => {
  const currentForm: IForm = {
    // 初始化表单数据
  };

  return <WorkFormDesign current={currentForm} />;
};

export default Example;

4.4.2.5 注意事项 ​

  • 性能优化 使用 React.useMemo 优化子组件的渲染，避免不必要的重复渲染。

  • 宽度限制 配置面板的宽度调整范围为 400px 至 800px，超出范围将被限制。

  • 事件发射器notifyEmitter 用于在组件间传递事件，确保报表渲染和配置的联动性。

  • 动态配置 配置面板会根据选中的报表项和行信息动态更新，确保用户操作的实时性。

4.4.2.6 依赖组件和库 ​

antd: 提供布局组件。

devextreme-react: 提供 Resizable 组件。

@/ts/base/common: 提供 Emitter 类，用于事件管理。

@/hooks/useCtrlUpdate: 自定义钩子，用于控制组件更新。

XFloatRowsInfo: 类型定义，用于描述选中的行信息。

云原生应用研究院版权所有