如果之前没了解过GraphQL，可以先查看GraphQL的文档
介绍信息来源于Oinone 7天从入门到精通，如提示无权限，则需要申请
我们可以看出，GraphQL提供的特性可以满足我们对元数据的描述需求，因此我们选用GraphQL。
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/19.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
可能性1: 后端读取视图的xml解析时，由于系统缺少中文字体，导致解析后出现乱码，这种问题常见于采用docker镜像部署的情况，很多基础镜像不带中文字体。 解决方案：在物理系统或者docker镜像内安装中文字体 可能性2: win环境下未指定文件的编码类型 解决方案: 启动命令中加上-Dfile.encoding=UTF-8参数 # 示例命令 java -jar -Dfile.encoding=UTF-8 pamirs-demo-boot-1.0.0-SNAPSHOT.jar -Plifecycle=INSTALL
在日常项目中，常常会遇到多视图（Multi-View）标签的场景，用户在切换不同视图时，可能需要刷新当前活动标签内的视图数据或状态。本文将详细解析下面这段代码，并说明如何利用它在视图切换时刷新对应的视图。 下列代码写在ss-boot里面的main.ts import { VueOioProvider } from '@kunlun/dependencies'; import { delay } from 'lodash-es'; VueOioProvider( { … 自己的配置 }, [ () => { setTimeout(() => { subscribeRoute( (route) => { const page = route.segmentParams.page || {}; // 如果不是表格类型，则不刷新(根据自己的需求判断) if (page.viewType !== ViewType.Table) { return; } const { model, action } = page; const multiTabsManager = MultiTabsManager.INSTANCE; delay(() => { const tab = multiTabsManager.getActiveTab(); if (tab?.key && tab.stack.some((s) => s.parameters?.model === model && s.parameters?.action === action)) { multiTabsManager.refresh(tab.key); } }, 200); }, { distinct: true } ); }, 1000); } ] ); 1. VueOioProvider 及其作用 首先，代码通过 VueOioProvider 初始化应用程序或组件，并传入两部分参数： 配置对象：可以根据实际业务需求进行自定义配置； 回调函数数组：这里传入了一个匿名函数，用于在应用初始化后执行额外的逻辑 2. 延时执行与路由监听 在回调函数中，使用了 setTimeout 延时 1000 毫秒执行，目的通常是为了确保其他组件或全局状态已经初始化完毕，再开始进行路由监听。 随后，代码调用 subscribeRoute 来监听路由的变化。subscribeRoute 接收两个参数： 回调函数：每次路由变化时都会触发该函数，并将最新的 route 对象传递给它； 配置对象：此处使用 { distinct: true } 来避免重复的触发，提高性能。 3. 判断视图类型 在路由回调函数内部，首先通过 route.segmentParams.page 获取当前页面的配置信息。通过判断 page.viewType 是否等于 ViewType.Table，代码可以确定当前视图是否为“表格类型”： 如果不是表格类型：则直接返回，不做刷新操作； 如果是表格类型：则继续执行后续刷新逻辑。 这种判断机制保证了只有特定类型的视图（例如表格）在切换时才会触发刷新，避免了不必要的操作 4. 多视图标签的刷新逻辑 当确认当前视图为表格类型后，从 MultiTabsManager 中获取当前活动标签： MultiTabsManager.INSTANCE.getActiveTab() 返回当前活动的标签对象； 如果 key 存在，并且激活的标签内部存储的action跟url一致， 就调用 multiTabsManager.refresh(key) 方法来刷新当前标签内的视图。
阅读之前： 你应该： 了解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相关文档进行学习。
API Select props 参数 说明 类型 默认值 版本 allowClear 支持清除 boolean false autofocus 默认获取焦点 boolean false clearIcon 自定义的多选框清空图标 VNode | slot – disabled 是否禁用 boolean false dropdownClassName 下拉菜单的 className 属性 string – dropdownRender 自定义下拉框内容 ({menuNode: VNode, props}) => VNode | v-slot – filterOption 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。 boolean | function(inputValue, option) true getTriggerContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 function(triggerNode) () => document.body menuItemSelectedIcon 自定义当前选中的条目图标 VNode | slot – options options 数据，如果设置则不需要手动构造 selectOption 节点 array<{value, label, [disabled, key, title]}> [] placeholder 选择框默认文字 string|slot – removeIcon 自定义的多选框清除图标 VNode | slot – suffixIcon 自定义的选择框后缀图标 VNode | slot – value(v-model:value) 指定当前选中的条目 string|string[]|number|number[] – 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。 事件 事件名称 说明 回调参数 blur 失去焦点的时回调 function change 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 function(value, option:Option/Array<Option>) deselect 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 function(value，option:Option) dropdownVisibleChange 展开下拉菜单的回调 function(open) focus 获得焦点时回调 function inputKeyDown 键盘按下时回调 function mouseenter 鼠标移入时回调 function mouseleave 鼠标移出时回调 function popupScroll 下拉列表滚动时的回调 function search 文本框值变化时回调 function(value: string) select 被选中时调用，参数为选中项的 value (或 key) 值 function(value, option:Option)
在前端开发中，有时需要自定义视图，但手写 GraphQL 查询语句非常繁琐，特别是当查询很复杂时。本文将介绍如何使用平台内置的API buildSingleItemParam 来简化这个过程。 使用方法 buildSingleItemParam 方法接受两个参数： 字段结构 数据 下面是一个示例代码： import { IModelField, buildSingleItemParam } from '@kunlun/dependencies'; const onSaveViewData = async (data) => { // 定义字段的数据结构 const modelFields = [ { name: 'conversationId', ttype: ModelFieldType.String }, { name: 'msgId', ttype: ModelFieldType.String }, { name: 'rating', ttype: ModelFieldType.Integer }, { name: 'tags', ttype: ModelFieldType.OneToMany, modelFields: [ { name: 'id', ttype: ModelFieldType.String }, { name: 'name', ttype: ModelFieldType.String } ] }, { name: 'text', ttype: ModelFieldType.String } ] as IModelField[]; // 构建 GraphQL 查询语句 const gqlStr = await buildSingleItemParam(modelFields, data); const gqlBody = `mutation { chatMessageFeedbackMutation { create( data: ${gqlStr} ) { conversationId msgId rating tags { id } text } } }`; // 向服务器发送请求 const rst = await http.query('ModuleName', gqlBody) // todo }; // 调用示例 onSaveViewData({ conversationId: '12', msgId: '123', tags: [ { id: '122', name: '222' }, { id: '122', name: '222' } ] }); 以上是使用 buildSingleItemParam 简化 GraphQL 查询语句的示例代码。通过这种方式，我们可以更高效地构建复杂的查询语句，提高开发效率。
