【界面设计器】树下拉/级联

相关推荐

• 前端

  自定义字段的数据联动

  某种情况下，开发人员期望自定以的字段发生变化后，需要修改其他的字段，这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 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日

  2.9K000
• 前端

  表格字段配置Switch开关

  在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action

  汤乾华

  2023年11月21日

  2.9K000
• 前端

  前端低无一体使用教程

  介绍 客户在使用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文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！ 注意事项 为什么我上传了组件后页面未生效？ 检查前端启动工程的低无一体是否配置正确

  汤乾华

  2023年11月6日

  4.0K001
• 中间件

  RocketMQ如何配置日志路径和日志自动清理规则

  RocketMQ的日志路径和日志自动清理规则可以通过以下方式进行配置： 配置日志路径 对于RocketMQ客户端： RocketMQ客户端日志默认存储在系统盘的特定位置，但你可以通过JVM启动参数来修改日志的输出路径。例如，在启动Java应用时，可以通过 -Dlogging.path 或 -Drocketmq.client.logRoot 参数指定日志根目录。例如： java -Drocketmq.client.logRoot=/path/to/your/log/directory -jar your_application.jar 对于RocketMQ服务端（Broker和NameServer）： RocketMQ服务端的日志路径通常在 conf/logback_broker.xml（对于Broker）和 conf/logback_namesrv.xml（对于NameServer）配置文件中定义。你可以在这些XML配置文件中修改 <property name="LOG_HOME"> 的值来改变日志存储路径。 配置日志自动清理规则 RocketMQ服务端提供了日志滚动策略来自动清理旧日志，这通常在上述提到的 logback_broker.xml 和 logback_namesrv.xml 文件中通过Logback的RollingPolicy配置实现。例如，可以配置文件大小限制、保留文件数量等： <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"> <file>${LOG_HOME}/rocketmq.log</file> <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy"> <!– 按天滚动日志文件 –> <fileNamePattern>${LOG_HOME}/archived/rocketmq.%d{yyyy-MM-dd}.%i.log</fileNamePattern> <!– 保留最多30天的日志 –> <maxHistory>30</maxHistory> <!– 单个日志文件最大大小，默认RocketMQ不直接支持配置此参数，但可通过Logback的SizeAndTimeBasedFNATP配置间接控制 –> <!–<timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">–> <!–<maxFileSize>100MB</maxFileSize>–> <!–</timeBasedFileNamingAndTriggeringPolicy>–> </rollingPolicy> … </appender> 请注意，虽然RocketMQ客户端日志默认不直接支持配置单个日志文件大小，但你可以通过外部日志框架（如Logback或Log4j）的配置来间接影响日志文件的大小管理。 对于日志清理，RocketMQ本身对于消息存储的文件有自动清理机制，但针对日志文件的自动清理主要依赖于日志框架的配置，如上述Logback的配置示例所示。 确保在修改任何配置前备份原有的配置文件，并且理解修改可能对系统监控和故障排查造成的影响。

  nation

  2024年5月28日

  4.6K000
• 后端部署

  东方通Web和Tomcat部署Oinone项目

  场景描述 在国产化和信创体系下，可能会要求使用东方通Web服务器(TongWeb)或者Tomcat等应用服务器部署项目；本文介绍使用TongWeb或者Tomcat部署Oinone项目时的方法。 你需要了解 了解Tomcat容器，TongWeb的操作基本和Tomcat类似； 项目打包成成war包和Jar的区别； Springboot项目打成war包 详细步骤参考：https://www.cnblogs.com/memoa/p/10250553.html TongWeb和Tomcat部署War包 TongWeb部署war包一般会有提供操作手册，这里不在说明； Tomcat部署war包可以参考网上的资料，这里不在说明； 本文仅说明部署Oinone打成的War包不同之处； Oinone项目War包部署 已知限制 Oinone项目在部署时，需要指定生命周期-Plifecycle=INSTALL等 而TongWeb和Tomcat无法在启动脚本中设置Program arguments 解法办法 通过yml文件的配置，可以配置等同于-Plifecycle=INSTALL的参数 pamirs: boot: init: true sync: true profile: AUTO install: AUTO upgrade: FORCE modules: 配置参考 配置参考 模块之启动指令 参数 名称 默认值 说明 -Plifecycle 生命周期部署指令 RELOAD 可选项：无/INSTALL/PACKAGE/RELOAD/DDL 安装（INSTALL） install为AUTO；upgrade为FORCE；profile为AUTO 打包（PACKAGE） install为AUTO；upgrade为FORCE；profile为PACKAGE 重启（RELOAD） install、upgrade、profile为READONLY 打印变更DDL（DDL） install为AUTO；upgrade为FORCE；profile为DDL

  望闲

  2024年5月18日

  3.0K000