添加按钮点击后，打开的是个表格 ，如果您期望点击添加按钮打开的是个表单页面，那么可以按照下方的操作来1: 先从界面设计器拖一个多对多的字段进来
2: 将该字段切换成表格，并拖入一些字段到表格上
3: 选中添加按钮，将其隐藏
4: 从组件区域的动作分组中拖一个跳转动作，并且进行如下的配置
5: 属性填写好后进行保存，然后在设计弹窗
6: 拖入对应的字段到弹窗中, 当弹窗界面设计完成后，再把保存的按钮拖入进来
这样多对多的添加弹窗就变成了表单
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/79.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
阅读之前： 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 对第三方框架的组件生命周期有所了解。如Vue组件生命周期 了解平台实现的Class Component(ts)相关内容。Class Component(ts)（v4） 组件生命周期 任何一个Widget其标准生命周期应当包括beforeCreated、created、beforeMount、mounted、beforeUnmount、unmounted这六个基本的生命周期函数、以及beforeUpdate和updated在响应式更新时会进行调用的生命周期函数。特别的，还有activated和deactivated在组件搭配keep-alive特性时使用的生命周期函数。 具体的生命周期执行过程在这里不再进行赘述，这里的基本逻辑与Vue组件生命周期基本完全一致，感兴趣的读者可以阅读Vue相关文档进行学习。
什么是IOC容器？ IOC不是一种技术，只是一种思想，一个重要的面向对象编程的法则，它能指导我们如何设计出松耦合，更优良的程序。传统应用程序都是由我们在类内部主动创建依赖对象，从而导致类与类之间高耦合，难于测试；有了IOC容器后，把创建和查找依赖对象的控制权交给了容器，由容器进行注入组合对象，所以对象与对象之间是松散耦合，这样也方便测试，利于功能复用，更重要的使程序的整个体系结构变得非常灵活。在运行期，在外部容器动态的将依赖对象注入组件，当外部容器启动后，外部容器就会初始化。创建并管理对象实例，以及销毁，这种应用本身不负责依赖对象的创建和维护，依赖对象的创建和维护是由外部容器负责的称为控制反转。 IOC（控制反转）和DI（依赖注入） IOC（Inversion of Control, 控制反转）：通过外部容器管理对象实例的一种思想。DI（Dependency Injection, 依赖注入）：IOC的一种实现方式。 作者简述 IOC是Spring框架（一种以Java为语言开发的框架）的核心，并贯穿始终。其面向接口的开发能力，使得服务调用方和服务提供方可以做到完全解耦，只要遵循接口定义的规则进行调用，具体服务的实现可以是多样化的。 对于前端，我们使用inversify进行了IOC的实现。其强大的解耦能力可以使得平台进行大量的抽象，而无需关系具体的实现。 接下来，我们将介绍IOC在开发中的基本运用。 API 为了方便起见，我们将IOC相关功能与组件SPI的调用方式放在了一起。（更高版本的平台版本将自动获得该能力） export class SPI { /** * register singleton service */ public static Service; /** * autowired service property/parameter in service */ public static Autowired; /** * service construct after execute method */ public static PostConstruct; /** * autowired service in widget */ public static Instantiate; /** * autowired services in widget */ public static Instantiates; /** * service construct after execute method in widget */ public static InstantiatePostConstruct; } 创建第一个服务 service/ProductService.ts import { ServiceIdentifier } from '@kunlun/dependencies'; /** * 产品 */ export interface Product { id: string; name: string; } /** * 产品服务 */ export interface ProductService { /** * 获取产品列表 */ getProducts(): Promise<Product[]>; /** * 通过ID获取产品 * @param id 产品ID */ getProductById(id: string): Promise<Product | undefined>; } /** * 产品服务Token */ export const ProductServiceToken = ServiceIdentifier<ProductService>('ProductService'); service/impl/ProductServiceImpl.ts import { SPI } from '@kunlun/dependencies'; import { Product, ProductService, ProductServiceToken } from '../ProductService'; @SPI.Service(ProductServiceToken) export class ProductServiceImpl implements ProductService { public async getProducts(): Promise<Product[]> { // request api get products return []; } public async getProductById(id:…
在项目开发中，我们可能会遇到自定义登录页，密码需要加密，或者是数据提交的时候，某个数据需要加密，在平台的前端中，提供了默认的全局加密 API 在 oinone 前端工程使用 // pc端工程使用 import { encrypt } from '@kunlun/dependencies'; // 移动端端工程使用 import { encrypt } from '@kunlun/mobile-dependencies'; // 加密后的密码 const password = encrypt('123456'); 其他工程使用 如果是其他工程，前端没有用到 oinone 这一套，比如小程序，或者是其他工程，可以使用下面的代码记得安装 crypto-js import CryptoJS from 'crypto-js'; const key = CryptoJS.enc.Utf8.parse('1234567890abcdefghijklmnopqrstuv'); const iv = CryptoJS.enc.Utf8.parse('1234567890aabbcc'); export const encrypt = (content: string): string => { if (typeof content === 'string' && content) { const encryptedContent = CryptoJS.AES.encrypt(content, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encryptedContent.ciphertext.toString(); } return ''; };
为组件加自定义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 **/ }
「前端」获取系统配置 简介 系统配置对于前端开发至关重要，它包含了许多关键信息，通过调用「systemMajorConfig」API，可以轻松地获取这些关键配置信息。除了主要的系统配置外，底层还提供了一些快捷的API，比如获取当前主题、当前主题大小、登录页面主题、版权状态和默认浏览器信息。 使用步骤 调用「systemMajorConfig」API获取系统配置数据。 使用返回的数据对象来访问特定的系统配置参数，如企业名称、企业官网等。 使用底层提供的快捷API来获取与系统配置相关的特定信息。 系统配置参数 logo (string): 应用logo（未折叠状态） appSideLogo (string): 应用logo（折叠状态） smallLogo (string): 小型logo slogan (string): 企业slogan favicon (string): 浏览器logo browserTitle (string): 浏览器标题 loginPageLogo (string): 登录页logo loginBackground (string): 登录页背景 loginLayoutType (any): 登录页布局主题 mode (any): 主题模式 size (string): 主题大小 快捷API列表 getCurrentTheme: 获取当前主题信息。 getCurrentThemeSize: 获取当前主题大小。 getLoginTheme: 获取登录页面主题信息。 getCopyrightStatus: 获取版权状态信息。 getDefaultBrowser: 获取默认浏览器信息。 示例代码 import { systemConfig, getCurrentTheme } from ‘@kunlun/dependencies’ // 访问特定系统配置参数 console.log(systemConfig.logo); // 输出企业名称 // 使用快捷API获取特定信息 console.log(getCurrentTheme());
