后台嵌入其他系统的界面，设计器：嵌入网页组件

相关推荐

• 数式Oinone培训前注意事项

  一、快速上手 （建议至少预习 6 小时） 在正式培训之前，建议需要完成以下任务，以便对培训内容有基本了解： 点击阅读：快速启动入门 该文档为学员提供了从入门到实现 demo 的全过程说明，涵盖了开发工具、框架搭建、常见问题解答等内容 开始培训前，请参与人员确保完成以下任务 阅读并理解文档中的每个步骤。 配置好前后端开发环境。 完成 demo 的基础框架搭建，验证是否能够成功运行。 二、预期成果 通过上述预习，大家完成以下事项：• 成功搭建本地开发环境，并能运行前后端的基本 demo。• 对前后端技术栈有初步了解，为正式培训中的深度学习打下基础，并且提出对应的疑问点 三、其他准备工作 1.技术工具检查：请确在本地已安装并配置好必要的开发工具和环境（如 IDE、Node.js、数据库等）；2.参与者反馈：在预习过程中，学员如遇到困难或无法解决的问题（前后端疑问），请提前记录并提交，以便培训期间重点解答;3.版本是否是最新的版本，且建议研发人员版本一致，且类型是 mini; ps:部署包相关信息，联系数式相关人员获取

  shao

  未分类 2024年8月2日

  2.4K001
• 未分类

  数式Oinone 前后端标准开发流程

  shao

  2024年6月7日

  848000
• 未分类

  流程和任务状态说明文档

  一、工作流实例状态说明 INIT：新的流程创建时，执行工作流实例前的状态。 PROCESSING：发起的新的流程之后，结束之前的状态。 FINISHED：整个流程结束后的状态。 ERROR：流程异常时的状态。 RECALL: 撤销流程实例时的状态 CLOSE：关闭流程实例时（流程撤销）的状态。 一、工作流实例通过状态说明 FILLED：流程走到填写节点，填写人填写过后的状态。 PASS：审批同意操作后的状态。 REJECT：审批结果被拒绝（审批节点结束后）的状态。 ING：新的流程创建时，执行工作流实例前的状态。 ERROR：流程异常时的状态。 RECALL：撤销流程实例时的状态。 RECALL_PASS：无 RECALL_REJECT：无 RECALL_FILLED：无 FALLBACK：已退回时标识抄送/工作流实例为已退回时的状态。 FALLBACK_PASS：无 FALLBACK_REJECT：无 FALLBACK_FILLED：无 TRANSFER：无 CLOSE：关闭流程实例时（（流程撤销））的状态。

  yexiu

  2025年6月24日

  310000

• 3.5.7 前端组件自定义(初级篇)

  梁, 丁

  未分类 2024年5月23日

  974000
• 未分类

  前端自定义组件之锚点分组

  本文将讲解如何通过自定义，实现锚点组件。这个锚点组件会根据界面设计器拖入的分组，动态解析出锚点。 实现路径 整体的实现思路是界面设计器拖个容器类的组件（这里以选项卡为例），自定义这个选项卡，往选项卡里拖拽的每个分组，每个锚点的名称是分组的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在选项页里拖拽任意多个分组。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的锚点分组组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderGroups，通过 DslRender.render 方法渲染界面设计器拖拽的分组。 import { BasePackWidget, DslDefinition, DslRender, SPI, Widget } from '@oinone/kunlun-dependencies'; import TabsParseGroup from './TabsParseGroup.vue'; function fetchGroupChildren(widgets?: DslDefinition[], level = 1): DslDefinition[] { if (!widgets) { return []; } const children: DslDefinition[] = []; for (const widget of widgets) { if (widget.widget === 'group') { children.push(widget); } else if (level >= 1) { fetchGroupChildren(widget.widgets, level – 1).forEach((child) => children.push(child)); } } return children; } @SPI.ClassFactory( BasePackWidget.Token({ widget: 'TabsParseGroup' }) ) export class TabsParseGroupWidget extends BasePackWidget { public initialize(props) { super.initialize(props); this.setComponent(TabsParseGroup); return this; } // 获取分组的子元素 public get groupChildren(): DslDefinition[] { return fetchGroupChildren(this.template?.widgets); } @Widget.Reactive() public get groupTitles() { return this.groupChildren.map((group) => group.title); } // 根据容器子元素渲染左侧 @Widget.Method() public renderGroups() { if (this.groupChildren && this.groupChildren.length) { return this.groupChildren.map((group) => DslRender.render(group)); } } } vue组件核心内容是用component :is属性，渲染出配置的分组组件 <template> <div class="TabsParseGroup"> <a-anchor :affix="false"> <a-anchor-link v-for="(item, index) in groupTitles" :href="`#default-group-${index}`" :title="item" /> </a-anchor> <div v-for="(item, index) in groupComponents" :id="`default-group-${index}`"> <component :is="item" /> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, PropType } from 'vue'; export default…

  银时

  2025年7月8日

  243000