下面整理了目前现有的所有文章，并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。
基础篇
展示篇
交互篇
Oinone社区 作者：数式-海波原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/51.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
添加自定义区域块 平台提供了一系列默认的视图布局，可以帮助开发人员快速构建出复杂的企业应用系统。当然，我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。 自定义区域块概述 平台视图布局都是通过XML配置实现的。在视图布局中，我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块，就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块，来扩展页面功能。 视图类型及相关元素 视图类型分为表格（TABLE）、表单（FORM）、画廊（GALLERY）、树形（TREE）等。不同类型的视图布局，包含的元素也有所不同。 下面是几种视图类型及其对应的元素： 表格：搜索区域、表格主体，其中表格主体包含了表格上面的动作、表格区域等部分。 表单：表单区域，包含了表单动作、表单区域等部分。 画廊：动作、卡片详细信息。 在表格页面添加自定义区域块 以下是一个示例，演示如何在表格页面顶部添加自定义区域块。 1. 修改视图布局XML 首先，我们需要修改表格视图的XML布局，添加自定义区域块元素标签。 <view type="TABLE"> <!– 这是搜索区域 –> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <!– 这是表格主体 –> <pack widget="group" slot="tableGroup"> <!– 在这里添加自定义区域块元素标签 –> <element widget="MyCustomElement"></element> <!– 这是表格上面的动作 –> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <!– 这是表格区域 –> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 在上述代码中，我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。 2. 创建自定义Vue组件 接下来，我们需要创建一个Vue组件，并将其指定为自定义元素标签MyCustomElement的模板。 <template> <div> <!– 在这里编写自定义区域块的内容 –> <p>Hello, world!</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ components: { }, props: [], setup(props) { return {}; } }); </script> 在上述代码中，我们定义了一个非常简单的Vue组件，它在页面上显示一个“Hello, world!”的文本信息。 3. 创建自定义Element Widget 为了使自定义Vue组件与XML布局文件关联起来，我们需要创建一个对应的Element Widget。 import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies'; import MyCustomElement from './MyCustomElement.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' })) export class MyCustomElementWidget extends BaseElementWidget { public initialize(props: BaseElementWidgetProps): this { super.initialize(props) this.setComponent(MyCustomElement) return this } } 在上述代码中，我们继承了BaseElementWidget类，并在其中指定了Vue组件MyCustomElement。这样，XML布局文件中的元素标签就能够正确地与Vue组件关联起来。 4. 注册视图布局 最后，我们需要将上述代码配置注册。具体而言，我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" />…
阅读之前 你应该： 了解node与npm相关内容 了解lerna包管理工具的相关内容 官方文档 了解git仓库的相关内容 了解rollup的相关内容 工程结构包示例 Vue项目结构包下载-v4.7.xVue项目结构包下载-v5.2.x 工程结构详解 工程结构 ├── packages │ ├── kunlun-mobile-boot │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── main.ts │ │ │ └── shim-vue.d.ts │ │ ├── tsconfig.json │ │ └── vue.config.js │ ├── kunlun-module-mobile-demo │ │ ├── scripts │ │ │ ├── postpublish.js │ │ │ └── prepublish-only.js │ │ ├── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── index.ts │ │ ├── package.json │ │ ├── rollup.config.js │ │ └── tsconfig.json │ └── kunlun-modules-mobile-demo │ ├── scripts │ │ ├── build.config.js │ │ ├── postpublish.js │ │ └── prepublish-only.js │ ├── packages │ │ ├── module-demo1 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ └── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── module-demo2 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ …
某种情况下，开发人员期望自定以的字段发生变化后，需要修改其他的字段，这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 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); } }
场景举例 日常有很多项目，数据库中都有表示“多选状态标识”的字段。在这里用我们项目中的一个例子进行说明一下： 示例一： 表示某个商家是否支持多种会员卡打折（如有金卡、银卡、其他卡等），项目中的以往的做法是：在每条商家记录中为每种会员卡建立一个标志位字段。如图： 用多字段来表示“多选标识”存在一定的缺点：首先这种设置方式很明显不符合数据库设计第一范式，增加了数据冗余和存储空间。再者，当业务发生变化时，不利于灵活调整。比如，增加了一种新的会员卡类型时，需要在数据表中增加一个新的字段，以适应需求的变化。 – 改进设计：标签位flag设计二进制的“位”本来就有表示状态的作用。可以用各个位来分别表示不同种类的会员卡打折支持：这样，“MEMBERCARD”字段仍采用整型。当某个商家支持金卡打折时，则保存“1（0001）”，支持银卡时，则保存“2（0010）”，两种都支持，则保存“3（0011）”。其他类似。表结构如图： 我们在编写SQL语句时，只需要通过“位”的与运算，就能简单的查询出想要数据。通过这样的处理方式既节省存储空间，查询时又简单方便。 //查询支持金卡打折的商家信息： select * from factory where MEMBERCARD & b'0001'; // 或者： select * from factory where MEMBERCARD & 1; // 查询支持银卡打折的商家信息： select * from factory where MEMBERCARD & b'0010'; // 或者： select * from factory where MEMBERCARD & 2; 二进制( 位运算)枚举 可以通过@Dict注解设置数据字典的bit属性或者实现BitEnum接口来标识该枚举值为2的次幂。二进制枚举最大的区别在于值的序列化和反序列化方式是不一样的。 位运算的枚举定义示例 import pro.shushi.pamirs.meta.annotation.Dict; import pro.shushi.pamirs.meta.common.enmu.BitEnum; @Dict(dictionary = ClientTypeEnum.DICTIONARY, displayName = "客户端类型枚举", summary = "客户端类型枚举") public enum ClientTypeEnum implements BitEnum { PC(1L, "PC端", "PC端"), MOBILE(1L << 1, "移动端", "移动端"), ; public static final String DICTIONARY = "base.ClientTypeEnum"; private final Long value; private final String displayName; private final String help; ClientTypeEnum(Long value, String displayName, String help) { this.value = value; this.displayName = displayName; this.help = help; } @Override public Long value() { return value; } @Override public String displayName() { return displayName; } @Override public String help() { return help; } } 使用方法示例 API: addTo 和 removeFrom List<ClientTypeEnum> clientTypes = module.getClientTypes(); // addTo ClientTypeEnum.PC.addTo(clientTypes); // removeFrom ClientTypeEnum.PC.removeFrom(clientTypes); 在查询条件中的使用 List<Menu> moduleMenus = new Menu().queryListByWrapper(menuPage, LoaderUtils.authQuery(wrapper).eq(Menu::getClientTypes, ClientTypeEnum.PC));
在日常项目开发中，我们可能会遇到当前视图是个表格，通过某个操作按钮将它变成卡片的形式. 这篇文章将带大家实现这种功能。通过上面两张图片可以看到出来不管是表格还是卡片，它都在当前的视图里面，所以我们需要一个视图容器来包裹表格跟卡片，并且表格可以使用平台默认的表格渲染，我们只需要自定义卡片即可。 我们用资源模块下面的国家菜单来实现这么一个功能这是对应的URL： http://localhost:8080/page;module=resource;viewType=TABLE;model=resource.ResourceCountry;action=resource%23%E5%9B%BD%E5%AE%B6;scene=resource%23%E5%9B%BD%E5%AE%B6;target=OPEN_WINDOW;menu=%7B%22selectedKeys%22:%5B%22%E5%9B%BD%E5%AE%B6%22%5D,%22openKeys%22:%5B%22%E5%9C%B0%E5%9D%80%E5%BA%93%22,%22%E5%9C%B0%E5%8C%BA%22%5D%7D 源码下载 views 创建外层的视图容器 刚刚我们讲过，不管是表格还是卡片，它都在当前的视图里面，所以我们需要写一个视图容器来包裹它们，并且对应的容器里面允许拆入表格跟卡片，我们先创建TableWithCardViewWidget.ts // TableWithCardViewWidget.ts import { BaseElementWidget, SPI, Widget } from '@kunlun/dependencies'; import TableWithCardView from './TableWithCardView.vue'; enum ListViewType { TABLE = 'table', CARD = 'card' } @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'TableWithCardViewWidget' }) ) export class TableWithCardViewWidget extends BaseElementWidget { @Widget.Reactive() private listViewType: ListViewType = ListViewType.TABLE; // 当前视图展示的类型，是展示卡片还是表格 public initialize(props) { if (!props.slotNames) { props.slotNames = ['tableWidget', 'cardWidget']; } super.initialize(props); this.setComponent(TableWithCardView); return this; } } 在TableWithCardViewWidget中的initialize函数中，我们定义了两个插槽: tableWidget、cardWidget，所以需要在对应的vue文件里面里接收这两个插槽 <template> <div class="list-view-wrapper"> <!– 表格插槽 –> <div style="height: 100%" v-if="listViewType === 'table'"> <slot name="tableWidget" /> </div> <!– 卡片插槽 –> <div v-if="listViewType === 'card'"> <slot name="cardWidget"></slot> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: ['listViewType', 'onChangeViewType'], inheritAttrs: false, setup(props, context) { const onChangeViewType = (listViewType) => { props.onChangeViewType(listViewType); }; } }); </script> 这样一来，我们就定义好了视图容器，接下来就是通过自定义layout的方式注册该容器 layout注册 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" cols="4" slot="search"/> </view> </pack> <pack widget="group" slot="tableGroup" style="position: relative"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="TableWithCardViewWidget"> <template slot="tableWidget"> <element widget="table" slot="table" datasource-provider="true"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" />…
