聚合视图前端设计文档

聚合视图前端设计文档

一、文档概述

1.1 文档目的

本文档旨在详细描述聚合视图功能的前端设计方案，为开发团队提供清晰的技术实现指导。聚合视图是一种用于解决多表台账问题的数据展示功能，通过调用数据接口来获取并展示视图数据。本文档涵盖组件层级结构设计、组件架构图、需求实现方案、组件参数及事件定义，以及接口调用规范等内容。

1.2 功能概述

聚合视图是低代码平台中新增的功能模块，主要用于解决多表关联数据的统一展示问题。用户可以通过选择数据接口，配置查询字段、列表字段、排序规则等参数，创建一个可个性化定制的视图。该视图支持数据筛选、分页展示、行点击事件和自定义按钮等功能，能够满足复杂业务场景下的数据展示需求。

1.3 适用范围

本文档适用于参与聚合视图功能开发的前端开发人员、测试人员以及产品经理。开发人员可依据本文档进行代码实现，测试人员可参考本文档编写测试用例，产品经理可了解功能的技术实现方案以便进行需求评审和验收。

二、组件层级结构

2.1 顶层组件结构

聚合视图功能采用模块化的组件设计理念，将整个功能划分为多个独立且可复用的组件。顶层组件为聚合视图配置页面，负责整体页面的布局和子组件的协调。页面采用左右分栏布局，左侧为数据预览区域，右侧为配置操作区域，这种布局方式能够让用户在配置过程中实时预览最终效果，提升用户体验。

在顶层组件之下，按照功能职责划分为两个主要模块：基础信息配置模块和视图设计配置模块。基础信息配置模块负责收集视图的基本信息，包括视图名称、备注说明、数据接口选择以及接口参数配置。视图设计配置模块则负责视图的具体展示样式和行为配置，包括查询字段设置、列表字段设置、排序规则、分页配置以及交互事件设置。

2.2 组件目录结构

src/views/aggregation-view/
├── AggregationViewConfig.vue      # 聚合视图配置页面（顶层组件）
├── components/
│   ├── BasicInfoForm.vue          # 基础信息表单组件
│   ├── ViewDesignPanel.vue        # 视图设计面板组件
│   ├── MainTable.vue              # 左侧主数据表格组件
│   ├── ViewStyleTab.vue           # 视图样式标签页组件
│   ├── ViewEventsTab.vue          # 视图事件标签页组件（内嵌el-switch/el-select）
│   ├── ButtonConfig.vue           # 按钮配置组件
│   └── FieldSelector.vue          # 字段选择器组件
├── composables/
│   ├── useAggregationView.ts      # 主 hook，管理共享状态和公共方法
│   ├── useBasicInfo.ts            # 基础信息相关逻辑
│   └── useViewDesign.ts           # 视图设计相关逻辑
└── styles/
    └── aggregation-view.scss      # 聚合视图样式文件

组件复用说明：

聚合视图功能复用了项目中已有的数据接口选择组件，避免重复造轮子：

复用组件	组件路径	用途说明
interface-dialog	@/packages/common-components/interface-selector/InterfaceDialog.vue	数据接口选择弹窗
interface-params	@/packages/common-components/interface-selector/InterfaceParams.vue	接口参数配置组件

这两个组件在子流程配置(RPA机器人配置)中已广泛使用，功能成熟稳定。聚合视图只需进行适当的参数调整即可复用。

2.3 组件职责说明

各组件的职责划分清晰明确，确保每个组件只负责单一的功能领域。AggregationViewConfig作为顶层入口组件，通过路由跳转打开，使用useRoute获取路由参数。它引入三个 hooks（useAggregationView、useBasicInfo、useViewDesign）来管理状态和业务逻辑，保持组件代码简洁。

useAggregationView主 hook 负责管理共享状态（viewDesignConfig、apiFields）、公共方法（保存，返回）和生命周期逻辑。useBasicInfo hook 负责基础信息表单的验证逻辑和接口选择。useViewDesign hook 负责视图设计的相关逻辑，包括字段选择、按钮配置等。

ViewDesignPanel是视图设计区域的核心容器组件，它负责左侧预览表格和右侧配置面板的布局管理。MainTable组件作为数据展示层，根据配置的字段列表和排序规则渲染数据表格，支持查询条件筛选、分页导航和行选择等功能。

ViewStyleTab和ViewEventsTab分别是视图样式和视图事件的配置容器。ViewEventsTab组件内嵌简单的表单组件（el-switch、el-select）直接实现行点击事件配置，无需单独封装。ButtonConfig组件则负责自定义按钮的添加、编辑、删除和排序管理，支持多种动作类型的配置。

FieldSelector是唯一需要封装的通用组件，因为它涉及字段列表的展示、拖拽排序、移除操作等复杂逻辑，适合提取为可复用组件，目前主要用于视图样式的查询字段和列表字段。

三、组件架构图

3.1 整体架构图

+----------------------------------------------------------------------+
|                     AggregationViewConfig.vue                        |
+----------------------------------------------------------------------+
|                                                                      |
|   +----------------------+    +----------------------------------+    |
|   |                      |    |                                  |    |
|   |   BasicInfoForm.vue  |    |       ViewDesignPanel.vue        |    |
|   |                      |    |                                  |    |
|   |  - el-input (name)   |    |  +------------------+            |    |
|   |  - el-input (desc)   |    |  |                  |            |    |
|   |  - interface-dialog  |    |  | MainTable.vue   |            |    |
|   |  - interface-params  |    |  |                  |            |    |
|   |                      |    |  |  (左侧数据表格)  |            |    |
|   |                      |    |  |                  |            |    |
|   |                      |    |  +------------------+            |    |
|   +----------------------+    |                                  |    |
|                               |  +------------------+            |    |
|                               |  |                  |            |    |
|                               |  |ViewConfigPanel   |            |    |
|                               |  |.vue              |            |    |
|                               |  |                  |            |    |
|                               |  |  +------------+  +------------+ |    |
|                               |  |  |            |  |            | |    |
|                               |  |  |ViewStyle   |  |ViewEvents | |    |
|                               |  |  |Tab.vue     |  |Tab.vue    | |    |
|                               |  |  |            |  |            | |    |
|                               |  |  | 视图样式   |  | 视图事件  | |    |
|                               |  |  +------------+  +------------+ |    |
|                               |  |                  |            |    |
|                               |  +------------------+            |    |
|                               |                                  |    |
|                               +----------------------------------+    |
|                                                                      |
+----------------------------------------------------------------------+

视图设计面板（ViewDesignPanel）内部结构：

+----------------------------------------------------------------------+
|                    ViewDesignPanel.vue                               |
+----------------------------------------------------------------------+
|                                                                      |
|  +--------------------------+  +----------------------------------+   |
|  |                          |  |                                  |   |
|  |       MainTable.vue      |  |       ViewConfigPanel.vue        |   |
|  |                          |  |                                  |   |
|  |   (左侧数据预览区域)        |  |   +------------+  +------------+ |   |
|  |                          |  |   |            |  |            | |   |
|  |   - 查询条件区域           |  |   |ViewStyle   |  |ViewEvents  | |   |
|  |   - 数据表格区域           |  |   |Tab.vue     |  |Tab.vue     | |   |
|  |   - 分页控件区域           |  |   |            |  |            | |   |
|  |                          |  |   | 视图样式   |  | 视图事件   | |   |
|  |                          |  |   +------------+  +------------+ |   |
|  +--------------------------+  |                                  |   |
|                                |   (右侧配置面板，包含两个tab左右布局) |   |
|                                +----------------------------------+   |
|                                                                      |
+----------------------------------------------------------------------+

四、需求实现方案

4.1 创建入口实现

根据需求文档要求，需要在顶部导航的加号按钮下拉菜单和分组气泡菜单中增加新建聚合视图的入口。在顶部导航的加号下拉菜单中，开发人员需要修改现有的菜单组件，添加"新建聚合视图"菜单项，点击后调用路由跳转到聚合视图配置页面。在分组气泡菜单中，同样需要添加新建聚合视图的入口，当用户点击时系统会创建一个名为"未命名聚合视图"的空视图记录，然后跳转到该视图的编辑页面。

具体的实现步骤包括：首先修改路由配置文件，添加聚合视图配置页面的路由规则，路由路径设计为"/aggregation-view/edit/:moduleId/:viewId?status=${status}"，status: create | update 然后修改顶部导航组件，在加号下拉菜单中添加菜单项，并为该菜单项绑定点击事件处理函数。最后修改分组气泡菜单组件，添加新建聚合视图选项，当点击时会先创建空视图记录并生成 viewId，然后跳转到配置页面。

4.2 基础信息配置实现

基础信息配置模块包含视图名称、备注说明、数据接口和接口参数四个配置项。视图名称为必填项，使用单行文本输入框组件，限制最大长度为20个字符，需要添加非空验证和长度验证规则。备注说明为可选项，使用多行文本输入框组件，限制最大长度为500个字符。数据接口为必填项，点击后弹出数据接口选择弹窗，弹窗中只显示使用范围包含"聚合视图"的接口，包括API接口和sql接口两类。接口参数为条件显示项，当选择的数据接口存在入参时才显示该配置区域，接口参数的配置支持三种模式：自定义值输入、系统变量选择和空值设置。

在实现数据接口选择弹窗时，需要复用现有的接口选择组件，但需要进行以下改造：查询区的接口类型选项需要将"DB表输入"更名为"SQL输入"，增加使用范围筛选条件以支持"聚合视图"筛选，增加动作类型筛选条件以支持"查询"类型筛选。列表区需要正确显示接口类型和使用范围列，对于SQL输入类型的接口只展示动作类型为"查询"的记录。入参处理逻辑需要调整为只展示参数用途包含"默认条件"的参数。

4.3 视图样式配置实现

视图样式配置包含查询字段、列表字段、数据排序规则、每页条数和主键字段五个配置项。查询字段为必填项，用户通过点击加号按钮打开字段选择弹窗，从数据接口返回的字段中选择需要作为查询条件的字段。选择字段后，还需要设置字段类型以便匹配筛选中的匹配关系，支持移除已添加的查询字段。列表字段为必填项，同样通过加号按钮选择字段，选择后支持拖拽排序以改变字段在列表中的显示顺序，也支持移除已添加的列表字段。

数据排序规则的实现与关联数据功能中的排序规则保持一致，用户可以选择排序字段和排序方式，支持升序和降序两种排序方向。每页条数为下拉单选组件，备选项固定为10条/页、20条/页、30条/页、40条/页、50条/页和100条/页，默认选中"20条/页"，该配置项只有在数据接口支持分页的情况下才显示。主键字段为必填项，用于确认dataid便于后续导出数据，备选项从数据接口返回的字段中选取。

4.4 视图事件配置实现

视图事件配置包含行点击事件和按钮设置两个配置项。行点击事件默认开启开关，当开启时用户可以选择目标页面类型，备选项为"动态表单"和"外部链接"，默认为"动态表单"。当目标页面类型为"动态表单"时，需要显示formid字段和dataid字段的下拉选择器，备选项从数据接口返回的字段中选取，这两个字段都为必填项。当目标页面类型为"外部链接"时，需要显示URL地址输入文本区，该文本区支持插入字段功能，插入的字段从数据接口返回的字段中获取。

按钮设置包含导出按钮和其他按钮两部分。导出按钮默认勾选，该按钮对应原数据列表上的导出按钮功能，导出时根据主键字段获取勾选记录的id进行数据导出。其他按钮通过"添加其他按钮"按钮进行添加，添加的按钮会冻结在列表的最后一列，添加后在下方显示按钮列表，支持启用/禁用、编辑和删除操作。自定义按钮的配置包括按钮名称（必填，限制长度10）、按钮样式、动作类型（支持打开页面、执行js代码和执行RPA机器人三种）、链接类型、打开表单模式等，具体配置项与自定义按钮功能保持一致。

4.5 实时预览实现

根据需求要求，在维护查询字段、列表字段、数据排序规则、列表分页和按钮配置时，左侧的预览页面需要按照设置进行实时渲染。这意味着所有配置变更都需要立即反映到左侧的MainTable组件中，不需要用户额外点击预览按钮。实现这一功能的关键是在组件状态变化时立即触发重新渲染，数据流向为：用户操作导致配置数据变更，配置组件通过emit事件将变更后的数据传递给父组件，父组件更新状态后通过props将新数据传递给MainTable组件，MainTable组件检测到数据变化后重新渲染表格。

当按钮配置较多时，右侧配置区域需要显示纵向滚动条以保证用户能够滚动查看所有配置项。这个可以通过设置右侧面板容器的overflow-y属性为auto来实现，同时需要合理设置面板的最大高度以确保在各种屏幕尺寸下都能正常显示滚动条。

4.6 字段变更处理实现

需求文档中提到，如果数据接口在管理后台调整导致返回字段发生了变化，在聚合视图中选择的已不存在的字段需要显示特殊样式。实现这一功能需要在加载数据接口字段信息后，将接口返回的字段列表与聚合视图中已配置的字段列表进行对比，找出那些在配置中存在但接口已不再返回的字段。对于这些字段，在配置区域显示时需要添加特殊的样式标记（红色字体样式和固定文案），以提示用户这些字段已失效需要移除。但在左侧预览表格中，这些已失效的字段不应当再显示，因为它们已经从接口返回的字段列表中移除了。

五、组合式函数（Hooks）设计

5.1 Hooks 架构设计

为了解决状态同步问题，我们采用共享状态方案：

src/views/aggregation-view/composables/
├── useAggregationView.ts    # 主 hook，定义共享状态 viewDesignConfig
├── useBasicInfo.ts          # 基础信息相关逻辑，接收 viewDesignConfig
└── useViewDesign.ts         # 视图设计相关逻辑，接收 viewDesignConfig

核心设计原则：

1. 共享状态：在主 hook 中定义唯一的响应式状态对象 viewDesignConfig
2. 状态传递：子 hooks 接收 viewDesignConfig 作为参数，操作同一个对象
3. 数据同步：所有修改都针对同一个 viewDesignConfig，确保数据一致

+------------------+     +-------------------+     +------------------+
|                  |     |                   |     |                  |
|  useAggregation  |---->|    viewDesignConfig   |<----|  useBasicInfo    |
|     View        |     |  (共享状态对象)    |     |                  |
|                  |     |                   |     |                  |
+------------------+     +-------------------+     +------------------+
                              |
                              |
                              v
                     +-------------------+
                     |                   |
                     |  useViewDesign    |
                     |                   |
                     +-------------------+

5.1.1 useAggregationView.ts

职责：主 hook，定义共享状态 viewDesignConfig，提供公共方法

5.1.2 useBasicInfo.ts

职责：基础信息表单验证逻辑，接收共享的 viewDesignConfig

5.1.3 useViewDesign.ts

职责：视图设计相关逻辑，接收共享的 viewDesignConfig

六、组件参数及事件

6.1 AggregationViewConfig.vue 参数与事件

组件名称：AggregationViewConfig.vue
组件路径：src/views/aggregation-view/AggregationViewConfig.vue
组件描述：聚合视图配置顶层组件，通过路由跳转打开，使用hooks管理状态

路由配置：

{
  path: '/aggregation-view/edit/:moduleId',
  name: 'AggregationViewConfig',
  component: () => import('@/views/aggregation-view/AggregationViewConfig.vue'),
  meta: {
    title: '聚合视图配置',
    breadcrumb: ['聚合视图', '编辑']
  }
}

组件内部状态（由 useAggregationView hook 提供）：

状态名称	状态类型	初始值	状态说明
loading	Boolean	false	加载状态标识
activeTab	String	'basic'	当前激活的标签页，可选值为'basic'和'design'
isEditMode	Boolean	false	是否编辑模式
apiFields	ApiField[]	[]	数据接口返回的字段列表
viewDesignConfig	Object	详见下方	视图设计数据对象（由 useAggregationView 管理）

5.2 BasicInfoForm.vue 参数与事件

组件名称：BasicInfoForm.vue
组件路径：src/views/aggregation-view/components/BasicInfoForm.vue
组件描述：基础信息表单组件，负责收集视图基本信息。组件内嵌el-input直接处理视图名称和备注说明输入，复用interface-dialog和interface-params组件，操作共享的viewDesignConfig对象

Props 参数：

参数名称	参数类型	是否必填	默认值	参数说明
viewDesignConfig	Object	是	无	共享的视图设计数据对象
moduleId	String	是	无	模块ID，用于接口选择
loading	Boolean	否	false	加载状态标识

Emits 事件：

事件名称	事件参数	事件说明
api-change	{ apiId: String }	数据接口变更事件

验证规则：

字段名称	规则类型	规则详情	触发时机
name	required	必填，视图名称不能为空	blur
name	maxLength	最大长度20个字符	input
description	maxLength	最大长度500个字符	input
apiId	required	必填，请选择数据接口	change

5.3 复用组件说明

聚合视图功能复用了项目中已有的数据接口选择组件，无需重新开发：

5.3.1 interface-dialog 组件

组件名称：interface-dialog
组件路径：@/packages/common-components/interface-selector/InterfaceDialog.vue
组件描述：数据接口选择弹窗组件，详见子流程配置模块中的使用

使用示例：

<interface-dialog
  v-model:interVisible="interVisible"
  :moduleId="moduleId"
  :dataInterfaceId="form.apiId"
  :useRange="'aggregation'"       <!-- 筛选聚合视图可用接口 -->
  :actionType="'query'"           <!-- 筛选查询类型接口 -->
  @handle-interface="handleInterface"
/>

组件参数：

参数名称	参数类型	是否必填	默认值	参数说明
interVisible	Boolean	是	无	弹窗显示状态，v-model双向绑定
moduleId	String	是	无	模块ID
dataInterfaceId	String	否	无	已选中的接口ID
useRange	String	否	无	使用范围筛选，如'aggregation'
actionType	String	否	无	动作类型筛选，如'query'

事件：

事件名称	事件参数	事件说明
handle-interface	{ id, name, params, outParams }	选择接口后的回调，返回接口信息

5.3.2 interface-params 组件

组件名称：interface-params
组件路径：@/packages/common-components/interface-selector/InterfaceParams.vue
组件描述：接口参数配置组件，支持自定义值、系统变量和空值三种模式

组件参数：

参数名称	参数类型	是否必填	默认值	参数说明
apiId	String	是	无	数据接口ID
interfaceCondition	Array	否	[]	接口参数条件
paramOptions	Array	否	默认值	参数选项配置
readonly	Boolean	否	false	是否只读模式

5.4 MainTable.vue 参数与事件

组件名称：MainTable.vue
组件路径：src/views/aggregation-view/components/view-design/MainTable.vue
组件描述：主数据表格组件，负责数据的展示和交互

Props 参数：

参数名称	参数类型	是否必填	默认值	参数说明
data	Array	是	[]	表格数据数组
queryFields	Array	是	[]	查询字段配置数组
listFields	Array	是	[]	列表字段配置数组
sortingRules	Array	是	[]	排序规则配置数组
pageSize	Number	是	20	每页显示条数
primaryKey	String	是	'id'	主键字段名称
buttonConfig	Object	否	默认配置	按钮配置对象

Emits 事件：

事件名称	事件参数	事件说明
query-change	Object	查询条件变更事件
row-click	Object	行点击事件，参数包含行数据
export	Array	导出事件，参数包含选中的行数据
button-click	{ button: Object, row: Object }	自定义按钮点击事件

5.5 ViewStyleTab.vue 参数与事件

组件名称：ViewStyleTab.vue
组件路径：src/views/aggregation-view/components/ViewStyleTab.vue
组件描述：视图样式标签页组件，负责视图样式的配置

Props 参数：

参数名称	参数类型	是否必填	默认值	参数说明
viewDesign	Object	是	无	视图样式配置对象（来自 viewDesignConfig.viewDesign）
apiFields	Array	是	[]	数据接口返回的字段列表
supportPagination	Boolean	否	false	是否支持分页

组件状态：

状态名称	状态类型	初始值	状态说明
localViewDesign	Object	复制自 props.viewDesign	本地视图设计配置（用于实时预览）

5.6 ViewEventsTab.vue 参数与事件

组件名称：ViewEventsTab.vue
组件路径：src/views/aggregation-view/components/ViewEventsTab.vue
组件描述：视图事件标签页组件，负责视图事件的配置。行点击事件直接内嵌el-switch和el-select实现，无需单独封装

Props 参数：

参数名称	参数类型	是否必填	默认值	参数说明
rowClickConfig	Object	是	无	行点击配置对象（来自 viewDesignConfig.viewDesign.rowClickConfig）
apiFields	Array	是	[]	数据接口返回的字段列表

组件状态：

状态名称	状态类型	初始值	状态说明
localRowClickConfig	Object	复制自 props.rowClickConfig	本地行点击配置（用于实时预览）

配置对象结构：

// 行点击配置部分直接内嵌，无需单独封装
localForm: {
  rowClickConfig: {
    enabled: true,                    // 是否启用行点击
    targetPageType: 'dynamicForm',   // 目标页面类型
    formIdField: '',                 // formid字段（动态表单类型时使用）
    dataIdField: '',                 // dataid字段（动态表单类型时使用）
    url: ''                          // URL地址（外部链接类型时使用）
  },
  buttonConfig: { /* 按钮配置 */ }
}

5.7 ButtonConfig.vue 参数与事件

组件名称：ButtonConfig.vue
组件路径：src/views/aggregation-view/components/ButtonConfig.vue
组件描述：按钮配置组件

Props 参数：

参数名称	参数类型	是否必填	默认值	参数说明
buttonConfig	Object	是	无	按钮配置对象（来自 viewDesignConfig.viewDesign.buttonConfig）
apiFields	Array	是	[]	数据接口返回的字段列表

组件状态：

状态名称	状态类型	初始值	状态说明
localButtonConfig	Object	复制自 props.buttonConfig	本地按钮配置（用于实时预览）

配置对象结构：

buttonConfig: {
  showExportButton: true,     // 是否显示导出按钮
  customButtons: [            // 自定义按钮列表
    {
      id: 'string',           // 按钮ID
      name: 'string',         // 按钮名称
      style: 'primary',       // 按钮样式
      actionType: 'openPage', // 动作类型：openPage-打开页面，executeJs-执行js代码，executeRPA-执行RPA机器人
      linkType: 'dynamicForm', // 链接类型：dynamicForm-动态表单，externalLink-外部链接
      openMode: 'fieldMapping', // 打开模式：fieldMapping-指定字段映射表单，specificForm-指定具体表单
      targetFormId: '',       // 目标表单ID（指定具体表单时使用）
      formIdField: '',        // formid字段（指定字段映射表单时使用）
      dataIdField: '',        // dataid字段（指定字段映射表单时使用）
      url: '',                // URL地址（外部链接时使用）
      jsCode: '',             // JS代码（执行js代码时使用）
      rpaRobotId: '',         // RPA机器人ID（执行RPA机器人时使用）
      fieldInitializations: [], // 字段初始化配置
      enabled: true           // 是否启用
    }
  ]
}

5.8 FieldSelector.vue 参数与事件

组件名称：FieldSelector.vue
组件路径：src/views/aggregation-view/components/FieldSelector.vue
组件描述：字段选择器组件，可复用于查询字段和列表字段的选择

Props 参数：

参数名称	参数类型	是否必填	默认值	参数说明
selectedFields	Array	是	[]	已选中的字段列表
options	Array	是	[]	可选字段列表
title	String	是	无	选择器标题
allowSort	Boolean	否	true	是否允许拖拽排序
allowDelete	Boolean	否	true	是否允许移除字段
maxCount	Number	否	无限制	最大选择数量
disabled	Boolean	否	false	是否禁用

组件状态：

状态名称	状态类型	初始值	状态说明
localSelectedFields	Array	复制自 props.selectedFields	本地选中字段列表（用于实时预览）

Emits 事件：

事件名称	事件参数	事件说明
add	无	添加字段事件
remove	{ field: Object }	移除字段事件
sort	{ fields: Array }	排序变更事件

六、接口调用设计

6.1 新建聚合视图流程

flowchart TD
    A[用户点击新建入口] --> B[前端生成 viewId]
    B --> C[跳转编辑页面]
    C --> D[打开编辑页面]
    D --> E[编辑页面初始化]
    E --> F[设置新建模式]
    F --> G[使用默认空配置]

6.2 加载聚合视图配置流程

flowchart TD
    A[页面加载] --> B[获取已保存的视图配置]
    B --> C{是否新建状态?}
    C -- 否 --> D[加载已保存的配置]
    D --> E[设置编辑模式]
    E --> F[填充配置]
    F --> G[渲染配置界面]
    C -- 是 --> H[设置新建模式]
    H --> I[使用默认空配置]
    I --> G

6.3 选择数据接口流程

flowchart TD
    A[用户点击选择接口] --> B[打开接口选择弹层]
    B --> C[调用接口]
    C --> D[后端返回接口列表]
    D --> E[显示可选接口]
    E --> F[用户选择接口]
    F --> G[后端返回接口详情]
    G --> H[显示接口参数配置区域]
  

6.4 保存聚合视图流程

flowchart TD
    A[用户点击保存按钮] --> B[表单验证]
    B -- 验证失败 --> C[显示错误提示]
    C --> A
    B -- 验证通过 --> D[调用保存接口]
    D --> E[后端保存数据]
    E --> F[返回保存结果]
    F --> G[显示成功提示]
    G --> I[跳转列表页面]
   

6.5 删除聚合视图流程

flowchart TD
    A[用户点击删除按钮] --> B[弹出二次确认对话框]
    B -- 用户取消 --> C[取消删除]
    B -- 用户确认 --> D[调用删除接口]
    D --> E[后端删除视图和权限]
    E --> F[返回删除结果]
    F --> G[显示成功提示]
    G --> H[刷新列表页面]

6.6 获取聚合视图列表流程

flowchart TD
    A[进入列表页面] --> B[调用接口]
    B --> C[后端查询和过滤]
    C --> D[返回分页数据]
    D --> E[渲染列表表格]

七、聚合视图展示交互设计

根据需求文档，聚合视图在配置完成后的展示交互需要在 HTable 组件中进行特殊处理。以下是设计详情：

7.1 聚合视图展示页面整体结构

+----------------------------------------------------------------------+
|                     聚合视图展示页面                                   |
+----------------------------------------------------------------------+
|                                                                      |
|  +----------------------------------------------------------------+  |
|  |  表单名称                                              [编辑]  |  |  <- 仅管理员可见
|  +----------------------------------------------------------------+  |
|                                                                      |
|  +----------------------------------------------------------------+  |
|  |                        HTable 组件                              |  |
|  |                                                                |  |
|  |  - 查询条件区域（根据查询字段配置动态生成）                           |  |
|  |  - 数据表格区域（根据列表字段配置渲染）                              |  |
|  |    - 不显示权限组下拉框                                           |  |
|  |    - 不显示【数据管理】【新增】【导入】【删除】【批量打印】                |  |
|  |    - 勾选数据行时只显示【导出】按钮                                 |  |
|  |  - 按钮区域（根据按钮配置渲染自定义按钮）                            |  |
|  |  - 分页控件区域                                                 |  |
|  |                                                                |  |
|  +----------------------------------------------------------------+  |
|                                                                      |
+----------------------------------------------------------------------+

7.2 HTable 组件扩展设计

HTable 组件需要扩展以支持聚合视图类型，通过 viewType 属性区分：

// HTable 组件 Props 扩展
interface HTableProps {
  viewType: 'normalForm' | 'flowForm' | 'externalLink' | 'aggregationView'
  viewConfig?: AggregationViewConfig  // 聚合视图配置
  rowClickConfig?: RowClickConfig     // 行点击配置
  buttonConfig?: ButtonConfigData     // 按钮配置
  // ... 其他现有属性
}

HTable 组件对聚合视图的特殊处理：

处理项	普通表单/流程表单	聚合视图
权限组下拉框	显示	不显示
【数据管理】按钮	显示	不显示
【新增】按钮	显示	不显示
【导入】按钮	显示	不显示
【删除】按钮	显示	不显示
【批量打印】按钮	显示	不显示
【草稿箱】按钮	显示	不显示
勾选数据行后的操作	显示多种操作	仅显示导出
记忆功能	支持	支持
点击排序	支持	支持
点击冻结	支持	支持
列头筛选	支持	支持
查询字段	可配置	必填，根据配置动态生成
列表字段	可配置	必填，根据配置渲染
自定义按钮	支持	支持，在最后一列显示并冻结
行点击事件	可配置	支持，根据配置打开页面

7.3 聚合视图展示组件设计

聚合视图展示页面复用现有的 HTable 组件，通过 props 控制显示逻辑：

7.4 权限管理集成设计

7.4.1 表单列表筛选器扩展

在表单类型下拉框中增加"聚合视图"选项：

现有类型顺序：普通表单 | 流程表单 | 外部链接 | 定制页面 | 自定义页面
扩展后顺序：普通表单 | 流程表单 | 外部链接 | 定制页面 | 聚合视图 | 自定义页面

7.4.2 权限配置页面

聚合视图的权限配置与外部链接一致：

配置项	说明
权限类型	查看权限（仅支持单一权限组）
选择权限组	从权限组列表中选择
批量配置	支持批量设置多个聚合视图的权限

7.5 与现有数据列表的差异总结

聚合视图展示页面与普通数据列表的主要差异：

差异项	普通数据列表	聚合视图展示
顶部标题栏	仅显示表单名称	显示表单名称 + 【编辑表单】按钮（管理员可见）
权限控制	多权限组	单一看权限
操作按钮	完整功能按钮	仅保留导出按钮
自定义按钮	支持	支持在最后一列显示并冻结
数据来源	单一数据表	数据接口
行点击事件	可选	根据配置决定是否启用
筛选条件	固定类型	根据查询字段动态生成
列表字段	固定配置	根据列表字段配置渲染
记忆功能	支持	支持
排序功能	支持	支持
冻结功能	支持	支持
筛选功能	支持	支持

7.6 复用 HTable 组件的优势

1. 代码复用：聚合视图展示页面可以最大程度复用现有 HTable 组件的表格渲染、分页、排序等功能
2. 一致性：保持与现有数据列表一致的用户体验
3. 可维护性：聚合视图的特殊逻辑集中在 HTable 组件内部处理，便于维护
4. 扩展性：未来新增视图类型时，只需扩展 HTable 组件的 viewType 支持

八、总结

本文档详细描述了聚合视图功能的前端设计方案，涵盖组件层级结构设计、组件架构图、需求实现方案、组件参数及事件定义，以及接口调用规范等内容。开发团队可依据本文档进行代码实现，确保功能的完整性和一致性。在实际开发过程中，如有需求变更或技术方案调整，需要及时更新本文档以保持文档与代码的同步。

九、开发工时表

任务名称	任务描述	预估耗时
组件层级搭建及路由定义	搭建组件层级结构，定义路由配置，确保组件之间的通信和导航	1 小时
前端 Hook 开发	实现 useAggregationView hook，包含状态管理和业务逻辑	4 小时
前端 Hook 开发	实现 useBasicInfo hook，包含状态管理和业务逻辑	4 小时
前端 Hook 开发	实现 useViewDesign hook，包含状态管理和业务逻辑	8 小时
基础信息表单 - 基本结构	开发 BasicInfoForm.vue 组件的基本结构，调试数据接口组件的复用逻辑，处理接口参数配置和数据传递	4 小时
视图设计面板 - 基本结构	开发 ViewDesignPanel.vue 组件的基本布局结构	2 小时
视图设计面板 - 字段配置组件	封装字段配置相关的子组件，实现查询字段和列表字段的管理	6 小时
视图设计面板 - 按钮配置组件	封装按钮配置相关的子组件，实现自定义按钮的管理和配置	6 小时
视图设计面板 - 样式配置组件	封装样式配置相关的子组件，实现表格样式和行为的配置	4 小时
数据列表 - 展示交互	按钮交互逻辑，如导出、自定义按钮点击，行点击事件，排序功能，冻结功能，筛选功能，分页功能	12 小时
数据列表 - 接口联调	调试列表数据查询接口，导出接口，记忆接口，自定义按钮查询接口	8 小时
权限管理集成	在权限管理模块中集成聚合视图类型	4 小时
组件联调测试 - 基础功能	测试基础功能的前后端联调，确保数据传递正常	4 小时
数据列表菜单支持聚合视图	ui改造及接口联调	4 小时
行点击事件	实现行点击事件，根据配置决定是否启用和打开方式及打开后的交互实现	8 小时
完整流程自测	测试聚合视图的完整功能流程，包括数据查询、导出、自定义按钮点击、权限控制等	4 小时

总计预估工时：81 小时