相关推荐

• 低无一体

  前端-如何修改指定页面的内组件的css样式

  为组件加自定义class，用该class作为父选择器写特定的css样式 以form为例，自定义了以下class <view/>标签的表单视图(FormView)组件 <element/>标签的form(FormWidget)组件 <element/>标签的actionBar(ActionBarWidget)组件 import { registerLayout, ViewType } from '@kunlun/dependencies'; export const install = () => { registerLayout( ` <view type="FORM" class="my-form-view"> <element widget="form" slot="form" class="my-form-widget"> <xslot name="fields" slotSupport="pack,field" /> </element> <element widget="actionBar" slot="actionBar" class="my-action-bar" slotSupport="action" > <xslot name="actions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Form, model: 'resource.k2.Model0000000109', actionName: 'uiViewb2de116be1754ff781e1ffa8065477fa' } ); }; install(); 查看修改后的页面html结构 编写样式的css .my-form-view .oio-form { /** TODO **/ } .my-form-widget .oio-row { /** TODO **/ } .my-action-bar .oio-col { /** TODO **/ }

  nation

  2024年6月17日

  1.1K000
• 前端

  自定义mutation时出现校验不过时，如何排查

  场景描述 用户在自定义接口提供给前端调用时 @Action(displayName = "注册", bindingType = ViewTypeEnum.CUSTOM) public BaseResponse register(UserZhgl data) { //…逻辑 return result; } import java.io.Serializable; public class BaseResponse implements Serializable { private String code; private String msg; public BaseResponse() { } public BaseResponse(String code, String msg) { this.code = code; this.msg = msg; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } } gql执行时出现报错 { "errors":[ { "message":"Validation error of type SubSelectionNotAllowed: Sub selection not allowed on leaf type Object of field register @ 'zhglMutation/register'", "locations":[ { "line":3, "column":3 } ], "extensions":{ "classification":"ValidationError" } } ] } 解决方案 1.返回对象不为空时，对象必须是模型，否则无法解析返回参数2.前端调用GQL异常时，可以用Insomnia工具对GQL进行测试，根据错误提示对GQL进行修改和排查3.GQL正常情况下，执行以后可根据后端日志进行错误排查

  oinone

  2023年11月1日

  1.3K000
• 流程设计器

  设计器串联动作使用说明

  工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE。 流程创建 流程串联动作仅支持模型触发。 说明：当流程满足触发条件后，该流程将自动执行，和是否开启代码手动触发无关。此外，为了适应特定的业务场景，流程串联动作可与触发机制相结合使用。若流程设计为仅需手动触发，则可通过在筛选条件中设置一个恒不成立的逻辑表达式来实现这一需求。 界面设计器配置 在界面设计器的组件库 → 动作中找到“工作流”；仅能选择流程触发模型和当前主视图所属模型相同的流程；按钮点击后，流程触发。 说明 工作流及数据流程动作的触发需确保相关数据的存在，因此在运行时的创建页中，按钮将以禁用状态显示，防止在数据缺失时触发流程。 数据流程串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”和“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE和EipModule.MODULE_MODULE。 界面设计器配置 数据流程触发的配置和使用方式同工作流串联动作。 集成连接器串联动作 准备工作 界面所属模块需要保证依赖模块列表依赖了“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 EipModule.MODULE_MODULE 集成设计器接口配置 首先在集成设计器新增API 已配置Api“根据id查询用户”： 请求地址：/user/queryById/{id} 请求参数： 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 id Path 是 Integer 用户id[1~43有值] 响应参数： 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 id String Body 否 data.id 主键 name String Body 否 data.name 姓名 age String Body 否 data.age 年龄 country String Body 否 data.country 国家 gender String Body 否 data.gender 性别 界面设计器 在界面设计器的组件库 → 动作中找到“集成连接器”。 动作按钮创建完成后，在属性中找到连接器配置，选择Api资源。 请求参数配置 选择API资源后，若该API需配置请求与响应参数，则相应的参数配置项将会呈现。如上图所示，因所选API含有Path类型的参数，故可进行Path参数的映射配置。此API并无Body或Query类型的参数，因此这些配置项将不会显示。 Path参数的具体配置如下：左侧列出了集成设计器为API创建的参数名称，而右侧对应的是当前模型中的字段，将赋值表达式设定为ID。该配置的含义是：在用户点击按钮之后，系统将调用配置的Api资源，并以当前视图中的ID参数值来映射Path参数，发起请求。 响应参数配置 同样地，左侧的参数名称是由集成设计器配置的响应参数，而右侧则为当前模型中的字段。当请求成功发送并接收响应后，这些响应参数将会按照配置的规则被填充到表单或详情页面中。 发送请求前，若字段已填充数据，但在响应中未获取相应数据，则该字段将被置为空；比如在发送请求前，性别字段已有数据，而请求发送后，若接口返回的数据中未包含性别信息，则性别参数将会被置为空。 多对一字段将依据接口返回的数据从数据库中进行查询（queryOne）。若未查询到相关信息，则仅回填那些在响应中有值的字段。 运行时页面 响应参数一对多/多对多配置 集成设计器的API配置如下所示：条件查询用户 请求地址：/user/query 请求参数： 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 country Body 否 String 否 国家 name Body 否 String 否 用户姓名 响应参数： 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 data OBJECT Body 是 data 用户列表 »name String…

  夜神月

  2024年9月20日

  1.5K003
• 动作API

  动作API

  ActionWidget 动作组件的基类，包含了动作组件的通用属性和方法 示例 class MyActionWidget extends ActionWidget { } 动作属性 属性名 说明 类型 可选值 默认值 label 动作的名称 String – 当前动作的displayName action 当前动作的元数据 RuntimeAction – model 运行时模型 RuntimeModel – viewAction 运行时视图动作 RuntimeViewAction – view 运行时视图 RuntimeViewAction – initialValue 视图初始值 ActiveRecord[] – initialContext 视图初始上下文 Object – urlParameters 获取url参数 UrlQueryParameters – scene 场景 String – loading 动作加载状态 Boolean – false disabled 是否禁用 Boolean – false disabledTitle 禁用时的按钮名称 String – – invisible 当前字段是否不可见 Boolean – false validateForm 点击动作后是否校验表单 Boolean – false actionDomain 动作的domain查询条件 String – undefined goBack 点击动作后是否返回上一页 Boolean – false isDialog 是否为弹窗内动作 Boolean – 弹窗下的动作默认为true closeDialog 点击动作后是否关闭弹窗 Boolean – 默认为isDialog的值 isDrawer 是否为抽屉内动作 Boolean – 抽屉下的动作默认为true closeDrawer 点击动作后是否关闭抽屉 Boolean – 默认为isDrawer的值 isInnerPopup 是否为页内弹出层动作 Boolean – 页内弹出层下的动作默认为true isAsync 是否为异步动作 Boolean – true refreshRoot 是否刷新根视图 Boolean – false refreshData 是否刷新数据 Boolean – true type 动作的类型 ButtonType – 行内动作默认为ButtonType.link，其他动作为ButtonType.primary bizStyle 动作的业务类型 ButtonBizStyle – ButtonBizStyle.default icon 动作的图标 String – – enableConfirm 是否开启二次确认 Boolean – true confirmType 二次确认的类型 ConfirmType – – confirm 二次确认的内容 String – – confirmText 二次确认的提示内容 String – – confirmPosition 二次确认提示的展示位置 PopconfirmPlacement – PopconfirmPlacement.BM enterText 二次确认的确定按钮文字 String – – cancelText 二次确认的取消按钮文字 String – – searchBody 列表页的动作可以拿到搜索区域的搜索条件 ActiveRecord…

  nation

  2024年3月8日

  1.2K000

• 自定义组件之手动渲染弹出层（v4）

  阅读之前 你应该： 了解自定义组件相关内容。 自定义组件之手动渲染基础（v4） 弹出层组件 我们内置了两个弹出层组件，弹窗(Dialog)和抽屉(Drawer)，以下所有内容全部围绕弹窗(Dialog)进行描述，抽屉相关内容与弹窗完全一致。 下面这个对照表格可以帮助你区分两个弹出层组件的异同： 弹出层相关功能 弹窗(Dialog) 抽屉(Drawer) API方法 Dialog#create Drawer#create 内置组件 DialogWidget DrawerWidget 内置插槽 header, default, footer header, default, footer 渲染弹出层的方式 我们提供了三种渲染弹出层组件的方式，根据不同的情况使用不同的方式可以让实现变得更简单。 使用Dialog#createAPI方法创建弹窗：一般用于简单场景，动作区无法进行自定义。 使用DSL渲染能力创建弹窗 调用ActionWidget#click方法打开弹窗（适用于自动渲染场景） 使用createWidget创建DialogWidget并打开弹窗（适用于手动渲染场景） 使用第三方组件创建弹窗：一般用于弹窗需要自定义的场景中，性能最优，可用于任何场景。 使用Dialog#createAPI方法创建弹窗 以下是一个自定义组件的完整示例，其使用ViewCache#compule方法获取视图。 view.ts export const template = `<view> <field data="id" invisible="true" /> <field data="code" label="编码" /> <field data="name" label="名称" /> </view>`; ManualDemoWidget.ts import { BaseElementWidget, createRuntimeContextForWidget, Dialog, FormWidget, MessageHub, RuntimeView, SPI, ViewCache, ViewType, Widget } from '@kunlun/dependencies'; import ManualDemo from './ManualDemo.vue'; import { template } from './view'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'ManualDemo' })) export class ManualDemoWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(ManualDemo); return this; } @Widget.Method() public async openPopup() { // 获取运行时视图 const view = await this.fetchViewByCompile(); if (!view) { console.error('Invalid view'); return; } // 创建运行时上下文 const runtimeContext = createRuntimeContextForWidget(view); const runtimeContextHandle = runtimeContext.handle; // 获取初始化数据 const formData = await runtimeContext.getInitialValue(); // 创建弹窗 const dialogWidget = Dialog.create(); // 设置弹窗属性 dialogWidget.setTitle('这是一个演示弹窗'); // 创建所需组件 dialogWidget.createWidget(FormWidget, undefined, { metadataHandle: runtimeContextHandle, rootHandle: runtimeContextHandle, dataSource: formData, activeRecords: formData, template: runtimeContext.viewTemplate, inline: true }); dialogWidget.on('ok', () => { MessageHub.info('click ok'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); dialogWidget.on('cancel', () => { MessageHub.info('click cancel'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); // 打开弹窗…

  nation

  前端 2023年11月1日

  1.1K000