1. Oinone社区Home
  2. 未分类

如何实现业务表格跳转页面设计器设计器页面

yexiu • • 未分类 • 609 views

后端实现

代理继承界面设计器视图模型

@Model.model(MyView.MODEL_MODEL)
@Model(displayName = "视图代理")
@Model.Advanced(type = ModelTypeEnum.PROXY)
public class MyView extends UiDesignerViewProxy {
    public static final String MODEL_MODEL = "hr.simple.MyView";

    @Field.Integer
    @Field(displayName = "页面布局ID")
    private Long uiDesignerViewLayoutId;
}

重写查询接口，返回页面布局ID，重写创建接口，实现创建页面逻辑。

package pro.shushi.pamirs.top.core.action;

import org.apache.commons.collections4.CollectionUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import pro.shushi.pamirs.boot.base.constants.ViewConstants;
import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxAction;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute;
import pro.shushi.pamirs.boot.base.ux.annotation.button.UxRouteButton;
import pro.shushi.pamirs.framework.connectors.data.sql.Pops;
import pro.shushi.pamirs.framework.connectors.data.sql.query.LambdaQueryWrapper;
import pro.shushi.pamirs.meta.annotation.Action;
import pro.shushi.pamirs.meta.annotation.Function;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.api.dto.condition.Pagination;
import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper;
import pro.shushi.pamirs.meta.api.session.PamirsSession;
import pro.shushi.pamirs.meta.constant.FunctionConstants;
import pro.shushi.pamirs.meta.enmu.*;
import pro.shushi.pamirs.top.api.model.MyView;
import pro.shushi.pamirs.ui.designer.api.designe.UiDesignerViewLayoutService;
import pro.shushi.pamirs.ui.designer.model.UiDesignerViewLayout;
import pro.shushi.pamirs.ui.designer.pmodel.UiDesignerViewLayoutProxy;

import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * @author Yexiu at 20:39 on 2025/3/27
 */

@Component
@Model.model(MyView.MODEL_MODEL)
public class MyViewAction {

    @Autowired
    private UiDesignerViewLayoutService uiDesignerViewLayoutService;

    @Action.Advanced(name = FunctionConstants.create, managed = true)
    @Action(displayName = "创建", summary = "添加", bindingType = ViewTypeEnum.FORM)
    @Function(name = FunctionConstants.create)
    @Function.fun(FunctionConstants.create)
    public MyView create(MyView data) {
        UiDesignerViewLayoutProxy uiDesignerViewLayoutProxy = new UiDesignerViewLayoutProxy();
        uiDesignerViewLayoutProxy.setBizType(data.getBizType());
        uiDesignerViewLayoutProxy.setDesignerActionBarType(data.getDesignerActionBarType());
        uiDesignerViewLayoutProxy.setViewType(data.getType());
        uiDesignerViewLayoutProxy.setModel(data.getModel());
        uiDesignerViewLayoutProxy.setModule(PamirsSession.getServApp());
        uiDesignerViewLayoutProxy.setViewTitle(data.getTitle());
        uiDesignerViewLayoutProxy.setUsingDefaultView(data.getLoadLayout());

        UiDesignerViewLayoutProxy saveUiDesigner = uiDesignerViewLayoutService.create(uiDesignerViewLayoutProxy);
        data.setDesignerViewId(saveUiDesigner.getId());
        return data;
    }

    @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "查询列表")
    @Function.fun(FunctionConstants.queryPage)
    @Function(openLevel = {FunctionOpenEnum.API, FunctionOpenEnum.LOCAL})
    public Pagination<MyView> queryPage(Pagination<MyView> page, IWrapper<MyView> queryWrapper) {

        LambdaQueryWrapper<MyView> wrapper = Pops.<MyView>lambdaQuery().from(MyView.MODEL_MODEL)
                .eq(MyView::getSys, Boolean.FALSE)
                .eq(MyView::getSystemSource, SystemSourceEnum.UI);
        Pagination<MyView> myViewPagination = new MyView().queryPage(page, wrapper);
        List<MyView> content = myViewPagination.getContent();
        // 提前返回，就算是NULL的也没事，省去不必要的判断
        if (CollectionUtils.isEmpty(content)) {
            return myViewPagination;
        }
        List<UiDesignerViewLayout> uiDesignerViewLayoutList = new UiDesignerViewLayout().queryList();
        if (CollectionUtils.isEmpty(uiDesignerViewLayoutList)) {
            return myViewPagination;
        }
        Map<String, Long> userTaskMap = uiDesignerViewLayoutList.stream().collect(Collectors.toMap(
                i-> buildMapKey(i.getModel(), i.getViewName()), UiDesignerViewLayout::getId, (old, n) -> old)
        );
        for (MyView myView : content) {
            myView.setUiDesignerViewLayoutId(userTaskMap.get(buildMapKey(myView.getModel(), myView.getName())));
        }
        return myViewPagination;
    }

    private String buildMapKey(String model, String viewName) {
        return model + ":" + viewName;
    }
}

在页面设计器创建页面

Oinone社区 作者：yexiu原创文章，如若转载，请注明出处：https://doc.oinone.top/other/20853.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
yexiu's avataryexiu数式员工
0 0
Previous 2025年3月27日 am11:33
Next 2025年4月17日 pm4:20

相关推荐

  • 设计器基础学习路径 未分类

    设计器基础学习路径

    模块 内容 目标 doc 链接 模型设计器 模型 1.熟悉模型管理和字段管理 模型 数据字典 熟悉数据字典的创建 数据字典 数据编码 了解数据编码的操作创建 数据编码 界面设计器 了解页面 了解界面设计器中的页面 页面 页面设计 增删改查 【界面设计器】模型增删改查基础 页面设计 左树右表 【界面设计器】左树右表 页面设计 树形表格 【界面设计器】树形表格 页面设计 树下拉 【界面设计器】树下拉/级联 页面设计 自定义组件基础 【界面设计器】自定义字段组件基础 页面设计 熟悉页面设计的操作 页面设计 自定义组件 熟悉如何使用自定义组件 自定义组件 流程设计器 流程组成 了解流程的组成 流程 流程设计 熟悉流程设计内容 流程设计 熟悉流程的触发节点 流程触发 熟悉流程的节点动作与设计使用 节点动作 低代码与无代码结合 示例讲解 Outsourcing相关 低无一体的开发方式、设计数据的导入导出等

    shao's avatar shao
    2024年6月15日
    1.6K00
  • 前端 快速查询并替换默认组件 未分类

    前端 快速查询并替换默认组件

    可以借助vue的调试工具快速找到对应的组件，请参考这篇文章 使用vue调试工具快速找到对应的组件 Mask默认组件 重写Mask组件 重写AppSwitcherWidget import Com from './com.vue' /** * SPI注册条件保持根 AppSwitcherWidget 一致，即可覆盖 */ @SPI.ClassFactory( MaskWidget.Token({ widget: 'app-switcher' }) ) export class CustomAppSwitcherWidget extends AppSwitcherWidget { /** * 如果需要重写vue组件，那么可以通过重写initialize方法来实现，如果是修改数据或者逻辑，那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 MenuWidget import Com from './com.vue' /** * SPI注册条件保持根 MenuWidget 一致，即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'nav-menu' })) export class CustomMenuWidget extends MenuWidget { /** * 如果需要重写vue组件，那么可以通过重写initialize方法来实现，如果是修改数据或者逻辑，那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 NotificationWidget import Com from './com.vue' /** * SPI注册条件保持根 NotificationWidget 一致，即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class CustomNotificationWidget extends NotificationWidget { /** * 如果需要重写vue组件，那么可以通过重写initialize方法来实现，如果是修改数据或者逻辑，那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 LanguageWidget import Com from './com.vue' /** * SPI注册条件保持根 LanguageWidget 一致，即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'language' })) export class CustomLanguageWidget extends LanguageWidget { /** * 如果需要重写vue组件，那么可以通过重写initialize方法来实现，如果是修改数据或者逻辑，那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 UserWidget import Com from './com.vue' /** * SPI注册条件保持根 UserWidget 一致，即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class CustomUserWidget extends UserWidget { /** * 如果需要重写vue组件，那么可以通过重写initialize方法来实现，如果是修改数据或者逻辑，那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props);…

    汤乾华's avatar 汤乾华
    2025年8月14日
    88100
  • 打印支持非存储数据导出 未分类

    打印支持非存储数据导出

    介绍 平台提供的默认打印功能没有支持非存储数据的导出。我们可以自定义打印导出功能，以满足业务中个性化的需求。 实现思路 重写打印任务模型，添加业务数据字段 自定义打印动作，前端将导出数据放到业务数据字段中 使用导出数据扩展点机制修改导出数据 代码示例 继承平台的打印任务模型，加上需要业务数据字段，这个字段用于传输需要打印的表单数据，但是需要自定义打印的表单往往不止一个，所以需要定义为通用的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's avatar yexiu
    2025年10月13日
    83800
  • 前端自定义组件之锚点分组 未分类

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

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

    银时's avatar 银时
    2025年7月8日
    52800
  • Oinone 初级学习路径 未分类

    Oinone 初级学习路径

    文档说明 文档链接 介绍Oinone前端相关知识点 前端基础学习路径 介绍Oinone后端相关知识点 后端基础学习路径 介绍平台基础组件 平台基础组件 介绍平台设计器常用场景实操 设计器基础学习路径 设计器实操案例示例 7.2 实战训练（积分发放）

    shao's avatar shao
    2024年6月15日
    1.5K00

Leave a Reply

Please Login to Comment