阅读此文章前，默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档
从左侧组件库找到“图表”组件，拖入到视图区域，在右侧属性面板选择已经发布过的图表
查询条件为rsql语法，里面的变量需要用
${}包裹起来，其中的activeRecord为当前视图的数据对象，下图中的activeRecord.field000015为推荐导购员的对象，我们拿了这个对象的id传到查询条件内
通过浏览器的开发者工具，我们可以看到，选中导购员后查询条件发生了改变，页面的数据也同步发生了变化
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/16623.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
目录 依赖包安装GraphQL的工具登录gql导出生成json文件业务工程中导入示例代码生产环境使用流程设计器 简介 通过调用导出接口，将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址：https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL，直接返回导出数据。适用于通过浏览器直接下载文件。 指定模块导出 请求示例： mutation { workflowDesignerExportReqMutation { export(data: { module: "demo_core", fileName: "workflow_meta" }) { jsonUrl } } } 指定流程编码导出 请求示例： mutation { workflowDesignerExportReqMutation { export(data: { workflowCode: "WF0000000000132500", fileName: "workflow_meta" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_WORKFLOW_META_PATH = "install/workflow_meta.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_WORKFLOW_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装流程设计器元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_WORKFLOW_META_PATH); } } } catch (Exception e) { log.error("初始化流程设计器导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) { if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装-流程设计器数据"); // 支持远程调用,但是执行的生命周期必须是LifecycleCompletedAllInit或之后. 本地如果安装了设计器,则没有要求 DesignerInstallHelper.bizInitialization(INSTALL_WORKFLOW_META_PATH); } } } 生产环境使用启动设计器 生产环境如无部署设计器docker镜像，可下载我们oinone-op-ds-all-mini-workflow镜像，单独安装流程设计器。由于导入的是流程设计器的数据，需要在流程设计器中编辑流程，合理设置相关的人员和自定义函数
在业务操作中，用户通常期望能够在创建页面后立即进行编辑，以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能，使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中，我们首先需要设计出对应的页面。完成页面设计后，将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能，即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下： 前端自定义动作 一旦页面配置完成，前端需要对这个动作进行自定义。以下是一个示例的代码： @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤，我们实现了一个更智能的操作流程，使用户能够在创建页面的同时进行即时的编辑，从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅，同时也为用户提供了更灵活的工作流程。
目录 1. 使用工作流需要依赖的包和设置2. 触发方式2.1 自动触发方式2.2 触发方式 1.使用工作流需要依赖的包和设置 1.1 工作流需要依赖的模块 需在pom.xml中增加workflow、sql-record和trigger相关模块的依赖 workflow：工作流运行核心模块 sql-record：监听流程发布以后对应模型的增删改监听 trigger：异步任务调度模块 <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-sql-record-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-bridge-tbschedule</artifactId> </dependency> 在application.yml中增加对应模块的依赖以及sql-record路径以及其他相关设置 pamirs: … record: sql: #改成自己路径 store: /opt/pamirs/logs … boot: init: true sync: true modules: … – sql_record – trigger – workflow … sharding: define: data-sources: ds: pamirs models: "[trigger.PamirsSchedule]": tables: 0..13 event: enabled: true schedule: enabled: true # ownSign区分不同应用 ownSign: demo rocket-mq: # enabled 为 false情况不用配置 namesrv-addr: 192.168.6.2:19876 trigger: auto-trigger: true 2.触发方式 2.1自动触发方式 在流程设计器中设置触发方式，如果设置了代码触发方式则不会自动触发 2.2代码调用方式触发 2.2.1.再流程设计器中触发设置中，设置为是否人工触发设置为是 2.2.2.查询数据库获取该流程的编码 2.2.3.在代码中调用 /** * 触发⼯作流实例 */ private Boolean startWorkflow(WorkflowD workflowD, IdModel modelData) { WorkflowDefinition workflowDefinition = new WorkflowDefinition().queryOneByWrapper( Pops.<WorkflowDefinition>lambdaQuery() .from(WorkflowDefinition.MODEL_MODEL) .eq(WorkflowDefinition::getWorkflowCode, workflowD.getCode()) .eq(WorkflowDefinition::getActive, 1) ); if (null == workflowDefinition) { // 流程没有运⾏实例 return Boolean.FALSE; } String model = Models.api().getModel(modelData); //⼯作流上下⽂ WorkflowDataContext wdc = new WorkflowDataContext(); wdc.setDataType(WorkflowVariationTypeEnum.ADD); wdc.setModel(model); wdc.setWorkflowDefinitionDefinition(workflowDefinition.parseContent()); wdc.setWorkflowDefinition(workflowDefinition); wdc.setWorkflowDefinitionId(workflowDefinition.getId()); IdModel copyData = KryoUtils.get().copy(modelData); // ⼿动触发创建的动作流,将操作⼈设置为当前⽤户,作为流程的发起⼈ copyData.setCreateUid(PamirsSession.getUserId()); copyData.setWriteUid(PamirsSession.getUserId()); String jsonData = JsonUtils.toJSONString(copyData.get_d()); //触发⼯作流 新增时触发-onCreateManual 更新时触发-onUpdateManual Fun.run(WorkflowModelTriggerFunction.FUN_NAMESPACE, "onCreateManual", wdc, msgId, jsonData); return Boolean.TRUE; }
介绍 客户在使用oinone平台的时候，有一些个性化的前端展示或交互需求，oinone作为开发平台，不可能提前预置好一个跟客户需求一模一样的组件，这个时候我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业前端研发人员基于扩展工程（kunlun-sdk），利用API包进行开发并上传至平台，这样就可以在界面设计器的组件里切换为我们通过低无一体自定义的新组件。 低无一体的具体体现 “低”— 指低代码，在sdk扩展工程内编写的组件代码 “无”— 指无代码，在页面设计器的组件功能处新建的组件定义 低无一体的组件跟直接在自有工程内写组件的区别？ 低无一体的组件复用性更高，可以在本工程其他页面和其他业务工程中再次使用。 组件、元件介绍 元件 — 指定视图类型(viewType) + 指定业务类型(ttype)字段的个性化交互展示。组件 — 同一类个性化交互展示的元件的集合。组件是一个大一点的概念，比如常用的 Input 组件，他的元件在表单视图有字符串输入元件、密码输入元件，在详情和表格展示的时候就是只读的，页面最终使用的其实是元件。通过组件+ttype+视图类型+是否多值+组件名可以找到符合条件的元件，组件下有多个元件会根据最优匹配规则找到最合适的具体元件。 如何使用低无一体 界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！ 注意事项 为什么我上传了组件后页面未生效？ 检查前端启动工程的低无一体是否配置正确
在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action
