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

相关推荐

• 未分类

  打印支持非存储数据导出

  介绍 平台提供的默认打印功能没有支持非存储数据的导出。我们可以自定义打印导出功能，以满足业务中个性化的需求。 实现思路 重写打印任务模型，添加业务数据字段 自定义打印动作，前端将导出数据放到业务数据字段中 使用导出数据扩展点机制修改导出数据 代码示例 继承平台的打印任务模型，加上需要业务数据字段，这个字段用于传输需要打印的表单数据，但是需要自定义打印的表单往往不止一个，所以需要定义为通用的Object字段。 @Model.model(TransientPdfPrintTask.MODEL_MODEL) @Model(displayName = "传输模型Pdf打印任务") public class TransientPdfPrintTask extends PdfPrintTask { public static final String MODEL_MODEL="demo.TransientPdfPrintTask"; @Field(displayName = "业务数据") private Object businessData; } 自定义打印动作 @Model.model(TransientPdfPrintTask.MODEL_MODEL) @Component public class TransientPdfPrintTaskAction extends AbstractPdfPrintTaskAction<TransientPdfPrintTask> { @Resource private PdfFileService pdfFileService; @Action(displayName = "打印", contextType = ActionContextTypeEnum.CONTEXT_FREE, bindingType = {ViewTypeEnum.TABLE}) @Override public TransientPdfPrintTask createPrintTask(TransientPdfPrintTask data) { return super.createPrintTask(data); } @Override protected void doExport(TransientPdfPrintTask exportTask, PdfDefinitionContext context) { pdfFileService.doExportSync(exportTask, context); } @Function.Advanced(type = FunctionTypeEnum.QUERY) @Function(openLevel = FunctionOpenEnum.API) public TransientPdfPrintTask construct(TransientPdfPrintTask data) { String model = FetchUtil.fetchVariables(PdfConstants.MODEL); data.construct(); data.setModel(model); return data; } } 本篇文章只介绍同步打印，如果异步需要修改doExport方法。 编写导出的数据处理逻辑 @Ext(PdfPrintTask.class) public class PrintExportExt extends AbstractPdfExportFetchDataExtPointImpl implements PdfExportFetchDataExtPoint { // 这里使用扩展点表达式匹配需要打印的非存储模型，只有表达式为true才会走这段逻辑。 @Override @ExtPoint.Implement(expression = "context.model==\"" + ProductPricingClientTransient.MODEL_MODEL + "\"") public List<Object> fetchExportData(PdfPrintTask exportTask, PdfDefinitionContext context) { List<Object> result = new ArrayList<>(); List<Object> dataList = new ArrayList<>(); TransientPdfPrintTask transientPdfPrintTask = new TransientPdfPrintTask(); transientPdfPrintTask.set_d(exportTask.get_d()); dataList.add(transientPdfPrintTask.getBusinessData()); result.add(dataList); return result; } } 前端自定义打印按钮，将数据提交给业务数据字段，并使用同步导出打印。

  yexiu

  2025年10月13日

  968000

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

  梁, 丁

  未分类 2024年5月23日

  2.1K000
• 未分类

  自定义字段样式

  在日常开发中，我们经常会遇到需要根据业务规则动态展示字段样式的场景，比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例，带大家实现这一功能。 以下以 自定义表格字段文字颜色 为例。 实现步骤 1. 在界面设计器中添加组件 通过界面设计器，添加一个组件 2. 创建元件 以表格的「金额字段」为例，创建对应的元件（可根据自己的业务场景调整）。 3. 配置元件属性 进入元件设计页面，从组件库中拖入「单行文本」到设计区域。在右侧属性面板中填写相关配置并保存 4. 保存元件 完成配置后，保存元件。 5. 发布元件 将元件发布，供页面设计使用。 6. 切换表格字段 进入页面设计器，将表格中的字段切换为刚刚创建的元件。 7. 配置字段颜色 在右侧属性面板中，配置字段的文字颜色： 固定颜色：直接输入颜色值（如 red）。 动态颜色：输入表达式，根据业务逻辑动态展示颜色。例如：当前行的名称等于 1 时显示红色，否则为蓝色。 示例表达式： activeRecord.name === '1' ? 'red' : 'blue' 8: 在代码中，自定义对应的表格字段 import { SPI, BaseFieldWidget, ModelFieldType, ViewType, TableCurrencyFieldWidget, Widget, RowContext, numberZeroFill, numberAddThousandth, Expression, ExpressionRunParam } from '@kunlun/dependencies'; import { toString } from 'lodash-es'; import { createVNode, VNode } from 'vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Table], ttype: [ModelFieldType.Currency], widget: 'TableCurrencyColor' }) ) export class TableCustomCurrencyFieldWidget extends TableCurrencyFieldWidget { computedFieldColor(context: RowContext) { const { fieldColor = ' ' } = this.getDsl(); if (!fieldColor) { return null; } // 如果当前颜色是表达式，则需要计算 if (Expression.hasKeywords(fieldColor)) { const params: ExpressionRunParam = { activeRecords: [context.data], rootRecord: {}, openerRecord: {}, scene: '' }; return Expression.run(params, fieldColor, fieldColor)!; } return fieldColor; } @Widget.Method() public renderDefaultSlot(context: RowContext): VNode[] | string { let value = numberZeroFill(toString(super.compute(context)), this.getPrecision(context)); if (this.getShowThousandth(context)) { value = numberAddThousandth(value); } return [ createVNode( 'div', { style: { color: this.computedFieldColor(context) } }, value ) ]; } } 9: 页面效果图

  汤乾华

  2025年1月9日

  6.6K000
• 未分类

  流程和任务状态说明文档

  一、工作流实例状态说明 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日

  730000
• 未分类

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

  本文将讲解如何通过自定义，实现锚点组件。这个锚点组件会根据界面设计器拖入的分组，动态解析出锚点。 实现路径 整体的实现思路是界面设计器拖个容器类的组件（这里以选项卡为例），自定义这个选项卡，往选项卡里拖拽的每个分组，每个锚点的名称是分组的标题。 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日

  629000