界面设计器创建批量更新的动作

相关推荐

• 数据可视化

  数据可视化中图表的低无一体

  介绍 数据可视化提供了自定义图表模板的功能，以满足现有图表模板无法满足业务需求的情况。 如何使用 点击数据可视化页面头部的“图表模板” 点击创建按钮后弹出图表模板表单，填写后提交保存 找到刚刚创建的图表模板，点击操作栏中的“低无一体”按钮 点击弹窗底部的“生成sdk”按钮 上一步操作完成后会重新刷新页面，再次找到该条数据，点击“低无一体”按钮，再次进来可以看到“下载模板工程”的按钮已经可以点击了，点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip 解压kunlun-chart-sdk.zip后我们可以看到工程结构，在根目录下执行npm i安装依赖 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件，可以修改里面的自定义展示和逻辑处理 完成自定义代码后去根目录运行npm run build打包代码，打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件，无需理会) 回到自定义图表模板的管理页面，找到对应的数据行，再次点击“低无一体”按钮，在弹窗内上传上一步生成的kunlun-plugin.umd.js和kunlun-plugin.css文件，上传完成后点击弹窗底部的“确定”按钮保存 进入图表的编辑页面，在图表分类选择处，可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类，点击切换 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式，内部是hello chart文字的图表。 示例自定义图表组件 本例子以echarts的图表库实现柱状图，框架自带的是以G2的库实现的柱状图demo-echarts-bar.vue <template> <div class="data-designer-chart-instance demo-echarts-bar" ref="designerChartViewRef"> <div class="data-designer-chart-container" ref="designerChartViewInnerRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, watch } from 'vue'; import DataSet from '@antv/data-set'; import * as echarts from 'echarts/core'; import { ECharts, EChartsCoreOption } from 'echarts/core'; import { GridComponent } from 'echarts/components'; import { BarChart, BarSeriesOption } from 'echarts/charts'; import { CanvasRenderer } from 'echarts/renderers'; import { deepClone } from '@kunlun/dependencies'; import { filterDimensionScaleColumns, isSameObj, ChartTypeEnum, IChartData, IChartDataResult, chartViewMixin, isNeedRerenderChart, isShowChatView, watchEchartsSize, ChartRenderEngine } from '@kunlun/data-designer-core'; echarts.use([GridComponent, BarChart, CanvasRenderer]); export default defineComponent({ props: { …chartViewMixin.props }, data() { return { engine: ChartRenderEngine.ECHARTS, chartType: [ChartTypeEnum.MAP_CHINA] }; }, mixins: [chartViewMixin], setup(props, { emit }) { const chart = ref<ECharts>(); const designerChartViewRef = ref<HTMLElement>(null as any); const designerChartViewInnerRef = ref<HTMLElement>(null as any); onMounted(() => { initChart(); }); let option = {} as EChartsCoreOption; function initChart() { chart.value = echarts.init(designerChartViewInnerRef.value); option = { yAxis: { type: 'value' } }; } let oldChartData = {} as IChartData; watch( () => props.chartData, (newVal) =>…

  nation

  2023年11月1日

  956000
• 界面设计器

  界面设计器的导入导出

  目录 依赖包安装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 { uiDesignerExportReqMutation { download/export( data: { module: "demo_core", fileName: "demo_meta", moduleBasics: false } ) { jsonUrl } } } module参数：模块编码； fileName参数：指定⽣成的json⽂件名称； moduleBasics参数：指定是否只导出模块基础数据，如果为true，只导出内置布局、模块菜单、菜单关联的动作。 如果为false，还会导出模块内的所有页⾯，以及页⾯关联的动作元数据、页⾯设计数据 等等。 默认值为false。 按菜单导出 mutation { uiDesignerExportReqMutation { download/export( data: { menu: { name: "uiMenu0000000000048001" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } menu参数：菜单对象，指定菜单的name。只会导出该菜单及其绑定页⾯，不会递归查询⼦菜单 fileName参数：指定⽣成的json⽂件名称 relationViews参数：指定是否导出关联页⾯，默认为false，只导出菜单关联的页⾯。如果为true，还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 指定页⾯导出 mutation { uiDesignerExportReqMutation { download/export( data: { view: { name: "xx_TABLE_0000000000119001" model: "ui.designer.TestUiDesigner" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } view参数：视图对象，指定视图的name和model fileName参数：指定⽣成的json⽂件名称 relationViews参数：指定是否导出关联页⾯，默认为false，只导出菜单关联的页⾯。如果为true，还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 导出组件 导出全部组件数据 mutation { uiDesignerExportReqMutation { downloadWidget/exportWidget(data: { fileName: "demo_widget" }) { jsonUrl } } } fileName参数：指定⽣成的json⽂件名称 注意：⾃定义组件的元数据归属于页⾯设计器（ui_designer） 因此导⼊元数据的模块（module）并不是业务模块。组件导⼊建议使⽤pro.shushi.pamirs.metadata.manager.core.helper.WidgetInstallHelper 导出全部组件⽂件 当开发环境，和导⼊环境的oss不互通时，可通过⼀下⽅法导出⾃定义组件的css和js⽂件压缩包，在导⼊时⽀持指定zip⽂件上传到oss，并替换导⼊组件数据中的css和js⽂件路径。 mutation { uiDesignerExportReqMutation { downloadWidgetFile/exportWidgetFile(data: { fileName: "demo_widget" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码（运行时数据） @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoAppMetaInstall implements MetaDataEditor { @Autowired private ApplicationContext applicationContext; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if (!doImport())…

  数式-海波

  2024年5月16日

  1.6K000
• 前端

  自定义字段的数据联动

  某种情况下，开发人员期望自定以的字段发生变化后，需要修改其他的字段，这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段，设计元件 2: 在模型区域，搜索提交方式，如果找到了，就把该字段拖拽进来, 如果找不到，就在元件中的组件区域，拖拽一个文本字段，按照下面的配置进行配置，然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数，将其拖拽进来 3: 从模型区搜索提交数据，将其拖拽进来4: 从模型区搜索提交字段，将其拖拽进来 5: 发布 （记得刷新页面哦） 最后再到对应的设计器页面，选中该字段，进行配置 提交方式为blur或者change ， 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段，如果配置的指定字段，那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }

  汤乾华

  2023年11月9日

  1.4K000
• 集成设计器

  集成接口与数据流程的使用

  连接器 点击连接器tab，进入连接器页面，默认选择应用 应用 点击新增应用资源，抽屉打开创建应用的表单 创建应用成功之后，点击应用卡片，进入应用详情页 点击新增API，出现新增API与新增webservice的选项 点击新增API或者新增webservice，抽屉打开新增页面，需设置api名称、url、描述、请求参数、响应结果等信息 数据库 点击数据库tab，切换至数据库列表页 点击新增db资源，抽屉打开新增页面 数据库创建完成之后，点击数据卡片，可进入数据库详情页 点击新增API，抽屉打开新增页面，新增页面包含API名称、描述、请求参数、数据库操作、响应结果等内容（注意：响应结果中的取值表达式的值为查询结果中的列名，如列名取了别名，就写别名，截图有例子） 数据流程 点击数据流程tab进入数据流程列表页 点击创建流程，选择应用之后，点击创建，进入数据流程创建页 点击名称处的编辑操作可设置流程名称 触发-定时触发 点击触发节点，选择定时触发 设置好定时信息之后，点击保存（到定时时间之后会自动触发流程） 触发-消息触发 点击触发节点，触发方式选择消息触发，输入消息标识，设置参数（触发时根据消息标识触发，如果存在两个相同的消息标识，那触发时两个都会触发） 设置完成参数之后，点击确定 再点击保存，触发设置完成 消息触发的方式，可直接调用接口，或者写入到代码中触发，以下为接口触发方式 先调用登录接口 再调用消息触发接口（msgId为消息标识） 点击加号可添加节点，可选择API、新增数据、更新数据、获取数据、删除数据、更新流程参数、引用逻辑、延时、条件分支、子流程、循环、站内信、邮件、短信等节点 API节点 点击API节点 点击节点可设置节点名称 输入节点名称 点击节点设置，进入设置页面 先选择资源应用，再选择API（资源应用的数据为连接器创建的数据） 设置赋值表达式（当字段为必填，且无默认值时，赋值表达式必填） 设置完成点击，保存 API的响应结果可作为下个节点的参数 提示：当参数类型为对象非数组时，赋值表达式配置在对象的下个层级中，当参数类型为对象数组时，赋值表达式配置在对象中，具体见如下图片 对象非数组 对象数组 ### 循环节点-列表循环 设置循环节点 #### 设置循环列表 设置完成，点击保存（循环次数为获取的数据条数） 循环里面可添加节点 设置循环里面的节点，如选择新增节点，点击新增节点之后，选择应用，模型数据保存方式，点击创建 字段的表达式可选择循环节点的参数 设置完内容之后，点击保存 #### 循环节点-次数循环 点击循环节点，循环模式选择次数循环 循环开始值、结束值、步长，可通过表达式选择数字类型的，也可自己手动输入 设置完成之后，点击保存 ### 更新流程参数 第一步先进行流程配置 点击添加新参数 参数类型支持四种，文本、数值、日期（日期时间）、布尔 输入参数名称之后点击保存 保存成功之后，再切换至流程设计 第二步添加更新流程参数节点 第三步设置流程参数节点 进入节点设置之后，点击添加参数 选择参数，给参数赋值（注意布尔类型的值，直接输入ture或者false） 参数值设置完成之后点击保存 设置的参数可用于下个节点的赋值表达式中（如更新数据节点） 设置完成点击保存 ### 引用逻辑 添加引用逻辑节点 设置引用逻辑节点 选择应用、模型、函数，设置参数 配置表达式，配置完成，点击确定 节点信息设置完成之后，点击保存 ### 新增数据、更新数据、获取数据、删除数据、延时、条件分支、子流程、循环、站内信、邮件、短信节点与流程设计器用法一致 流程发布 流程设置完成之后，点击发布流程（如果是定时触发，将会到触发时间自动触发，如果是消息触发，当发送对应消息时触发，具体见上文中写的触发-消息触发）

  oinone

  2023年11月10日

  639000
• 集成设计器

  接口日志内容记录频率限制功能说明

  为有效避免接口调用日志记录占用过多存储空间，从而减少对数据库资源的消耗，自5.2.0之后的版本，对于成功请求的集成接口与开放接口，其日志将不再进行完整记录。请求及响应参数将依据默认的千分之一概率进行选择性完整记录。 修改日志完整记录频率 日志完整记录频率默认0.01，即千分之一。 取值范围0～1，0为完全不记录，1为100%记录。 pamirs: eip: log: frequency: 0.01 临时开启某接口日志完整记录 在“集成接口”应用中，可临时针对某一接口开启完整日志记录功能，此功能适用于集成接口与开放接口。 在“集成设计器”中也支持此功能。 注意事项 请求失败的接口不会受到配置的影响，日志内容将被完整记录。

  夜神月

  2024年10月8日

  758001