插件视图使用场景

插件视图有三种主要的使用方式，本文档介绍每种方式的适用场景和实现方法。

场景一：直接在页面使用

适用场景

这种方式属于对明道云页面的二次开发，主要用于优化数据展示和操作体验。

典型应用：

• 多表数据展示优化
• 子表合并明细表格
• 复杂数据可视化
• 自定义交互方式

为什么需要

明道云对多表数据的展示支持有限，比如：

• 尺寸表展示
• 子表合并明细表格
• 复杂的数据关联展示

这些场景下，使用插件视图可以大幅提升用户体验。

实现方式

1. 在工作表中创建「自定义视图」
2. 开发插件视图代码
3. 发布插件
4. 用户可以直接在工作表中使用该视图

示例场景

场景：订单明细合并展示

主订单表和订单明细表需要合并展示，主订单数据以合并单元格的方式同时展示两张表的数据。

通过插件视图可以实现：

• 先加载主表格
• 异步获取子表数据
• 合并展示两张表的数据
• 支持字段配置和子表选择配置

场景二：按钮跳转方式

适用场景

在某个表单上添加按钮，点击按钮后通过工作流跳转到插件视图页面。

实现步骤

1. 添加按钮

在表单中添加一个按钮控件，配置点击事件触发工作流。

2. 配置工作流

在工作流中添加「打开页面」节点，将插件视图的链接复制到页面地址。

3. 传递参数

如果需要根据当前记录获取相关数据，可以在链接中拼接 query 参数：

https://your-plugin-view.com?recordId=xxx&worksheetId=yyy

4. 获取参数

在插件视图中，通过 mdye.config.query 获取页面携带的参数：

import { config } from "mdye";

const { recordId, worksheetId } = config.query;
console.log('记录ID:', recordId);
console.log('工作表ID:', worksheetId);

注意事项

⚠️ 参数传递建议：

• 一般只传递记录 ID 即可
• 不要为了传参而传参
• 避免传递过多参数，否则会在代码中写很多动态值
• 过多的动态值会让代码审查和问题排查变得困难

示例场景

场景：订单详情页面

1. 在订单列表中，点击「查看详情」按钮
2. 工作流打开插件视图页面
3. 传递订单 ID 作为参数
4. 插件视图根据订单 ID 加载订单详情和相关数据

场景三：内嵌在表单详情页面

适用场景

在表单详情页面中嵌入插件视图，这种方式使用较少，但可以实现在详情页中展示自定义内容。

实现步骤

1. 添加「插入页面」控件

在表单中添加「插入页面」控件，该控件支持嵌入其他视图或外部链接。

2. 嵌入插件视图链接

在控件中填入插件视图的链接地址。

3. 使用分享链接（推荐）

直接嵌入插件视图链接会显示一些不必要的控件，比如：

• 创建按钮
• 菜单栏
• 其他无关控件

解决方案：使用分享链接

1. 在插件视图中，点击「分享」按钮
2. 复制分享链接
3. 将分享链接嵌入到「插入页面」控件中

分享链接会隐藏多余的信息，页面更加简洁。

4. 隐藏多余控件（可选）

即使使用分享链接，仍然可能看到一些与插件视图无关的控件（因为是内嵌 iframe，外部信息是正常的）。

可以通过代码方式隐藏这些不需要的信息：

// 在插件视图代码中
useEffect(() => {
  // 隐藏父页面的某些元素
  const style = document.createElement('style');
  style.textContent = `
    /* 隐藏不需要的控件 */
    .parent-page-control {
      display: none !important;
    }
  `;
  document.head.appendChild(style);
  
  return () => {
    document.head.removeChild(style);
  };
}, []);

注意事项

• 内嵌 iframe 会有一些外部信息，这是正常的
• 使用分享链接可以减少不必要的控件
• 通过 CSS 可以进一步隐藏不需要的元素
• 这种方式使用场景较少，建议优先考虑前两种方式

场景对比

使用方式	适用场景	优点	缺点
直接使用	数据展示优化、复杂视图	用户直接使用，体验好	需要发布插件
按钮跳转	页面跳转、详情展示	灵活，可传参	需要配置工作流
表单内嵌	详情页嵌入	集成度高	使用场景少，可能有外部控件

选择建议

• 需要优化数据展示 → 使用场景一（直接使用）
• 需要跳转到自定义页面 → 使用场景二（按钮跳转）
• 需要在详情页嵌入 → 使用场景三（表单内嵌）

根据实际需求选择合适的使用方式。