1. Oinone社区首页
  2. 未分类

3.5.7 前端组件自定义(初级篇)

梁, 丁 • • 未分类 • 阅读 993

Oinone社区 作者：梁, 丁原创文章，如若转载，请注明出处：https://doc.oinone.top/other/12756.html

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

赞 (0)
梁, 丁的头像梁, 丁数式管理员
0 0
上一篇 2024年5月23日 am10:23
下一篇 2024年5月23日

相关推荐

  • 流程和任务状态说明文档 未分类

    流程和任务状态说明文档

    一、工作流实例状态说明 INIT：新的流程创建时，执行工作流实例前的状态。 PROCESSING：发起的新的流程之后，结束之前的状态。 FINISHED：整个流程结束后的状态。 ERROR：流程异常时的状态。 RECALL: 撤销流程实例时的状态 CLOSE：关闭流程实例时（流程撤销）的状态。 一、工作流实例通过状态说明 FILLED：流程走到填写节点，填写人填写过后的状态。 PASS：审批同意操作后的状态。 REJECT：审批结果被拒绝（审批节点结束后）的状态。 ING：新的流程创建时，执行工作流实例前的状态。 ERROR：流程异常时的状态。 RECALL：撤销流程实例时的状态。 RECALL_PASS：无 RECALL_REJECT：无 RECALL_FILLED：无 FALLBACK：已退回时标识抄送/工作流实例为已退回时的状态。 FALLBACK_PASS：无 FALLBACK_REJECT：无 FALLBACK_FILLED：无 TRANSFER：无 CLOSE：关闭流程实例时（（流程撤销））的状态。

    yexiu的头像 yexiu
    2025年6月24日
    32000
  • 开放应用中的ip黑白名单 未分类

    开放应用中的ip黑白名单

    IP白名单配置 入口：集成应用>开放管理>应用>授权调整>IP白名单配置 IP白名单取请求头中的X-Forwarded-For属性的最后一个值，X-Forwarded-For以英文,分割ip地址。 X-Forwarded-For: clientIP, proxy1IP, proxy2IP, …, proxyNIP 根据 RFC 7239 标准所述，X-Forwarded-For含义如下： clientIP：最左边的 IP，表示最初发起请求的客户端 IP（即真实用户 IP）。 proxyXIP：从左往右依次为中间各级代理服务器的 IP。 最右边的 IP：表示离当前 Web 服务器最近的一层代理服务器（IP白名单拦截的此IP）。 Nginx配置示例 以Nginx为例，为确保X-Forwarded-For拿到的是真实的IP地址，需要增加配置。 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; IP黑名单配置 入口：集成应用>开放管理>应用>黑名单 取值来源：从请求头 X-Real-IP 中提取客户端 IP。 验证逻辑： 若 X-Real-IP 不存在，直接拦截并返回异常提示：未获取到真实IP地址。 检查提取的 IP 是否在阻止列表中。 相关文章 IP黑白名单实现拦截三方用户

    夜神月的头像 夜神月
    2025年5月15日
    33100
  • Excel导出模块翻译值 未分类

    Excel导出模块翻译值

    由于目前翻译资源导出只可以导出应用资源，无法导出模块资源，所以暂时提供以下方法导出模块资源。6.2.11、5.7.4.20 之前版本验证 方案一： 导出环境覆盖以下类 package pro.shushi.pamirs.translate.template.imports; import com.alibaba.fastjson.JSON; import com.google.common.collect.Lists; import org.apache.commons.collections4.CollectionUtils; import org.apache.commons.lang3.StringUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.context.ExcelDefinitionContext; import pro.shushi.pamirs.file.api.entity.ExcelExportFetchDataContext; import pro.shushi.pamirs.file.api.extpoint.impl.DefaultExcelExportFetchDataExtPoint; import pro.shushi.pamirs.file.api.model.ExcelExportTask; import pro.shushi.pamirs.framework.connectors.data.sql.Pops; import pro.shushi.pamirs.framework.connectors.data.sql.query.LambdaQueryWrapper; import pro.shushi.pamirs.framework.connectors.data.sql.query.QueryWrapper; import pro.shushi.pamirs.meta.annotation.Ext; import pro.shushi.pamirs.meta.annotation.ExtPoint; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.api.Models; import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper; import pro.shushi.pamirs.meta.common.lambda.LambdaUtil; import pro.shushi.pamirs.meta.common.util.PStringUtils; import pro.shushi.pamirs.meta.constant.SqlConstants; import pro.shushi.pamirs.meta.domain.module.ModuleDefinition; import pro.shushi.pamirs.resource.api.enmu.TranslationApplicationScopeEnum; import pro.shushi.pamirs.resource.api.model.ResourceTranslation; import pro.shushi.pamirs.resource.api.model.ResourceTranslationItem; import pro.shushi.pamirs.translate.constant.TranslateConstants; import pro.shushi.pamirs.translate.proxy.TranslationItemExportProxy; import pro.shushi.pamirs.translate.service.TranslationDslNodeVisitor; import pro.shushi.pamirs.translate.template.TranslateTemplate; import pro.shushi.pamirs.translate.utils.UniversalParser; import java.util.*; import java.util.stream.Collectors; import static pro.shushi.pamirs.translate.constant.TranslateConstants.FIELD_TO_EXCLUDE; /** * @author Adamancy Zhang * @date 2020-11-04 18:09 */ @Slf4j @Component @Ext(ExcelExportTask.class) @SuppressWarnings({"unchecked"}) public class ResourceTranslationExportExtPoint extends DefaultExcelExportFetchDataExtPoint { private String resLangCodeColumn = PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(ResourceTranslationItem::getResLangCode)); private String langCodeColumn = PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(ResourceTranslationItem::getLangCode)); private String moduleColumn = PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(ResourceTranslationItem::getModule)); @Override @ExtPoint.Implement(expression = "context.name=="" + TranslateTemplate.TEMPLATE_NAME + "" && context.model=="" + ResourceTranslation.MODEL_MODEL + """) public List<Object> fetchExportData(ExcelExportTask exportTask, ExcelDefinitionContext context) { ArrayList<Object> objects = new ArrayList<>(); Map<String, Object> queryData = exportTask.getConditionWrapper().getQueryData(); TranslationItemExportProxy data = JSON.parseObject(JSON.toJSONString(queryData), TranslationItemExportProxy.class); LambdaQueryWrapper<TranslationItemExportProxy> queryWrapper = Pops.<TranslationItemExportProxy>lambdaQuery() .from(TranslationItemExportProxy.MODEL_MODEL) .eq(StringUtils.isNotBlank(data.getModule()), ResourceTranslationItem::getModule, data.getModule()) .eq(ResourceTranslationItem::getResLangCode, TranslateConstants.RES_LANG_CODE) .eq(StringUtils.isNotBlank(data.getLangCode()), ResourceTranslationItem::getLangCode, data.getLangCode()) .eq(data.getState() != null, ResourceTranslationItem::getState, data.getState()) .like(StringUtils.isNotBlank(data.getResLangInclude()), ResourceTranslationItem::getOrigin, data.getResLangInclude()) .like(StringUtils.isNotBlank(data.getTargetInclude()), ResourceTranslationItem::getTarget, data.getResLangInclude()); Map<String, String> moduleNameMap = Models.origin().queryListByWrapper(Pops.<ModuleDefinition>lambdaQuery() .from(ModuleDefinition.MODEL_MODEL) .eq(StringUtils.isNotBlank(data.getModule()), ModuleDefinition::getModule, data.getModule())) .stream() .collect(Collectors.toMap(ModuleDefinition::getModule, ModuleDefinition::getDisplayName, (_a, _b)…

    yexiu的头像 yexiu
    2025年8月21日
    30400
  • 数式Oinone 前后端标准开发流程 未分类

    数式Oinone 前后端标准开发流程

    shao的头像 shao
    2024年6月7日
    86500
  • 前端自定义组件之锚点分组 未分类

    前端自定义组件之锚点分组

    本文将讲解如何通过自定义，实现锚点组件。这个锚点组件会根据界面设计器拖入的分组，动态解析出锚点。 实现路径 整体的实现思路是界面设计器拖个容器类的组件（这里以选项卡为例），自定义这个选项卡，往选项卡里拖拽的每个分组，每个锚点的名称是分组的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在选项页里拖拽任意多个分组。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的锚点分组组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderGroups，通过 DslRender.render 方法渲染界面设计器拖拽的分组。 import { BasePackWidget, DslDefinition, DslRender, SPI, Widget } from '@oinone/kunlun-dependencies'; import TabsParseGroup from './TabsParseGroup.vue'; function fetchGroupChildren(widgets?: DslDefinition[], level = 1): DslDefinition[] { if (!widgets) { return []; } const children: DslDefinition[] = []; for (const widget of widgets) { if (widget.widget === 'group') { children.push(widget); } else if (level >= 1) { fetchGroupChildren(widget.widgets, level – 1).forEach((child) => children.push(child)); } } return children; } @SPI.ClassFactory( BasePackWidget.Token({ widget: 'TabsParseGroup' }) ) export class TabsParseGroupWidget extends BasePackWidget { public initialize(props) { super.initialize(props); this.setComponent(TabsParseGroup); return this; } // 获取分组的子元素 public get groupChildren(): DslDefinition[] { return fetchGroupChildren(this.template?.widgets); } @Widget.Reactive() public get groupTitles() { return this.groupChildren.map((group) => group.title); } // 根据容器子元素渲染左侧 @Widget.Method() public renderGroups() { if (this.groupChildren && this.groupChildren.length) { return this.groupChildren.map((group) => DslRender.render(group)); } } } vue组件核心内容是用component :is属性，渲染出配置的分组组件 <template> <div class="TabsParseGroup"> <a-anchor :affix="false"> <a-anchor-link v-for="(item, index) in groupTitles" :href="`#default-group-${index}`" :title="item" /> </a-anchor> <div v-for="(item, index) in groupComponents" :id="`default-group-${index}`"> <component :is="item" /> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, PropType } from 'vue'; export default…

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

Leave a Reply

登录后才能评论