此教程适合若依前后端分离项目,其他项目可以在扩展列表中进行查找。
近期公司里需要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能,当然这个重任也是落在了我的身上(不然也不会有这篇文章),然后我在官网看到了RuoYi-Vue-Flowable这个项目,按照文档提供的迁移方式对于我们这个老版本的项目来说无法正常运行,所以我联系了作者并更新了一下文档,打算在网上在发布一篇(毕竟有的人懒得看官方文档)。
官方项目地址:https://gitee.com/tony2y/RuoYi-flowable
把项目拉到本地后下面开始整合教程,整合教程分为前端和后端两个模块。
前端迁移流程
1.flowale功能页面相关内容迁移
1.1 把目录ruoyi-ui/src/views/下的flowable文件夹移动到你自己前端项目中的/src/views/文件下。
1.2 移动页面配套的js文件,将ruoyi-ui/src/api/下的flowable文件夹移动到自己项目中的/src/api/文件下。
2.flowale流程设计器相关内容迁移
将ruoyi-ui/src/components目录下的customBpmn,flow,parser,Process,render,tinymce文件夹移动到自己项目中的/src/components文件下。
3.表单设计器与人员选择模块相关文件迁移
3.1 将ruoyi-ui/src/views/tool中的build文件夹移动到自己项目中的/src/views/tool文件下,存在则覆盖。
3.2 迁移表单设计器相关样式,将ruoyi-ui/src下的styles文件移动到自己项目中的/src文件夹下。
3.3 修改ruoyi-ui/src/utils/index.js中的deepClone函数。
修改为如下内容,存在该函数做修改,不存在做新增。
// 深拷贝对象
export function deepClone(obj) {
const _toString = Object.prototype.toString
// null, undefined, non-object, function
if (!obj || typeof obj !== 'object') {
return obj
}
// DOM Node
if (obj.nodeType && 'cloneNode' in obj) {
return obj.cloneNode(true)
}
// Date
if (_toString.call(obj) === '[object Date]') {
return new Date(obj.getTime())
}
// RegExp
if (_toString.call(obj) === '[object RegExp]') {
const flags = []
if (obj.global) { flags.push('g') }
if (obj.multiline) { flags.push('m') }
if (obj.ignoreCase) { flags.push('i') }
return new RegExp(obj.source, flags.join(''))
}
const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
for (const key in obj) {
result[key] = deepClone(obj[key])
}
return result
} 更多文章请关注《万象专栏》
转载请注明出处:https://www.wanxiangsucai.com/read/cv178977
下一篇:前端页面后端代码查找指南