1. Oinone社区首页
  2. 前端

「前端」 获取当前用户信息以及语言

汤乾华 • • 前端, 项目开发综合知识点 • 阅读 1420

概述

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) 更新后的语言配置对象

Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/20744.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

赞 (0)
汤乾华的头像汤乾华数式员工
0 0
上一篇 2025年3月19日 pm3:56
下一篇 2025年3月21日 pm5:46

相关推荐

  • 如何实现页面间的跳转 低无一体

    如何实现页面间的跳转

    介绍 在日常的业务中，我们经常需要在多个模型的页面之间跳转，例如从商品的行可以直接点击链接跳转到类目详情，还有查看该订单发起的售后单列表，这里将给大家展示如何在oinone中如何实现这些功能。 方法一、通过界面设计器的无代码能力配置 表格行跳转到表单页/详情页 拖入一个跳转动作到表格行，保存动作后，在左侧的动作属性面板底部有个请求配置，里面的上下文属性就是配置跳转参数的地方，点击添加按钮可以增加一行参数 点击添加按钮后，可以看到新增了一行，行内有2个输入框，左侧输入框为目标视图模型的字段，右侧输入框为当前视图模型的表达式 注意 表达式中activeRecord关键字代表当前行的数据对象 “上下文”相关知识点 当前页面的模型和跳转后的页面模型相同的情况下，会字段带上当前行数据的id作为路由参数 上下文是从当前页面跳转到下个页面带的自定义参数 上下文会作为跳转后的页面数据加载函数的入参，后端的该函数需要根据该条件查询到数据返回给前端，典型的例子就是编辑页，根据id查询对象的其他字段信息返回 跳转后页面的数据加载函数可以在动作场景的时候选择加载函数，也可以在页面的加载函数处设置 方法二、通过低代码方式在自定义代码中调用 oinone提供了内置函数executeViewAction实现该功能 import { DefaultComparisonOperator, executeViewAction, QueryExpression, RuntimeViewAction, ViewActionTarget, ViewType } from '@kunlun/dependencies'; export class JumpActionWidget { protected goToObjectView() { executeViewAction( { viewType: ViewType.Form, moduleName: 'resource', model: 'resource.ResourceCountry', name: 'redirectUpdatePage', target: ViewActionTarget.Router } as RuntimeViewAction, undefined, undefined, { // 此处为id参数，目前只有表单和详情页需要 id: '12223', // 此处为上下文参数，context内对象的key是目标页面需要传递的默认值 context: JSON.stringify({code: 'xxx'}), // 此处为跳转后左侧菜单展开选中的配置 menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } protected goToListView() { const searchConditions: QueryExpression[] = []; searchConditions.push({ leftValue: ['countryCode'], // 查询条件的字段 operator: DefaultComparisonOperator.EQUAL, right: 'CN' // 字段的值 }); executeViewAction( { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCity', name: 'resource#市', target: ViewActionTarget.OpenWindow } as RuntimeViewAction, undefined, undefined, { // searchConditions相当于domain，不会随页面搜索项重置动作一起被清空 searchConditions: encodeURIComponent(JSON.stringify(searchConditions)), // searchBody的字段会填充搜索区域的字段组件，会随页面搜索项重置动作一起被清空 searchBody: JSON.stringify({code: 'CN'}), menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } } 扩展知识点 为什么executeViewAction跳转到的新页面不是入参的moduleName属性对应的模块? 答：跳转后所在的模块优先级为： 第一个入参的resModuleName属性对应的模块 执行executeViewAction时所在的模块 第一个入参的moduleName属性对应的模块 如何快速获取选中菜单的值？ 答：先通过页面菜单手动打开页面，然后在浏览器自带调试工具的控制台执行decodeURIComponent(location.href),其中的menu参数就是我们需要的值

    nation的头像 nation
    2024年5月13日
    3.2K00
  • oio-spin 加载中 组件

    oio-spin 加载中

    用于页面和区块的加载中状态。 何时使用 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 API 参数 说明 类型 默认值 版本 delay 延迟显示加载效果的时间（防止闪烁） number (毫秒) – loading 是否为加载中状态 boolean true wrapperClassName 包装器的类属性 string –

    汤乾华的头像 汤乾华
    2023年12月18日
    1.3K00
  • 【界面设计器】自定义字段组件实战——表格字段内嵌表格 前端

    【界面设计器】自定义字段组件实战——表格字段内嵌表格

    阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 表格中的一对多(O2M)或多对多(M2M)字段使用表格展开。 演示内容：在【商品】的表格中存在【库存信息】这一列，这一列的内容通过表格展示【尺码】和【数量】两列。 业务分析及实现思路 从需求来看，我们需要实现一个【内嵌表格】组件，并且该组件允许在【表格】视图中使用。与之前不同的是，这里我们需要支持两个业务类型一对多(O2M)和多对多(M2M)，即一个组件中包含两个元件。 在【内嵌表格】组件的属性面板中，我们需要再定义一个【内嵌表格配置】组件，用来选择内嵌表格中需要哪些字段进行组合，以及为每个组合提供一些基础配置。 这里需要理解一个基本概念，即【内嵌表格】的属性面板是【内嵌表格配置】的【执行页面】。所有组件的属性面板在【执行页面】时都是【表单】视图。 因此我们可以实现一个【内嵌表格配置】组件，并且该组件允许在【表单】视图中使用。其业务类型使用【文本】，我们在保存配置数据时，可以使用JSON数据结构来存储复杂结构。（这里的实现思路并非是最符合协议设定的，但可以满足绝大多数组件场景） 在【内嵌表格配置】组件中，我们可以允许用户添加/移除组合，并且每个组合有两个属性，【标题】和【字段】。 一些解释 看过【界面设计器】自定义字段组件实战——表格字段组合展示文章的读者可能很熟悉这一实现思路，会想当然的尝试将两个组件进行合并。这里我觉得有必要作出一些实现思路上的解释。 虽然在表面上看起来【组合列配置】和【内嵌表格配置】用到的属性完全一样，但在实现上，由于关联关系的查询需要在组件中特殊处理【透出字段(选项字段列表)】字段（【界面设计器】组件开发常见问题中对该属性进行了解释），才能查询到相应的关联数据。 不仅如此，这两个组件所代表的含义也完全不同。【组合列配置】是在一列中配置需要展示的字段，它在未来可能会增加【颜色（根据条件判断展示不同的颜色）】、【动作（可点击的行为）】等等诸多与之相关的属性。【内嵌表格配置】是在一列中配置表格中的多列，它在未来可能会增加【行高（控制表格行高）】、【支持排序（表格列支持排序）】等等诸多与之相关的属性。 在这里希望读者可以理解一点：相似并不代表相关。组件的抽象与归纳整理的不同点在于，抽象更需要关心其本身所代表的含义，而不是仅关注其相似程度。将多个相似度高但含义不同的组件进行归纳整理得到的只是一个含义不明，无法适应变化的组件。 因此，我们仍然使用两个不同的组件进行实现。 准备工作 此处你应该已经准备好了【商品】和【库存】两个模型，并且可以完整执行【商品】模型的全部【增删改查】操作。 业务模型定义（此处模型定义并非业务中正常使用的模型定义，仅作为演示使用） （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 关联字段：-左侧表示当前模型中的字段API名称，右侧表示关联模型中的字段API名称。 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – 编码 code 文本 否 128 – – 名称 name 文本 否 128 – – 库存信息 inventoryInfo 一对多 是 – 库存（Inventory） id – itemId 库存（Inventory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 商品 item 多对一 否 – 商品（Item） itemId – id 商品ID itemId 整数 否 – – – 尺码 size 文本 否 128 – – 库存 count 整数 否 – – – PS：如果是使用【模型设计器】创建这两个模型，在创建关联关系字段时必须使用双向关联，才能正确建立关联关系。 实现页面效果展示 表格视图 表单视图 库存信息配置 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建内嵌表格组件 创建内嵌表格元件（一对多） 创建内嵌表格元件（多对多） 创建内嵌表格配置组件 创建内嵌表格配置元件 设计内嵌表格元件属性面板 （两个元件的属性面板可以完全一致） 创建tableConfig字段，并切换至【内嵌表格配置】组件。 再拖入【透出字段(选项字段列表)】，并设置为隐藏。 设计内嵌表格配置元件属性面板 启动SDK工程进行组件基本功能开发 开发步骤参考 打开【表格】视图，将【库存信息】字段的组件切换为【内嵌表格】 在属性面板中看到【内嵌表格配置】组件，并优先实现【内嵌表格配置】组件。这里的属性面板就是【内嵌表格配置】组件对应的【执行页面】。 当【内嵌表格配置】组件可以按照预先设计的数据结构正确保存tableConfig属性时，可以在【内嵌表格】组件中的props定义中直接获取该属性，接下来就可以进行【内嵌表格】组件的开发。 代码实现参考 工程结构 typing.ts export interface InlineTableConfig { key: string; label?: string; field?: string; } FieldService.ts import { GenericFunctionService, IModelField, QueryPageResult } from '@kunlun/dependencies'; export class FieldService { private static readonly FIELD_MODEL = 'base.Field'; public static async fetchFieldsByModel(model: string, filter?: string): Promise<IModelField[]> { let rsql = `model == "${model}"`; if (filter) {…

    数式-海波的头像 数式-海波
    2023年11月1日
    1.3K00
  • 【界面设计器】自定义字段组件实战——千分位输入框 前端

    【界面设计器】自定义字段组件实战——千分位输入框

    阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户在输入【金额】字段时，实时展示千分位格式。 业务分析 从需求来看，我们需要实现一个【千分位】组件，并且该组件允许在【表单】视图中使用。 扩展实现：该组件虽然仅要求在【表单】中使用，但也可以在【搜索】中使用完全相同的实现，因此这里我们在注册时会增加【搜索】视图，将【千分位】组件应用在【搜索】中。对于【表格】、【详情】和【画廊】来说，该组件是没有【输入】行为的展示组件，在这里我们不进行演示。 准备工作 此处你应该已经在某个业务模型下，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 金额 money 金额 否 – 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建千分位组件 创建千分位元件 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) 关键点详解 数据交互类型的字段组件（以下简称展示组件）与仅展示类型的字段组件（以下简称交互组件）有一些差别。 通常情况下，在展示组件中仅需使用value属性即可展示相关内容。在交互组件中除了value用于展示外，还需使用change、focus以及blur处理用户输入时的基本交互逻辑。 数据交互方法主要功能说明： change方法：当值发生变更时调用，根据字段相关配置将值回填至表单中。 focus方法：当组件获取焦点时调用，记录当前值，并在调用blur方法时进行处理。 blur方法：当前组件失去焦点时调用，根据focus方法记录的值，进行失焦触发逻辑的执行。 这里的三个数据交互方法仅仅是对用户行为的抽象，而并非限定其使用场景。 通常来说，这三个方法的调用顺序为：focus –> change –> blur。 如在日期时间组件中，面板打开时调用了focus方法，面板值发生变更时，调用了change方法，面板关闭时调用了blur方法。 如在地图组件中，选中地图上的某个点时仅会调用change方法，用户交互上并不能体现出focus和blur的行为。因此对于这个组件而言，只会有change方法被执行。 代码实现参考 PS：oio-input-number样式必须升级到4.6.x以上的最新版本才支持 Thousandth.vue <template> <a-input-number class=”oio-input-number” :value=”inputValue” :formatter=”formatter” :parser=”parser” @update:value=”change” @focus=”focus” @blur=”blur” /> </template> <script lang=”ts”> import { InputNumber as AInputNumber } from ‘ant-design-vue’; import { computed, defineComponent } from ‘vue’; export default defineComponent({ name: ‘Thousandth’, components: { AInputNumber }, props: { value: { type: [String, Number] }, change: { type: Function }, focus: { type: Function }, blur: { type: Function } }, setup(props) { const inputValue = computed(() => { return props.value; }); const formatter = (value) => { return <span class="hljs-subst">${value}</span>.replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’); }; const parser = (value) => { return value.replace(/\$\s?|(,*)/g, ”); }; return { inputValue, formatter, parser }; } }); </script> FormMoneyThousandthFieldWidget.ts import { FormFieldWidget, ModelFieldType, SPI, ViewType } from ‘@kunlun/dependencies’; import Thousandth from ‘./Thousandth.vue’; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.Currency,…

    数式-海波的头像 数式-海波
    2023年11月1日
    1.1K00
  • 前端自定义组件之单页面步骤条 组件

    前端自定义组件之单页面步骤条

    本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。 实现路径 整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的步骤条组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderStep，通过 DslRender.render 方法渲染界面设计器拖拽的元素，每一步的 step 又是解析选卡页得到的。 import { SPI, Widget, DefaultTabsWidget, BasePackWidget, DslDefinition, DslRender, DslDefinitionType, CallChaining, customMutation } from '@oinone/kunlun-dependencies'; import { VNode } from 'vue'; import NextStepSinglePage from './NextStepSinglePage.vue'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' })) export class NextStepSinglePageWidget extends DefaultTabsWidget { public initialize(props) { super.initialize(props); this.setComponent(NextStepSinglePage); return this; } @Widget.Reactive() public get invisible() { return false; } // 配置的每一步名称，解析选项页的标题 @Widget.Reactive() public get titles() { return this.template?.widgets?.map((item) => item.title) || []; } // region 上一步下一步配置 // 步骤数组，数组里的元素即步骤要渲染的内容 @Widget.Reactive() public get steps(): DslDefinition[] { // 每个 tab 是一个步骤，这里会有多个步骤 // 每个步骤里有多个元素，又是数组 // 所以这里是二维数组 const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || []; // 对每个步骤的子元素们，外侧包一层 row 布局，所以变回了一维数组 return tabDsls.map((tabDsl) => { return { …(this.template || {}), dslNodeType: DslDefinitionType.PACK, widgets: tabDsl, widget: 'row', resolveOptions: { mode: 1 } }; }); } // 渲染步骤，每个步骤有多个子元素 @Widget.Method() public renderStep(step: DslDefinition): VNode | undefined { return DslRender.render(step); } // region 校验相关 // 校验的钩子 @Widget.Reactive() @Widget.Inject('validatorCallChaining') protected parentValidatorCallChaining: CallChaining<boolean> | undefined; // 校验步骤表单 @Widget.Method() public async onValidator(): Promise<boolean> { const res = await this.parentValidatorCallChaining?.syncCall(); return res…

    银时的头像 银时
    2025年7月8日
    78900

Leave a Reply

登录后才能评论