界面设计器 扩展字段的查询上下文

相关推荐

• 前端

  表格字段配置Switch开关

  在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action

  汤乾华

  2023年11月21日

  1.8K000
• API&SDK 文档

  前端密码加密

  在项目开发中，我们可能会遇到自定义登录页，密码需要加密，或者是数据提交的时候，某个数据需要加密，在平台的前端中，提供了默认的全局加密 API 在 oinone 前端工程使用 // pc端工程使用 import { encrypt } from '@kunlun/dependencies'; // 移动端端工程使用 import { encrypt } from '@kunlun/mobile-dependencies'; // 加密后的密码 const password = encrypt('123456'); 其他工程使用 如果是其他工程，前端没有用到 oinone 这一套，比如小程序，或者是其他工程，可以使用下面的代码记得安装 crypto-js import CryptoJS from 'crypto-js'; const key = CryptoJS.enc.Utf8.parse('1234567890abcdefghijklmnopqrstuv'); const iv = CryptoJS.enc.Utf8.parse('1234567890aabbcc'); export const encrypt = (content: string): string => { if (typeof content === 'string' && content) { const encryptedContent = CryptoJS.AES.encrypt(content, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encryptedContent.ciphertext.toString(); } return ''; };

  汤乾华

  2025年3月24日

  698000
• 低无一体

  如何增加页面消息通知轮询的间隔或者关闭轮询

  场景 oinone的前端页面默认自带了消息通知功能，在顶部状态栏可以看到消息的查看入口，默认每隔5秒查询一次最新的消息，我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { /** * 轮询间隔时间，单位: 秒 * @protected */ protected msgDelay = 30000; } 关闭轮询 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { protected mounted() { super.mounted(); // 清除轮询的定时器 this.msgTimer && clearInterval(this.msgTimer); // 挂载后手动查询一次消息 this.getMsgTotal(); } }

  nation

  2024年8月20日

  1.3K000

• 多对多的表格 点击添加按钮打开一个表单弹窗

  多对多的表格 点击添加按钮打开一个表单弹窗 默认情况下，多对多的表格上方的添加按钮点击后，打开的是个表格 ，如果您期望点击添加按钮打开的是个表单页面，那么可以按照下方的操作来 1: 先从界面设计器拖一个多对多的字段进来 2: 将该字段切换成表格，并拖入一些字段到表格上 3: 选中添加按钮，将其隐藏 4: 从组件区域的动作分组中拖一个跳转动作，并且进行如下的配置 5: 属性填写好后进行保存，然后在设计弹窗 6: 拖入对应的字段到弹窗中, 当弹窗界面设计完成后，再把保存的按钮拖入进来 这样多对多的添加弹窗就变成了表单

  oinone

  前端 2023年11月1日

  2.6K000
• 前端

  前端日期组件国际化支持方案

  在 oinone 平台中，系统默认支持基础的国际化翻译功能。但由于日期时间组件的国际化依赖对应语言包，而全量引入语言包会显著增加打包体积，因此前端默认仅集成了中、英文的日期时间支持。若需为日期时间组件扩展其他语言（如日语）的国际化支持，需手动导入对应语言包并完成配置，具体步骤如下： 假设我们现在国际化翻译切换成了日语，那么我们在日期时间也要支持日语，那么需要如下操作： 1: 重写 RootWidget 继承平台默认的 RootWidget，SPI 注册条件保持跟平台一致即可覆盖平台默认的RootWidget // CustomRootWidget.ts import { RootComponentSPI, RootWidget, SPIFactory } from '@oinone/kunlun-dependencies'; import Root from './Root.vue'; // 通过SPI注册覆盖平台默认的root组件 @SPIFactory.Register(RootComponentSPI.Token({ widget: 'root' })) export class CustomRootWidget extends RootWidget { public initialize() { super.initialize(); this.setComponent(Root); return this; } } 2: 覆盖 Root 组件的 Vue 文件 自定义的 Vue 文件需负责导入目标语言（如日语）的语言包，并根据当前语言环境动态切换配置。这里需要同时处理 ant-design-vue、element-plus 组件库及 dayjs 工具的语言包，确保日期组件的展示和交互统一适配目标语言。 <!– Root.vue –> <template> <a-config-provider :locale="antLocale"> <el-config-provider :locale="eleLocale"> <match :rootToken="root"> <template v-for="page in pages" :key="page.widget"> <route v-if="page.widget" :path="page.path" :slotName="page.slotName" :widget="page.widget"> <slot :name="page.slotName" /> </route> </template> <route :path="pagePath" slotName="page" :widgets="{ page: widgets.page }"> <slot name="page" /> </route> <route path="/" slotName="homePage"> <slot name="homePage" /> </route> </match> </el-config-provider> </a-config-provider> </template> <script lang="ts"> import { CurrentLanguage, EN_US_CODE, UrlHelper, ZH_CN_CODE } from '@oinone/kunlun-dependencies'; import { ConfigProvider as AConfigProvider } from 'ant-design-vue'; import { ElConfigProvider } from 'element-plus'; import dayjs from 'dayjs'; // 导入ant-design-vue语言包 import enUS from 'ant-design-vue/es/locale/en_US'; import zhCN from 'ant-design-vue/lib/locale/zh_CN'; import jaJP from 'ant-design-vue/lib/locale/ja_JP'; // 新增：日语语言包 // 导入 dayjs的语言包 import 'dayjs/locale/zh-cn'; import 'dayjs/locale/ja'; // 新增：日语语言包 // 导入element-plus语言包 import elEn from 'element-plus/dist/locale/en.mjs'; import elZhCn from 'element-plus/dist/locale/zh-cn.mjs'; import elJaJP from 'element-plus/dist/locale/ja.mjs'; // 新增：日语语言包 import { computed, defineComponent, onMounted,…

  汤乾华

  2025年8月13日

  687000