基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

      因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

1、package.json文件需要增加相关流程组件,如下

"dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@highlightjs/vue-plugin": "^2.1.2",
    "@vueup/vue-quill": "1.2.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "5.1.10",
  
    "bpmn-js": "^8.10.0",
    "bpmn-js-task-resize": "^1.2.0",
    "bpmn-js-token-simulation": "^0.10.0",
    "codemirror-editor-vue3": "^2.4.1",
    "element-plus": "^2.5.6",
    "path-browserify": "^1.0.1",
    "path-to-regexp": "^6.2.1",
    "qs": "^6.11.2",
3.1.0",
    "xe-utils": "3.5.14",
    "xml-js": "1.6.11",
  },

2、建立专门的flowable注册组件文件 registerFlowableComp.ts

//注册flowable相关组件 add by nbacheng
import ElementPlus from 'element-plus';
import locale from 'element-plus/es/locale/lang/zh-cn'; // 中文语言
import 'element-plus/theme-chalk/dark/css-vars.css';
import ElementIcons from '@/plugins/svgicon';

import VForm3 from '@/lib/vform/designer.umd.js';
import '@/lib/vform/designer.style.css';

// 高亮highlightjs
import 'highlight.js/lib/common';
import 'highlight.js/styles/atom-one-dark-reasonable.css';// 引入内置样式
import highlightPlugin from "@highlightjs/vue-plugin";
// add by nbacheng

export async function registerFlowableComp(app: App) {
  app.use(ElementIcons);
  app.use(VForm3);
  app.use(highlightPlugin);
  // 使用element-plus 并且设置全局的大小
  app.use(ElementPlus, {
    locale: locale
  });
}

3、main.ts修改如下:

import App from './App.vue';
import { createApp } from 'vue';
import { initAppConfigStore } from '/@/logics/initAppConfig';
import { setupErrorHandle } from '/@/logics/error-handle';
import { router, setupRouter } from '/@/router';
import { setupRouterGuard } from '/@/router/guard';
import { setupStore } from '/@/store';
import { setupGlobDirectives } from '/@/directives';
import { setupI18n } from '/@/locales/setupI18n';
import { registerGlobComp } from '/@/components/registerGlobComp';
import { registerFlowableComp } from '/@/settings/registerFlowableComp';
import { registerThirdComp } from '/@/settings/registerThirdComp';
import { useSso } from '/@/hooks/web/useSso';
// 注册online模块lib
import { registerPackages } from '/@/utils/monorepo/registerPackages';

import 'uno.css';
import '/@/design/index.less';
import 'ant-design-vue/dist/reset.css';

// 注册图标
import 'virtual:svg-icons-register';

async function bootstrap() {
  // 创建应用实例
  const app = createApp(App);
  
  // 多语言配置,异步情况:语言文件可以从服务器端获得
  await setupI18n(app);

  // 配置存储
  setupStore(app);

  // 初始化内部系统配置
  initAppConfigStore();

  // 注册外部模块路由(注册online模块lib)
  registerPackages(app);

  // 注册全局组件
  registerGlobComp(app);
  
  //CAS单点登录
  await useSso().ssoLogin();

  // 配置路由
  setupRouter(app);

  // 路由保护
  setupRouterGuard(router);

  // 注册全局指令
  setupGlobDirectives(app);

  // 配置全局错误处理
  setupErrorHandle(app);
  
  //注册flowable组件
  await registerFlowableComp(app);

  // 注册第三方组件
  await registerThirdComp(app);

  // 当路由准备好时再执行挂载( https://next.router.vuejs.org/api/#isready)
  await router.isReady();

  // 挂载应用
  app.mount('#app', true);

  console.log(" vue3 app 加载完成!")
}

bootstrap();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/639133.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

设备管理全解析:从选购到报废的全方位指南

在现代企业快速发展、智能化运营过程中,企业设备管理是保障生产连续性和效率的核心环节,其重要性不言而喻。然而,许多企业在设备管理内容流程方面仍然使用传统管理办法,这不仅影响了生产效率,也增加了不必要的成本。那…

二叉树创建与销毁操作详解

目录 一、通过前序遍历的数组构建二叉树 1.1 递归思路 1.2 递归分支图 1.3 递归栈帧图 1.4 C语言实现 二、二叉树的销毁 2.1 递归思路 2.2 递归分支图 2.3 递归栈帧图 2.4 C语言实现 一、通过前序遍历的数组构建二叉树 牛客网链接:二叉树遍历_牛客题霸_牛…

Spring ----> IOC

文章目录 一、 Spring 是一个包含众多工具的IoC容器二、 什么是IOC以及好处三、 如何实现loc思想四、Spring提供的实现loC的方法 --- 类注解方法注解4.1 类注解类注解概念介绍类注解的使用 4.2 方法注解Bean 一、 Spring 是一个包含众多工具的IoC容器 场景解析:首先…

分布式事务解决方案(强一致性)

强一致性事务概述 分布式事务领域,最早采用的是符合CAP理论的强一致性事务方案来解决分布式事务问题,强一致性分布式事务要求在任意时刻查询参与全局事务的各个节点的数据都是一致的 典型案例: 包括DTP模型(全局事务模型&#x…

微软Power Automate平台将引入AI工作流

最近的微软 Build 大会展示了许多新的计划和增强功能,特别是围绕将 AI 集成到微软的产品和平台中。一个重点是扩展 Microsoft Copilot 在各种应用和服务中的功能。此外,微软还宣布对 Azure AI 进行了重大更新,旨在使云计算更加有用。虽然在 B…

aws eks理解和使用podidentity为pod授权

参考链接 https://www.amazonaws.cn/new/2024/amazon-eks-introduces-eks-pod-identity/https://aws.amazon.com/cn/blogs/aws/amazon-eks-pod-identity-simplifies-iam-permissions-for-applications-on-amazon-eks-clusters/ 先决条件 集群版本需要符合要求,如果…

SBC3568启动升级,灵活更换动画logo

今天小智将会带着大家体验如何在openharmony sdk内替换开机logo和动态动画。 1. 更换开机logo 开机logo分为uboot阶段【logo.bmp】和kernel阶段【logo_kernel.bmp】的logo两个文件,对图片的要求是:必须为bmp格式,8或者24位深,且…

3、md5比较绕过

青少年ctf:EasyMD5 1、页面是一个上传页面 2、上传两个txt文件,bp抓包 3、go发现提示要PDF文件 4、将文件类型改成PDF类 5、改文件类型提示MD5,也看出它是将文件里的内容读取比较 6、改成s878926199a和QNKCDZO 猜测后端源码: if…

Servlet的response对象

目录 HTTP响应报文协议 reponse继承体系 reponse的方法 响应行 public void setStatus(int sc) 响应头 public void setHeader(String name, String value) 响应体 public java.io.PrintWriter getWriter() public ServletOutputStream getOutputStream() 请求重定…

【东山派Vision K510开发板试用笔记】nncase的安装

概述 最近试用了百问网提供的东山派Vision开发板,DongshanPI-Vision开发板是百问网针对AI应用开发设计出来的一个RSIC-V架构的AI开发板,主要用于学习使用嘉楠的K510芯片进行Linux项目开发和嵌入式AI应用开发等用途。DongshanPI-Vision开发板采用嘉楠公司…

【区块链】fisco节点运维 更新ing

基于已完成的区块链系统与管理平台搭建工作,开展区块链节点的加入与退出运维工作,具体内容如下 以下只是举例子讲 如果有其他修改没举例出来可以留言 私信 主要以比赛出题的形式讲 区块链节点输出等级为警告级,并设置日志存储阈值为100MB并…

自编译frida得一些记录

frida编译 这个过程坑肯定很多 但是只要大方向对得,解决掉每个小错误达到目的就ok得 # 就是想自己把frida代码done下来改一改 然后看看git clone gitgithub.com:frida/frida.git git fetch git checkout 14.1.3# 下载node包管理工具 apt install nvm nvm install …

脆皮之“字符函数与字符串函数”宝典

hello,大家好呀,感觉我之前有偷偷摸鱼了,今天又开始学习啦。加油!!! 文章目录 1. 字符分类函数2. 字符转换函数3. strlen的使用和模拟实现3.1 strlen 的使用3.1 strlen 的模拟1.计算器方法2.指针-指针的方…

探索LangGraph:如何创建一个既智能又可控的航空客服AI

这种设计既保持了用户控制权,又确保了对话流程的顺畅。但随着工具数量的增加,单一的图结构可能会变得过于复杂。我们将在下一节中解决这个问题。 第三部分的图将类似于下面的示意图: 状态定义 首先,定义图的状态。我们的状态和L…

Blazor 下支持 Azure AD 的多套登录方案

比如上图配置了两套不同的登录方案,各有自己的 TenantId 和 ClientId ,要同时支持他们的登录(其实在同一套 TenantId 和 ClientId 里面配置多个登录账户不就好了,但是......那套登录的管理是在客户自己的Azure AD账户管理下的&…

Python数据可视化(七)

绘制 3D 图形 到目前为止,我们一直在讨论有关 2D 图形的绘制方法和绘制技术。3D 图形也是数据可视化的 一个很重要的应用方面,我们接下来就重点讲解有关 3D 图形的实现方法。绘制 3D 图形通常需要导 入 mpl_toolkits 包中的 mplot3d 包的相关模块&#x…

【openlayers系统学习】3.6-3.7添加可视化选择器,手动选择可视化的图像源

六、添加可视化选择器(选择可视化的图像类型) 在前面的示例中,我们已经看到了同一Sentinel-2图像的真彩色合成、假彩色合成和NDVI渲染。如果能让用户从这些可视化中选择一个或更多,而不必每次都更改我们的代码,那就太…

2024年顶级算法-黑翅鸢优化算法(BKA)-详细原理(附matlab代码)

黑翅鸢是一种上半身蓝灰色,下半身白色的小型鸟类。它们的显著特征包括迁徙和捕食行为。它们以小型哺乳动物、爬行动物、鸟类和昆虫为食,具有很强的悬停能力,能够取得非凡的狩猎成功。受其狩猎技能和迁徙习惯的启发,该算法作者建立…

C++利用TinyXML读取XML文件

TinyXML是什么? TinyXML是一个轻量级的C XML解析器,它提供了一种简单的方法来解析和操作XML文档。TinyXML被设计为易于使用和集成到C项目中,并且非常适合处理小型XML文件。 以下是TinyXML的一些主要特点和优点: 轻量级: T…