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

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

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

(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:关闭流程实例时((流程撤销))的状态。

    2025年6月24日
    41900
  • 打印支持非存储数据导出

    介绍 平台提供的默认打印功能没有支持非存储数据的导出。我们可以自定义打印导出功能,以满足业务中个性化的需求。 实现思路 重写打印任务模型,添加业务数据字段 自定义打印动作,前端将导出数据放到业务数据字段中 使用导出数据扩展点机制修改导出数据 代码示例 继承平台的打印任务模型,加上需要业务数据字段,这个字段用于传输需要打印的表单数据,但是需要自定义打印的表单往往不止一个,所以需要定义为通用的Object字段。 @Model.model(TransientPdfPrintTask.MODEL_MODEL) @Model(displayName = "传输模型Pdf打印任务") public class TransientPdfPrintTask extends PdfPrintTask { public static final String MODEL_MODEL="demo.TransientPdfPrintTask"; @Field(displayName = "业务数据") private Object businessData; } 自定义打印动作 @Model.model(TransientPdfPrintTask.MODEL_MODEL) @Component public class TransientPdfPrintTaskAction extends AbstractPdfPrintTaskAction<TransientPdfPrintTask> { @Resource private PdfFileService pdfFileService; @Action(displayName = "打印", contextType = ActionContextTypeEnum.CONTEXT_FREE, bindingType = {ViewTypeEnum.TABLE}) @Override public TransientPdfPrintTask createPrintTask(TransientPdfPrintTask data) { return super.createPrintTask(data); } @Override protected void doExport(TransientPdfPrintTask exportTask, PdfDefinitionContext context) { pdfFileService.doExportSync(exportTask, context); } @Function.Advanced(type = FunctionTypeEnum.QUERY) @Function(openLevel = FunctionOpenEnum.API) public TransientPdfPrintTask construct(TransientPdfPrintTask data) { String model = FetchUtil.fetchVariables(PdfConstants.MODEL); data.construct(); data.setModel(model); return data; } } 本篇文章只介绍同步打印,如果异步需要修改doExport方法。 编写导出的数据处理逻辑 @Ext(PdfPrintTask.class) public class PrintExportExt extends AbstractPdfExportFetchDataExtPointImpl implements PdfExportFetchDataExtPoint { // 这里使用扩展点表达式匹配需要打印的非存储模型,只有表达式为true才会走这段逻辑。 @Override @ExtPoint.Implement(expression = "context.model==\"" + ProductPricingClientTransient.MODEL_MODEL + "\"") public List<Object> fetchExportData(PdfPrintTask exportTask, PdfDefinitionContext context) { List<Object> result = new ArrayList<>(); List<Object> dataList = new ArrayList<>(); TransientPdfPrintTask transientPdfPrintTask = new TransientPdfPrintTask(); transientPdfPrintTask.set_d(exportTask.get_d()); dataList.add(transientPdfPrintTask.getBusinessData()); result.add(dataList); return result; } } 前端自定义打印按钮,将数据提交给业务数据字段,并使用同步导出打印。

    2025年10月13日
    63300
  • 前端发布接入jenkins

    最原始的前端发布,会经过本地打包、压个 zip 包、通过工具手动上传、找到 leader 帮忙解压到对应的服务器上、同步文件服务器等等的步骤。每一个环节都是人工操作,发个版非常的繁琐。接入jenkins有助于我们简化CI/CD流程,实现前端发布自动化。 1. jenkins 安装部署(docker) 1-1 前置条件 安装 git、docker、配置 ssh git 安装 # enter 到底 yum install -y git # 查看git版本号 验证git安装成功 # git version 1.8.3.1 git –version docker 安装 # docker-ce Docker社区版 # docker-ce-cli Docker命令行界面(CLI) # containerd.io Docker插件,直接调用 Docker Compose # docker-compose-plugin Docker插件,直接调用 Docker Compose yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin 配置 ssh # Enter到底,最终会生成以下文件 # /root/.ssh/authorized_keys 允许无密码登录的公钥列表 # /root/.ssh/id_rsa 私钥文件 # /root/.ssh/id_rsa.pub 公钥文件 注意该文件里的内容是接下来要用的 ssh-keygen -t rsa -C "root" # 复制公钥文件的内容,添加到GitHub 的 SSH keys 或 任意其他远程仓库 vim /root/.ssh/id_rsa.pub 1-2 jenkins 安装 docker 拉取镜像 # 拉取nginx docker pull nginx # 拉取jenkins docker pull jenkins/jenkins:lts # 查看镜像是否安装成功 docker images # REPOSITORY TAG IMAGE ID CREATED SIZE # jenkins/jenkins lts 6a44d1dd2d60 3 weeks ago 468MB # nginx latest 53a18edff809 7 weeks ago 192MB 创建 docker 相关目录 # 创建docker的相关目录 mkdir -p ./docker/{compose,jenkins_home,nginx/conf,html/origin/{master,dev}} # 创建docker-compose.yml配置文件 cd ./docker/compose # 具体配置内容见下面 touch docker-compose.yml # 创建nginx.conf配置文件 cd ./docker/nginx/conf # 具体配置内容见下面 touch nginx.conf 最终目录结构如下 ./docker/ ├── compose/ │ └── docker-compose.yml # 空的 docker-compose 配置文件 └── html/ └── origin/ ├── master/ # 预留的 master 版本 HTML 目录(为空) └── dev/ # 预留的 dev 版本 HTML…

    2025年5月12日
    56200
  • Oinone 初级学习路径

    文档说明 文档链接 介绍Oinone前端相关知识点 前端基础学习路径 介绍Oinone后端相关知识点 后端基础学习路径 介绍平台基础组件 平台基础组件 介绍平台设计器常用场景实操 设计器基础学习路径 设计器实操案例示例 7.2 实战训练(积分发放)

    2024年6月15日
    1.2K00
  • 前端 快速查询并替换默认组件

    可以借助vue的调试工具快速找到对应的组件,请参考这篇文章 使用vue调试工具快速找到对应的组件 Mask默认组件 重写Mask组件 重写AppSwitcherWidget import Com from './com.vue' /** * SPI注册条件保持根 AppSwitcherWidget 一致,即可覆盖 */ @SPI.ClassFactory( MaskWidget.Token({ widget: 'app-switcher' }) ) export class CustomAppSwitcherWidget extends AppSwitcherWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 MenuWidget import Com from './com.vue' /** * SPI注册条件保持根 MenuWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'nav-menu' })) export class CustomMenuWidget extends MenuWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 NotificationWidget import Com from './com.vue' /** * SPI注册条件保持根 NotificationWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class CustomNotificationWidget extends NotificationWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 LanguageWidget import Com from './com.vue' /** * SPI注册条件保持根 LanguageWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'language' })) export class CustomLanguageWidget extends LanguageWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 UserWidget import Com from './com.vue' /** * SPI注册条件保持根 UserWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class CustomUserWidget extends UserWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props);…

    2025年8月14日
    68800

Leave a Reply

登录后才能评论