1. Oinone社区Home
  2. 前端
  3. 低无一体

如何实现页面间的跳转

nation • • 低无一体, 前端, 界面设计器 • 4036 views

介绍

在日常的业务中，我们经常需要在多个模型的页面之间跳转，例如从商品的行可以直接点击链接跳转到类目详情，还有查看该订单发起的售后单列表，这里将给大家展示如何在oinone中如何实现这些功能。

方法一、通过界面设计器的无代码能力配置

表格行跳转到表单页/详情页

  1. 拖入一个跳转动作到表格行，保存动作后，在左侧的动作属性面板底部有个请求配置，里面的上下文属性就是配置跳转参数的地方，点击添加按钮可以增加一行参数
    如何实现页面间的跳转

  2. 点击添加按钮后，可以看到新增了一行，行内有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属性对应的模块?
答：跳转后所在的模块优先级为：
  1. 第一个入参的resModuleName属性对应的模块
  2. 执行executeViewAction时所在的模块
  3. 第一个入参的moduleName属性对应的模块
如何快速获取选中菜单的值？
答：先通过页面菜单手动打开页面，然后在浏览器自带调试工具的控制台执行decodeURIComponent(location.href),其中的menu参数就是我们需要的值

如何实现页面间的跳转

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

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

Like (2)
nation's avatarnation数式员工
0 0
Previous 2024年5月13日 pm7:06
Next 2024年5月14日 pm2:35

相关推荐

  • 表单字段API 前端

    表单字段API

    FormFieldWidget 表单字段的基类，包含了表单字段通用的属性跟方法 示例 class MyFieldClass extends FormFieldWidget{ } 字段属性 属性名 说明 类型 可选值 默认值 value 当前字段的值 any – null formData 当前表单视图的数据 Object – {} rootData 跟视图的数据，如果当前只有一个视图，那么与formData是一样的 Array – [] metadataRuntimeContext 当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据 Object – – urlParameters 当前url参数 Object – – field 当前字段的元数据 Object – – model 当前模型 Object – – view 当前视图 Object – – disabled 是否禁用 Boolean – false invisible 当前字段是否不可见 Boolean – false required 当前字段是否必填，如果当前字段是在详情页，那么是false Boolean – false readonly 当前字段是否只读，如果当前字段是在详情页、搜索，那么是false Boolean – false placeholder 占位符 String – 当前字段的displayName label 字段的标题 String – 当前字段的displayName 方法 方法名 说明 参数 例子 getDsl 获取当前字段所有的配置 – change 修改当前字段的值 any focus 获取焦点触发的方法 – blur 失去焦点触发的方法 – executeValidator 执行当前字段的校验，异步的 – submit 重写当前字段的提交逻辑 – submit() { return ‘value’ } reloadActiveRecords 替换当前视图的数据 Array this.reloadActiveRecords([{code: xxx, name: 111}]) reloadRootData 替换根视图的数据 Array this.reloadRootData([{code: xxx, name: 111}])

    汤乾华's avatar 汤乾华
    2023年11月15日
    2.4K00
  • 如何自定义点击导出动作绑定指定模板 低无一体

    如何自定义点击导出动作绑定指定模板

    介绍 平台默认的导出会打开弹窗，然后在弹窗内的视图选择是用模板方式导出还是选字段导出，但是有时候有部分场景希望点击导出动作后直接进入导出流程，导出指定的某个模板，我们可以通过覆写打开弹窗的动作来实现该功能。 本文档参考了 表格页自定义按钮如何获取搜索区域的查询条件 代码示例 以下代码大部分场景只需要修改其中excelTplName更换模板即可，另外如何想增加复用性，还可以将该属性改为从元数据的配置中获取。 import { ActionType, BaseActionWidget, BaseElementListViewWidget, BooleanHelper, ClickResult, Condition, ExcelExportTask, FILE_MODULE_NAME, getSessionPath, GraphqlHelper, http, IQueryPageResult, ISort, queryDslWidget, ReturnPromise, RuntimeServerAction, ServerActionWidget, SPI, SubmitValue, SYSTEM_MODULE_NAME, translateValueByKey, UrlHelper, ViewActionTarget, Widget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'ys0328.k2.Model0000000453', name: 'internalGotoListExportDialog' }) ) export class DemoExportActionWidget extends ServerActionWidget { /** * excel导出模板名称 * @protected */ protected excelTplName = '演示抽屉跳转链接导出'; /** * 导出任务的模型编码 * @protected */ protected exportTaskModel = 'excelExportTask'; /** * 导出任务的方法 * @protected */ protected exportTaskFun = 'createExportTask'; /** * * 是否是同步导出 */ @Widget.Reactive() protected get syncExport() { return BooleanHelper.isTrue(this.getDsl().sync) || !true; } protected async executeAction(action: RuntimeServerAction, parameters: SubmitValue): Promise<ClickResult> { const workbookId = await this.getWorkbookId(); if (!workbookId) { return false; } let task = { workbookDefinition: { id: workbookId } } as ExcelExportTask; // 从平台内置的方法获取搜索区域的条件 const { condition } = this.getSearchRsqlAndQueryParams(); // 排序规则 let sortList = [] as ISort[]; const baseViewWidget = Widget.select(this.rootHandle); const listViewWidget = queryDslWidget(baseViewWidget?.getChildrenInstance(), BaseElementListViewWidget); if (listViewWidget) { sortList = listViewWidget.sortList; } return this.export(task, condition, sortList); } protected getUploadBodyGql(id: string, condition: string | Condition, sortList:…

    nation's avatar nation
    2024年10月9日
    2.3K00
  • oio-cascader 级联选择 组件

    oio-cascader 级联选择

    级联选择框。 何时使用 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。 API <oio-cascader :options="options" v-model:value="value" /> 参数 说明 类型 默认值 Version allowClear 是否支持清除 boolean true autofocus 自动获取焦点 boolean false changeOnSelect （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 boolean false disabled 禁用 boolean false displayRender 选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}" ({labels, selectedOptions}) => VNode labels => labels.join(' / ') dropdownClassName 自定义浮层类名 string – getTriggerContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 Function(triggerNode) () => document.body loadData 用于动态加载选项，无法与 showSearch 一起使用 (selectedOptions) => void – maxTagCount 最多显示多少个 tag，响应式模式会对性能产生损耗 number | responsive – maxTagPlaceholder 隐藏 tag 时显示的内容 v-slot | function(omittedValues) – multiple 支持多选节点 boolean – options 可选项数据源 – placeholder 输入框占位文本 string ‘请选择’ searchValue 设置搜索的值，需要与 showSearch 配合使用 string – showSearch 在选择框中显示搜索框 boolean false tagRender 自定义 tag 内容，多选时生效 slot – value(v-model:value) 指定选中项 string[] | number[] – showSearch showSearch 为对象时，其中的字段： 参数 说明 类型 默认值 filterOption 接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。 function(inputValue, path): boolean 事件 事件名称 说明 回调参数 版本 change 选择完成后的回调 (value, selectedOptions) => void – search 监听搜索，返回输入的值 (value) => void – Option interface Option { value: string | number; label?: any; disabled?: boolean; children?: Option[]; // 标记是否为叶子节点，设置了 `loadData` 时有效 // 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标 isLeaf?: boolean; }

    汤乾华's avatar 汤乾华
    2023年12月18日
    1.6K00
  • 动作API 动作API

    动作API

    ActionWidget 动作组件的基类，包含了动作组件的通用属性和方法 示例 class MyActionWidget extends ActionWidget { } 动作属性 属性名 说明 类型 可选值 默认值 label 动作的名称 String – 当前动作的displayName action 当前动作的元数据 RuntimeAction – model 运行时模型 RuntimeModel – viewAction 运行时视图动作 RuntimeViewAction – view 运行时视图 RuntimeViewAction – initialValue 视图初始值 ActiveRecord[] – initialContext 视图初始上下文 Object – urlParameters 获取url参数 UrlQueryParameters – scene 场景 String – loading 动作加载状态 Boolean – false disabled 是否禁用 Boolean – false disabledTitle 禁用时的按钮名称 String – – invisible 当前字段是否不可见 Boolean – false validateForm 点击动作后是否校验表单 Boolean – false actionDomain 动作的domain查询条件 String – undefined goBack 点击动作后是否返回上一页 Boolean – false isDialog 是否为弹窗内动作 Boolean – 弹窗下的动作默认为true closeDialog 点击动作后是否关闭弹窗 Boolean – 默认为isDialog的值 isDrawer 是否为抽屉内动作 Boolean – 抽屉下的动作默认为true closeDrawer 点击动作后是否关闭抽屉 Boolean – 默认为isDrawer的值 isInnerPopup 是否为页内弹出层动作 Boolean – 页内弹出层下的动作默认为true isAsync 是否为异步动作 Boolean – true refreshRoot 是否刷新根视图 Boolean – false refreshData 是否刷新数据 Boolean – true type 动作的类型 ButtonType – 行内动作默认为ButtonType.link，其他动作为ButtonType.primary bizStyle 动作的业务类型 ButtonBizStyle – ButtonBizStyle.default icon 动作的图标 String – – enableConfirm 是否开启二次确认 Boolean – true confirmType 二次确认的类型 ConfirmType – – confirm 二次确认的内容 String – – confirmText 二次确认的提示内容 String – – confirmPosition 二次确认提示的展示位置 PopconfirmPlacement – PopconfirmPlacement.BM enterText 二次确认的确定按钮文字 String – – cancelText 二次确认的取消按钮文字 String – – searchBody 列表页的动作可以拿到搜索区域的搜索条件 ActiveRecord…

    nation's avatar nation
    2024年3月8日
    1.5K00
  • 「前端」 获取当前用户信息以及语言 前端

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

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

    汤乾华's avatar 汤乾华
    2025年3月21日
    2.1K00

Leave a Reply

Please Login to Comment