1. Oinone社区Home
  2. 未分类

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

yexiu • • 未分类 • 731 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

相关推荐

  • 自定义字段样式 未分类

    自定义字段样式

    在日常开发中，我们经常会遇到需要根据业务规则动态展示字段样式的场景，比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例，带大家实现这一功能。 以下以 自定义表格字段文字颜色 为例。 实现步骤 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: 页面效果图

    汤乾华's avatar 汤乾华
    2025年1月9日
    6.7K00
  • 前端 快速查询并替换默认组件 未分类

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

    可以借助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日
    1.0K00
  • 数式Oinone 前后端标准开发流程 未分类

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

    shao's avatar shao
    2024年6月7日
    1.8K00
  • 后端脚手架生成工程 未分类

    后端脚手架生成工程

    后端脚手架生成工程 脚手架版本 6.2.x(6.3.x/6.4.x)版本的脚手架，修改脚本(参考下节内容)中脚手架版本： # 新项目的pamirs platform version pamirsVersion=6.2.8 …… # mvn archetype:generate执行片段中 -DarchetypeVersion=6.2.8 7.0.x版本的脚手架，修改脚本(参考下节内容)中脚手架版本： # 新项目的pamirs platform version pamirsVersion=7.0.5 …… # mvn archetype:generate执行片段中 -DarchetypeVersion=7.0.5 后端脚手架生成工程 后端单工程脚手架 1、使用如下命令来用项目脚手架生成工程：新建archetype-project-generate.sh(bat) 脚本 archetype-project-generate.sh #!/bin/bash # 项目生成脚手架 # 用于新项目的构建 # 脚手架使用目录 # 本地 local # 本地脚手架信息存储路径 ~/.m2/repository/archetype-catalog.xml archetypeCatalog=local # 以下参数以pamirs-demo为例 # 新项目的groupId groupId=pro.shushi.pamirs.demo # 新项目的artifactId artifactId=pamirs-demo # 新项目的version version=1.0.0-SNAPSHOT # Java包名前缀 packagePrefix=pro.shushi # Java包名后缀 packageSuffix=pamirs.demo # 新项目的pamirs platform version；根据上个章节中的版本介绍进行修改 pamirsVersion=6.2.8 # Java类名称前缀 javaClassNamePrefix=Demo # 项目名称 module.displayName projectName=OinoneDemo # 模块 MODULE_MODULE 常量 moduleModule=demo_core # 模块 MODULE_NAME 常量 moduleName=DemoCore # spring.application.name applicationName=pamirs-demo # tomcat server address serverAddress=0.0.0.0 # tomcat server port serverPort=8090 # redis host redisHost=127.0.0.1 # redis port redisPort=6379 # 数据库名 db=demo # zookeeper connect string zkConnectString=127.0.0.1:2181 # zookeeper rootPath zkRootPath=/demo mvn archetype:generate \ -DinteractiveMode=false \ -DarchetypeCatalog=${archetypeCatalog} \ -DarchetypeGroupId=pro.shushi.pamirs.archetype \ -DarchetypeArtifactId=pamirs-project-archetype \ -DarchetypeVersion=6.2.8 \ #根据上个章节中的版本介绍进行修改 -DgroupId=${groupId} \ -DartifactId=${artifactId} \ -Dversion=${version} \ -DpamirsVersion=${pamirsVersion} \ -Dpackage=${packagePrefix}.${packageSuffix} \ -DpackagePrefix=${packagePrefix} \ -DpackageSuffix=${packageSuffix} \ -DjavaClassNamePrefix=${javaClassNamePrefix} \ -DprojectName="${projectName}" \ -DmoduleModule=${moduleModule} \ -DmoduleName=${moduleName} \ -DapplicationName=${applicationName} \ -DserverAddress=${serverAddress} \ -DserverPort=${serverPort} \ -DredisHost=${redisHost} \ -DredisPort=${redisPort} \ -Ddb=${db} \ -DzkConnectString=${zkConnectString} \ -DzkRootPath=${zkRootPath} archetype-project-generate.bat @echo off :: 项目生成脚手架 set archetypeCatalog=local set groupId=pro.shushi.pamirs.demo set artifactId=pamirs-demo set version=1.0.0-SNAPSHOT set…

    望闲's avatar 望闲
    2025年8月22日
    1.1K00
  • 前端自定义组件之锚点分组 未分类

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

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

Leave a Reply

Please Login to Comment