相关推荐

• 低无一体

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

  场景 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日

  962000
• 前端

  前端环境和启动前端工程

  本节核心是带大家直观的感受下我们上节构建的demo模块，并搭建前端环境为后续学习打下基础 环境准备 配置NPM源 npm config set registry http://nexus.shushi.pro/repository/kunlun/ 登录NPM源账号 npm login –registry "http://nexus.shushi.pro/repository/kunlun/" # username、password、email 获取方式： # 1、请见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员; # 2、参考数式发过去的部署包(部署.zip)中的账号说明：docker-mvn-npm账号.md npm info underscore 环境准备参考 [前端环境准备Mac版本]https://doc.oinone.top/oio4/9225.html [前端环境准备Windows版本]https://doc.oinone.top/oio4/9226.html 启动前端工程 1、下载前端工程本地运行 [ss-front-modules.zip]ss-front-modules 2、解压下载后的工程，可以查看README.MD快速上手指南; 找到vue.config.js文件，修改devServer.proxy.pamirs.target为后端服务的地址和端口 const WidgetLoaderPlugin = require('@kunlun/widget-loader/dist/plugin.js').default; const Dotenv = require('dotenv-webpack'); module.exports = { lintOnSave: false, runtimeCompiler: true, configureWebpack: { module: { rules: [ { test: /\.widget$/, loader: '@kunlun/widget-loader' } ] }, plugins: [new WidgetLoaderPlugin(), new Dotenv()], resolveLoader: { alias: { '@kunlun/widget-loader': require.resolve('@kunlun/widget-loader') } } }, devServer: { port: 8081, disableHostCheck: true, progress: false, proxy: { pamirs: { // 支持跨域 changeOrigin: true, // 改成本地后端对应的IP和端口； 本地后端未启动的情况也可改成无代码后端IP和端口 target: 'http://192.168.0.121:8190' } } } }; 3、 安装依赖和运行在工程目录ss-front-modules下执行 # 安装依赖 npm i # 运行 npm run dev 4、若安装失败 检查本地node、npm、vue对应的版本 5、 如果启动报错 清除node_modules后重新 npm i mac清除命令：npm run cleanOs windows清除命令: npm run clean 注：要用localhost域名访问，.env文件这里也要改成localhost。如果开发中一定要出现前后端域名不一致，老版本Chrome会有问题，修改可以请参https://www.cnblogs.com/willingtolove/p/12350429.html。或者下载新版本Chrome 进入前端工程ss-front-modules文件目录下，执行 npm run dev，最后出现下图就代表启动成功 6、使用 http://127.0.0.1:8081/login 进行访问，并用admin账号登陆，默认密码为admin 5、点击左上角进行应用切换，会进入App Finder页面，可以看到所有已经安装的应用，可以对照boot的yml配置文件看。 在后续的学习过程中我们会不断完善示例中的模块。至此恭喜您，前端工程已经启动完成。 示例工程分层说明 # ss-boot 不做业务研发，只做包的组装和依赖 # ss-oinone 与Oinone结合层，这个工程结构可以把数式Oinone的改造收口，也是业务工程依赖的核心层 # ss-admin-widget 与界面设计器无代码的结合工程，在这个工程结构里可以把组件放在无代码平台上使用 # ss-project 模拟的项目工程，做某个项目的个性化开发

  望闲

  2024年5月28日

  1.9K000
• 组件

  OioNotification 通知提醒框

  全局展示通知提醒信息。 何时使用 在系统四个角显示通知提醒信息。经常用于以下情况： 较为复杂的通知内容。 带有交互的通知，给出用户下一步的行动点。 系统主动推送。 API OioNotification.success(title,message, config) OioNotification.error(title,message, config) OioNotification.info(title,message, config) OioNotification.warning(title,message, config) config 参数如下： 参数 说明 类型 默认值 版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –

  汤乾华

  2023年12月18日

  790000
• 前端

  母版-布局-DSL 渲染基础（v4）

  概述 不论是母版、布局还是DSL，我们统一使用XML进行定义，可以更好的提供结构化表述。 参考文档： XML百度百科 XML语法参考 下面文档中未介绍到的Mask母版和Layout布局，可以去数据库中base库的表base_layout_definition和base_mask_definition的template字段查看 母版 确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面配置。 母版内容分为主内容分发区域与非主内容分发区域。非主内容分发区域一般包含顶部栏、底部栏和侧边栏。侧边栏可以放置菜单，菜单与主内容分发区域内容进行联动。 默认母板 <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask> 该模板中包含了如下几个组件： mask：母版根标签 multi-tabs：多选项卡 header：顶部栏 container：容器 sldebar：侧边栏 nav-menu：导航菜单 content：主内容 breadcrumb：面包屑 block：div块 main-view：主视图；用于渲染布局和DSL等相关内容； 母版将整个页面的大体框架进行了描述，接下来将主要介绍布局和DSL是如何在main-view中进行渲染的。关于自定义母版组件的相关内容 点击查看 布局 布局是将页面拆分成一个一个的小单元，按照从上到下、从左到右进行顺序排列 布局主要用于控制页面中元素的展示的相对位置，原则上不建议将元数据相关内容在布局中进行使用，可最大化布局的利用率。 默认表格视图（TABLE） <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 该模板中包含了如下几个组件： view：视图；用于定义当前视图类型，不同的视图类型会有不同的数据交互，以及渲染不同的组件。 pack：容器类型相关组件。 element：元素组件；包含各种各样的组件，根据组件实现有不同的作用。 xslot：DSL插槽；用于将DSL中定义的模板分别插入到对应的槽中； 特别的，任何XML标签上的slot属性都具备DSL插槽的全部能力。当学习完DSL相关内容后，我们将会对DSL插槽有比较清晰的理解。 PS：在下面的内容中，将使用该布局进行描述。 DSL 准备工作 为了方便描述DSL和元数据之间的关系，我们需要先定义一个简单模型，这个模型里面包含字段和动作。这些通常是服务端定义的。（对服务端不感兴趣的同学可以跳过代码部分） DemoModel.java @Model.model(DemoModel.MODEL_MODEL) @Model(displayName = "演示模型", labelFields = {"name"}) public class DemoModel extends IdModel { private static final long serialVersionUID = -7211802945795866154L; public static final String MODEL_MODEL = "demo.DemoModel"; @Field(displayName = "名称") private String name; @Field(displayName = "是否启用") private Boolean isEnabled; } DemoModelAction.java @Model.model(DemoModel.MODEL_MODEL) @UxRouteButton( action = @UxAction(name = "redirectCreatePage", displayName = "创建", contextType = ActionContextTypeEnum.CONTEXT_FREE), value = @UxRoute(model =…

  oinone

  2023年11月1日

  2.3K101
• 前端

  在前端视图添加自定义的区域块

  添加自定义区域块 平台提供了一系列默认的视图布局，可以帮助开发人员快速构建出复杂的企业应用系统。当然，我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。 自定义区域块概述 平台视图布局都是通过XML配置实现的。在视图布局中，我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块，就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块，来扩展页面功能。 视图类型及相关元素 视图类型分为表格（TABLE）、表单（FORM）、画廊（GALLERY）、树形（TREE）等。不同类型的视图布局，包含的元素也有所不同。 下面是几种视图类型及其对应的元素： 表格：搜索区域、表格主体，其中表格主体包含了表格上面的动作、表格区域等部分。 表单：表单区域，包含了表单动作、表单区域等部分。 画廊：动作、卡片详细信息。 在表格页面添加自定义区域块 以下是一个示例，演示如何在表格页面顶部添加自定义区域块。 1. 修改视图布局XML 首先，我们需要修改表格视图的XML布局，添加自定义区域块元素标签。 <view type="TABLE"> <!– 这是搜索区域 –> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <!– 这是表格主体 –> <pack widget="group" slot="tableGroup"> <!– 在这里添加自定义区域块元素标签 –> <element widget="MyCustomElement"></element> <!– 这是表格上面的动作 –> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <!– 这是表格区域 –> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 在上述代码中，我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。 2. 创建自定义Vue组件 接下来，我们需要创建一个Vue组件，并将其指定为自定义元素标签MyCustomElement的模板。 <template> <div> <!– 在这里编写自定义区域块的内容 –> <p>Hello, world!</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ components: { }, props: [], setup(props) { return {}; } }); </script> 在上述代码中，我们定义了一个非常简单的Vue组件，它在页面上显示一个“Hello, world!”的文本信息。 3. 创建自定义Element Widget 为了使自定义Vue组件与XML布局文件关联起来，我们需要创建一个对应的Element Widget。 import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies'; import MyCustomElement from './MyCustomElement.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' })) export class MyCustomElementWidget extends BaseElementWidget { public initialize(props: BaseElementWidgetProps): this { super.initialize(props) this.setComponent(MyCustomElement) return this } } 在上述代码中，我们继承了BaseElementWidget类，并在其中指定了Vue组件MyCustomElement。这样，XML布局文件中的元素标签就能够正确地与Vue组件关联起来。 4. 注册视图布局 最后，我们需要将上述代码配置注册。具体而言，我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" />…

  oinone

  2023年11月1日

  2.5K000