李强

相关推荐

• Oinone 7天入门到精通

  3.5.7.9 自定义多Tab

  在业务中，可能会遇到需要对多tab的交互或UI做全新设计的需求，这个时候可以自定义多tab组件支持。 首先继承平台的MultiTabsWidget组件，将自己vue文件设置到component处 import { MultiTabsWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMultiTabs.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的tagName跟平台的组件一样，这样才能覆盖平台的组件 tagName: ['multi-tabs', 'MultiTabs'] }) ) export class CustomMultiTabsWidget extends MultiTabsWidget{ public initialize(props) { super.initialize(props); // 设置自定义的vue组件 this.setComponent(Component); return this; } } vue文件中继承平台的props，编写自定义页面代码 export const MultiTabsProps = { /** * 组件是否可见 */ invisible: { type: Boolean }, /** * tab列表数据 */ tabs: { type: Array as PropType<MultiTab[]> }, /** * 当前激活的tab */ activeTab: { type: Object as PropType<MultiTab> }, /** * 鼠标悬浮所在的tab */ hoverTab: { type: Object as PropType<MultiTab> }, /** * 鼠标经过tab事件回调 */ onMouseenterTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 鼠标离开tab事件回调 */ onMouseleaveTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 点击tab */ onClickTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 刷新当前tab */ onRefreshCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab */ onCloseCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭除当前tab外的其他所有tab */ onCloseOtherTabs: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab左侧的所有tab */ onCloseLeftTabs: { type: Function as…

  史, 昂

  2024年5月23日

  1.2K000
• Oinone 7天入门到精通

  自定义组件

  1. 定义组件介绍 平台提供了大多数的通用组件，面对企业个性话需求、复杂的业务场景，我们也提供了自定义组件的能力，帮助企业更快实施业务需求。 自定义组件包含“组件画廊”“组件排序”“元件画廊”“元件属性设计”四个页面。 1.1 组件与元件 在介绍如何自定义组件前，需要先了解以下概念： 组件：页面设计的组件库中看到的是组件。每个组件都有自己的属性面板，通过属性、字段决定组件逻辑，而自定义组件就是需要构建出组件自身的属性信息，再结合业务配置组件的属性、使用组件。 一个组件在不同的业务类型、视图类型、单值/多值，其属性面板是不同的，不同业务类型、视图类型、单值/多值的组合我们成为元件，多种组合即为多个元件，所以一个组件包括多个元件。 元件：一个组件可以对应多个元件。在创建时明确元件所适用的字段业务类型、单/多值、视图类型，在画布中切换元件时，会结合当前组件的字段业务类型、单/多值、所在视图类型确定可以使用哪一个元件。 此处切换的也是元件。 示例：创建一个“下拉选”的组件，其中可以包含“下拉单选”“下拉多选”两个元件。“下拉选”组件从组件库中拖入时，设置单值时使用“下拉单选”元件，设置多值时使用“下拉多选”元件。 2. 组件管理 2.1 组件创建 在组件画廊页面，点击添加组件，在弹窗中完善信息创建组件。 2.2 组件操作 自定义组件支持“搜索、删除、作废、查看引用关系、管理元件、编辑、低无一体、排序”的操作。 搜索：默认搜索可见组件，可切换“全部、可用、废弃”搜索组件，也可使用组件名称搜索。 删除：若组件未被引用，则可以直接删除。 作废：组件作废后，不可在画布中展示，不可在组件切换时使用，但已使用的数据不影响。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当组件无引用关系时才支持删除。 管理元件：点击进入元件的管理页面。 编辑：可修改组件名称、组件图表、组件描述。 低无一体：比较复杂，在第5章中单独讲解。 排序：进入排序页，可拖动排序自定义组件。自定义组件会插在系统组件之后。可以点击“查看排序结果”选项页查看最终排序结果。排序同样会更新画布中的组件库顺序。 3. 元件管理 3.1 元件创建 在元件画廊页面，点击添加元件，在弹窗中完善信息创建一个元件。 3.2 元件操作 元件支持“删除、作废、查看引用关系、编辑、设计元件属性”的操作。 删除：若元件未被引用，则可以直接删除。 作废：元件作废后，不影响原来已使用的元件，无法新添加、使用该元件。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当元件无引用关系时才支持删除。此处的引用关系数量会小于等于组件引用关系的数量。 编辑：可修改元件名称、支持视图类型、元件描述。 设计元件属性：比较复杂，将在第4章中单独讲解。 4. 设计元件属性 元件属性设计页面主要操作集中在这三部分，分别是①视图切换②属性面板设计区③复制功能 视图切换：元件创建时选择的支持视图类型，在①区域平铺可切换对应视图的属性面板进行设计。 属性面板设计区：可将组件拖入属性面板设计区进行设计，设计的是自定义组件的属性面板，左侧组件库和页面设计的组件库相同，仍然支持创建字段或使用模型字段，右侧进行元数据面板、属性面板设置。 复制功能：可将已设置好的属性面板复制到其他视图，提高设计效率。 5. 低无一体 低无一体简单讲就是组件代码上传，通过载入代码使组件在设计页面和实现页面可见和交互。 系统内置的属性不满足需求时，要用低无一体写代码，定制属性，比如从模型中拖拽设计就是内置的属性，从组件库中设置，就要配合低无一体，否则无效。 首次进入组件设计或组件中的元件变更时需要生成SDK。 生成结束后展示SDK生成时间，并且“下载模版工程”按钮可用。 点击下载模版工程，会自动下载模板工程。 在模版工程中编写前端代码。 根据实际需求上传JS、CSS文件后提交即可。

  史, 昂

  2024年6月20日

  1.6K000
• Oinone 7天入门到精通

  4.1.20 框架之Session

  在日常开发中，我们经常需要把一些通用的信息放入程序执行的上下文中，以便业务开发人员快速获取。那么oinone的PamirsSession就是来解决此类问题的。 一、PamirsSession介绍 在oinone的体系中PamirsSession是执行上下文的承载，您能从中获取业务基础信息、指令信息、元数据信息、环境信息、请求参数，以及前后端MessageHub等。在前面的学习过程中我们已经多次接触到了如何使用PamirsSession： 在4.1.19【框架之网关协议-后端占位符】一文中，使用PamirsSession.getUserId()来获取当前登入用户Id，诸如此类的业务基础信息； 在4.1.18【框架之网关协议-variables变量】一文中，使用PamirsSession.getRequestVariables()得到PamirsRequestVariables对象，进而获取前端请求的相关信息； 在4.1.5【模型之持久层配置】一文中，使用PamirsSession.directive(),来操作元位指令系统，进而影响执行策略； 在4.1.13【Action之校验】、3.4.1【构建第一个Function】等文章中，都用到PamirsSession.getMessageHub()来设置返回消息。 二、构建模块自身Session（举例） 不同的应用场景对PamirsSession的诉求是不一样的，这个时候我们就可以去扩展PamirsSession来达到我们的目的 构建模块自身Session的步骤 构建自身特有的数据结构XSessionData 对XSessionData进行线程级缓存封装 利用Hook机制初始化XSessionData并放到ThreadLocal中 定义自身XSessionApi 实现XSessionApi接口、SessionClearApi。在请求结束时会调用SessionClearApi的clear方法 定义XSession继承PamirsSession 扩展PamirsSession的经典案例设计图 图4-1-20-1 扩展PamirsSession的经典案例设计图 构建Demo应用自身Session 下面的例子为给Session放入当前登陆用户 Step1 新建DemoSessionData类 构建自身特有的数据结构DemoSessionData，增加一个模型为PamirsUser的字段user，DemoSessionData用Data注解，注意要用Oinone平台提供的@Data package pro.shushi.pamirs.demo.core.session; import pro.shushi.pamirs.meta.annotation.fun.Data; import pro.shushi.pamirs.user.api.model.PamirsUser; @Data public class DemoSessionData { private PamirsUser user; } 图4-1-20-2 新建DemoSessionData类 Step2 新建DemoSessionCache 对DemoSessionData进行线程级缓存封装 package pro.shushi.pamirs.demo.core.session; import pro.shushi.pamirs.meta.api.CommonApiFactory; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.model.PamirsUser; import pro.shushi.pamirs.user.api.service.UserService; public class DemoSessionCache { private static final ThreadLocal<DemoSessionData> BIZ_DATA_THREAD_LOCAL = new ThreadLocal<>(); public static PamirsUser getUser(){ return BIZ_DATA_THREAD_LOCAL.get()==null?null:BIZ_DATA_THREAD_LOCAL.get().getUser(); } public static void init(){ if(getUser()!=null){ return ; } Long uid = PamirsSession.getUserId(); if(uid == null){ return; } PamirsUser user = CommonApiFactory.getApi(UserService.class).queryById(uid); if(user!=null){ DemoSessionData demoSessionData = new DemoSessionData(); demoSessionData.setUser(user); BIZ_DATA_THREAD_LOCAL.set(demoSessionData); } } public static void clear(){ BIZ_DATA_THREAD_LOCAL.remove(); } } 图4-1-20-3 对DemoSessionData进行线程级缓存封装 Step3 新建DemoSessionHook 利用Hook机制，调用DemoSessionCache的init方法初始化DemoSessionData并放到ThreadLocal中。 @Hook(module= DemoModule.MODULE_MODULE), 规定只有增对DemoModule模块访问的请求该拦截器才会生效，不然其他模块的请求都会被DemoSessionHook拦截。 package pro.shushi.pamirs.demo.core.hook; import org.springframework.stereotype.Component; import pro.shushi.pamirs.demo.api.DemoModule; import pro.shushi.pamirs.demo.core.session.DemoSessionCache; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookBefore; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class DemoSessionHook implements HookBefore { @Override @Hook(priority = 1,module = DemoModule.MODULE_MODULE) public Object run(Function function, Object… args) { DemoSessionCache.init(); return function; } } 图4-1-20-4 新建DemoSessionHook Step4 新建DemoSessionApi package pro.shushi.pamirs.demo.core.session; import pro.shushi.pamirs.meta.api.CommonApi; import pro.shushi.pamirs.user.api.model.PamirsUser; public interface DemoSessionApi extends CommonApi { PamirsUser getUser(); } 图4-1-20-5 新建DemoSessionApi Step5…

  史, 昂

  2024年5月23日

  1.3K000

• 4.2 前端高级特性

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.7K000

• 4.1.12 函数之内置函数与表达式

  本文意在列全所有内置函数与表达式，方便大家查阅。 一、内置函数 内置函数是系统预先定义好的函数，并且提供表达式调用支持。 通用函数 数学函数 表达式 名称 说明 ABS 绝对值 函数场景: 表达式函数示例: ABS(number)函数说明: 获取number的绝对值 FLOOR 向下取整 函数场景: 表达式函数示例: FLOOR(number)函数说明: 对number向下取整 CEIL 向上取整 函数场景: 表达式函数示例: CEIL(number)函数说明: 对number向上取整 ROUND 四舍五入 函数场景: 表达式函数示例: ROUND(number)函数说明: 对number四舍五入 MOD 取余 函数场景: 表达式函数示例: MOD(A,B)函数说明: A对B取余 SQRT 平方根 函数场景: 表达式函数示例: SQRT(number) 函数说明: 对number平方根 SIN 正弦 函数场景: 表达式函数示例: SIN(number)函数说明: 对number取正弦 COS 余弦 函数场景: 表达式函数示例: COS(number)函数说明: 对number取余弦 PI 圆周率 函数场景: 表达式函数示例: PI() 函数说明: 圆周率 ADD 相加 函数场景: 表达式函数示例: ADD(A,B)函数说明: A与B相加 SUBTRACT 相减 函数场景: 表达式函数示例: SUBTRACT(A,B)函数说明: A与B相减 MULTIPLY 乘积 函数场景: 表达式函数示例: MULTIPLY(A,B)函数说明: A与B相乘 DIVIDE 相除 函数场景: 表达式函数示例: DIVIDE(A,B)函数说明: A与B相除 MAX 取最大值 函数场景: 表达式函数示例: MAX(collection) 函数说明: 返回集合中的最大值，参数collection为集合或数组 MIN 取最小值 函数场景: 表达式函数示例: MIN(collection) 函数说明: 返回集合中的最小值，参数collection为集合或数组 SUM 求和 函数场景: 表达式函数示例: SUM(collection)函数说明: 返回对集合的求和，参数collection为集合或数组 AVG 取平均值 函数场景: 表达式函数示例: AVG(collection)函数说明: 返回集合的平均值，参数collection为集合或数组 COUNT 计数 函数场景: 表达式函数示例: COUNT(collection)函数说明: 返回集合的总数，参数collection为集合或数组 UPPER_MONEY 大写金额 函数场景: 表达式函数示例: UPPER_MONEY(number)函数说明: 返回金额的大写，参数number为数值或数值类型的字符串 表4-1-12-1 数学函数 文本函数 表达式 名称 说明 TRIM 空字符串过滤 函数场景: 表达式函数示例: TRIM(text)函数说明: 去掉文本字符串text中的首尾空格，文本为空时，返回空字符串 IS_BLANK 是否为空字符串 函数场景: 表达式函数示例: IS_BLANK(text)函数说明: 判断文本字符串text是否为空 STARTS_WITH 是否以指定字符串开始 函数场景: 表达式函数示例: STARTS_WITH(text,start)函数说明: 判断文本字符串text是否以文本字符串start开始，文本为空时，按照空字符串处理 ENDS_WITH 是否以指定字符串结束 函数场景: 表达式函数示例: ENDS_WITH(text,start)函数说明: 判断文本字符串text是否以文本字符串end结束，文本为空时，按照空字符串处理 CONTAINS 包含 函数场景: 表达式函数示例: CONTAINS(text,subtext)函数说明: 判断文本字符串text是否包含文本字符串subtext，文本text为空时，按照空字符串处理 LOWER 小写 函数场景: 表达式函数示例: LOWER(text)函数说明: 小写文本字符串text，文本为空时，按照空字符串处理 UPPER 大写 函数场景: 表达式函数示例: UPPER(text)函数说明: 大写文本字符串text，文本为空时，按照空字符串处理 REPLACE 替换字符串 函数场景: 表达式函数示例: REPLACE(text,oldtext,newtext)函数说明: 使用文本字符串newtext替换文本字符串text中的文本字符串oldtext…

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.3K000