界面设计器教程：如何设置字段联动变更

相关推荐

• 项目实践充电站-后端

  后端基础学习路径

  模块 内容 目标 概念/举例 文档链接 环境搭建 mac环境搭建 按照教程搭建环境 按照教程搭建环境 3.1.2 环境准备（windows版） windows环境搭建 按照教程搭建环境 按照教程搭建环境 3.1.2 环境准备（windows版） 常见问题 常见问题查阅 列举了可能出现的问题，比如mysql 大小写的问题 【附件一】下载说明 元数据-模块 模块 新建一个独立的模块 能力中心的概念，不被用户感知，可被其他模型或者应用使用 3.2.1 构建第一个Module 应用 新建一个独立的应用，依赖新建的模块 可被用户直接操作的模块称为应用 3.2.1 构建第一个Module 元数据-模型 抽象模型 新建一个抽象模型 不会直接用于构建协议和基础设施（如表结构等），而是通过继承的机制供子模型复用其字段和函数。子模型可以是所有类型的模型。 3.3.2 模型的类型 传输模型 新建一个传输模型 没有默认的数据管理器，只有数据构造器，所以在不自定义动作的情况下，传输模型可以打开详情页、新增表单和修改表单和列表页，但是所有的动作全部为窗口动作。传输模型本身不会存储，如果是关联关系字段关联传输模型，可以将传输模型序列化存储在模型的关联关系字段上。因为没有数据管理器，所以传输模型的列表页没有分页能力 3.3.2 模型的类型 存储模型 新建一个存储模型 用于定义数据表结构和数据的增删改查（数据管理器）功能，是直接与连接器进行交互的数据容器。 3.3.2 模型的类型 代理模型 新建一个代理模型 用于代理存储模型的数据管理器能力，同时又可以扩展出非存储数据信息的交互功能的模型 3.3.2 模型的类型 数据管理器 熟悉Oinone数据管理器和数据构造器，并用于上述新建的模型中 数据管理器和数据构造器是Oinone为模型自动赋予的Function是内在数据管理能力，数据管理器针对存储模型是方便在大家编程模式下可以利用数据管理器Function快速达到相关数据操作的目的。数据构造器则主要用于模型进行初始化时字段默认值计算和页面交互 3.3.3 模型的数据管理器 编码生成器 给单据生成指定格式的编码 商品编码按照生产日期+物料编号+缩写生成唯一标识 3.3.4 模型的继承 元数据-模型继承 抽象基类ABSTRACT 新建一个抽象基类 同抽象模型 3.3.4 模型的继承 扩展继承EXTENDS 新建多个模型，完成扩展继承 零售商品模型、b2b商品模型依赖商品中心的商品模型，零售商品模型想加几个字段 3.3.4 模型的继承 多表继承MULTI_TABLE 新建多个模型，完成多表继承 零售商品模型、b2b商品模型依赖商品中心的商品模型，商品类型不同 3.3.4 模型的继承 代理继承PROXY 新建多个模型，完成代理继承 继承方式代理另一个存储模型， 一个代理模型也可以继承任意数量继承相同父类的代理模型 3.3.4 模型的继承 临时继承TRANSIENT 新建多个模型，完成临时继承 同传输模型 3.3.4 模型的继承 枚举与数据字典 可继承枚举 实现可继承枚举 继承BaseEnum可以实现java不支持的继承枚举。同时可继承枚举也可以用编程式动态创建枚举项。可继承枚举也可以兼容无代码枚举 3.3.6 枚举与数据字典 二进制枚举 实现二进制枚举 通过@Dict注解设置数据字典的bit属性或者实现BitEnum接口来标识该枚举值为2的次幂 3.3.6 枚举与数据字典 不可继承枚举 实现不可继承枚举 实现JAVA语言的enum 3.3.6 枚举与数据字典 异常枚举 实现异常枚举 oinone管理异常的规范 3.3.6 枚举与数据字典 元数据-字段 序列化方式 熟悉字段序列化的方式 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式，最终会以序列化后的字符串持久化到存储中。 3.3.7 字段之序列化方式 字段类型 熟悉字段类型 字段是描述实体的特征属性，重点介绍字段的基础类型与复合类型 3.3.8 字段类型之基础与复合 关系与引用 熟悉字段的关系与引用 关系与引用类型才让oinone具备完整的描述模型与模型间关系的能力 3.3.9 字段类型之关系与引用 函数 Function 熟悉函数 Function做为oinone的可管理的执行逻辑单元 3.4.1 构建第一个Function 开放级别与类型 为方法定义不同的开放层级 辑都通过Function来归口统一管理，所以在Function是可以定义其开放级别有API、REMOTE、LOCAL三种类型，配置可多选。 3.4.2 函数的开放级别与类型 继承与多态 熟悉函数继承与多态 面向对象-继承与多态 3.4.3.1 面向对象-继承与多态 面向切面-拦截器 熟悉函数-面向切面-拦截器 拦截器为平台满足条件的函数以非侵入方式根据优先级扩展函数执行前和执行后的逻辑。 3.4.3.2 面向切面-拦截器 扩展点 熟悉函数扩展点 逻辑中会预留扩展点，以便日后应对不同需求时可以灵活替换某一小块逻辑 3.4.3.3 SPI机制-扩展点 交互 菜单 新增业务菜单 模块就是地图，菜单是导航 3.5.1 构建第一个Menu 视图 自定义视图 日常业务开发中对页面进行调整 3.5.2.1 整体介绍 服务器动作ServerAction 熟悉服务器动作 类似于Spring MVC的控制器Controller 3.5.3 Action的类型 窗口动作ViewAction 熟悉窗口动作 站内跳转，通过模型编码和动作名称路由 3.5.3 Action的类型 跳转动作UrlAction 熟悉跳转动作 外链跳转 3.5.3 Action的类型…

  shao

  2024年6月15日

  796000
• 产品常用功能讲解

  3分钟了解如何配置权限

  相关知识文档 权限手册（5.1以上）：https://doc.oinone.top/chan-pin-shi-yong-shou-ce/17797.html常见权限问题：https://doc.oinone.top/oinone-faq/18529.html

  shao

  2024年9月30日

  268000
• 前端

  如何通过浏览器开发者工具提高调试效率

  1.通过vue devtool查看vue组件和oinone组件的信息 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后，可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类 一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑

  nation

  2024年9月9日

  849000
• 平台基础服务

  数式Oinone平台UI 示例

  OinoneDesign，旨在帮助开发者和设计师提升设计效率，减少在产品美化上的弯路。规范包括颜色、文字、圆角、阴影等通用设计规范以及组件设计规范，覆盖按钮、布局、导航等多个方面，提供了一套拿来即用的设计系统，以增强B端产品的用户体验和一致性。 框架设计和自由组合• 框架设计：通过合理的规则组织设计元素，以保证高效的运作和视觉的一致性。• 自由组合：在秩序的框架下，去除不必要的束缚，允许各角色充分发挥创意，灵活组合，快速生成符合市场需求的UI设计方案。 我们设定的秩序并非限制，而是为每个角色提供清晰的选择和范围，确保大家能高效协作、创新 点击下载数式Oinone UI示例 一.颜色 二.文字 三.按钮 四.分页 五.下拉菜单 六.级联选择 七.选择器 八.开关 九.标签 十.提示信息 十一.对话框 十二.气泡确认框 十三.文字提示 十四.进度条 十五.图片预览 十六.详情 十七.表格 十八.搜索框 十九.折叠面板 二十.树选择 二十一.上传 二十二.日期选择 二十三.时间选择 二十四.单选框 二十五.多选框 二十六.表单 二十七.步骤条 二十八.输入框 二十九.导航页签 三十.选项卡 三十一.菜单 三十二.预览图备份

  shao

  2025年1月3日

  677000
• 前端

  字段组件submit方法详解

  场景介绍 在日常开发调试表单页的过程中，细心的小伙伴应该注意到，视图内的数据(通过vue调试工具看到的formData就是视图的数据)和最终通过服务端动作提交的数据不总是一致的，本文将带领大家解开疑惑。 为什么会出现这种现象？ 出现这种情况都是当前模型上有关联关系字段的场景，以多对一(M2O)场景为例，由于当前模型的关联关系字段是通过字段配置中的referenceFields属性和当前模型的relationFields属性进行关联的，所以提交数据的时候只需要拿到relationFields配置的字段就可以了，没有必要再去多拿关联关系字段本身的数据。 结合业务场景说明 这里以商品模型和类目模型举例，商品模型内有个类目的m2o字段category和对应的relationFields字段categoryId，数据提交到后端的时候前端默认会根据字段配置只获取categoryId，而category的整个对象都不会被提交。 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.common.CodeModel; @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品") public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Integer @Field(displayName = "类目ID") private Long categoryId; @Field.many2one @Field.Relation(relationFields = {"categoryId"}, referenceFields = {"id"}) @Field(displayName = "商品类目") private DemoItemCategory category; } 前端是如何处理数据的 前端的字段组件提供了submit()方法来让我们可以有就会在提交数据的时候改变数据。 // 字段组件基类 export class BaseFormItemWidget< Value = unknown, Props extends BaseFormItemWidgetProps = BaseFormItemWidgetProps > extends BaseDataWidget<Props> { /** * 数据提交的方法，例如：m2o字段user(假设其关系字段为userId)的值{id: 1, name: 'xxx'},但是实际后端数据只需要其中的id，所以用m2o对应的关系字段userId提交数据就可以了 * @param submitValue */ public submit(submitValue: SubmitValue): ReturnPromise<Record<string, unknown> | SubmitRelationValue | undefined> { return undefined; } } 这里先以FormStringFieldSingleWidget组件处理密码类型的字段讲解。密码一般在输入的时候是明文，为了提高提交到后端的安全性，可以将这个密码加密后再传到后端，后端再做进一步处理，这个场景中，视图中的密码和提交给后端的密码就出现了不一致的情况， @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class FormStringFieldSingleWidget extends FormStringFieldWidget { public submit(submitValue: SubmitValue) { let finalValue = this.value; /** * 数据提交的时候，如果判断当前字段是否需要加密，需要加密的情况用encrypt函数做加密处理 */ if (this.crypto && finalValue) { finalValue = encrypt(finalValue); } return SubmitHandler.DEFAULT(this.field, this.itemName, submitValue, finalValue); } 注意：关系字段配置的透出字段只影响该字段的查询数据方法的返回值，不会因为此配置就在提交数据里加上这部分配置的字段 字段需要提交关联关系字段内的所有数据如何处理？ 我们可以在自定义组件里覆写submit()方法，直接将this.value内的数据返回这里以覆写多对多m2m字段为例 import { BaseFieldWidget, FormM2MFieldSelectWidget, ModelFieldType, SPI, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.ManyToMany, widget: 'Select', model: 'xxx.yyyyy', name: 'fileName01',…

  nation

  2024年9月10日

  936000