# qiaoyi_custom_plugins

**Repository Path**: zhangpingchuan/qiaoyi_custom_plugins

## Basic Information

- **Project Name**: qiaoyi_custom_plugins
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-24
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 插件包

## 建模配置

### 新建前端插件

新建远程运行时插件，插件类型为[自定义部件绘制插件]，插件标识为[GLOBAL_APP_UTIL]

配置截图：

![image](public/assets/images/plugin/config.png)

### 新建应用插件

新建应用插件，插件标识为插件标识为[GLOBAL_APP_UTIL]，并绑定上一步创建的前端插件

配置截图：

![image](public/assets/images/plugin/app-config.png)

# 高级搜索

该插件基于搜索表单增强，主要是新增高级搜素功能，提供常驻表单项配置。在启用了高级搜素时，常驻项会默认显示，非常驻项会在高级搜索弹框内显示；没有启用高级搜索时，默认显示所有表单项。

## 建模配置

### 常驻表单项

在表单项的用户标记上配置（permanent）标记，只在高级搜索模式下生效，配置了该标记的表单项会默认显示，其它表单项则在高级搜索中显示。

配置截图：

![image](public/assets/images/advanced-search/permanent-config.png)

### 高级搜索按钮

默认不显示高级搜索按钮，需要在表单上配置启用高级搜索后显示。

配置截图：

![image](public/assets/images/advanced-search/advanced-search-config.png)

### 重置按钮

默认显示重置按钮，当搜索按钮样式类型为【只有搜索】 时，只显示搜索按钮。

配置截图：

![image](public/assets/images/advanced-search/reset-button.png)

### 高级搜索弹框宽高

部件参数识别宽高配置，宽高大小在 100 以内的为css样式单位百分比，超过 100 时为css样式单位为px。如果配置时携带css样式单位，则直接将配置值赋值给宽高。默认显示宽高为自适应，最大宽度为80vw，最大高度为80vh。

部件参数配置示例：
```
width=800
height=200
```

配置截图：

![image](public/assets/images/advanced-search/width-and-height-config.png)

## 主要逻辑

- 在绘制表单项成员时判断是否启用了高级搜索。没启用则绘制所有表单项，启用了则默认绘制常驻表单项，点击高级搜索按钮显示剩余的表单项。
- 当配置了启用高级搜素时，如果默认显示需要配置布局，则在表单分组上也配置用户标记（permanent）。

- 重置按钮会将所有的搜索项数据重置为空。

## 参数列表

| 参数名 |         建模         |       说明       |  类型  | 默认值 |
| :----: | :------------------: | :--------------: | :----: | :----: |
| width  | 搜索表单控件动态参数 | 高级搜索弹窗宽度 | number |   -    |
| height | 搜索表单控件动态参数 | 高级搜索弹窗高度 | number |   -    |

# 查看附件

该插件基于表格属性列增强，主要是可依据文件类型触发不同的点击功能。当文件是图片时，则打开图片预览弹窗。当文件是pdf时，打开pdf预览。当文件是压缩包或其它文件时，点击则下载文件。

## 建模配置

### 插件配置

表格列需配置查看附件插件。

配置截图：

![image](public/assets/images/attachment-viewer-column/plugin-config.png)

查看附件插件导出JSON：

```
[
  {
    "plugintype": "GRID_COLRENDER",
    "codename": "UsrPFPlugin0120144026",
    "plugintag": "ATTACHMENT_VIEWER_COLUMN",
    "pssyspfpluginname": "查看附件"
  }
]
```

## 主要逻辑

- 根据不同的文件类型划分给不同的绘制方法，其中，图片只绘制缩略图；其它类型文件只显示文字，当文件名超出单元格宽度时，出省略号并且移入显示提示信息。
- 点击事件执行后，依据不同的文件类型执行对应的逻辑，图片类型会打开弹框预览，pdf类型预览会跳转到新的浏览器标签页。其他类型则直接下载文件。


# 顶部选项卡

该插件基于标签页增强，主要是扩展了标签页菜单功能，增加了刷新当前页，关闭左侧页面，关闭右侧页面功能，并提供标签页右键上下文菜单。

## 建模配置

### 标签页首项不关闭

需在菜单项上配置默认打开并且应用功能为打开视图，则当前菜单项对应的标签页默认绘制在首项上，且不可关闭。

配置截图：

![image](public/assets/images/top-nav-tabs/permanent-config.png)

## 主要逻辑

- 刷新当前视图逻辑，通过视图栈获取当前视图控制器后，通知视图刷新。
- 点击标签页时，如果首项标签页未激活，则调用菜单控制器菜单项点击事件。
- 关闭功能执行时会过滤首项标签页，再调用首页导航占位控制器中的关闭视图逻辑。

- 首次执行更新视图信息方法时，先通过菜单控制器计算默认激活项，如果默认激活项存在，则判断当前视图是否与默认激活项视图一致，不一致则绘制默认激活项标签页首项占位。


# 消息弹窗

该插件基于默认错误处理器重写，主要是重写报错提示，针对前端的问题(不触发后端接口)，使用黄色警告，针对后端的问题(由后端返回类似4xx,5xx)，使用红色警告。

## 主要逻辑

- IBiz前端模板对错误类型进行了规范：后台错误类型（HttpError：响应错误），前端错误类型（RuntimeModelError：运行模型错误，ModelError：模型错误，NoticeError：前端错误通知，RuntimeError：运行时错误）

- 重写了默认错误处理器，将重写后的默认处理器注册到错误处理中心内（后注册的先执行）。


# 树形多选组件

该插件基于下拉列表框（多选）增强，主要是适配树选择样式，通过动态代码表加载树结构数据，支持本地过滤，全选，非全选，全展开，全收起，在编辑器只读状态的时候不显示预置功能按钮，只能过滤查看。

## 建模配置

### 编辑器样式

需要配置树选择编辑样式。

配置截图：

![image](public/assets/images/tree-picker/editor-style-config.png)

树选择编辑器样式导出JSON：
```
[
  {
    "codename": "TREE_PICKER",
    "repdefault": 0,
    "validflag": 1,
    "pssyseditorstylename": "树选择",
    "pseditortypeid": "MDROPDOWNLIST"
  }
]
```

### 动态代码表

树数据由动态代码表提供，代码表上需要配置父值属性。

配置截图：

![image](public/assets/images/tree-picker/codelist-config.png)

## 主要逻辑

- 只读或禁用时，所有复选框隐藏，只能查看树数据或搜索树数据。
- 当选中叶子节点时，会将叶子节点对应的父子相关联节点的key值都保存，ui回显时将所有不是叶子节点的key都过滤。
- 直接获取树组件实例实现全部允许、全部禁止、全部展开、全部收起。

## 参数列表

|  参数名  |    建模    |        说明        |  类型   | 默认值 |
| :------: | :--------: | :----------------: | :-----: | :----: |
| readonly | 编辑器参数 | 编辑器是否为只读态 | boolean | false  |

# 穿梭框组件

该插件基于数据选择增强，主要是实现穿梭框样式。并且提供配置调用远程接口的方式，可配置文本框的文本作为调用的远程接口的参数的一部分，当搜索文本变化时触发调用远程接口，可配置取接口返回清单的前N条，可配置左侧穿梭框标题，可配置右侧穿梭框标题，可配置按钮文本，可根据远程接口匹配已选数据，可读取已选数据。

## 建模配置

### 启用远程搜索

默认为本地搜索，可配置编辑器参数开启远程搜索。

编辑器参数配置示例：

```
remoteSearch=true
```

配置截图：

![image](public/assets/images/transfer-picker/enable-remote-search.png)

### 配置取接口返回清单的前N条

默认返回1000条数据，可通过配置视图导航参数控制返回的数据条数。

视图导航参数配置示例：

```
SRFNAVPARAM.size=50
```

配置截图：

![image](public/assets/images/transfer-picker/size-config.png)

### 左侧标题与右侧标题

左侧标题默认显示【可选列表】，右侧标题默认显示【已选列表】。可配置编辑器参数更改标题名称，编辑器参数为一个数组，数组内下标0的为左侧标题，下标为1的为右侧标题。

编辑器参数配置示例：

```
titles=["可选客户", "已选客户"]
```

配置截图：

![image](public/assets/images/transfer-picker/titles-config.png)

### 按钮文本

按钮文本默认左侧为【删除】，右侧为【添加】。可配置编辑器参数更改按钮文本，编辑器参数为一个数组，数组内下标0的为左侧按钮文本，下标为1的为右侧按钮文本。

编辑器参数配置示例：

```
buttonTexts=["移除","新增"]
```

配置截图：

![image](public/assets/images/transfer-picker/button-texts-config.png)

### 编辑器样式

需要配置穿梭框编辑样式。

配置截图：

![image](public/assets/images/transfer-picker/editor-config.png)

穿梭框编辑器样式导出JSON：

```
[
  {
    "codename": "TRANSFER_PICKER",
    "repdefault": 0,
    "validflag": 1,
    "pssyseditorstylename": "穿梭框选择",
    "pseditortypeid": "PICKER"
  }
]
```

## 主要逻辑

- 该插件抽出了穿梭框基础组件，逻辑参考了element穿梭框逻辑与样式。
- 本地或远程搜索可通过配置区分，搜索时做了防抖处理。
- 在远程搜索过程中，左侧列表回显数据总条数更新为搜索后返回数据的总条数，并且会将选中数据push到搜索返回数据集合内。
- 只读态时，仅能查看，不可操作

## 参数列表

|      参数名      |    建模    |        说明        |   类型   |          默认值          |
| :--------------: | :--------: | :----------------: | :------: | :----------------------: |
| SRFNAVPARAM.size | 编辑器参数 |   接口请求数据量   |  number  |           1000           |
|      titles      | 编辑器参数 |   自定义列表标题   | string[] | ['可选列表', '已选列表'] |
|   buttonTexts    | 编辑器参数 |   自定义按钮文案   | string[] |     ['删除', '添加']     |
|   remoteSearch   | 编辑器参数 |  是否启用远程搜索  | boolean  |          false           |
|     readonly     | 编辑器参数 | 编辑器是否为只读态 | boolean  |          false           |

# 分页组件

分页组件为表格部件的内置组件，默认页面容量为: [50, 100, 200, 300 500]，可通过配置表格的部件参数pageSizes来指定页面容量。

## 建模配置

### 启用分页

表格需配置启用分页栏配置时，表格才会绘制分页栏

配置截图：

![image](public/assets/images/pagination/pagination-config.png)

### 自定义页面容量

表格分页可以通过部件参数指定页面容量。

参数配置示例：

```
pageSize=[50, 100, 200, 300, 500, 700]
```

配置截图：

![image](public/assets/images/pagination/pagination-custom-config.png)

## 参数列表

|  参数名  |         建模         |        说明        |   类型   |         默认值          |
| :------: | :------------------: | :----------------: | :------: | :---------------------: |
| pageSize | 表格部件控件动态参数 | 自定义表格页面容量 | number[] | [50, 100, 200, 300 500] |

# 表格工具栏

表格工具栏是预置的一个面板项类型，预置类型标识为【GRID_TOOLBAR】，该组件支持页面刷新，导出，表格列配置，隐藏/显示搜索组件。

## 建模配置

### 组件配置
如果视图使用表格的默认视图布局面板，则不需要手动配置；如果是自定义视图布局面板上使用，需手动配置：拖拽一个面板直接内容项，将其预定义类型改为【GRID_TOOLBAR】即可。

配置截图：

![image](public/assets/images/grid-toolbar/grid-toolbar-config.png)

## 主要逻辑

- 刷新：通过当前视图控制执行刷新预置逻辑

- 导出：通过当前视图控制执行导出预置逻辑，导出当前页和导出所有传递的参数不同，导出详情逻辑请查看表格控制器

- 表格列配置：获取到当前视图上的表格ui状态中的表格列状态数组，改变其显示状态，设置列显示状态并保存，保存之前调用一次计算列的固定状态，防止固定列显示异常

- 隐藏/显示搜索组件：视图上没有配置搜索表单部件时，该组件不会显示；点击该按钮时调用视图预置的切换搜索表单显示逻辑

# 抽屉组件

重写了全局弹窗容器（CustomOverlayContainer），弹窗控制器（CustomOverlayController）和抽屉组件，全局只有一个抽屉实例，默认没有蒙层，可拖动边缘改变抽屉大小，后续抽屉打开的视图都会在同一个抽屉容器中绘制。

## 建模配置

### 抽屉打开

视图需要配置视图打开方式为抽屉打开

配置截图：

![image](public/assets/images/drawer/drawer-config.png)

### 抽屉参数

该抽屉组件参考element设计的，因此一些抽屉的配置可以通过参数来指定，在视图动态参数中配置【ModalOption】来指定想要的效果，ModalOption的值必须是一个JSON字符串

配置截图：

![image](public/assets/images/drawer/drawer-param-config.png)

## 主要逻辑

- 在弹窗控制器中创建抽屉时，如果没有抽屉容器则创建一个新的抽屉容器，如果有则更新抽屉容器的参数，在抽屉关闭时销毁抽屉容器

## 参数列表

抽屉组件识别的 ModalOption 包含以下参数：

|       参数名       |                    说明                    |  类型   | 默认值 |
| :----------------: | :----------------------------------------: | :-----: | :----: |
|     dragBorder     |                是否可拖拽边                | boolean |  true  |
|     showClose      |              是否显示关闭按钮              | boolean | false  |
|       modal        |               是否需要遮罩层               | boolean | false  |
|     modalClass     |             遮罩层的自定义类名             | string  |   -    |
|    customClass     |               抽屉自定义类名               | string  |   -    |
| closeOnClickModal  | 是否可以点击遮罩关闭抽屉（显示遮罩时生效） | boolean |  true  |
| closeOnPressEscape |       是否可以通过按下 ESC 关闭抽屉        | boolean |  true  |

# 弹窗组件

重写了标准的弹窗组件，支持拖动边改变大小，支持拖拽视图头拖动位置，默认启用拖拽，但必须配置有视图头。

## 建模配置

视图需要配置视图打开方式为模态打开

配置截图：

![image](public/assets/images/modal/modal-config.png)

### 模态参数

该抽屉组件参考element设计的，因此一些模态框的配置可以通过参数来指定，在视图动态参数中配置【ModalOption】来指定想要的效果，ModalOption的值必须是一个JSON字符串

配置截图：

![image](public/assets/images/modal/modal-param-config.png)

## 参数列表

模态组件识别的 ModalOption 包含以下参数：

|       参数名       |                    说明                    |  类型   | 默认值 |
| :----------------: | :----------------------------------------: | :-----: | :----: |
|     dragBorder     |                是否可拖拽边                | boolean |  true  |
|     showClose      |              是否显示关闭按钮              | boolean |  true  |
|       modal        |               是否需要遮罩层               | boolean |  true  |
|     modalClass     |             遮罩层的自定义类名             | string  |   -    |
|    customClass     |               抽屉自定义类名               | string  |   -    |
| closeOnClickModal  | 是否可以点击遮罩关闭抽屉（显示遮罩时生效） | boolean |  true  |
| closeOnPressEscape |       是否可以通过按下 ESC 关闭抽屉        | boolean |  true  |
|     draggable      |                 是否可拖动                 | boolean |  true  |
|   draggableClass   |               可触发拖动类名               | string  |   -    |

# 页面关闭提示

在编辑类视图改变数据之后，没有保存时点击关闭会提示尚有内容未保存，是否保存的确认提示框，点击确定则回调保存函数，点击取消则正常关闭。

## 建模配置

### 关闭提示

编辑类视图默认启用【脏检查】配置：在数据变更后未保存时关闭视图提示用户

配置截图：

![image](public/assets/images/edit-view/edit-view-config.png)

## 主要逻辑

- 在视图引擎中监听模态事件钩子（modalEventHook），当模态关闭时触发逻辑脏检查，并询问用户

# 打印

基于前端界面行为的插件，打印指定内容

## 建模配置

### 指定打印目标

可通过界面行为参数querySelector（节点选择器参数）和dataItemName（数据项名称）指定要打印的内容

配置截图：

![image](public/assets/images/print/print.png)

### 插件配置

界面行为上绑定前端扩展插件

配置截图：

![image](public/assets/images/print/print-config.png)

打印行为插件导出JSON：

```
[
  {
    "plugintype": "DEUIACTION",
    "codename": "UsrPFPlugin0227152160",
    "plugintag": "PRINT",
    "pssyspfpluginname": "打印"
  }
]
```

## 主要逻辑

- 根据界面行为参数配置获取到指定的打印内容，创建一个隐藏的 iframe，将打印内容写入，调用打印功能，打印完成后删除iframe

## 参数列表

|    参数名     |     建模     |                             说明                             |  类型  | 默认值 |
| :-----------: | :----------: | :----------------------------------------------------------: | :----: | :----: |
| querySelector | 界面行为参数 |                   通过类选择器找到打印目标                   | string |   -    |
| dataItemName  | 界面行为参数 | 通过数据项名称在当前行为数据中获取打印内容（值必须为html字符串） | string |   -    |

# 导出PDF

基于前端界面行为的插件，导出指定内容的PDF文件

## 建模配置

### 指定导出目标

可通过界面行为参数querySelector（节点选择器参数）和dataItemName（数据项名称）指定要打印的内容

配置截图：

![image](public/assets/images/pdf/pdf.png)

### 插件配置

界面行为上绑定前端扩展插件

配置截图：

![image](public/assets/images/pdf/pdf-config.png)

导出PDF行为插件导出JSON：

```
[
  {
    "plugintype": "DEUIACTION",
    "codename": "UsrPFPlugin0227383791",
    "plugintag": "EXPORT_PDF",
    "pssyspfpluginname": "导出PDF"
  }
]
```

## 主要逻辑

- 根据界面行为参数配置获取到指定的导出内容，将导出节点转为canvas添加到pdf中后下载pdf文件

## 参数列表

|    参数名     |     建模     |                             说明                             |  类型  |  默认值  |
| :-----------: | :----------: | :----------------------------------------------------------: | :----: | :------: |
| querySelector | 界面行为参数 |                   通过类选择器找到导出目标                   | string |    -     |
| dataItemName  | 界面行为参数 | 通过数据项名称在当前行为数据中获取导出内容（值必须为html字符串） | string |    -     |
|   fileName    | 界面行为参数 | 导出文件名：可以是一个名字，也可以是一个属性名（前后必须加%） | string | 下载文件 |

# 表格

该部件基于标准表格进行重写，具备列头宽度调整，列头拖动排序并保存至后台，数据排序，筛选，动态计算合计列，设置单元格和行样式，启用编辑态等功能。

## 建模配置

### 列头拖动排序

该表格支持列头拖动排序，需配置【次序调整】

配置截图：

![image](public/assets/images/grid/grid-header-draggable.png)

### 数据排序

表格属性列默认启用排序，不想该列排序可配置【禁用排序】

配置截图：

![image](public/assets/images/grid/grid-sort.png)

### 列筛选

表格列上必须配置过滤器搜索模式，以启用列筛选功能

配置截图：

![image](public/assets/images/grid/grid-filter.png)

### 合计列

表格表格支持数据聚合，然后在列上配置该列的集合模式，如上配置之后即可出现聚合行

配置截图：

![image](public/assets/images/grid/grid-aggregation.png)

配置截图：

![image](public/assets/images/grid/grid-column-aggregation.png)

### 设置单元格和行样式

表格目前通过属性注入的方式设置单元格和行样式: 属性名称为element表格可接收参数，值为element表格参数对应数据

配置截图：

![image](public/assets/images/grid/grid-custom-style.png)

### 表格事件

表格支持配置单击事件，双击事件，选中数据事件等，可在视图逻辑或部件逻辑上配置。

配置截图：

![image](public/assets/images/grid/grid-event.png)

### 编辑模式

表格可以配置编辑模式，这需要在表格部件上配置行编辑，再在想要编辑的列上配置行编辑即可，并且识别必填项，支持新建行。组后需要配置预置的【行编辑】界面行为在工具栏上，作为表格开启编辑态的开关。

#### 列编辑配置

列想要可编辑，必须在列上配置行编辑；编辑器可手动配置，如果没有配置则会根据属性类型自动计算可用编辑器

配置截图：

![image](public/assets/images/grid/grid-column-edit.png)

#### 编辑开关

表格想要开启编辑态，除以上配置以外还必须配置【行编辑】界面行为，在界面上点击这个行为之后，表格启用编辑态，再次点击则关闭编辑态

配置截图：

![image](public/assets/images/grid/grid-edit.png)

## 主要逻辑

- 合计行：如果表格勾选了数据，则合计行的合计文本会变成选中合计，并计算出勾选行的合计，否则默认计算当前页数据的合计

- 表格支持通过属性注入的方式设置表格样式等

- 列状态改变（如：宽度，列顺序，列显示等）则会将列状态存储到后台，用户再其他电脑打开时会读取该状态来显示

- 表格按要求配置编辑模式后，必须配置【行编辑】行为作为开启表格编辑态的开关，编辑模式下：单击单元格打开编辑器；更改过的数据会显示红色三角角标，新建数据会显示绿色三角角标；新建行默认为编辑态；支持tab键跳转下一个可编辑单元格

## 参数列表

|       参数名        |     建模     |                             说明                             |
| :-----------------: | :----------: | :----------------------------------------------------------: |
|     onRowClick      |   表格事件   |                        表格行单击事件                        |
|    onDbRowClick     |   表格事件   |                        表格行双击事件                        |
|  onSelectionChange  |   表格事件   |                       表格勾选数据事件                       |
|      onActive       |   表格事件   |                       表格数据激活事件                       |
|      rowStyle       | 表格注入属性 | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style |
|    rowClassName     | 表格注入属性 | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className |
|      cellStyle      | 表格注入属性 | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style |
|    cellClassName    | 表格注入属性 | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className |
| headerCellClassName | 表格注入属性 | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className |
|   headerCellStyle   | 表格注入属性 | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style |
| headerRowClassName  | 表格注入属性 | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className |
|   headerRowStyle    | 表格注入属性 | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style |