在业务开发中，我们经常会遇到表格中有个Switch开关组件:
那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。
元件,元件的配置必须跟下面的一致
拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作
再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作
5: 发布界面设计器，染红我们可以在运行时的页面看到效果
当switch切换的时候，会执行对应的action
Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/4671.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
场景 描述 新增按钮点击后表格出现空行，不带业务数据，需要有行内编辑 如何实现 第一步 在layout目录下新增copyTable组件，组件代码如下 import { BaseElementWidget, SPI, TableWidget, Widget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'copy-table-row' })) export class CopyTableWidget extends TableWidget { @Widget.BehaviorSubContext(Symbol("$$TABLE_COPY_CB"), {}) private tableCopySub; @Widget.BehaviorSubContext(Symbol("$$TABLE_DELETE_CB")) private tableDeleteSub; @Widget.Reactive() @Widget.Provide() protected get editorMode(): any { return 'manual' } public async copyRowData(row,currentRow) { // 获取vxetable 实例 const tableRef = this.getTableInstance()!.getOrigin(); if (tableRef) { // 有复制未保存数据，如何处理? const insertData = tableRef.getInsertRecords(); if(insertData.length > 0){ OioNotification.warning("警告","请检查未保存数据！") return; } const { row: newRow } = await tableRef.insertAt(row,currentRow) // 插入一条数据并触发校验, 其中字段名称可以替换 await tableRef.setEditCell(newRow, 'city') } } public async deleteRowData(row) { // 获取vxetable 实例 const tableRef = this.getTableInstance()!.getOrigin(); if (tableRef) { // 有复制未保存数据，如何处理? console.log(row, 'remove row') tableRef.remove(row) // 插入一条数据并触发校验 } } async mounted() { super.mounted(); this.tableCopySub.subject.next({copyCb: (row,currentRow) => this.copyRowData(row,currentRow)}) this.tableDeleteSub.subject.next({deleteCb: (row) => this.deleteRowData(row)}) } } 第二步 在action目录下覆盖新增按钮或者复制行按钮；代码如下 import {ActionWidget, ClickResult, ReturnPromise, SPI, Widget} from "@kunlun/dependencies"; @SPI.ClassFactory( ActionWidget.Token({ model: 'resource.k2.Model0000001211', // 替换对应模型 name: 'uiView57c25f66fac9439089d590a4ac47f027' // 替换对应action的name }) ) export class CopyRow extends ActionWidget{ @Widget.BehaviorSubContext(Symbol("$$TABLE_COPY_CB")) private tableCopySub; private tableCopyCb; @Widget.Method() public clickAction(): ReturnPromise<ClickResult> { // 按照某一条数据复制行， 按钮在行内 // let data = JSON.parse(JSON.stringify(this.activeRecords?.[0])); // 复制行删除id // if(data) { // delete…
概述 TopBarService 是用于管理用户信息和多语言配置的工具类，提供以下核心功能： 用户信息查询（含缓存机制） 当前语言状态获取 可用语言列表查询 语言切换操作 快速开始 // 基础使用示例 import { TopBarService } from '@kunlun/dependencies'; // 获取用户信息（自动缓存） const userInfo = await TopBarService.getUserInfo(); // 获取当前语言配置 const currentLang = await TopBarService.getCurrentLang(); // 查询支持的语言列表 const languages = await TopBarService.queryLanguageList(); // 激活指定语言 await TopBarService.activeLang('zh_CN'); API 详解 方法功能说明 方法名称 描述 参数 返回值 getUserInfo 获取当前用户信息（自动缓存） 无 用户信息对象 queryUserInfo 强制获取最新用户信息 无 最新用户信息对象 getCurrentLang 获取当前激活的语言配置 无 语言配置对象 / undefined queryLanguageList 获取所有可用语言列表 无 语言列表数组 activeLang 激活指定语言 语言 ID (string) 更新后的语言配置对象
介绍 在业务场景中，有时候由于提交的数据很多，导致服务端动作耗时较长，为了保证这个过程中表单内的字段不再能被编辑，我们可以通过自定义能力将整个表单区域处于loading状态 自定义动作组件代码 import { ActionType, ActionWidget, BaseElementViewWidget, BaseView, ClickResult, ServerActionWidget, SPI, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ actionType: ActionType.Server })) class LoadingServerActionWidget extends ServerActionWidget { protected async clickAction(): Promise<ClickResult> { const baseView = Widget.select(this.rootHandle) as unknown as BaseView; if (!baseView) { return super.clickAction(); } const baseViewWidget = baseView.getChildrenInstance().find((a) => a instanceof BaseElementViewWidget) as unknown as BaseElementViewWidget; if (!baseViewWidget) { return super.clickAction(); } return new Promise((resolve, reject) => { try { baseViewWidget.load(async () => { const res = await super.clickAction(); resolve(res); }); } catch (e) { reject(false); } }); } } 本案例知识点 BaseElementWidget提供了load方法将继承了该class的元素渲染的区域做整体loading交互，等入参的函数处理完成后恢复正常状态，其实所有继承了ActionWidget的组件也提供了这个能力让按钮在执行函数中的时候处于loading状态， 每个组件都有一个全局唯一的handle值，所在根视图的rootHandle,组件可以用this.rootHandle通过Widget.Select方法查找到所在的根视图组件，从视图的实例化子元素里可以查找到具体的业务类型视图组件，如详情页的DetailWidget、表单页的FormWidget、表格页的TableWidget，拿到这些实例后就可以操作里面的属性和方法了
阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。 名词解释 业务模型：需要进行可视化管理的存储模型或代理模型。 准备工作 你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段） 你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 轮播图 carouselImages 文本 是 512 实现页面效果展示 表格视图 表单视图-创建 表单视图-编辑 详情视图 根据业务背景添加轮播图字段到所有视图 轮播图字段信息： 字段业务类型：文本 多值：是 使用组件：图片 无代码模型 在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。 低代码模型 与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。 将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。 演示图片下载 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建轮播图组件 创建轮播图元件 根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计） 在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示 开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。 设计轮播图的属性面板 通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。 我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息： 功能 API名称 业务类型 选用组件 可选项 是否自动切换 autoplay 布尔 开关 -…
阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 名词解释 主体：在视图中提供数据源的主要组件，并且所有动作都围绕着该主体展开。 一级搜索：在表格视图中，上方直观可见的搜索区，为表格提供筛选功能。 二级搜索：与一级搜索不同的是，其搜索条件是通过某些组件的行为追加到一级搜索条件之上的筛选功能。 概述 平台中对于左树右表提供了两种类型的展示形式。 在表格视图中的左树右表，是以表格为主体，树组件为表格提供了二级搜索功能。选中树节点时将对表格追加节点的搜索条件，并重新执行查询。 在树视图中，是以树为主体，其展开的视图可以是表格、表单、详情等其他视图。 PS：不论是树、级联这些视图组件，还是树选择、级联这些字段组件，其配置数据结构的方式是不尽相同的。唯一的区别在于最终到达的目标模型来源不同。 场景1 为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】和【商品类目】两个模型。 在【商品】的表格左侧添加【商品类目】树，选择某个商品类目后，可以根据商品类目进行筛选，查询所属类目下的全部商品。 其中【商品类目】使用【卡片级联】的展示方式进行管理。 其模型定义如下： 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 所属类目 category 多对一 否 – 商品类目（ItemCategory） categoryId – id 所属类目ID categoryId 整数 否 – – – 商品类目（ItemCategory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 上级类目 parent 多对一 是 – 商品类目（ItemCategory） parentId – id 上级类目ID parentId 整数 否 – – – PS：实际业务场景中，【商品类目】通常使用编码进行关联，即parentCode – code；不仅如此，通常还会添加treeCode字段，以此来实现高效查询当前节点的所有子节点的能力。在演示模型中，我们不必关注这些内容。 创建【商品】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构，因此，在【第1级关联】中的模型选择【商品类目】。 在【商品类目】中是通过【上级类目】进行的自关联，因此，在【第1级关联】中的【自关联关系字段】选择【上级类目】。 在选中【商品类目】节点后，需要对右侧表格发起查询。其筛选条件是通过【商品】中的【所属类目】进行筛选的。因此，在【第1级关联】中的【表格关联关系字段】选择【所属类目】。那么，在表格发起查询前，会根据【所属类目】字段的关联关系配置自动添加筛选条件。 配置如下图所示： 创建【商品类目】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构（级联只是树结构的另一种表现形式） 细心的同学可能发现这里没有【表格关联关系字段】，因此，我们仅需配置【自关联关系字段】即可。 配置如下图所示： 为【商品类目】添加增删改查基础功能 与表格视图不同的是，行内动作区被放在了第一个卡片中的动作区，其他配置方式完全一致。 在这里需要理解的是，一个树节点对应的是表格中的一行。 【商品类目】使用展开视图进行编辑（可选） 打开【支持展开视图】开关，并设置展开视图。这里我们用表单视图进行编辑操作。 和其他表单一样，我们将必要的字段和动作拖入对应区域即可。 由于展开视图只会在选中节点时出现，因此我们仅需提供更新功能即可。 这里需要注意： 提交动作默认打开了【返回上一页】的功能，在当前场景中，更新动作提交数据后，没有上一页需要返回，因此需要关闭【返回上一页】的开关。 提交动作默认打开了【刷新当前视图】的功能，在当前场景中，更新按钮处于【展开视图】中，仅刷新当前视图是不够的，当数据发生变更时，我们需要将级联组件一并刷新，因此需要打开【刷新主视图】的开关。 PS：【编辑】动作和【展开视图编辑】功能是重复的，在使用时应该只选择其中一种。 【商品类目】限制仅支持四级，并为每一个卡片添加标题（可选） 移除【第1级关联】中的【自关联关系字段】，依次添加2、3、4级关联，选择【商品类目】模型，将自动选中【层级关联关系字段】为【上级类目】，并输入每一级关联的标题即可。 这里需要注意的是，在【第1级关联】中需要添加筛选条件，使其只能查询到根节点。 PS：这里的限制仅为交互上的限制，在创建/更新时，如果可以在服务端限制上级类目的选择，以及数据提交时的校验，效果更佳。 【商品类目】的【创建/编辑】使用弹窗打开（可选） 有时我们希望用户在页面中的操作尽可能的流畅，在表单规模较小的情况下，我们也可以使用【弹窗/抽屉】这类交互来优化用户体验。 小贴士： 弹窗打开的方式提供三种页面设计模式，绑定已有页面、使用新页面、复制已有页面。 使用新页面和复制已有页面的方式只能进行一次性的视图设计，无法进行复用。 使用绑定已有页面的方式可以使得视图进行复用，但复用的视图也只能同步弹窗的内容部分，弹窗底部的动作仅会在创建动作时复制一次。 跳转动作的打开方式以及页面设计模式等属于元数据信息，无法通过属性面板进行修改，因此只能通过重新创建新动作的方式进行修改。 鉴于业务的复杂和多变，通常情况下我们只采用【绑定已有页面】的方式为弹窗设计内容部分。这样在交互发生变更时，可以更好的适应变化。 场景2 为了方便接下来的描述，我们需要再构建一个基本的业务场景，这个场景中包含【公司】和【部门】两个模型。 【公司】模型的管理能力使用标准的【增删改查】视图。（此处不进行演示） 在【部门】的表格左侧添加【公司】-【部门】树，在选择某个公司后，可以根据所属公司进行筛选，查询所属公司下的全部部门。在选择某个部门后，可以根据上级部门进行筛选，查询该部门下的子部门（不包含子部门的子部门）。 PS：如这里要求查询该部门下的全部子部门，需要服务端配合。 其模型定义如下： 公司（Company） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本…
