feat(process): 集成BPMN流程设计器功能

- 集成了 bpmn-js、bpmnlint 等流程图相关依赖包
- 配置 webpack 支持 bpmn-js 相关模块的编译
- 新增流程设计器组件及属性面板功能
- 实现流程节点解析和监听器配置功能
- 添加流程定义和部署相关的API接口
- 优化 crontab 组件中的条件判断逻辑
- 修复多个组件中的语法错误和代码规范问题

build/webpack.base.conf.js

@@ -49,7 +49,15 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader?cacheDirectory',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [
+          resolve('src'),
+          resolve('test'),
+          resolve('node_modules/webpack-dev-server/client'),
+          resolve('node_modules/bpmn-js'),
+          resolve('node_modules/diagram-js'),
+          resolve('node_modules/bpmn-js-bpmnlint'),
+          resolve('node_modules/bpmnlint')
+        ]
       },
       {
         test: /\.svg$/,

package.json

@@ -14,6 +14,12 @@
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.17.1",
+    "bpmn-js": "^11.1.0",
+    "bpmn-js-bpmnlint": "^0.15.0",
+    "bpmnlint": "^6.4.0",
+    "bpmnlint-loader": "^0.1.4",
+    "quill": "1.3.7",
+    "xcrud": "^0.4.19",
     "clipboard": "1.7.1",
     "echarts": "3.8.5",
     "element-ui": "2.15.13",

src/api/flowable/definition.js

@@ -126,7 +126,7 @@ export function updateDeployment(data) {
 export function delDeployment(deployId) {
   return request({
     url: '/flowable/definition/' + deployId,
-    method: 'delete',
+    method: 'delete'
   })
 }
 
@@ -139,7 +139,6 @@ export function exportDeployment(query) {
   })
 }
 
-
 // 查询最新流程版本
 export function selectByFlowKey(flowKey) {
   return request({
@@ -147,4 +146,4 @@ export function selectByFlowKey(flowKey) {
     method: 'get',
     params: { flowKey: flowKey }
   })
-}
+}

src/api/flowable/finished.js

@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import da from "element-ui/src/locale/lang/da";
 
 // 查询已办任务列表
 export function finishedList(query) {
@@ -32,7 +31,7 @@ export function revokeProcess(data) {
 export function deployStart(deployId) {
   return request({
     url: '/flowable/process/startFlow/' + deployId,
-    method: 'get',
+    method: 'get'
   })
 }
 

src/api/flowable/process.js

@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import da from "element-ui/src/locale/lang/da";
 
 // 我的发起的流程
 export function myProcessList(query) {
@@ -58,7 +57,7 @@ export function returnList(data) {
 export function deployStart(deployId) {
   return request({
     url: '/flowable/process/startFlow/' + deployId,
-    method: 'get',
+    method: 'get'
   })
 }
 

src/api/flowable/todo.js

@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import da from "element-ui/src/locale/lang/da";
 
 // 查询待办任务列表
 export function todoList(query) {
@@ -77,7 +76,7 @@ export function getNextFlowNodeByStart(data) {
 export function deployStart(deployId) {
   return request({
     url: '/flowable/process/startFlow/' + deployId,
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -139,5 +138,5 @@ export function claimTask(taskId) {
     data: {
       taskId: taskId
     }
-  });
+  })
 }

src/api/system/dept.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询部门列表
+export function listDept(query) {
+  return request({
+    url: '/system/dept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门下拉树结构
+export function treeselect() {
+  return request({
+    url: '/system/dept/treeselect',
+    method: 'get'
+  })
+}
+
+// 查询部门列表（排除节点）
+export function listDeptExcludeChild(deptId) {
+  return request({
+    url: '/system/dept/list/exclude/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门详细
+export function getDept(deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'delete'
+  })
+}

src/api/system/expression.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询流程达式列表
+export function listExpression(query) {
+  return request({
+    url: '/system/expression/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询流程达式详细
+export function getExpression(id) {
+  return request({
+    url: '/system/expression/' + id,
+    method: 'get'
+  })
+}
+
+// 新增流程达式
+export function addExpression(data) {
+  return request({
+    url: '/system/expression',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改流程达式
+export function updateExpression(data) {
+  return request({
+    url: '/system/expression',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除流程达式
+export function delExpression(id) {
+  return request({
+    url: '/system/expression/' + id,
+    method: 'delete'
+  })
+}

src/api/system/listener.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询流程监听列表
+export function listListener(query) {
+  return request({
+    url: '/system/listener/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询流程监听详细
+export function getListener(id) {
+  return request({
+    url: '/system/listener/' + id,
+    method: 'get'
+  })
+}
+
+// 新增流程监听
+export function addListener(data) {
+  return request({
+    url: '/system/listener',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改流程监听
+export function updateListener(data) {
+  return request({
+    url: '/system/listener',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除流程监听
+export function delListener(id) {
+  return request({
+    url: '/system/listener/' + id,
+    method: 'delete'
+  })
+}

src/api/system/menu.js

@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+
+// 查询菜单列表
+export function listMenu(query) {
+  return request({
+    url: '/system/menu/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询菜单详细
+export function getMenu(menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'get'
+  })
+}
+
+// 查询菜单下拉树结构
+export function treeselect() {
+  return request({
+    url: '/system/menu/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询菜单下拉树结构
+export function roleMenuTreeselect(roleId) {
+  return request({
+    url: '/system/menu/roleMenuTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+
+// 根据用户ID查询菜单下拉树结构
+export function userMenuTreeselect(userId) {
+  return request({
+    url: '/system/menu/userMenuTreeselect/' + userId,
+    method: 'get'
+  })
+}
+
+
+
+// 新增菜单
+export function addMenu(data) {
+  return request({
+    url: '/system/menu',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改菜单
+export function updateMenu(data) {
+  return request({
+    url: '/system/menu',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除菜单
+export function delMenu(menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'delete'
+  })
+}

src/api/system/role.js

@@ -0,0 +1,119 @@
+import request from '@/utils/request'
+
+// 查询角色列表
+export function listRole(query) {
+  return request({
+    url: '/system/role/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询角色详细
+export function getRole(roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增角色
+export function addRole(data) {
+  return request({
+    url: '/system/role',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改角色
+export function updateRole(data) {
+  return request({
+    url: '/system/role',
+    method: 'put',
+    data: data
+  })
+}
+
+// 角色数据权限
+export function dataScope(data) {
+  return request({
+    url: '/system/role/dataScope',
+    method: 'put',
+    data: data
+  })
+}
+
+// 角色状态修改
+export function changeRoleStatus(roleId, status) {
+  const data = {
+    roleId,
+    status
+  }
+  return request({
+    url: '/system/role/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除角色
+export function delRole(roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'delete'
+  })
+}
+
+// 查询角色已授权用户列表
+export function allocatedUserList(query) {
+  return request({
+    url: '/system/role/authUser/allocatedList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询角色未授权用户列表
+export function unallocatedUserList(query) {
+  return request({
+    url: '/system/role/authUser/unallocatedList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 取消用户授权角色
+export function authUserCancel(data) {
+  return request({
+    url: '/system/role/authUser/cancel',
+    method: 'put',
+    data: data
+  })
+}
+
+// 批量取消用户授权角色
+export function authUserCancelAll(data) {
+  return request({
+    url: '/system/role/authUser/cancelAll',
+    method: 'put',
+    params: data
+  })
+}
+
+// 授权用户选择
+export function authUserSelectAll(data) {
+  return request({
+    url: '/system/role/authUser/selectAll',
+    method: 'put',
+    params: data
+  })
+}
+
+// 根据角色ID查询部门树结构
+export function deptTreeSelect(roleId) {
+  return request({
+    url: '/system/role/deptTree/' + roleId,
+    method: 'get'
+  })
+}

src/api/system/user.js

@@ -0,0 +1,142 @@
+import request from '@/utils/request'
+import { parseStrEmpty } from "@/utils/ruoyi";
+
+// 查询用户列表
+export function listUser(query) {
+  return request({
+    url: '/system/user/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listUserNew(query) {
+  return request({
+    url: '/system/user/listUser',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户详细
+export function getUser(userId) {
+  return request({
+    url: '/system/user/' + parseStrEmpty(userId),
+    method: 'get'
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用户
+export function updateUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除用户
+export function delUser(userId) {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'delete'
+  })
+}
+
+// 用户密码重置
+export function resetUserPwd(userId, password) {
+  const data = {
+    userId,
+    password
+  }
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户状态修改
+export function changeUserStatus(userId, status) {
+  const data = {
+    userId,
+    status
+  }
+  return request({
+    url: '/system/user/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 查询用户个人信息
+export function getUserProfile() {
+  return request({
+    url: '/system/user/profile',
+    method: 'get'
+  })
+}
+
+// 修改用户个人信息
+export function updateUserProfile(data) {
+  return request({
+    url: '/system/user/profile',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户密码重置
+export function updateUserPwd(oldPassword, newPassword) {
+  const data = {
+    oldPassword,
+    newPassword
+  }
+  return request({
+    url: '/system/user/profile/updatePwd',
+    method: 'put',
+    params: data
+  })
+}
+
+// 用户头像上传
+export function uploadAvatar(data) {
+  return request({
+    url: '/system/user/profile/avatar',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询授权角色
+export function getAuthRole(userId) {
+  return request({
+    url: '/system/user/authRole/' + userId,
+    method: 'get'
+  })
+}
+
+// 保存授权角色
+export function updateAuthRole(data) {
+  return request({
+    url: '/system/user/authRole',
+    method: 'put',
+    params: data
+  })
+}
+
+// 查询部门下拉树结构
+export function deptTreeSelect() {
+  return request({
+    url: '/system/user/deptTree',
+    method: 'get'
+  })
+}

src/components/Crontab/day.vue

@@ -103,25 +103,25 @@ export default {
     },
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'day', this.cycleTotal)
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'day', this.averageTotal)
       }
     },
     // 最近工作日值变化时
     workdayChange() {
-      if (this.radioValue == '5') {
+      if (this.radioValue === '5') {
         this.$emit('update', 'day', this.workdayCheck + 'W')
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '7') {
+      if (this.radioValue === '7') {
         this.$emit('update', 'day', this.checkboxString)
       }
     }
@@ -154,7 +154,7 @@ export default {
     // 计算勾选的checkbox值合集
     checkboxString: function() {
       const str = this.checkboxList.join()
-      return str == '' ? '*' : str
+      return str === '' ? '*' : str
     }
   }
 }

src/components/Crontab/hour.vue

@@ -53,8 +53,8 @@ export default {
     radioChange() {
       switch (this.radioValue) {
         case 1:
-        	this.$emit('update', 'hour', '*')
-        	break
+          this.$emit('update', 'hour', '*')
+          break
         case 2:
           this.$emit('update', 'hour', this.cycleTotal)
           break
@@ -68,19 +68,19 @@ export default {
     },
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '2') {
+      if (this.radioValue === '2') {
         this.$emit('update', 'hour', this.cycleTotal)
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'hour', this.averageTotal)
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'hour', this.checkboxString)
       }
     }
@@ -107,7 +107,7 @@ export default {
     // 计算勾选的checkbox值合集
     checkboxString: function() {
       const str = this.checkboxList.join()
-      return str == '' ? '*' : str
+      return str === '' ? '*' : str
     }
   }
 }

src/components/Crontab/index.vue

@@ -179,7 +179,6 @@ export default {
     },
     // 由子组件触发，更改表达式组成的字段值
     updateCrontabValue(name, value, from) {
-      'updateCrontabValue', name, value, from
       this.crontabValueObj[name] = value
       if (from && from !== name) {
         console.log(`来自组件 ${from} 改变了 ${name} ${value}`)
@@ -188,9 +187,9 @@ export default {
     },
     // 赋值到组件
     changeRadio(name, value) {
-      let arr = ['second', 'min', 'hour', 'month'],
-        refName = 'cron' + name,
-        insValue
+      const arr = ['second', 'min', 'hour', 'month']
+      const refName = 'cron' + name
+      let insValue
 
       if (!this.$refs[refName]) return
 
@@ -215,10 +214,10 @@ export default {
           insValue = 4
           this.$refs[refName].checkboxList = value.split(',')
         }
-      } else if (name == 'day') {
+      } else if (name === 'day') {
         if (value === '*') {
           insValue = 1
-        } else if (value == '?') {
+        } else if (value === '?') {
           insValue = 2
         } else if (value.indexOf('-') > -1) {
           const indexArr = value.split('-')
@@ -246,10 +245,10 @@ export default {
           this.$refs[refName].checkboxList = value.split(',')
           insValue = 7
         }
-      } else if (name == 'week') {
+      } else if (name === 'week') {
         if (value === '*') {
           insValue = 1
-        } else if (value == '?') {
+        } else if (value === '?') {
           insValue = 2
         } else if (value.indexOf('-') > -1) {
           const indexArr = value.split('-')
@@ -275,10 +274,10 @@ export default {
           this.$refs[refName].checkboxList = value.split(',')
           insValue = 6
         }
-      } else if (name == 'year') {
-        if (value == '') {
+      } else if (name === 'year') {
+        if (value === '') {
           insValue = 1
-        } else if (value == '*') {
+        } else if (value === '*') {
           insValue = 2
         } else if (value.indexOf('-') > -1) {
           insValue = 3
@@ -343,7 +342,7 @@ export default {
         obj.month +
         ' ' +
         obj.week +
-        (obj.year == '' ? '' : ' ' + obj.year)
+        (obj.year === '' ? '' : ' ' + obj.year)
       return str
     }
   },

src/components/Crontab/min.vue

@@ -69,19 +69,19 @@ export default {
     },
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '2') {
+      if (this.radioValue === '2') {
         this.$emit('update', 'min', this.cycleTotal, 'min')
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'min', this.averageTotal, 'min')
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'min', this.checkboxString, 'min')
       }
     }
@@ -109,7 +109,7 @@ export default {
     // 计算勾选的checkbox值合集
     checkboxString: function() {
       const str = this.checkboxList.join()
-      return str == '' ? '*' : str
+      return str === '' ? '*' : str
     }
   }
 }

src/components/Crontab/month.vue

@@ -68,19 +68,19 @@ export default {
     },
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '2') {
+      if (this.radioValue === '2') {
         this.$emit('update', 'month', this.cycleTotal)
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'month', this.averageTotal)
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'month', this.checkboxString)
       }
     }
@@ -107,7 +107,7 @@ export default {
     // 计算勾选的checkbox值合集
     checkboxString: function() {
       const str = this.checkboxList.join()
-      return str == '' ? '*' : str
+      return str === '' ? '*' : str
     }
   }
 }

src/components/Crontab/result.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+/* eslint-disable no-labels */
 export default {
   data() {
     return {
@@ -125,7 +126,7 @@ export default {
           // 如果到达最大值时
           if (nDay > DDate[DDate.length - 1]) {
             resetDay()
-            if (Mi == MDate.length - 1) {
+            if (Mi === MDate.length - 1) {
               resetMonth()
               continue goYear
             }
@@ -140,9 +141,9 @@ export default {
             // 如果到达最大值时
             if (nHour > hDate[hDate.length - 1]) {
               resetHour()
-              if (Di == DDate.length - 1) {
+              if (Di === DDate.length - 1) {
                 resetDay()
-                if (Mi == MDate.length - 1) {
+                if (Mi === MDate.length - 1) {
                   resetMonth()
                   continue goYear
                 }
@@ -157,7 +158,7 @@ export default {
               continue goMonth
             }
             // 如果日期规则中有值时
-            if (this.dayRule == 'lastDay') {
+            if (this.dayRule === 'lastDay') {
               // 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
 
               if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
@@ -167,7 +168,7 @@ export default {
                   thisDD = DD < 10 ? '0' + DD : DD
                 }
               }
-            } else if (this.dayRule == 'workDay') {
+            } else if (this.dayRule === 'workDay') {
               // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
               if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
                 while (DD > 0 && this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
@@ -178,7 +179,7 @@ export default {
               // 获取达到条件的日期是星期X
               const thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
               // 当星期日时
-              if (thisWeek == 1) {
+              if (thisWeek === 1) {
                 // 先找下一个日，并判断是否为月底
                 DD++
                 thisDD = DD < 10 ? '0' + DD : DD
@@ -186,7 +187,7 @@ export default {
                 if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
                   DD -= 3
                 }
-              } else if (thisWeek == 7) {
+              } else if (thisWeek === 7) {
                 // 当星期6时只需判断不是1号就可进行操作
                 if (this.dayRuleSup !== 1) {
                   DD--
@@ -194,16 +195,16 @@ export default {
                   DD += 2
                 }
               }
-            } else if (this.dayRule == 'weekDay') {
+            } else if (this.dayRule === 'weekDay') {
               // 如果指定了是星期几
               // 获取当前日期是属于星期几
               const thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
               // 校验当前星期是否在星期池（dayRuleSup）中
               if (this.dayRuleSup.indexOf(thisWeek) < 0) {
                 // 如果到达最大值时
-                if (Di == DDate.length - 1) {
+                if (Di === DDate.length - 1) {
                   resetDay()
-                  if (Mi == MDate.length - 1) {
+                  if (Mi === MDate.length - 1) {
                     resetMonth()
                     continue goYear
                   }
@@ -211,7 +212,7 @@ export default {
                 }
                 continue
               }
-            } else if (this.dayRule == 'assWeek') {
+            } else if (this.dayRule === 'assWeek') {
               // 如果指定了是第几周的星期几
               // 获取每月1号是属于星期几
               const thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
@@ -220,7 +221,7 @@ export default {
               } else {
                 DD = this.dayRuleSup[0] * 7 + this.dayRuleSup[1] - thisWeek + 1
               }
-            } else if (this.dayRule == 'lastWeek') {
+            } else if (this.dayRule === 'lastWeek') {
               // 如果指定了每月最后一个星期几
               // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
               if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
@@ -248,11 +249,11 @@ export default {
               // 如果到达最大值时
               if (nMin > mDate[mDate.length - 1]) {
                 resetMin()
-                if (hi == hDate.length - 1) {
+                if (hi === hDate.length - 1) {
                   resetHour()
-                  if (Di == DDate.length - 1) {
+                  if (Di === DDate.length - 1) {
                     resetDay()
-                    if (Mi == MDate.length - 1) {
+                    if (Mi === MDate.length - 1) {
                       resetMonth()
                       continue goYear
                     }
@@ -269,13 +270,13 @@ export default {
                 // 如果到达最大值时
                 if (nSecond > sDate[sDate.length - 1]) {
                   resetSecond()
-                  if (mi == mDate.length - 1) {
+                  if (mi === mDate.length - 1) {
                     resetMin()
-                    if (hi == hDate.length - 1) {
+                    if (hi === hDate.length - 1) {
                       resetHour()
-                      if (Di == DDate.length - 1) {
+                      if (Di === DDate.length - 1) {
                         resetDay()
-                        if (Mi == MDate.length - 1) {
+                        if (Mi === MDate.length - 1) {
                           resetMonth()
                           continue goYear
                         }
@@ -296,17 +297,17 @@ export default {
                     nums++
                   }
                   // 如果条数满了就退出循环
-                  if (nums == 5) break goYear
+                  if (nums === 5) break goYear
                   // 如果到达最大值时
-                  if (si == sDate.length - 1) {
+                  if (si === sDate.length - 1) {
                     resetSecond()
-                    if (mi == mDate.length - 1) {
+                    if (mi === mDate.length - 1) {
                       resetMin()
-                      if (hi == hDate.length - 1) {
+                      if (hi === hDate.length - 1) {
                         resetHour()
-                        if (Di == DDate.length - 1) {
+                        if (Di === DDate.length - 1) {
                           resetDay()
-                          if (Mi == MDate.length - 1) {
+                          if (Mi === MDate.length - 1) {
                             resetMonth()
                             continue goYear
                           }
@@ -325,7 +326,7 @@ export default {
         }// goMonth
       }
       // 判断100年内的结果条数
-      if (resultArr.length == 0) {
+      if (resultArr.length === 0) {
         this.resultList = ['没有达到条件的结果！']
       } else {
         this.resultList = resultArr
@@ -375,7 +376,7 @@ export default {
     // 获取"日"数组-主要为日期规则
     getWeekArr(rule) {
       // 只有当日期规则的两个值均为“”时则表达日期是有选项的
-      if (this.dayRule == '' && this.dayRuleSup == '') {
+      if (this.dayRule === '' && this.dayRuleSup === '') {
         if (rule.indexOf('-') >= 0) {
           this.dayRule = 'weekDay'
           this.dayRuleSup = this.getCycleArr(rule, 7, false)
@@ -384,14 +385,14 @@ export default {
           const matchRule = rule.match(/[0-9]{1}/g)
           this.dayRuleSup = [Number(matchRule[1]), Number(matchRule[0])]
           this.dateArr[3] = [1]
-          if (this.dayRuleSup[1] == 7) {
+          if (this.dayRuleSup[1] === 7) {
             this.dayRuleSup[1] = 0
           }
         } else if (rule.indexOf('L') >= 0) {
           this.dayRule = 'lastWeek'
           this.dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)[0])
           this.dateArr[3] = [31]
-          if (this.dayRuleSup == 7) {
+          if (this.dayRuleSup === 7) {
             this.dayRuleSup = 0
           }
         } else if (rule !== '*' && rule !== '?') {
@@ -422,7 +423,7 @@ export default {
       } else if (rule !== '*' && rule !== '?') {
         this.dateArr[3] = this.getAssignArr(rule)
         this.dayRuleSup = 'null'
-      } else if (rule == '*') {
+      } else if (rule === '*') {
         this.dayRuleSup = 'null'
       }
     },
@@ -501,7 +502,7 @@ export default {
       }
       for (let i = min; i <= max; i++) {
         let add = 0
-        if (status == false && i % limit == 0) {
+        if (status === false && i % limit === 0) {
           add = limit
         }
         arr.push(Math.round(i % limit + add))
@@ -529,9 +530,9 @@ export default {
       const s = time.getSeconds()
       const week = time.getDay()
       // 如果传递了type的话
-      if (type == undefined) {
+      if (type === undefined) {
         return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
-      } else if (type == 'week') {
+      } else if (type === 'week') {
         // 在quartz中 1为星期日
         return week + 1
       }
@@ -540,7 +541,7 @@ export default {
     checkDate(value) {
       const time = new Date(value)
       const format = this.formatDate(time)
-      return value === format
+      return value == format
     }
   },
   watch: {

src/components/Crontab/second.vue

@@ -68,19 +68,19 @@ export default {
     },
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '2') {
+      if (this.radioValue === '2') {
         this.$emit('update', 'second', this.cycleTotal)
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'second', this.averageTotal)
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'second', this.checkboxString)
       }
     }
@@ -110,7 +110,7 @@ export default {
     // 计算勾选的checkbox值合集
     checkboxString: function() {
       const str = this.checkboxList.join()
-      return str == '' ? '*' : str
+      return str === '' ? '*' : str
     }
   }
 }

src/components/Crontab/week.vue

@@ -21,7 +21,7 @@
 						:key="index"
 						:label="item.value"
 						:value="item.key"
-						:disabled="item.key === 1"
+						:disabled="item.key == 1"
 					>{{item.value}}</el-option>
 				</el-select>
 				-
@@ -144,25 +144,25 @@ export default {
 
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'week', this.cycleTotal)
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'week', this.averageTotal)
       }
     },
     // 最近工作日值变化时
     weekdayChange() {
-      if (this.radioValue == '5') {
+      if (this.radioValue === '5') {
         this.$emit('update', 'week', this.weekday + 'L')
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '6') {
+      if (this.radioValue === '6') {
         this.$emit('update', 'week', this.checkboxString)
       }
     }
@@ -195,7 +195,7 @@ export default {
     // 计算勾选的checkbox值合集
     checkboxString: function() {
       const str = this.checkboxList.join()
-      return str == '' ? '*' : str
+      return str === '' ? '*' : str
     }
   }
 }

src/components/Crontab/year.vue

@@ -79,19 +79,19 @@ export default {
     },
     // 周期两个值变化时
     cycleChange() {
-      if (this.radioValue == '3') {
+      if (this.radioValue === '3') {
         this.$emit('update', 'year', this.cycleTotal)
       }
     },
     // 平均两个值变化时
     averageChange() {
-      if (this.radioValue == '4') {
+      if (this.radioValue === '4') {
         this.$emit('update', 'year', this.averageTotal)
       }
     },
     // checkbox值变化时
     checkboxChange() {
-      if (this.radioValue == '5') {
+      if (this.radioValue === '5') {
         this.$emit('update', 'year', this.checkboxString)
       }
     }

src/components/Editor/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <el-upload
+      :action="uploadUrl"
+      :before-upload="handleBeforeUpload"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadError"
+      name="file"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: none"
+      ref="upload"
+      v-if="this.type == 'url'"
+    >
+    </el-upload>
+    <div class="editor" ref="editor" :style="styles"></div>
+  </div>
+</template>
+
+<script>
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "Editor",
+  props: {
+    /* 修改器的内容 */
+    value: {
+      type: String,
+      default: "",
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+    /* 只读 */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    // 上传文件大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    /* 类型（base64格式、url格式） */
+    type: {
+      type: String,
+      default: "url",
+    }
+  },
+  data() {
+    return {
+      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken()
+      },
+      Quill: null,
+      currentValue: "",
+      options: {
+        theme: "snow",
+        bounds: document.body,
+        debug: "warn",
+        modules: {
+          // 工具栏配置
+          toolbar: [
+            ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
+            ["blockquote", "code-block"],                    // 引用  代码块
+            [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
+            [{ indent: "-1" }, { indent: "+1" }],            // 缩进
+            [{ size: ["small", false, "large", "huge"] }],   // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
+            [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
+            [{ align: [] }],                                 // 对齐方式
+            ["clean"],                                       // 清除文本格式
+            ["link", "image", "video"]                       // 链接、图片、视频
+          ],
+        },
+        placeholder: "请输入内容",
+        readOnly: this.readOnly,
+      },
+    };
+  },
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val === null ? "" : val;
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.currentValue);
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.Quill = null;
+  },
+  methods: {
+    init() {
+      const editor = this.$refs.editor;
+      this.Quill = new Quill(editor, this.options);
+      // 如果设置了上传地址则自定义图片上传事件
+      if (this.type == 'url') {
+        let toolbar = this.Quill.getModule("toolbar");
+        toolbar.addHandler("image", (value) => {
+          this.uploadType = "image";
+          if (value) {
+            this.$refs.upload.$children[0].$refs.input.click();
+          } else {
+            this.quill.format("image", false);
+          }
+        });
+      }
+      this.Quill.pasteHTML(this.currentValue);
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = this.Quill.getText();
+        const quill = this.Quill;
+        this.currentValue = html;
+        this.$emit("input", html);
+        this.$emit("on-change", { html, text, quill });
+      });
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        this.$emit("on-text-change", delta, oldDelta, source);
+      });
+      this.Quill.on("selection-change", (range, oldRange, source) => {
+        this.$emit("on-selection-change", range, oldRange, source);
+      });
+      this.Quill.on("editor-change", (eventName, ...args) => {
+        this.$emit("on-editor-change", eventName, ...args);
+      });
+    },
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      return true;
+    },
+    handleUploadSuccess(res, file) {
+      // 获取富文本组件实例
+      let quill = this.Quill;
+      // 如果上传成功
+      if (res.code == 200) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("图片插入失败");
+      }
+    },
+    handleUploadError() {
+      this.$message.error("图片插入失败");
+    },
+  },
+};
+</script>
+
+<style>
+.editor, .ql-toolbar {
+  white-space: pre-wrap !important;
+  line-height: normal !important;
+}
+.quill-img {
+  display: none;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "请输入链接地址:";
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: "保存";
+  padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  content: "10px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  content: "18px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "文本";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: "标题1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: "标题2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: "标题3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: "标题4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: "标题5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "标准字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  content: "衬线字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  content: "等宽字体";
+}
+</style>

src/components/Process/PropertyPanel.vue

@@ -54,12 +54,12 @@ export default {
         id: '',
         name: '',
         color: null
-      },
+      }
     }
   },
   computed: {
     getComponent() {
-      const type = this.element?.type
+      const type = this.element && this.element.type
       if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
         return 'startEndPanel'
       }
@@ -96,7 +96,7 @@ export default {
     nodeName() {
       if (this.element) {
         const bizObj = this.element.businessObject
-        const type = bizObj?.eventDefinitions
+        const type = bizObj && bizObj.eventDefinitions
           ? bizObj.eventDefinitions[0].$type
           : bizObj.$type
         return NodeName[type] || type
@@ -119,9 +119,9 @@ export default {
       })
       this.modeler.on('element.click', e => {
         const { element } = e
-        if (element.type === 'bpmn:Process'
-          || element.type === 'bpmn:SequenceFlow'
-          || element.type === 'bpmn:EndEvent' ) {
+        if (element.type === 'bpmn:Process' ||
+          element.type === 'bpmn:SequenceFlow' ||
+          element.type === 'bpmn:EndEvent') {
           this.element = element
         }
       })
@@ -135,7 +135,7 @@ export default {
           })
         }
       })
-    },
+    }
   }
 }
 </script>

src/components/Process/common/bpmnUtils.js

@@ -2,119 +2,119 @@ import { NodeName } from '../lang/zh'
 
 // 创建监听器实例
 export function createListenerObject(moddle, options, isTask, prefix) {
-  const listenerObj = Object.create(null);
-  listenerObj.event = options.event;
-  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  const listenerObj = Object.create(null)
+  listenerObj.event = options.event
+  isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段
   switch (options.listenerType) {
-    case "scriptListener":
-      listenerObj.script = createScriptObject(moddle, options, prefix);
-      break;
-    case "expressionListener":
-      listenerObj.expression = options.expression;
-      break;
-    case "delegateExpressionListener":
-      listenerObj.delegateExpression = options.delegateExpression;
-      break;
+    case 'scriptListener':
+      listenerObj.script = createScriptObject(moddle, options, prefix)
+      break
+    case 'expressionListener':
+      listenerObj.expression = options.expression
+      break
+    case 'delegateExpressionListener':
+      listenerObj.delegateExpression = options.delegateExpression
+      break
     default:
-      listenerObj.class = options.class;
+      listenerObj.class = options.class
   }
   // 注入字段
   if (options.fields) {
     listenerObj.fields = options.fields.map(field => {
-      return createFieldObject(moddle, field, prefix);
-    });
+      return createFieldObject(moddle, field, prefix)
+    })
   }
   // 任务监听器的 定时器 设置
-  if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
-    const timeDefinition = moddle.create("bpmn:FormalExpression", {
+  if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) {
+    const timeDefinition = moddle.create('bpmn:FormalExpression', {
       body: options.eventTimeDefinitions
-    });
-    const TimerEventDefinition = moddle.create("bpmn:TimerEventDefinition", {
+    })
+    const TimerEventDefinition = moddle.create('bpmn:TimerEventDefinition', {
       id: `TimerEventDefinition_${uuid(8)}`,
       [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
-    });
-    listenerObj.eventDefinitions = [TimerEventDefinition];
+    })
+    listenerObj.eventDefinitions = [TimerEventDefinition]
   }
-  return moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+  return moddle.create(`${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`, listenerObj)
 }
 
 // 处理内置流程监听器
 export function createSystemListenerObject(moddle, options, isTask, prefix) {
-  const listenerObj = Object.create(null);
-  listenerObj.event = options.eventType;
-  listenerObj.listenerType = options.valueType;
+  const listenerObj = Object.create(null)
+  listenerObj.event = options.eventType
+  listenerObj.listenerType = options.valueType
   switch (options.valueType) {
-    case "scriptListener":
-      listenerObj.script = createScriptObject(moddle, options, prefix);
-      break;
-    case "expressionListener":
-      listenerObj.expression = options.expression;
-      break;
-    case "delegateExpressionListener":
-      listenerObj.delegateExpression = options.delegateExpression;
-      break;
+    case 'scriptListener':
+      listenerObj.script = createScriptObject(moddle, options, prefix)
+      break
+    case 'expressionListener':
+      listenerObj.expression = options.expression
+      break
+    case 'delegateExpressionListener':
+      listenerObj.delegateExpression = options.delegateExpression
+      break
     default:
-      listenerObj.class = options.value;
+      listenerObj.class = options.value
   }
-  return moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+  return moddle.create(`${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`, listenerObj)
 }
 
 // 转换成字段
 export function changeListenerObject(options) {
-  const listenerObj = Object.create(null);
-  listenerObj.event = options.eventType;
-  listenerObj.listenerType = options.valueType;
+  const listenerObj = Object.create(null)
+  listenerObj.event = options.eventType
+  listenerObj.listenerType = options.valueType
   switch (options.valueType) {
-    case "scriptListener":
+    case 'scriptListener':
       // listenerObj.script = createScriptObject(moddle, options, prefix);
-      break;
-    case "expressionListener":
-      listenerObj.expression = options.expression;
-      break;
-    case "delegateExpressionListener":
-      listenerObj.delegateExpression = options.delegateExpression;
-      break;
+      break
+    case 'expressionListener':
+      listenerObj.expression = options.expression
+      break
+    case 'delegateExpressionListener':
+      listenerObj.delegateExpression = options.delegateExpression
+      break
     default:
-      listenerObj.class = options.value;
+      listenerObj.class = options.value
   }
-  return listenerObj;
+  return listenerObj
 }
 
 // 创建 监听器的注入字段 实例
 export function createFieldObject(moddle, option, prefix) {
-  const { name, fieldType, string, expression } = option;
-  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
-  return moddle.create(`${prefix}:Field`, fieldConfig);
+  const { name, fieldType, string, expression } = option
+  const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression }
+  return moddle.create(`${prefix}:Field`, fieldConfig)
 }
 
 // 创建脚本实例
 export function createScriptObject(moddle, options, prefix) {
-  const { scriptType, scriptFormat, value, resource } = options;
-  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
-  return moddle.create(`${prefix}:Script`, scriptConfig);
+  const { scriptType, scriptFormat, value, resource } = options
+  const scriptConfig = scriptType === 'inlineScript' ? { scriptFormat, value } : { scriptFormat, resource }
+  return moddle.create(`${prefix}:Script`, scriptConfig)
 }
 
 // 更新元素扩展属性
 export function updateElementExtensions(moddle, modeling, element, extensionList) {
-  const extensions = moddle.create("bpmn:ExtensionElements", {
+  const extensions = moddle.create('bpmn:ExtensionElements', {
     values: extensionList
-  });
+  })
   modeling.updateProperties(element, {
     extensionElements: extensions
-  });
+  })
 }
 
-// 创建一个id
+// 创建一个 id
 export function uuid(length = 8, chars) {
-  let result = "";
-  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  let result = ''
+  const charsString = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
   for (let i = length; i > 0; --i) {
-    result += charsString[Math.floor(Math.random() * charsString.length)];
+    result += charsString[Math.floor(Math.random() * charsString.length)]
   }
-  return result;
+  return result
 }
 
 // 转换流程节点名称
-export function translateNodeName(node){
-  return NodeName[node];
+export function translateNodeName(node) {
+  return NodeName[node]
 }

src/components/Process/common/customTranslate.js

@@ -20,13 +20,13 @@ import translations from '../lang/zh'
 // }
 
 export default function customTranslate(template, replacements) {
-  replacements = replacements || {};
+  replacements = replacements || {}
 
   // Translate
-  template = translations[template] || template;
+  template = translations[template] || template
 
   // Replace
   return template.replace(/{([^}]+)}/g, function(_, key) {
-    return replacements[key] || '{' + key + '}';
-  });
+    return replacements[key] || '{' + key + '}'
+  })
 }

src/components/Process/common/mixinExecutionListener.js

@@ -12,7 +12,8 @@ export default {
   },
   methods: {
     computedExecutionListenerLength() {
-      this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
+      const extensionElements = this.element.businessObject.extensionElements
+      this.executionListenerLength = (extensionElements && extensionElements.values) ? extensionElements.values.length : 0
     },
     finishExecutionListener() {
       if (this.dialogName === 'executionListenerDialog') {

src/components/Process/common/parseElement.js

@@ -43,10 +43,10 @@ export function userTaskParse(obj) {
   for (const key in obj) {
     if (key === 'candidateUsers') {
       obj.userType = 'candidateUsers'
-      obj[key] = obj[key]?.split(',') || []
+      obj[key] = (obj[key] && typeof obj[key] === 'string') ? obj[key].split(',') : []
     } else if (key === 'candidateGroups') {
       obj.userType = 'candidateGroups'
-      obj[key] = obj[key]?.split(',') || []
+      obj[key] = (obj[key] && typeof obj[key] === 'string') ? obj[key].split(',') : []
     } else if (key === 'assignee') {
       obj.userType = 'assignee'
     }

src/components/Process/components/nodePanel/process.vue

@@ -96,7 +96,8 @@ export default {
   },
   methods: {
     computedSignalLength() {
-      this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
+      const extensionElements = this.element.businessObject.extensionElements
+      this.signalLength = extensionElements && extensionElements.values ? extensionElements.values.length : 0
     },
     finishSignal() {
       if (this.dialogName === 'signalDialog') {

src/components/Process/components/nodePanel/property/executionListener.vue

@@ -112,29 +112,34 @@ export default {
   },
   mounted() {
     this.$nextTick(() => this.addButton())
-    this.formData.executionListener = this.element.businessObject.extensionElements?.values
-      .filter(item => item.$type === 'flowable:ExecutionListener')
-      .map(item => {
-        let type
-        if ('class' in item) type = 'class'
-        if ('expression' in item) type = 'expression'
-        if ('delegateExpression' in item) type = 'delegateExpression'
-        return {
-          event: item.event,
-          type: type,
-          className: item[type],
-          params: item.fields?.map(field => {
-            let fieldType
-            if ('stringValue' in field) fieldType = 'stringValue'
-            if ('expression' in field) fieldType = 'expression'
+    const extensionElements = this.element.businessObject.extensionElements
+    this.formData.executionListener = extensionElements
+      ? extensionElements.values
+          .filter(item => item.$type === 'flowable:ExecutionListener')
+          .map(item => {
+            let type
+            if ('class' in item) type = 'class'
+            if ('expression' in item) type = 'expression'
+            if ('delegateExpression' in item) type = 'delegateExpression'
             return {
-              name: field.name,
-              type: fieldType,
-              value: field[fieldType]
+              event: item.event,
+              type: type,
+              className: item[type],
+              params: item.fields
+                ? item.fields.map(field => {
+                  let fieldType
+                  if ('stringValue' in field) fieldType = 'stringValue'
+                  if ('expression' in field) fieldType = 'expression'
+                  return {
+                    name: field.name,
+                    type: fieldType,
+                    value: field[fieldType]
+                  }
+                })
+                : []
             }
-          }) ?? []
-        }
-      }) ?? []
+          })
+      : []
   },
   methods: {
     addButton() {
@@ -164,13 +169,14 @@ export default {
       this.nowIndex = null
     },
     updateElement() {
-      if (this.formData.executionListener?.length) {
+      if (this.formData.executionListener && this.formData.executionListener.length) {
         let extensionElements = this.element.businessObject.get('extensionElements')
         if (!extensionElements) {
           extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
         }
         // 清除旧值
-        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
+        const filteredValues = (extensionElements.values && extensionElements.values.filter(item => item.$type !== 'flowable:ExecutionListener')) || []
+        extensionElements.values = filteredValues
         this.formData.executionListener.forEach(item => {
           const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
           executionListener['event'] = item.event
@@ -192,7 +198,8 @@ export default {
       } else {
         const extensionElements = this.element.businessObject[`extensionElements`]
         if (extensionElements) {
-          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
+          const filteredValues = (extensionElements.values && extensionElements.values.filter(item => item.$type !== 'flowable:ExecutionListener')) || []
+          extensionElements.values = filteredValues
         }
       }
     },

src/components/Process/components/nodePanel/property/listenerList.vue

@@ -54,7 +54,7 @@
       },
       handleSelect(selection) {
         const type = ['class', 'expression', 'delegateExpression']
-        let list = []
+        const list = []
         selection.forEach(data => {
           const formData = {
             event: data.eventType,

src/components/Process/components/nodePanel/property/multiInstance.vue

@@ -25,7 +25,7 @@
 
 <script>
 import mixinPanel from '@/components/Process/common/mixinPanel'
-import {formatJsonKeyValue} from '@/components/Process/common/parseElement'
+import { formatJsonKeyValue } from '@/components/Process/common/parseElement'
 
 export default {
   mixins: [mixinPanel],
@@ -33,7 +33,7 @@ export default {
     return {
       dialogVisible: true,
       formData: {},
-      prefix: 'flowable:',
+      prefix: 'flowable:'
     }
   },
   computed: {
@@ -46,14 +46,14 @@ export default {
             xType: 'input',
             name: 'collection',
             label: '集合',
-            tooltip: 'collection: 属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。',
+            tooltip: 'collection: 属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。'
             // rules: [{ required: true, message: '请输入集合名称', trigger: ['blur', 'change'] }]
           },
           {
             xType: 'input',
             name: 'elementVariable',
             label: '元素变量',
-            tooltip: 'elementVariable: 每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。',
+            tooltip: 'elementVariable: 每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。'
             // rules: [{ required: true, message: '请输入元素变量', trigger: ['blur', 'change'] }]
           },
           {
@@ -61,14 +61,14 @@ export default {
             name: 'isSequential',
             label: '执行方式',
             tooltip: '并行会签（parallel）、串行会签(sequential)，其中并行会签的意思是 多个人同时执行任务。串行会签是按顺序执行任务。',
-            dic: [{label: '串行', value: true}, {label: '并行', value: false}],
+            dic: [{ label: '串行', value: true }, { label: '并行', value: false }]
             // rules: [{ required: true, message: '请选择执行方式', trigger: ['blur', 'change'] }]
           },
           {
             xType: 'input',
             name: 'completionCondition',
             label: '完成条件',
-            tooltip: 'completionCondition: 多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成',
+            tooltip: 'completionCondition: 多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成'
             // rules: [{ required: true, message: '请输入完成条件', trigger: ['blur', 'change'] }]
           }
         ],
@@ -80,8 +80,9 @@ export default {
     }
   },
   mounted() {
-    const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
-    cache.completionCondition = cache.completionCondition?.body
+    const loopCharacteristics = this.element.businessObject.loopCharacteristics
+    const cache = JSON.parse(JSON.stringify(loopCharacteristics || {}))
+    cache.completionCondition = cache.completionCondition ? cache.completionCondition.body : undefined
     // 拼接多实例对象
     if (this.element.businessObject.loopCharacteristics) {
       Object.assign(cache, this.element.businessObject.loopCharacteristics.$attrs)
@@ -109,9 +110,9 @@ export default {
         loopCharacteristics.$attrs[this.prefix + 'elementVariable'] = this.formData.elementVariable
 
         if (this.formData.completionCondition) {
-          loopCharacteristics['completionCondition'] = this.modeler.get('moddle').create('bpmn:Expression', {body: this.formData.completionCondition})
+          loopCharacteristics['completionCondition'] = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
         }
-        this.updateProperties({loopCharacteristics: loopCharacteristics})
+        this.updateProperties({ loopCharacteristics: loopCharacteristics })
       } else {
         delete this.element.businessObject.loopCharacteristics
       }
@@ -120,7 +121,7 @@ export default {
       this.$refs['xForm'].validate().then(() => {
         this.updateElement()
         this.dialogVisible = false
-      }).catch(e => console.error(e));
+      }).catch(e => console.error(e))
     }
   }
 }

src/components/Process/components/nodePanel/property/signal.vue

@@ -75,46 +75,29 @@ export default {
     }
   },
   mounted() {
-    // this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
-    this.formData.signal = this.element.businessObject.extensionElements?.values
-      .filter(item => item.$type === 'bpmn:Signal')
-      .map(item => {
-        return {
-          scope: item.scope,
-          id: item.id,
-          name: item.name
-        }
-      }) ?? []
+    const extensionElements = this.element.businessObject.extensionElements
+    this.formData.signal = extensionElements
+      ? extensionElements.values
+          .filter(item => item.$type === 'bpmn:Signal')
+          .map(item => {
+            return {
+              scope: item.scope,
+              id: item.id,
+              name: item.name
+            }
+          })
+      : []
   },
   methods: {
     updateElement() {
-      // if (this.formData.signal?.length) {
-      //   let extensionElements = this.element.businessObject.get('extensionElements')
-      //   if (!extensionElements) {
-      //     console.log(this.modeler.get('moddle'),"this.modeler.get('moddle')")
-      //     extensionElements = this.modeler.get('moddle').create('bpmn:Signal')
-      //   }
-      //   extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'bpmn:Signal') ?? []
-      //   console.log(extensionElements,"extensionElements")
-      //   const length = extensionElements.get('values').length
-      //   for (let i = 0; i < length; i++) {
-      //     // 清除旧值
-      //     extensionElements.get('values').pop()
-      //   }
-      //   this.updateProperties({ extensionElements: extensionElements })
-      // } else {
-      //   const extensionElements = this.element.businessObject[`extensionElements`]
-      //   if (extensionElements) {
-      //     extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
-      //   }
-      // }
-      if (this.formData.signal?.length) {
+      if (this.formData.signal && this.formData.signal.length) {
         let extensionElements = this.element.businessObject.get('extensionElements')
         if (!extensionElements) {
           extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
         }
         // 清除旧值
-        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'bpmn:Signal') ?? []
+        const filteredValues = (extensionElements.values && extensionElements.values.filter(item => item.$type !== 'bpmn:Signal')) || []
+        extensionElements.values = filteredValues
         this.formData.signal.forEach(item => {
           const signal = this.modeler.get('moddle').create('bpmn:Signal')
           signal['scope'] = item.scope
@@ -126,7 +109,8 @@ export default {
       } else {
         const extensionElements = this.element.businessObject[`extensionElements`]
         if (extensionElements) {
-          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'bpmn:Signal') ?? []
+          const filteredValues = (extensionElements.values && extensionElements.values.filter(item => item.$type !== 'bpmn:Signal')) || []
+          extensionElements.values = filteredValues
         }
       }
     },

src/components/Process/components/nodePanel/property/taskListener.vue

@@ -117,29 +117,34 @@ export default {
   },
   mounted() {
     this.$nextTick(() => this.addButton())
-    this.formData.taskListener = this.element.businessObject.extensionElements?.values
-      .filter(item => item.$type === 'flowable:TaskListener')
-      .map(item => {
-        let type
-        if ('class' in item) type = 'class'
-        if ('expression' in item) type = 'expression'
-        if ('delegateExpression' in item) type = 'delegateExpression'
-        return {
-          event: item.event,
-          type: type,
-          className: item[type],
-          params: item.fields?.map(field => {
-            let fieldType
-            if ('stringValue' in field) fieldType = 'stringValue'
-            if ('expression' in field) fieldType = 'expression'
+    const extensionElements = this.element.businessObject.extensionElements
+    this.formData.taskListener = extensionElements
+      ? extensionElements.values
+          .filter(item => item.$type === 'flowable:TaskListener')
+          .map(item => {
+            let type
+            if ('class' in item) type = 'class'
+            if ('expression' in item) type = 'expression'
+            if ('delegateExpression' in item) type = 'delegateExpression'
             return {
-              name: field.name,
-              type: fieldType,
-              value: field[fieldType]
+              event: item.event,
+              type: type,
+              className: item[type],
+              params: item.fields
+                ? item.fields.map(field => {
+                  let fieldType
+                  if ('stringValue' in field) fieldType = 'stringValue'
+                  if ('expression' in field) fieldType = 'expression'
+                  return {
+                    name: field.name,
+                    type: fieldType,
+                    value: field[fieldType]
+                  }
+                })
+                : []
             }
-          }) ?? []
-        }
-      }) ?? []
+          })
+      : []
   },
   methods: {
     addButton() {
@@ -169,13 +174,14 @@ export default {
       this.nowIndex = null
     },
     updateElement() {
-      if (this.formData.taskListener?.length) {
+      if (this.formData.taskListener && this.formData.taskListener.length) {
         let extensionElements = this.element.businessObject.get('extensionElements')
         if (!extensionElements) {
           extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
         }
         // 清除旧值
-        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
+        const filteredValues = (extensionElements.values && extensionElements.values.filter(item => item.$type !== 'flowable:TaskListener')) || []
+        extensionElements.values = filteredValues
         this.formData.taskListener.forEach(item => {
           const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
           taskListener['event'] = item.event
@@ -197,7 +203,8 @@ export default {
       } else {
         const extensionElements = this.element.businessObject[`extensionElements`]
         if (extensionElements) {
-          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
+          const filteredValues = (extensionElements.values && extensionElements.values.filter(item => item.$type !== 'flowable:TaskListener')) || []
+          extensionElements.values = filteredValues
         }
       }
     },

src/components/Process/components/nodePanel/sequenceFlow.vue

@@ -18,7 +18,7 @@
 
 <script>
 import mixinPanel from '../../common/mixinPanel'
-import {StrUtil} from '@/utils/StrUtil'
+import { StrUtil } from '@/utils/StrUtil'
 import mixinExecutionListener from '../../common/mixinExecutionListener'
 import { commonParse, conditionExpressionParse } from '../../common/parseElement'
 export default {
@@ -81,7 +81,7 @@ export default {
     },
     'formData.skipExpression': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:skipExpression': val})
+        this.updateProperties({ 'flowable:skipExpression': val })
       } else {
         delete this.element.businessObject.$attrs[`flowable:skipExpression`]
       }
@@ -90,14 +90,17 @@ export default {
   created() {
     let cache = commonParse(this.element)
     cache = conditionExpressionParse(cache)
-    this.formData = cache;
-    this.computedExecutionListenerLength();
+    this.formData = cache
+    this.computedExecutionListenerLength()
   },
-  methods:{
+  methods: {
     computedExecutionListenerLength() {
-      this.executionListenerLength = this.element.businessObject.extensionElements?.values
-        ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
-    },
+      const extensionElements = this.element.businessObject.extensionElements
+      this.executionListenerLength = extensionElements
+        ? extensionElements.values
+          .filter(item => item.$type === 'flowable:ExecutionListener').length
+        : 0
+    }
   }
 }
 </script>

src/components/Process/components/nodePanel/startEnd.vue

@@ -54,7 +54,7 @@ export default {
             xType: 'slot',
             name: 'executionListener',
             label: '执行监听器'
-          },
+          }
           // {
           //   xType: 'input',
           //   name: 'initiator',
@@ -86,13 +86,16 @@ export default {
   created() {
     // this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
     this.formData = commonParse(this.element)
-    this.computedExecutionListenerLength();
+    this.computedExecutionListenerLength()
   },
-  methods:{
+  methods: {
     computedExecutionListenerLength() {
-      this.executionListenerLength = this.element.businessObject.extensionElements?.values
-        ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
-    },
+      const extensionElements = this.element.businessObject.extensionElements
+      this.executionListenerLength = extensionElements
+        ? extensionElements.values
+          .filter(item => item.$type === 'flowable:ExecutionListener').length
+        : 0
+    }
   }
 }
 </script>

src/components/Process/components/nodePanel/task.vue

@@ -119,7 +119,7 @@ import executionListenerDialog from './property/executionListener'
 import taskListenerDialog from './property/taskListener'
 import multiInstanceDialog from './property/multiInstance'
 import { commonParse, userTaskParse } from '../../common/parseElement'
-import {StrUtil} from '@/utils/StrUtil'
+import { StrUtil } from '@/utils/StrUtil'
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
 import FlowExp from '@/components/flow/Expression'
@@ -132,7 +132,7 @@ export default {
     multiInstanceDialog,
     FlowUser,
     FlowRole,
-    FlowExp,
+    FlowExp
   },
   mixins: [mixinPanel],
   props: {
@@ -182,7 +182,7 @@ export default {
       // 表达式类型
       expType: null,
       // 表单列表
-      formList: [],
+      formList: []
     }
   },
   computed: {
@@ -359,30 +359,30 @@ export default {
   watch: {
     'formData.userType': function(val, oldVal) {
       if (StrUtil.isNotBlank(oldVal)) {
-          delete this.element.businessObject.$attrs[`flowable:${oldVal}`]
-          delete this.formData[oldVal]
-          // 清除已选人员数据
-          this.checkValues = '';
-          this.selectValues = null;
-          // 删除xml中已选择数据类型节点
-          delete this.element.businessObject.$attrs[`flowable:dataType`]
+        delete this.element.businessObject.$attrs[`flowable:${oldVal}`]
+        delete this.formData[oldVal]
+        // 清除已选人员数据
+        this.checkValues = ''
+        this.selectValues = null
+        // 删除xml中已选择数据类型节点
+        delete this.element.businessObject.$attrs[`flowable:dataType`]
       }
       // 写入userType节点信息到xml
-      this.updateProperties({'flowable:userType': val})
+      this.updateProperties({ 'flowable:userType': val })
     },
     'formData.async': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:async': val})
+        this.updateProperties({ 'flowable:async': val })
       }
     },
     'formData.dueDate': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:dueDate': val})
+        this.updateProperties({ 'flowable:dueDate': val })
       }
     },
     'formData.formKey': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:formKey': val})
+        this.updateProperties({ 'flowable:formKey': val })
       } else {
         // 删除xml中已选择表单信息
         delete this.element.businessObject[`formKey`]
@@ -390,54 +390,54 @@ export default {
     },
     'formData.priority': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:priority': val})
+        this.updateProperties({ 'flowable:priority': val })
       }
     },
     'formData.skipExpression': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:skipExpression': val})
+        this.updateProperties({ 'flowable:skipExpression': val })
       } else {
         delete this.element.businessObject.$attrs[`flowable:skipExpression`]
       }
     },
     'formData.isForCompensation': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'isForCompensation': val})
+        this.updateProperties({ 'isForCompensation': val })
       }
     },
     'formData.triggerable': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:triggerable': val})
+        this.updateProperties({ 'flowable:triggerable': val })
       }
     },
     'formData.class': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:class': val})
+        this.updateProperties({ 'flowable:class': val })
       }
     },
     'formData.autoStoreVariables': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:autoStoreVariables': val})
+        this.updateProperties({ 'flowable:autoStoreVariables': val })
       }
     },
     'formData.exclude': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:exclude': val})
+        this.updateProperties({ 'flowable:exclude': val })
       }
     },
     'formData.ruleVariablesInput': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:ruleVariablesInput': val})
+        this.updateProperties({ 'flowable:ruleVariablesInput': val })
       }
     },
     'formData.rules': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:rules': val})
+        this.updateProperties({ 'flowable:rules': val })
       }
     },
     'formData.resultVariable': function(val) {
       if (StrUtil.isNotBlank(val)) {
-        this.updateProperties({'flowable:resultVariable': val})
+        this.updateProperties({ 'flowable:resultVariable': val })
       }
     }
   },
@@ -449,18 +449,24 @@ export default {
     this.computedTaskListenerLength()
     this.computedHasMultiInstance()
     // 人员信息回显
-    this.checkValuesEcho();
+    this.checkValuesEcho()
     // 加载表单列表
-    this.getListForm();
+    this.getListForm()
   },
   methods: {
     computedExecutionListenerLength() {
-      this.executionListenerLength = this.element.businessObject.extensionElements?.values
-        ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
+      const extensionElements = this.element.businessObject.extensionElements
+      this.executionListenerLength = extensionElements
+        ? extensionElements.values
+          .filter(item => item.$type === 'flowable:ExecutionListener').length
+        : 0
     },
     computedTaskListenerLength() {
-      this.taskListenerLength = this.element.businessObject.extensionElements?.values
-        ?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
+      const extensionElements = this.element.businessObject.extensionElements
+      this.taskListenerLength = extensionElements
+        ? extensionElements.values
+          .filter(item => item.$type === 'flowable:TaskListener').length
+        : 0
     },
     computedHasMultiInstance() {
       if (this.element.businessObject.loopCharacteristics) {
@@ -470,52 +476,52 @@ export default {
       }
     },
     // 获取表单信息
-    getListForm(){
-      listAllForm().then(res =>{
-        res.data.forEach(item =>{
-          item.formId = item.formId.toString();
+    getListForm() {
+      listAllForm().then(res => {
+        res.data.forEach(item => {
+          item.formId = item.formId.toString()
         })
-        this.formList = res.data;
+        this.formList = res.data
       })
     },
     // 设计器右侧表单数据回显
-    checkValuesEcho(){
-      const that = this;
-      const attrs = that.element.businessObject.$attrs;
-      const businessObject = that.element.businessObject;
-      console.log(that.element.businessObject,"this.element.businessObject")
+    checkValuesEcho() {
+      const that = this
+      const attrs = that.element.businessObject.$attrs
+      const businessObject = that.element.businessObject
+      console.log(that.element.businessObject, 'this.element.businessObject')
       // 指定用户
-      if (attrs.hasOwnProperty("flowable:assignee")) {
-        const val = attrs["flowable:assignee"];
+      if (attrs.hasOwnProperty('flowable:assignee')) {
+        const val = attrs['flowable:assignee']
         // 查找是否动态指定人员(选中流程表达式)
-        if (attrs["flowable:dataType"] === "dynamic"||(attrs["flowable:dataType"] === "fixed"&&this.isFlowableExpression(attrs["flowable:assignee"]) == true)) {
-          this.checkValues = that.expList.find(item => item.expression == val).name;
-          this.selectValues = that.expList.find(item => item.expression == val).id;
+        if (attrs['flowable:dataType'] === 'dynamic' || (attrs['flowable:dataType'] === 'fixed' && this.isFlowableExpression(attrs['flowable:assignee']) == true)) {
+          this.checkValues = that.expList.find(item => item.expression == val).name
+          this.selectValues = that.expList.find(item => item.expression == val).id
         } else {
-          this.checkValues = that.userList.find(item => item.userId == val).nickName;
-          this.selectValues = that.userList.find(item => item.userId == val).userId;
+          this.checkValues = that.userList.find(item => item.userId == val).nickName
+          this.selectValues = that.userList.find(item => item.userId == val).userId
         }
         // 候选用户
-      } else if (attrs.hasOwnProperty("flowable:candidateUsers")) {
-        const val = attrs["flowable:candidateUsers"];
-        if (attrs["flowable:dataType"] === "dynamic") {
-          this.checkValues = that.expList.find(item => item.expression == val).name;
-          this.selectValues = that.expList.find(item => item.expression == val).id;
+      } else if (attrs.hasOwnProperty('flowable:candidateUsers')) {
+        const val = attrs['flowable:candidateUsers']
+        if (attrs['flowable:dataType'] === 'dynamic') {
+          this.checkValues = that.expList.find(item => item.expression == val).name
+          this.selectValues = that.expList.find(item => item.expression == val).id
         } else {
           const newArr = that.userList.filter(i => val.split(',').includes(i.userId))
-          this.checkValues =  newArr.map(item => item.nickName).join(',');
-          this.selectValues = newArr.map(item => item.userId).join(',');
+          this.checkValues = newArr.map(item => item.nickName).join(',')
+          this.selectValues = newArr.map(item => item.userId).join(',')
         }
-      } else if (businessObject.hasOwnProperty("candidateGroups") || attrs.hasOwnProperty("flowable:candidateGroups") ) {
+      } else if (businessObject.hasOwnProperty('candidateGroups') || attrs.hasOwnProperty('flowable:candidateGroups')) {
         // 候选角色信息
-        const val = businessObject["candidateGroups"] || attrs["flowable:candidateGroups"];
-        if (attrs["flowable:dataType"] === "dynamic") {
-          this.checkValues = that.expList.find(item => item.expression == val).name;
-          this.selectValues = that.expList.find(item => item.expression == val).id;
+        const val = businessObject['candidateGroups'] || attrs['flowable:candidateGroups']
+        if (attrs['flowable:dataType'] === 'dynamic') {
+          this.checkValues = that.expList.find(item => item.expression == val).name
+          this.selectValues = that.expList.find(item => item.expression == val).id
         } else {
           const newArr = that.groupList.filter(i => val.split(',').includes(i.roleId))
-          this.checkValues =  newArr.map(item => item.roleName).join(',');
-          this.selectValues = newArr.map(item => item.roleId).join(',');
+          this.checkValues = newArr.map(item => item.roleName).join(',')
+          this.selectValues = newArr.map(item => item.roleId).join(',')
         }
       }
     },
@@ -539,93 +545,93 @@ export default {
     },
     isFlowableExpression(value) {
       // 正则：严格匹配 ${任意内容}
-      const expressionPattern = /^\$\{[\s\S]*\}$/;
-      return expressionPattern.test(value);
+      const expressionPattern = /^\$\{[\s\S]*\}$/
+      return expressionPattern.test(value)
     },
 
-// ------ 流程审批人员信息弹出框 start---------
-    /*单选人员*/
-    singleUserCheck(){
-      this.userVisible = true;
-      this.checkType = "single";
-    },
-    /*多选人员*/
-    multipleUserCheck(){
-      this.userVisible = true;
-      this.checkType = "multiple";
-    },
-    /*单选角色*/
-    singleRoleCheck(){
-      this.roleVisible = true;
-      this.checkType = "single";
-    },
-    /*多选角色*/
-    multipleRoleCheck(){
-      this.roleVisible = true;
-      this.checkType = "multiple";
-    },
-    /*单选表达式*/
-    singleExpCheck(expType){
-      this.expVisible = true;
-      this.expType = expType;
+    // ------ 流程审批人员信息弹出框 start---------
+    /* 单选人员*/
+    singleUserCheck() {
+      this.userVisible = true
+      this.checkType = 'single'
+    },
+    /* 多选人员*/
+    multipleUserCheck() {
+      this.userVisible = true
+      this.checkType = 'multiple'
+    },
+    /* 单选角色*/
+    singleRoleCheck() {
+      this.roleVisible = true
+      this.checkType = 'single'
+    },
+    /* 多选角色*/
+    multipleRoleCheck() {
+      this.roleVisible = true
+      this.checkType = 'multiple'
+    },
+    /* 单选表达式*/
+    singleExpCheck(expType) {
+      this.expVisible = true
+      this.expType = expType
     },
     // 选中表达式
     handleSingleExpSelect(selection) {
-      this.deleteFlowAttar();
-      this.updateProperties({'flowable:dataType':selection.dataType})
-      if ("assignee" === this.expType) {
-        this.updateProperties({'flowable:assignee': selection.expression});
-      } else if ("candidateUsers" === this.expType) {
-        this.updateProperties({'flowable:candidateUsers': selection.expression});
-      } else if ("candidateGroups" === this.expType) {
-        this.updateProperties({'flowable:candidateGroups': selection.expression});
+      this.deleteFlowAttar()
+      this.updateProperties({ 'flowable:dataType': selection.dataType })
+      if (this.expType === 'assignee') {
+        this.updateProperties({ 'flowable:assignee': selection.expression })
+      } else if (this.expType === 'candidateUsers') {
+        this.updateProperties({ 'flowable:candidateUsers': selection.expression })
+      } else if (this.expType === 'candidateGroups') {
+        this.updateProperties({ 'flowable:candidateGroups': selection.expression })
       }
-      this.checkValues = selection.name;
-      this.expType = null;
+      this.checkValues = selection.name
+      this.expType = null
     },
     // 用户选中数据
     handleUserSelect(selection) {
-      const that = this;
+      const that = this
       if (selection) {
-        that.deleteFlowAttar();
-        that.updateProperties({'flowable:dataType': 'fixed'})
+        that.deleteFlowAttar()
+        that.updateProperties({ 'flowable:dataType': 'fixed' })
         if (selection instanceof Array) {
-          const userIds = selection.map(item => item.userId);
-          const nickName = selection.map(item => item.nickName);
-          that.updateProperties({'flowable:candidateUsers': userIds.join(',')})
-          that.checkValues = nickName.join(',');
+          const userIds = selection.map(item => item.userId)
+          const nickName = selection.map(item => item.nickName)
+          that.updateProperties({ 'flowable:candidateUsers': userIds.join(',') })
+          that.checkValues = nickName.join(',')
         } else {
-          that.updateProperties({'flowable:assignee': selection.userId})
-          that.checkValues = selection.nickName;
+          that.updateProperties({ 'flowable:assignee': selection.userId })
+          that.checkValues = selection.nickName
         }
       }
     },
     // 角色选中数据
     handleRoleSelect(selection, name) {
-      const that = this;
+      const that = this
       if (selection && name) {
-        that.deleteFlowAttar();
-        that.updateProperties({'flowable:dataType': 'fixed'})
-        that.updateProperties({'flowable:candidateGroups': selection});
-        that.checkValues = name;
+        that.deleteFlowAttar()
+        that.updateProperties({ 'flowable:dataType': 'fixed' })
+        that.updateProperties({ 'flowable:candidateGroups': selection })
+        that.checkValues = name
       }
     },
-    /*用户选中赋值*/
-    checkUserComplete(){
-      this.userVisible = false;
-      this.checkType = "";
+    /* 用户选中赋值*/
+    checkUserComplete() {
+      this.userVisible = false
+      this.checkType = ''
     },
-    /*候选角色选中赋值*/
-    checkRoleComplete(){
-      this.roleVisible = false;
-      this.checkType = "";
-      },
-    /*表达式选中赋值*/
-    checkExpComplete(){
-      this.expVisible = false;
+    /* 候选角色选中赋值*/
+    checkRoleComplete() {
+      this.roleVisible = false
+      this.checkType = ''
+    },
+    /* 表达式选中赋值*/
+    checkExpComplete() {
+      this.expVisible = false
     },
     // 删除节点
-    deleteFlowAttar(){
+    deleteFlowAttar() {
       delete this.element.businessObject.$attrs[`flowable:dataType`]
       delete this.element.businessObject.$attrs[`flowable:assignee`]
       delete this.element.businessObject.$attrs[`flowable:candidateUsers`]

src/components/Process/customPanel/CustomContextPad.js

@@ -3,29 +3,28 @@ import {
   forEach,
   isArray,
   every
-} from 'min-dash';
+} from 'min-dash'
 
 import {
   is
-} from 'bpmn-js/lib/util/ModelUtil';
+} from 'bpmn-js/lib/util/ModelUtil'
 
 import {
   isExpanded,
   isEventSubProcess
-} from 'bpmn-js/lib/util/DiUtil';
+} from 'bpmn-js/lib/util/DiUtil'
 
 import {
   isAny
-} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+} from 'bpmn-js/lib/features/modeling/util/ModelingUtil'
 
 import {
   getChildLanes
-} from 'bpmn-js/lib/features/modeling/util/LaneUtil';
+} from 'bpmn-js/lib/features/modeling/util/LaneUtil'
 
 import {
   hasPrimaryModifier
-} from 'diagram-js/lib/util/Mouse';
-
+} from 'diagram-js/lib/util/Mouse'
 
 /**
  * A provider for BPMN 2.0 elements context pad
@@ -35,41 +34,40 @@ export default function ContextPadProvider(
   contextPad, modeling, elementFactory,
   connect, create, popupMenu,
   canvas, rules, translate) {
+  config = config || {}
 
-  config = config || {};
-
-  contextPad.registerProvider(this);
+  contextPad.registerProvider(this)
 
-  this._contextPad = contextPad;
+  this._contextPad = contextPad
 
-  this._modeling = modeling;
+  this._modeling = modeling
 
-  this._elementFactory = elementFactory;
-  this._connect = connect;
-  this._create = create;
-  this._popupMenu = popupMenu;
-  this._canvas = canvas;
-  this._rules = rules;
-  this._translate = translate;
+  this._elementFactory = elementFactory
+  this._connect = connect
+  this._create = create
+  this._popupMenu = popupMenu
+  this._canvas = canvas
+  this._rules = rules
+  this._translate = translate
 
   if (config.autoPlace !== false) {
-    this._autoPlace = injector.get('autoPlace', false);
+    this._autoPlace = injector.get('autoPlace', false)
   }
 
   eventBus.on('create.end', 250, function(event) {
     var context = event.context,
-      shape = context.shape;
+      shape = context.shape
 
     if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
-      return;
+      return
     }
 
-    var entries = contextPad.getEntries(shape);
+    var entries = contextPad.getEntries(shape)
 
     if (entries.replace) {
-      entries.replace.action.click(event, shape);
+      entries.replace.action.click(event, shape)
     }
-  });
+  })
 }
 
 ContextPadProvider.$inject = [
@@ -85,12 +83,12 @@ ContextPadProvider.$inject = [
   'canvas',
   'rules',
   'translate'
-];
+]
 
 ContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
-  var modeling = this._modeling;
+  var modeling = this._modeling
 
-  var actions = {};
+  var actions = {}
 
   if (this._isDeleteAllowed(elements)) {
     assign(actions, {
@@ -100,34 +98,33 @@ ContextPadProvider.prototype.getMultiElementContextPadEntries = function(element
         title: this._translate('Remove'),
         action: {
           click: function(event, elements) {
-            modeling.removeElements(elements.slice());
+            modeling.removeElements(elements.slice())
           }
         }
       }
-    });
+    })
   }
 
-  return actions;
-};
+  return actions
+}
 
 /**
  * @param {djs.model.Base[]} elements
  * @return {boolean}
  */
 ContextPadProvider.prototype._isDeleteAllowed = function(elements) {
-
   var baseAllowed = this._rules.allowed('elements.delete', {
     elements: elements
-  });
+  })
 
   if (isArray(baseAllowed)) {
     return every(baseAllowed, function(element) {
-      return includes(baseAllowed, element);
-    });
+      return includes(baseAllowed, element)
+    })
   }
 
-  return baseAllowed;
-};
+  return baseAllowed
+}
 
 ContextPadProvider.prototype.getContextPadEntries = function(element) {
   var contextPad = this._contextPad,
@@ -139,41 +136,39 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
     popupMenu = this._popupMenu,
     rules = this._rules,
     autoPlace = this._autoPlace,
-    translate = this._translate;
+    translate = this._translate
 
-  var actions = {};
+  var actions = {}
 
   if (element.type === 'label') {
-    return actions;
+    return actions
   }
 
-  var businessObject = element.businessObject;
+  var businessObject = element.businessObject
 
   function startConnect(event, element) {
-    connect.start(event, element);
+    connect.start(event, element)
   }
 
   function removeElement(e, element) {
-    modeling.removeElements([ element ]);
+    modeling.removeElements([element])
   }
 
   function getReplaceMenuPosition(element) {
+    var Y_OFFSET = 5
 
-    var Y_OFFSET = 5;
+    var pad = contextPad.getPad(element).html
 
-    var pad = contextPad.getPad(element).html;
-
-    var padRect = pad.getBoundingClientRect();
+    var padRect = pad.getBoundingClientRect()
 
     var pos = {
       x: padRect.left,
       y: padRect.bottom + Y_OFFSET
-    };
+    }
 
-    return pos;
+    return pos
   }
 
-
   /**
    * Create an append action
    *
@@ -185,27 +180,23 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
    * @return {Object} descriptor
    */
   function appendAction(type, className, title, options) {
-
     if (typeof title !== 'string') {
-      options = title;
-      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+      options = title
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') })
     }
 
     function appendStart(event, element) {
-
-      var shape = elementFactory.createShape(assign({ type: type }, options));
+      var shape = elementFactory.createShape(assign({ type: type }, options))
       create.start(event, shape, {
         source: element
-      });
+      })
     }
 
-
     var append = autoPlace ? function(event, element) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
-
-      autoPlace.append(element, shape);
-    } : appendStart;
+      var shape = elementFactory.createShape(assign({ type: type }, options))
 
+      autoPlace.append(element, shape)
+    } : appendStart
 
     return {
       group: 'model',
@@ -215,26 +206,22 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         dragstart: appendStart,
         click: append
       }
-    };
+    }
   }
 
   function splitLaneHandler(count) {
-
     return function(event, element) {
-
       // actual split
-      modeling.splitLane(element, count);
+      modeling.splitLane(element, count)
 
       // refresh context pad after split to
       // get rid of split icons
-      contextPad.open(element, true);
-    };
+      contextPad.open(element, true)
+    }
   }
 
-
-  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
-
-    var childLanes = getChildLanes(element);
+  if (isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) && isExpanded(element)) {
+    var childLanes = getChildLanes(element)
 
     assign(actions, {
       'lane-insert-above': {
@@ -243,14 +230,13 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         title: translate('Add Lane above'),
         action: {
           click: function(event, element) {
-            modeling.addLane(element, 'top');
+            modeling.addLane(element, 'top')
           }
         }
       }
-    });
+    })
 
     if (childLanes.length < 2) {
-
       if (element.height >= 120) {
         assign(actions, {
           'lane-divide-two': {
@@ -261,7 +247,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
               click: splitLaneHandler(2)
             }
           }
-        });
+        })
       }
 
       if (element.height >= 180) {
@@ -274,7 +260,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
               click: splitLaneHandler(3)
             }
           }
-        });
+        })
       }
     }
 
@@ -285,18 +271,15 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         title: translate('Add Lane below'),
         action: {
           click: function(event, element) {
-            modeling.addLane(element, 'bottom');
+            modeling.addLane(element, 'bottom')
           }
         }
       }
-    });
-
+    })
   }
 
   if (is(businessObject, 'bpmn:FlowNode')) {
-
     if (is(businessObject, 'bpmn:EventBasedGateway')) {
-
       assign(actions, {
         'append.receive-task': appendAction(
           'bpmn:ReceiveTask',
@@ -327,11 +310,10 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
           translate('Append SignalIntermediateCatchEvent'),
           { eventDefinitionType: 'bpmn:SignalEventDefinition' }
         )
-      });
+      })
     } else
 
     if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
-
       assign(actions, {
         'append.compensation-activity':
           appendAction(
@@ -342,14 +324,13 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
               isForCompensation: true
             }
           )
-      });
+      })
     } else
 
     if (!is(businessObject, 'bpmn:EndEvent') &&
       !businessObject.isForCompensation &&
       !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
       !isEventSubProcess(businessObject)) {
-
       assign(actions, {
         'append.end-event': appendAction(
           'bpmn:EndEvent',
@@ -371,12 +352,11 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
           'bpmn-icon-intermediate-event-none',
           translate('Append Intermediate/Boundary Event')
         )
-      });
+      })
     }
   }
 
   if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
-
     // Replace menu entry
     assign(actions, {
       'replace': {
@@ -385,20 +365,19 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         title: translate('Change type'),
         action: {
           click: function(event, element) {
-
             var position = assign(getReplaceMenuPosition(element), {
               cursor: { x: event.x, y: event.y }
-            });
+            })
 
             popupMenu.open(element, 'bpmn-replace', position, {
               title: translate('Change element'),
               width: 300,
               search: true
-            });
+            })
           }
         }
       }
-    });
+    })
   }
 
   if (is(businessObject, 'bpmn:SequenceFlow')) {
@@ -407,7 +386,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         'bpmn:TextAnnotation',
         'bpmn-icon-text-annotation'
       )
-    });
+    })
   }
 
   if (
@@ -415,7 +394,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'bpmn:FlowNode',
       'bpmn:InteractionNode',
       'bpmn:DataObjectReference',
-      'bpmn:DataStoreReference',
+      'bpmn:DataStoreReference'
     ])
   ) {
     assign(actions, {
@@ -436,10 +415,10 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         ),
         action: {
           click: startConnect,
-          dragstart: startConnect,
-        },
-      },
-    });
+          dragstart: startConnect
+        }
+      }
+    })
   }
 
   if (is(businessObject, 'bpmn:TextAnnotation')) {
@@ -450,13 +429,13 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         title: translate('Connect using Association'),
         action: {
           click: startConnect,
-          dragstart: startConnect,
-        },
-      },
-    });
+          dragstart: startConnect
+        }
+      }
+    })
   }
 
-  if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
+  if (isAny(businessObject, ['bpmn:DataObjectReference', 'bpmn:DataStoreReference'])) {
     assign(actions, {
       'connect': {
         group: 'connect',
@@ -467,22 +446,21 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
           dragstart: startConnect
         }
       }
-    });
+    })
   }
 
   if (is(businessObject, 'bpmn:Group')) {
     assign(actions, {
       'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
-    });
+    })
   }
 
   // delete element entry, only show if allowed by rules
-  var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
+  var deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
 
   if (isArray(deleteAllowed)) {
-
     // was the element returned as a deletion candidate?
-    deleteAllowed = deleteAllowed[0] === element;
+    deleteAllowed = deleteAllowed[0] === element
   }
 
   if (deleteAllowed) {
@@ -495,30 +473,28 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
           click: removeElement
         }
       }
-    });
+    })
   }
 
-  return actions;
-};
-
+  return actions
+}
 
 // helpers /////////
 
 function isEventType(eventBo, type, definition) {
+  var isType = eventBo.$instanceOf(type)
+  var isDefinition = false
 
-  var isType = eventBo.$instanceOf(type);
-  var isDefinition = false;
-
-  var definitions = eventBo.eventDefinitions || [];
+  var definitions = eventBo.eventDefinitions || []
   forEach(definitions, function(def) {
     if (def.$type === definition) {
-      isDefinition = true;
+      isDefinition = true
     }
-  });
+  })
 
-  return isType && isDefinition;
+  return isType && isDefinition
 }
 
 function includes(array, item) {
-  return array.indexOf(item) !== -1;
+  return array.indexOf(item) !== -1
 }

src/components/Process/customPanel/CustomPalette.js

@@ -1,4 +1,4 @@
-import { assign } from "min-dash";
+import { assign } from 'min-dash'
 
 export default function CustomPalette(
   palette,
@@ -10,29 +10,29 @@ export default function CustomPalette(
   globalConnect,
   translate
 ) {
-  this.create = create;
-  this.elementFactory = elementFactory;
-  this.handTool = handTool;
-  this.lassoTool = lassoTool;
-  this.spaceTool = spaceTool;
-  this.globalConnect = globalConnect;
-  this.translate = translate;
+  this.create = create
+  this.elementFactory = elementFactory
+  this.handTool = handTool
+  this.lassoTool = lassoTool
+  this.spaceTool = spaceTool
+  this.globalConnect = globalConnect
+  this.translate = translate
 
-  palette.registerProvider(this);
+  palette.registerProvider(this)
 }
 
 CustomPalette.$inject = [
-  "palette",
-  "create",
-  "elementFactory",
-  "handTool",
-  "lassoTool",
-  "spaceTool",
-  "globalConnect",
-  "translate"
-];
+  'palette',
+  'create',
+  'elementFactory',
+  'handTool',
+  'lassoTool',
+  'spaceTool',
+  'globalConnect',
+  'translate'
+]
 
-CustomPalette.prototype.getPaletteEntries = function (element) {
+CustomPalette.prototype.getPaletteEntries = function(element) {
   const {
     create,
     elementFactory,
@@ -41,30 +41,30 @@ CustomPalette.prototype.getPaletteEntries = function (element) {
     spaceTool,
     globalConnect,
     translate
-  } = this;
+  } = this
 
   function createAction(type, group, className, title, options) {
     function createListener(event) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
+      var shape = elementFactory.createShape(assign({ type: type }, options))
 
       if (options) {
-        shape.businessObject.di.isExpanded = options.isExpanded;
+        shape.businessObject.di.isExpanded = options.isExpanded
       }
 
-      create.start(event, shape);
+      create.start(event, shape)
     }
 
-    var shortType = type.replace(/^bpmn:/, "");
+    var shortType = type.replace(/^bpmn:/, '')
 
     return {
       group: group,
       className: className,
-      title: title || translate("Create {type}", { type: shortType }),
+      title: title || translate('Create {type}', { type: shortType }),
       action: {
         dragstart: createListener,
         click: createListener
       }
-    };
+    }
   }
 
   return {
@@ -74,17 +74,17 @@ CustomPalette.prototype.getPaletteEntries = function (element) {
       title: '激活抓手工具',
       action: {
         click: function(event) {
-          handTool.activateHand(event);
+          handTool.activateHand(event)
         }
       }
     },
-    "lasso-tool": {
-      group: "tools",
-      className: "bpmn-icon-lasso-tool",
-      title: "激活套索工具",
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: '激活套索工具',
       action: {
-        click: function (event) {
-          lassoTool.activateSelection(event);
+        click: function(event) {
+          lassoTool.activateSelection(event)
         }
       }
     },
@@ -94,7 +94,7 @@ CustomPalette.prototype.getPaletteEntries = function (element) {
       title: translate('Activate the create/remove space tool'),
       action: {
         click: function(event) {
-          spaceTool.activateSelection(event);
+          spaceTool.activateSelection(event)
         }
       }
     },
@@ -104,39 +104,39 @@ CustomPalette.prototype.getPaletteEntries = function (element) {
       title: translate('Activate the global connect tool'),
       action: {
         click: function(event) {
-          globalConnect.start(event);
+          globalConnect.start(event)
         }
       }
     },
 
-    "tool-separator": {
-      group: "tools",
+    'tool-separator': {
+      group: 'tools',
       separator: true
     },
 
-    "create.start-event": createAction(
-      "bpmn:StartEvent",
-      "event",
-      "bpmn-icon-start-event-none",
-      "创建开始节点"
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      '创建开始节点'
     ),
-    "create.end-event": createAction(
-      "bpmn:EndEvent",
-      "event",
-      "bpmn-icon-end-event-none",
-      "创建结束节点"
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      '创建结束节点'
     ),
-    "create.user-task": createAction(
-      "bpmn:UserTask",
-      "activity",
-      "bpmn-icon-user-task",
-      "创建用户任务"
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      '创建用户任务'
     ),
-    "create.exclusive-gateway": createAction(
-      "bpmn:ExclusiveGateway",
-      "gateway",
-      "bpmn-icon-gateway-xor",
-      "创建排他网关"
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-xor',
+      '创建排他网关'
     )
-  };
-};
+  }
+}

src/components/Process/customPanel/index.js

@@ -1,8 +1,8 @@
-import CustomContextPad from './CustomContextPad';
-import CustomPalette from "./CustomPalette";
+import CustomContextPad from './CustomContextPad'
+import CustomPalette from './CustomPalette'
 
 export default {
-  __init__: [ 'paletteProvider','contextPadProvider'],
-  paletteProvider: [ 'type', CustomPalette ],
-  contextPadProvider: [ 'type', CustomContextPad ],
-};
+  __init__: ['paletteProvider', 'contextPadProvider'],
+  paletteProvider: ['type', CustomPalette],
+  contextPadProvider: ['type', CustomContextPad]
+}

src/components/Process/index1.vue

@@ -61,20 +61,20 @@
 
 <script>
 // 汉化
-//import customTranslate from './customPanel/customTranslate'
+// import customTranslate from './customPanel/customTranslate'
 import customTranslate from './common/customTranslate'
 import Modeler from 'bpmn-js/lib/Modeler'
 import Designer from './designer'
 import getInitStr from './flowable/init'
-import {StrUtil} from '@/utils/StrUtil'
+import { StrUtil } from '@/utils/StrUtil'
 // 引入flowable的节点文件
 import FlowableModule from './flowable/flowable.json'
 import customControlsModule from './customPanel'
 export default {
-  name: "BpmnModel",
-  components: {Designer},
+  name: 'BpmnModel',
+  components: { Designer },
   /** 组件传值  */
-  props : {
+  props: {
     xml: {
       type: String,
       default: ''
@@ -82,17 +82,17 @@ export default {
     isView: {
       type: Boolean,
       default: false
-    },
+    }
   },
   data() {
     return {
       modeler: null,
       zoom: 1,
-      loadCanvas: false,  // 当前组件渲染然后再加载canvas
+      loadCanvas: false, // 当前组件渲染然后再加载canvas
       simulationStatus: false,
       bpmnlintStatus: false,
       simulation: true,
-      designer: true,
+      designer: true
     }
   },
   /** 传值监听 */
@@ -105,18 +105,18 @@ export default {
           this.newDiagram()
         }
       },
-      immediate: true, // 立即生效
-    },
+      immediate: true // 立即生效
+    }
   },
   computed: {
     additionalModules() {
-      const Modules = [];
-      Modules.push(customControlsModule);
-      Modules.push({ //汉化
+      const Modules = []
+      Modules.push(customControlsModule)
+      Modules.push({ // 汉化
         translate: ['value', customTranslate]
-      });
-      return Modules;
-    },
+      })
+      return Modules
+    }
   },
   mounted() {
     /** 创建bpmn 实例 */
@@ -126,16 +126,16 @@ export default {
       moddleExtensions: {
         flowable: FlowableModule
       },
-      keyboard: { bindTo: document },
+      keyboard: { bindTo: document }
     })
-    this.modeler = modeler;
+    this.modeler = modeler
     // 注册 modeler 相关信息
-    this.modelerStore.modeler = modeler;
-    this.modelerStore.modeling = modeler.get("modeling");
-    this.modelerStore.moddle = modeler.get("moddle");
-    this.modelerStore.canvas = modeler.get("canvas");
-    this.modelerStore.bpmnFactory = modeler.get("bpmnFactory");
-    this.modelerStore.elRegistry = modeler.get("elementRegistry");
+    this.modelerStore.modeler = modeler
+    this.modelerStore.modeling = modeler.get('modeling')
+    this.modelerStore.moddle = modeler.get('moddle')
+    this.modelerStore.canvas = modeler.get('canvas')
+    this.modelerStore.bpmnFactory = modeler.get('bpmnFactory')
+    this.modelerStore.elRegistry = modeler.get('elementRegistry')
     // 直接点击新建按钮时,进行新增流程图
     if (StrUtil.isBlank(this.xml)) {
       this.newDiagram()
@@ -154,9 +154,9 @@ export default {
       // 将字符串转换成图显示出来
       // data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '&lt;![CDATA[$1]]&gt;')
       if (StrUtil.isNotBlank(this.modelerStore.modeler)) {
-        data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
-            return str.replace(/</g, '&lt;')
-          }
+        data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) {
+          return str.replace(/</g, '&lt;')
+        }
         )
         try {
           await this.modelerStore.modeler.importXML(data)
@@ -183,7 +183,7 @@ export default {
         height: currentViewBox.height
       })
       this.zoom = bbox.width / currentViewBox.width * 1.8
-      this.loadCanvas = true;
+      this.loadCanvas = true
     },
 
     // 放大缩小
@@ -214,7 +214,7 @@ export default {
     // 保存xml
     async saveXML(download = false) {
       try {
-        const {xml} = await this.modelerStore.modeler.saveXML({format: true})
+        const { xml } = await this.modelerStore.modeler.saveXML({ format: true })
         if (download) {
           this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
         }
@@ -237,7 +237,7 @@ export default {
     // 保存流程图为svg
     async saveImg(type = 'svg', download = false) {
       try {
-        const {svg} = await this.modelerStore.modeler.saveSVG({format: true})
+        const { svg } = await this.modelerStore.modeler.saveSVG({ format: true })
         if (download) {
           this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml')
         }
@@ -252,10 +252,10 @@ export default {
       const process = this.getProcess()
       const xml = await this.saveXML()
       const svg = await this.saveImg()
-      const result = {process, xml, svg}
+      const result = { process, xml, svg }
       this.$emit('save', result)
       window.parent.postMessage(result, '*')
-      this.goBack();
+      this.goBack()
     },
 
     // 打开流程文件
@@ -270,8 +270,8 @@ export default {
 
     // 下载流程文件
     downloadFile(filename, data, type) {
-      const a = document.createElement('a');
-      const url = window.URL.createObjectURL(new Blob([data], {type: type}));
+      const a = document.createElement('a')
+      const url = window.URL.createObjectURL(new Blob([data], { type: type }))
       a.href = url
       a.download = filename
       a.click()
@@ -280,9 +280,9 @@ export default {
 
     /** 关闭当前标签页并返回上个页面 */
     goBack() {
-      const obj = {path: "/flowable/definition", query: {t: Date.now()}};
-      this.$tab.closeOpenPage(obj);
-    },
+      const obj = { path: '/flowable/definition', query: { t: Date.now() }}
+      this.$tab.closeOpenPage(obj)
+    }
   }
 }
 </script>

src/components/Process/lang/zh.js

@@ -6,7 +6,7 @@ export default {
   'Append Gateway': '添加网关',
   'Append EndEvent': '添加结束事件',
   'Append StartEvent': '添加开始事件',
-  "Append Intermediate/Boundary Event": '添加边界事件',
+  'Append Intermediate/Boundary Event': '添加边界事件',
   'Add Lane above': '在上面添加道',
   'Divide into two Lanes': '分割成两个道',
   'Divide into three Lanes': '分割成三个道',

src/components/Process/panel/commonPanel.vue

@@ -37,27 +37,27 @@
 </template>
 
 <script>
-import {StrUtil} from '@/utils/StrUtil'
+import { StrUtil } from '@/utils/StrUtil'
 
 export default {
-  name: "CommonPanel",
+  name: 'CommonPanel',
   dicts: ['sys_process_category'],
   /** 组件传值  */
-  props : {
+  props: {
     id: {
       type: String,
       required: true
-    },
+    }
   },
   data() {
     return {
-      rules:{
+      rules: {
         id: [
-          { required: true, message: '节点Id 不能为空', trigger: 'blur' },
+          { required: true, message: '节点Id 不能为空', trigger: 'blur' }
         ],
         name: [
-          { required: true, message: '节点名称不能为空', trigger: 'blur' },
-        ],
+          { required: true, message: '节点名称不能为空', trigger: 'blur' }
+        ]
       },
       bpmnFormData: {}
     }
@@ -67,11 +67,11 @@ export default {
     id: {
       handler(newVal) {
         if (StrUtil.isNotBlank(newVal)) {
-          this.resetTaskForm();
+          this.resetTaskForm()
         }
       },
-      immediate: true, // 立即生效
-    },
+      immediate: true // 立即生效
+    }
   },
 
   created() {
@@ -79,42 +79,42 @@ export default {
   methods: {
     resetTaskForm() {
       // this.bpmnFormData = JSON.parse(JSON.stringify(this.modelerStore.element.businessObject));
-      this.bpmnFormData = Object.assign({}, this.modelerStore.element.businessObject);
+      this.bpmnFormData = Object.assign({}, this.modelerStore.element.businessObject)
 
       // 使用 $set 确保 documentationValue 是响应式的
-      this.$set(this.bpmnFormData, 'documentationValue', this.modelerStore.element.businessObject.documentation?.[0]?.text || '');
+      this.$set(this.bpmnFormData, 'documentationValue', this.modelerStore.element.businessObject.documentation?.[0]?.text || '')
     },
     updateElementTask(key) {
-      const taskAttr = Object.create(null);
-      taskAttr[key] = this.bpmnFormData[key] || null;
-      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
+      const taskAttr = Object.create(null)
+      taskAttr[key] = this.bpmnFormData[key] || null
+      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr)
     },
     updateDocumentation() {
       // 确保 modelerStore 是 BPMN.js 的 Modeler 实例
-      const modeler = this.modelerStore.modeler; // 获取实际的 modeler 实例
-      const moddle = modeler.get('moddle');      // 通过 modeler 获取 moddle
-      const modeling = modeler.get('modeling');  // 通过 modeler 获取 modeling
+      const modeler = this.modelerStore.modeler // 获取实际的 modeler 实例
+      const moddle = modeler.get('moddle') // 通过 modeler 获取 moddle
+      const modeling = modeler.get('modeling') // 通过 modeler 获取 modeling
 
       // 创建新的文档对象
       const documentation = moddle.create('bpmn:Documentation', {
         text: this.bpmnFormData.documentationValue
-      });
+      })
 
       // 获取当前元素的扩展元素
-      let extensionElements = this.modelerStore.element.businessObject.extensionElements;
+      let extensionElements = this.modelerStore.element.businessObject.extensionElements
 
       if (!extensionElements) {
         // 如果没有扩展元素，创建一个新的
         extensionElements = moddle.create('bpmn:ExtensionElements', {
           values: []
-        });
+        })
       }
 
       // 更新文档
       modeling.updateProperties(this.modelerStore.element, {
         documentation: [documentation],
         extensionElements: extensionElements
-      });
+      })
 
       // 强制更新模型
       this.modelerStore.modeler.get('commandStack').execute('element.updateProperties', {
@@ -122,12 +122,11 @@ export default {
         properties: {
           documentation: [documentation]
         }
-      });
+      })
 
-      this.$emit('save');
+      this.$emit('save')
     }
   }
 }
 
-
 </script>

src/components/Process/panel/conditionPanel.vue

@@ -55,15 +55,15 @@
 
 <script>
 
-import {StrUtil} from "@/utils/StrUtil";
+import { StrUtil } from '@/utils/StrUtil'
 export default {
-  name: "BpmnModel",
+  name: 'BpmnModel',
   /** 组件传值  */
-  props : {
+  props: {
     id: {
       type: String,
       required: true
-    },
+    }
   },
   data() {
     return {
@@ -78,11 +78,11 @@ export default {
     id: {
       handler(newVal) {
         if (StrUtil.isNotBlank(newVal)) {
-          this.resetFlowCondition();
+          this.resetFlowCondition()
         }
       },
-      immediate: true, // 立即生效
-    },
+      immediate: true // 立即生效
+    }
   },
   created() {
 
@@ -92,83 +92,83 @@ export default {
     resetFlowCondition() {
       this.bpmnFormData = {
         body: null
-      };
-      this.bpmnElementSource = this.modelerStore.element.source;
-      this.bpmnElementSourceRef = this.modelerStore.element.businessObject.sourceRef;
+      }
+      this.bpmnElementSource = this.modelerStore.element.source
+      this.bpmnElementSourceRef = this.modelerStore.element.businessObject.sourceRef
       if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.modelerStore.element.id) {
         // 默认
-        this.$set(this.bpmnFormData, "type", "default");
+        this.$set(this.bpmnFormData, 'type', 'default')
       } else if (!this.modelerStore.element.businessObject.conditionExpression) {
         // 普通
-        this.$set(this.bpmnFormData, "type", "normal");
+        this.$set(this.bpmnFormData, 'type', 'normal')
       } else {
         // 带条件
-        const conditionExpression = this.modelerStore.element.businessObject.conditionExpression;
-        this.bpmnFormData = {...conditionExpression, type: "condition"};
+        const conditionExpression = this.modelerStore.element.businessObject.conditionExpression
+        this.bpmnFormData = { ...conditionExpression, type: 'condition' }
         // resource 可直接标识 是否是外部资源脚本
         if (this.bpmnFormData.resource) {
-          this.$set(this.bpmnFormData, "conditionType", "script");
-          this.$set(this.bpmnFormData, "scriptType", "externalScript");
-          return;
+          this.$set(this.bpmnFormData, 'conditionType', 'script')
+          this.$set(this.bpmnFormData, 'scriptType', 'externalScript')
+          return
         }
         if (conditionExpression.language) {
-          this.$set(this.bpmnFormData, "conditionType", "script");
-          this.$set(this.bpmnFormData, "scriptType", "inlineScript");
-          return;
+          this.$set(this.bpmnFormData, 'conditionType', 'script')
+          this.$set(this.bpmnFormData, 'scriptType', 'inlineScript')
+          return
         }
-        this.$set(this.bpmnFormData, "conditionType", "expression");
+        this.$set(this.bpmnFormData, 'conditionType', 'expression')
       }
     },
 
     updateFlowType(flowType) {
       // 正常条件类
-      if (flowType === "condition") {
-        const flowConditionRef = this.modelerStore.moddle.create("bpmn:FormalExpression");
+      if (flowType === 'condition') {
+        const flowConditionRef = this.modelerStore.moddle.create('bpmn:FormalExpression')
         this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
           conditionExpression: flowConditionRef
-        });
-        return;
+        })
+        return
       }
       // 默认路径
-      if (flowType === "default") {
+      if (flowType === 'default') {
         this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
           conditionExpression: null
-        });
+        })
         this.modelerStore.modeling.updateProperties(this.bpmnElementSource, {
           default: this.modelerStore.element
-        });
+        })
         // 清空条件格式
-        this.bpmnFormData.conditionType = null;
-        return;
+        this.bpmnFormData.conditionType = null
+        return
       }
       // 清空条件格式
-      this.bpmnFormData.conditionType = null;
+      this.bpmnFormData.conditionType = null
       // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
       if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.modelerStore.element.id) {
         this.modelerStore.modeling.updateProperties(this.bpmnElementSource, {
           default: null
-        });
+        })
       }
       this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
         conditionExpression: null
-      });
+      })
     },
 
     updateFlowCondition() {
-      let {conditionType, scriptType, body, resource, language} = this.bpmnFormData;
-      let condition;
-      if (conditionType === "expression") {
-        condition = this.modelerStore.moddle.create("bpmn:FormalExpression", {body});
+      const { conditionType, scriptType, body, resource, language } = this.bpmnFormData
+      let condition
+      if (conditionType === 'expression') {
+        condition = this.modelerStore.moddle.create('bpmn:FormalExpression', { body })
       } else {
-        if (scriptType === "inlineScript") {
-          condition = this.modelerStore.moddle.create("bpmn:FormalExpression", {body, language});
-          this.$set(this.bpmnFormData, "resource", "");
+        if (scriptType === 'inlineScript') {
+          condition = this.modelerStore.moddle.create('bpmn:FormalExpression', { body, language })
+          this.$set(this.bpmnFormData, 'resource', '')
         } else {
-          this.$set(this.bpmnFormData, "body", "");
-          condition = this.modelerStore.moddle.create("bpmn:FormalExpression", {resource, language});
+          this.$set(this.bpmnFormData, 'body', '')
+          condition = this.modelerStore.moddle.create('bpmn:FormalExpression', { resource, language })
         }
       }
-      this.modelerStore.modeling.updateProperties(this.modelerStore.element, {conditionExpression: condition});
+      this.modelerStore.modeling.updateProperties(this.modelerStore.element, { conditionExpression: condition })
     }
   }
 }

src/components/Process/panel/formPanel.vue

@@ -18,21 +18,21 @@
 <script>
 
 import { listAllForm } from '@/api/flowable/form'
-import {StrUtil} from "@/utils/StrUtil";
+import { StrUtil } from '@/utils/StrUtil'
 export default {
-  name: "FormPanel",
+  name: 'FormPanel',
   /** 组件传值  */
-  props : {
+  props: {
     id: {
       type: String,
       required: true
-    },
+    }
   },
   data() {
     return {
       formList: [], // 表单数据
       bpmnFormData: {
-          formKey: ''
+        formKey: ''
       }
     }
   },
@@ -43,12 +43,12 @@ export default {
       handler(newVal) {
         if (StrUtil.isNotBlank(newVal)) {
           // 加载表单列表
-          this.getListForm();
-          this.resetFlowForm();
+          this.getListForm()
+          this.resetFlowForm()
         }
       },
-      immediate: true, // 立即生效
-    },
+      immediate: true // 立即生效
+    }
   },
   created() {
 
@@ -57,14 +57,14 @@ export default {
 
     // 方法区
     resetFlowForm() {
-      this.bpmnFormData.formKey = this.modelerStore.element.businessObject.formKey;
+      this.bpmnFormData.formKey = this.modelerStore.element.businessObject.formKey
     },
 
     updateElementFormKey(val) {
       if (StrUtil.isBlank(val)) {
         delete this.modelerStore.element.businessObject[`formKey`]
       } else {
-        this.modelerStore.modeling.updateProperties(this.modelerStore.element, {'formKey': val});
+        this.modelerStore.modeling.updateProperties(this.modelerStore.element, { 'formKey': val })
       }
     },
 
@@ -72,13 +72,12 @@ export default {
     getListForm() {
       listAllForm().then(res => {
         res.data.forEach(item => {
-          item.formId = item.formId.toString();
+          item.formId = item.formId.toString()
         })
-        this.formList = res.data;
+        this.formList = res.data
       })
     }
   }
 }
 
-
 </script>

src/components/Process/panel/otherPanel.vue

@@ -16,15 +16,15 @@
 
 <script>
 
-import {StrUtil} from "@/utils/StrUtil";
+import { StrUtil } from '@/utils/StrUtil'
 export default {
-  name: "OtherPanel",
+  name: 'OtherPanel',
   /** 组件传值  */
-  props : {
+  props: {
     id: {
       type: String,
       required: true
-    },
+    }
   },
   data() {
     return {
@@ -37,11 +37,11 @@ export default {
     id: {
       handler(newVal) {
         if (StrUtil.isNotBlank(newVal)) {
-          this.resetTaskForm();
+          this.resetTaskForm()
         }
       },
-      immediate: true, // 立即生效
-    },
+      immediate: true // 立即生效
+    }
   },
   created() {
 
@@ -49,17 +49,15 @@ export default {
   methods: {
     // 方法区
     resetFlowForm() {
-      this.bpmnFormData = JSON.parse(JSON.stringify(this.modelerStore.element.businessObject));
+      this.bpmnFormData = JSON.parse(JSON.stringify(this.modelerStore.element.businessObject))
     },
 
     updateElementTask(key) {
-      const taskAttr = Object.create(null);
-      taskAttr[key] = this.bpmnFormData[key] || null;
-      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
+      const taskAttr = Object.create(null)
+      taskAttr[key] = this.bpmnFormData[key] || null
+      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr)
     }
   }
 }
 
-
-
 </script>

src/components/Process/panel/taskPanel.vue

@@ -119,10 +119,10 @@ import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
 import FlowExp from '@/components/flow/Expression'
 import ElInputTag from '@/components/flow/ElInputTag'
-import {StrUtil} from '@/utils/StrUtil'
+import { StrUtil } from '@/utils/StrUtil'
 
 export default {
-  name: "TaskPanel",
+  name: 'TaskPanel',
   components: {
     FlowUser,
     FlowRole,
@@ -130,11 +130,11 @@ export default {
     ElInputTag
   },
   /** 组件传值  */
-  props : {
+  props: {
     id: {
       type: String,
       required: true
-    },
+    }
   },
   data() {
     return {
@@ -145,29 +145,29 @@ export default {
       checkType: 'single', // 选类
       userType: '',
       userTypeOption: [
-        {label: '指定人员', value: 'assignee'},
-        {label: '候选人员', value: 'candidateUsers'},
-        {label: '候选角色', value: 'candidateGroups'}
+        { label: '指定人员', value: 'assignee' },
+        { label: '候选人员', value: 'candidateUsers' },
+        { label: '候选角色', value: 'candidateGroups' }
       ],
       checkAll: false,
       bpmnFormData: {
-        userType: "",
-        assignee: "",
-        candidateUsers: "",
-        candidateGroups: "",
-        dueDate: "",
-        priority: "",
-        dataType: "",
-        expId: "",
+        userType: '',
+        assignee: '',
+        candidateUsers: '',
+        candidateGroups: '',
+        dueDate: '',
+        priority: '',
+        dataType: '',
+        expId: ''
       },
       // 数据回显
       selectData: {
         assignee: null,
         candidateUsers: null,
         candidateGroups: null,
-        exp: null,
+        exp: null
       },
-      otherExtensionList:[],
+      otherExtensionList: []
     }
   },
 
@@ -176,11 +176,11 @@ export default {
     id: {
       handler(newVal) {
         if (StrUtil.isNotBlank(newVal)) {
-          this.resetTaskForm();
+          this.resetTaskForm()
         }
       },
-      immediate: true, // 立即生效
-    },
+      immediate: true // 立即生效
+    }
   },
   created() {
 
@@ -190,70 +190,70 @@ export default {
     resetTaskForm() {
       // 初始化设为空值
       this.bpmnFormData = {
-        userType: "",
-        assignee: "",
-        candidateUsers: "",
-        candidateGroups: "",
-        dueDate: "",
-        priority: "",
-        dataType: "",
-        expId: "",
+        userType: '',
+        assignee: '',
+        candidateUsers: '',
+        candidateGroups: '',
+        dueDate: '',
+        priority: '',
+        dataType: '',
+        expId: ''
       }
       this.selectData = {
         assignee: null,
         candidateUsers: null,
         candidateGroups: null,
-        exp: null,
+        exp: null
       }
       // 流程节点信息上取值
-      for (let key in this.bpmnFormData) {
-        const value = this.modelerStore.element?.businessObject[key] || this.bpmnFormData[key];
-        this.$set(this.bpmnFormData, key, value);
+      for (const key in this.bpmnFormData) {
+        const value = this.modelerStore.element?.businessObject[key] || this.bpmnFormData[key]
+        this.$set(this.bpmnFormData, key, value)
       }
       // 人员信息回显
-      this.checkValuesEcho(this.bpmnFormData);
+      this.checkValuesEcho(this.bpmnFormData)
     },
 
     // 更新节点信息
     updateElementTask(key) {
-      const taskAttr = Object.create(null);
-      taskAttr[key] = this.bpmnFormData[key] || "";
-      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
+      const taskAttr = Object.create(null)
+      taskAttr[key] = this.bpmnFormData[key] || ''
+      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr)
     },
 
     // 更新自定义流程节点/参数信息
     updateCustomElement(key, value) {
-      const taskAttr = Object.create(null);
-      taskAttr[key] = value;
-      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
+      const taskAttr = Object.create(null)
+      taskAttr[key] = value
+      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr)
     },
 
     // 更新人员类型
     updateUserType(val) {
       // 删除xml中已选择数据类型节点
-      this.deleteFlowAttar();
+      this.deleteFlowAttar()
       delete this.modelerStore.element.businessObject[`userType`]
       // 清除已选人员数据
-      this.bpmnFormData[val] = null;
+      this.bpmnFormData[val] = null
       this.selectData = {
         assignee: null,
         candidateUsers: null,
         candidateGroups: null,
-        exp: null,
+        exp: null
       }
       // 写入userType节点信息到xml
-      this.updateCustomElement('userType', val);
+      this.updateCustomElement('userType', val)
     },
 
     // 设计器右侧表单数据回显
     checkValuesEcho(formData) {
       if (StrUtil.isNotBlank(formData.expId)) {
-        this.getExpList(formData.expId, formData.userType);
+        this.getExpList(formData.expId, formData.userType)
       } else {
-        if ("candidateGroups" === formData.userType) {
-          this.getRoleList(formData[formData.userType], formData.userType);
+        if (formData.userType === 'candidateGroups') {
+          this.getRoleList(formData[formData.userType], formData.userType)
         } else {
-          this.getUserList(formData[formData.userType], formData.userType);
+          this.getUserList(formData[formData.userType], formData.userType)
         }
       }
     },
@@ -261,8 +261,8 @@ export default {
     // 获取表达式信息
     getExpList(val, key) {
       if (StrUtil.isNotBlank(val)) {
-        this.bpmnFormData[key] = this.modelerStore.expList?.find(item => item.id.toString() === val).name;
-        this.selectData.exp = this.modelerStore.expList?.find(item => item.id.toString() === val).id;
+        this.bpmnFormData[key] = this.modelerStore.expList?.find(item => item.id.toString() === val).name
+        this.selectData.exp = this.modelerStore.expList?.find(item => item.id.toString() === val).id
       }
     },
 
@@ -270,11 +270,11 @@ export default {
     getUserList(val, key) {
       if (StrUtil.isNotBlank(val)) {
         const newArr = this.modelerStore.userList?.filter(i => val.toString().split(',').includes(i.userId.toString()))
-        this.bpmnFormData[key] = newArr.map(item => item.nickName).join(',');
-        if ('assignee' === key) {
-          this.selectData[key] = newArr.find(item => item.userId.toString() === val.toString()).userId;
+        this.bpmnFormData[key] = newArr.map(item => item.nickName).join(',')
+        if (key === 'assignee') {
+          this.selectData[key] = newArr.find(item => item.userId.toString() === val.toString()).userId
         } else {
-          this.selectData[key] = newArr.map(item => item.userId);
+          this.selectData[key] = newArr.map(item => item.userId)
         }
       }
     },
@@ -283,74 +283,74 @@ export default {
     getRoleList(val, key) {
       if (StrUtil.isNotBlank(val)) {
         const newArr = this.modelerStore.roleList?.filter(i => val.split(',').includes(i.roleId.toString()))
-        this.bpmnFormData[key] = newArr.map(item => item.roleName).join(',');
-        if ('assignee' === key) {
-          this.selectData[key] = newArr.find(item => item.roleId.toString() === val).roleId;
+        this.bpmnFormData[key] = newArr.map(item => item.roleName).join(',')
+        if (key === 'assignee') {
+          this.selectData[key] = newArr.find(item => item.roleId.toString() === val).roleId
         } else {
-          this.selectData[key] = newArr.map(item => item.roleId);
+          this.selectData[key] = newArr.map(item => item.roleId)
         }
       }
     },
 
     // ------ 流程审批人员信息弹出框 start---------
 
-    /*单选人员*/
+    /* 单选人员*/
     singleUserCheck() {
-      this.userVisible = true;
-      this.checkType = "single";
+      this.userVisible = true
+      this.checkType = 'single'
     },
 
-    /*多选人员*/
+    /* 多选人员*/
     multipleUserCheck() {
-      this.userVisible = true;
-      this.checkType = "multiple";
+      this.userVisible = true
+      this.checkType = 'multiple'
     },
 
-    /*单选角色*/
+    /* 单选角色*/
     singleRoleCheck() {
-      this.roleVisible = true;
-      this.checkType = "single";
+      this.roleVisible = true
+      this.checkType = 'single'
     },
 
-    /*多选角色*/
+    /* 多选角色*/
     multipleRoleCheck() {
-      this.roleVisible = true;
+      this.roleVisible = true
     },
 
-    /*单选表达式*/
+    /* 单选表达式*/
     singleExpCheck() {
-      this.expVisible = true;
+      this.expVisible = true
     },
 
     // 表达式选中数据
     expSelect(selection) {
       if (selection) {
-        this.deleteFlowAttar();
-        this.bpmnFormData[this.bpmnFormData.userType] = selection.name;
-        this.updateCustomElement('dataType', selection.dataType);
-        this.updateCustomElement('expId', selection.id.toString());
-        this.updateCustomElement(this.bpmnFormData.userType, selection.expression);
-        this.handleSelectData("exp", selection.id);
+        this.deleteFlowAttar()
+        this.bpmnFormData[this.bpmnFormData.userType] = selection.name
+        this.updateCustomElement('dataType', selection.dataType)
+        this.updateCustomElement('expId', selection.id.toString())
+        this.updateCustomElement(this.bpmnFormData.userType, selection.expression)
+        this.handleSelectData('exp', selection.id)
       }
     },
 
     // 用户选中数据 TODO: 后面更改为 点击确认按钮再赋值人员信息
     userSelect(selection) {
       if (selection) {
-        this.deleteFlowAttar();
-        this.updateCustomElement('dataType', 'fixed');
+        this.deleteFlowAttar()
+        this.updateCustomElement('dataType', 'fixed')
         if (selection instanceof Array) {
-          const userIds = selection.map(item => item.userId);
-          const nickName = selection.map(item => item.nickName);
+          const userIds = selection.map(item => item.userId)
+          const nickName = selection.map(item => item.nickName)
           // userType = candidateUsers
-          this.bpmnFormData[this.bpmnFormData.userType] = nickName.join(',');
-          this.updateCustomElement(this.bpmnFormData.userType, userIds.join(','));
-          this.handleSelectData(this.bpmnFormData.userType, userIds);
+          this.bpmnFormData[this.bpmnFormData.userType] = nickName.join(',')
+          this.updateCustomElement(this.bpmnFormData.userType, userIds.join(','))
+          this.handleSelectData(this.bpmnFormData.userType, userIds)
         } else {
           // userType = assignee
-          this.bpmnFormData[this.bpmnFormData.userType] = selection.nickName;
-          this.updateCustomElement(this.bpmnFormData.userType, selection.userId);
-          this.handleSelectData(this.bpmnFormData.userType, selection.userId);
+          this.bpmnFormData[this.bpmnFormData.userType] = selection.nickName
+          this.updateCustomElement(this.bpmnFormData.userType, selection.userId)
+          this.handleSelectData(this.bpmnFormData.userType, selection.userId)
         }
       }
     },
@@ -358,40 +358,40 @@ export default {
     // 角色选中数据
     roleSelect(selection, name) {
       if (selection && name) {
-        this.deleteFlowAttar();
-        this.bpmnFormData[this.bpmnFormData.userType] = name;
-        this.updateCustomElement('dataType', 'fixed');
+        this.deleteFlowAttar()
+        this.bpmnFormData[this.bpmnFormData.userType] = name
+        this.updateCustomElement('dataType', 'fixed')
         // userType = candidateGroups
-        this.updateCustomElement(this.bpmnFormData.userType, selection);
-        this.handleSelectData(this.bpmnFormData.userType, selection);
+        this.updateCustomElement(this.bpmnFormData.userType, selection)
+        this.handleSelectData(this.bpmnFormData.userType, selection)
       }
     },
 
     // 处理人员回显
     handleSelectData(key, value) {
-      for (let oldKey in this.selectData) {
+      for (const oldKey in this.selectData) {
         if (key !== oldKey) {
-          this.$set(this.selectData, oldKey, null);
+          this.$set(this.selectData, oldKey, null)
         } else {
-          this.$set(this.selectData, oldKey, value);
+          this.$set(this.selectData, oldKey, value)
         }
       }
     },
 
-    /*用户选中赋值*/
+    /* 用户选中赋值*/
     checkUserComplete() {
-      this.userVisible = false;
-      this.checkType = "";
+      this.userVisible = false
+      this.checkType = ''
     },
 
-    /*候选角色选中赋值*/
+    /* 候选角色选中赋值*/
     checkRoleComplete() {
-      this.roleVisible = false;
+      this.roleVisible = false
     },
 
-    /*表达式选中赋值*/
+    /* 表达式选中赋值*/
     checkExpComplete() {
-      this.expVisible = false;
+      this.expVisible = false
     },
 
     // 删除节点
@@ -405,19 +405,19 @@ export default {
 
     // 去重数据
     unique(arr, code) {
-      const res = new Map();
-      return arr.filter((item) => !res.has(item[code]) && res.set(item[code], 1));
+      const res = new Map()
+      return arr.filter((item) => !res.has(item[code]) && res.set(item[code], 1))
     },
 
     // 更新扩展属性信息
     updateElementExtensions(properties) {
-      const extensions = this.modelerStore.moddle.create("bpmn:ExtensionElements", {
+      const extensions = this.modelerStore.moddle.create('bpmn:ExtensionElements', {
         values: this.otherExtensionList.concat([properties])
-      });
+      })
 
       this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
         extensionElements: extensions
-      });
+      })
     }
   }
 }

src/components/customBpmn/index.js

@@ -0,0 +1,12 @@
+import inherits from "inherits";
+import Viewer from "bpmn-js/lib/Viewer";
+import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
+function CustomViewer(options) {
+  Viewer.call(this, options);
+}
+inherits(CustomViewer, Viewer);
+CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [ZoomScrollModule, MoveCanvasModule]);
+export {
+  CustomViewer
+};

src/components/flow/ElInputTag/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+      class="el-input-tag input-tag-wrapper"
+      :class="[size ? 'el-input-tag--' + size : '']"
+      @click="focusTagInput">
+    <el-tag
+        v-for="(tag, idx) in innerTags"
+        v-bind="$attrs"
+        :key="idx"
+        :size="size"
+        effect="dark"
+        closable
+        :disable-transitions="false"
+        @close="remove(idx)">
+      {{tag}}
+    </el-tag>
+    <input
+        v-if="!readOnly"
+        class="tag-input"
+        :placeholder="placeholder"
+        @input="inputTag"
+        :value="newTag"
+        @keydown.delete.stop = "removeLastTag"
+    />
+<!--    @keydown = "addNew"
+        @blur = "addNew"-->
+  </div>
+</template>
+
+
+<script>
+import {StrUtil} from '@/utils/StrUtil'
+
+export default {
+  name: "ElInputTag",
+  /** 组件传值  */
+  props : {
+    value: {
+      type: String,
+      default: ""
+    },
+    addTagOnKeys: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    placeholder: String,
+  },
+  data() {
+    return {
+       newTag :"",
+       innerTags :[],
+       readOnly :true,
+    }
+  },
+  /** 传值监听 */
+  watch: {
+    value: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          this.innerTags = newVal.split(',');
+        }else {
+          this.innerTags = [];
+        }
+      },
+      immediate: true, // 立即生效
+    },
+  },
+  methods: {
+    focusTagInput() {
+      if (this.readOnly || !this.$el.querySelector('.tag-input')) {
+        return
+      } else {
+        this.$el.querySelector('.tag-input').focus()
+      }
+    },
+
+    inputTag(ev) {
+     this.newTag = ev.target.value
+    },
+
+    addNew(e) {
+      if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
+        return
+      }
+      if (e) {
+        e.stopPropagation()
+        e.preventDefault()
+      }
+      let addSuccess = false
+      if (this.newTag.includes(',')) {
+       this.newTag.split(',').forEach(item => {
+          if (this.addTag(item.trim())) {
+            addSuccess = true
+          }
+        })
+      } else {
+        if (this.addTag(this.newTag.trim())) {
+          addSuccess = true
+        }
+      }
+      if (addSuccess) {
+        this.tagChange()
+       this.newTag = ''
+      }
+    },
+
+    addTag(tag) {
+      tag = tag.trim()
+      if (tag && !this.innerTags.includes(tag)) {
+        this.innerTags.push(tag)
+        return true
+      }
+      return false
+    },
+
+    remove(index) {
+      this.innerTags.splice(index, 1)
+      this.tagChange();
+    },
+
+    removeLastTag() {
+      if (this.newTag) {
+        return
+      }
+      this.innerTags.pop()
+      this.tagChange()
+    },
+
+    tagChange() {
+      this.$emit('input', this.innerTags)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.el-form-item.is-error .el-input-tag {
+  border-color: #f56c6c;
+}
+.input-tag-wrapper {
+  position: relative;
+  font-size: 14px;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  outline: none;
+  padding: 0 10px 0 5px;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  width: 100%;
+}
+.el-tag {
+  margin-right: 4px;
+}
+
+.tag-input {
+  background: transparent;
+  border: 0;
+  font-size: inherit;
+  outline: none;
+  padding-left: 0;
+  width: 100px;
+}
+.el-input-tag {
+  min-height: 42px;
+}
+.el-input-tag--small {
+  min-height: 32px;
+  line-height: 32px;
+  font-size: 12px;
+}
+
+.el-input-tag--default {
+  min-height: 34px;
+  line-height: 34px;
+}
+
+.el-input-tag--large {
+  min-height: 36px;
+  line-height: 36px;
+}
+
+</style>

src/components/flow/Expression/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表达式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="expressionList" row-key="id" @current-change="handleSingleExpSelect">
+      <el-table-column  width="55" align="center" >
+        <template slot-scope="scope">
+          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+          <el-radio v-model="radioSelected" :label="scope.row.id">{{''}}</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="表达式内容" align="center" prop="expression" />
+      <el-table-column label="表达式类型" align="center" prop="dataType" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.exp_data_type" :value="scope.row.dataType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listExpression } from "@/api/system/expression";
+import {StrUtil} from "@/utils/StrUtil";
+
+export default {
+  name: "Expression",
+  dicts: ['sys_common_status','exp_data_type'],
+  // 接受父组件的值
+  props: {
+    // 回显数据传值
+    selectValues: {
+      type: Number | String,
+      default: null,
+      required: false
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程达式表格数据
+      expressionList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        expression: null,
+        status: null,
+      },
+      radioSelected: null // 单选框传值
+    };
+  },
+  watch: {
+    selectValues: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          this.radioSelected = newVal
+        }
+      },
+      immediate: true,
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程达式列表 */
+    getList() {
+      this.loading = true;
+      listExpression(this.queryParams).then(response => {
+        this.expressionList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 单选框选中数据
+    handleSingleExpSelect(selection) {
+      this.radioSelected = selection.id;//点击当前行时,radio同样有选中效果
+      this.$emit('handleSingleExpSelect',selection);
+    },
+  }
+};
+</script>

src/components/flow/Listener/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-row>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+        <el-form-item label="名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="监听类型" prop="type">
+          <el-select v-model="queryParams.type" placeholder="请选择监听类型" clearable>
+            <el-option
+              v-for="dict in dict.type.sys_listener_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+
+    <el-table v-loading="loading" :data="listenerList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="名称" align="center" prop="name"/>
+      <el-table-column label="监听类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_listener_type" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="事件类型" align="center" prop="eventType"/>
+      <el-table-column label="值类型" align="center" prop="valueType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_listener_value_type" :value="scope.row.valueType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行内容" align="center" prop="value"/>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+  import { listListener } from '@/api/system/listener'
+
+  export default {
+    name: 'FlowListener',
+    dicts: ['sys_listener_value_type', 'sys_listener_type', 'common_status', 'sys_listener_event_type'],
+    props: {
+      selectValues: {
+        type: Number | String | Array,
+        default: null,
+        required: false
+      }
+    },
+    data() {
+      return {
+        /** 遮罩层 */
+        loading: true,
+        /** 流程监听表格数据 */
+        listenerList: [],
+        /** 总条数 */
+        total: 0,
+        /** 查询参数 */
+        queryParams: {
+          pageNum: 1,
+          pageSize: 5,
+          name: null,
+          type: null,
+          eventType: null,
+          valueType: null,
+          value: null,
+          status: null
+        }
+      }
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      /** 查询流程监听列表 */
+      getList() {
+        this.loading = true
+        listListener(this.queryParams).then(response => {
+          this.listenerList = response.rows
+          this.total = response.total
+          this.loading = false
+        })
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1
+        this.getList()
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm('queryForm')
+        this.handleQuery()
+      },
+      /** 多选框选中数据 */
+      handleSelectionChange(selection) {
+        this.$emit('handleSelect', selection)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/flow/Role/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          placeholder="请输入角色名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-show="checkType === 'multiple'" ref="dataTable"  v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table v-show="checkType === 'single'" v-loading="loading" :data="roleList" @current-change="handleSingleRoleSelect">
+      <el-table-column  width="55" align="center" >
+        <template slot-scope="scope">
+          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+          <el-radio v-model="radioSelected" :label="scope.row.roleId">{{''}}</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
+import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+import {StrUtil} from "@/utils/StrUtil";
+
+export default {
+  name: "FlowRole",
+  dicts: ['sys_normal_disable'],
+  // 接受父组件的值
+  props: {
+    // 回显数据传值
+    selectValues: {
+      type: Number | String | Array,
+      default: null,
+      required: false
+    },
+    checkType: {
+      type: String,
+      default: 'multiple',
+      required: false
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      radioSelected: null, // 单选框传值
+      selectRoleList: [] // 回显数据传值
+    };
+  },
+  watch: {
+    selectValues: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          if (newVal instanceof Number || newVal instanceof String) {
+            this.radioSelected = newVal
+          } else {
+            this.selectRoleList = newVal;
+          }
+        }
+      },
+      immediate: true
+    },
+    roleList: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal) && this.selectRoleList.length > 0) {
+          this.$nextTick(() => {
+            this.$refs.dataTable.clearSelection();
+            this.selectRoleList.split(',').forEach(key => {
+              this.$refs.dataTable.toggleRowSelection(newVal.find(
+                item => key == item.roleId
+              ), true)
+            });
+          });
+        }
+      },
+      immediate: true, // 立即生效
+      deep: true  //监听对象或数组的时候，要用到深度监听
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.queryParams).then(response => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 多选框选中数据
+    handleMultipleRoleSelect(selection) {
+      const idList = selection.map(item => item.roleId);
+      const nameList = selection.map(item => item.roleName);
+      this.$emit('handleRoleSelect', idList.join(','), nameList.join(','));
+    },
+    // 单选框选中数据
+    handleSingleRoleSelect(selection) {
+      this.radioSelected = selection.roleId;
+      const roleName = selection.roleName;
+      this.$emit('handleRoleSelect', this.radioSelected.toString(), roleName);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.handleQuery();
+    },
+  }
+};
+</script>
+<style>
+/*隐藏radio展示的label及本身自带的样式*/
+/*.el-radio__label{*/
+/*  display:none;*/
+/*}*/
+</style>

src/components/flow/User/index.vue

@@ -0,0 +1,387 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="6" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            placeholder="请输入部门名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            :default-expand-all="false"
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="18" :xs="24">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          v-show="showSearch"
+          label-width="68px"
+        >
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="phonenumber">
+            <el-input
+              v-model="queryParams.phonenumber"
+              placeholder="请输入手机号码"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
+        <el-table
+          v-show="checkType === 'multiple'"
+          ref="dataTable"
+          v-loading="loading"
+          :row-key="getRowKey"
+          :data="userList"
+          @selection-change="handleMultipleUserSelect"
+        >
+          <el-table-column
+            type="selection"
+            :reserve-selection="true"
+            width="50"
+            align="center"
+          />
+          <el-table-column
+            label="用户编号"
+            align="center"
+            key="userId"
+            prop="userId"
+            v-if="columns[0].visible"
+          />
+          <el-table-column
+            label="登录账号"
+            align="center"
+            key="userName"
+            prop="userName"
+            v-if="columns[1].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="用户姓名"
+            align="center"
+            key="nickName"
+            prop="nickName"
+            v-if="columns[2].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="部门"
+            align="center"
+            key="deptName"
+            prop="dept.deptName"
+            v-if="columns[3].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="手机号码"
+            align="center"
+            key="phonenumber"
+            prop="phonenumber"
+            v-if="columns[4].visible"
+            width="120"
+          />
+        </el-table>
+        <el-table
+          v-show="checkType === 'single'"
+          v-loading="loading"
+          :data="userList"
+          @current-change="handleSingleUserSelect"
+        >
+          <el-table-column width="55" align="center">
+            <template slot-scope="scope">
+              <el-radio v-model="radioSelected" :label="scope.row.userId">{{
+                ""
+              }}</el-radio>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="用户编号"
+            align="center"
+            key="userId"
+            prop="userId"
+            v-if="columns[0].visible"
+          />
+          <el-table-column
+            label="登录账号"
+            align="center"
+            key="userName"
+            prop="userName"
+            v-if="columns[1].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="用户姓名"
+            align="center"
+            key="nickName"
+            prop="nickName"
+            v-if="columns[2].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="部门"
+            align="center"
+            key="deptName"
+            prop="dept.deptName"
+            v-if="columns[3].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="手机号码"
+            align="center"
+            key="phonenumber"
+            prop="phonenumber"
+            v-if="columns[4].visible"
+            width="120"
+          />
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page-sizes="[5, 10]"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listUser, deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { StrUtil } from "@/utils/StrUtil";
+
+export default {
+  name: "FlowUser",
+  dicts: ["sys_normal_disable", "sys_user_sex"],
+  components: { Treeselect },
+  // 接受父组件的值
+  props: {
+    // 回显数据传值
+    selectValues: {
+      type: Number | String | Array,
+      default: null,
+      required: false,
+    },
+    // 表格类型
+    checkType: {
+      type: String,
+      default: "multiple",
+      required: true,
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: [],
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined,
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true },
+      ],
+      radioSelected: null, // 单选框传值
+      selectUserList: [], // 回显数据传值
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
+    selectValues: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          if (newVal instanceof Number) {
+            this.radioSelected = newVal;
+          } else {
+            this.selectUserList = newVal;
+            if (this.userList.length > 0) {
+              this.$nextTick(() => {
+                this.$refs.dataTable.clearSelection();
+                newVal.split(",").forEach((key) => {
+                  let item = this.userList.find((item) => key == item.userId);
+                  if (item) {
+                    this.$refs.dataTable.toggleRowSelection(item, true);
+                  }
+                });
+              });
+            }
+          }
+        } else {
+          this.$nextTick(() => {
+            this.$refs.dataTable.clearSelection();
+          });
+        }
+      },
+      immediate: true,
+    },
+    userList: {
+      handler(newVal) {
+        if (
+          StrUtil.isNotBlank(newVal) &&
+          this.selectUserList.length > 0 &&
+          newVal.length > 0
+        ) {
+          this.$nextTick(() => {
+            this.$refs.dataTable.clearSelection();
+            this.selectUserList.split(",").forEach((key) => {
+              let item = newVal.find((item) => key == item.userId);
+              if (item) {
+                this.$refs.dataTable.toggleRowSelection(item, true);
+              }
+            });
+          });
+        }
+      },
+      immediate: true, // 立即生效
+      deep: true, //监听对象或数组的时候，要用到深度监听
+    },
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then((response) => {
+        this.userList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
+    getRowKey(row) {
+      return row.id;
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleMultipleUserSelect(selection) {
+      this.$emit("handleUserSelect", selection);
+    },
+    // 单选框选中数据
+    handleSingleUserSelect(selection) {
+      this.radioSelected = selection.userId; //点击当前行时,radio同样有选中效果
+      this.$emit("handleUserSelect", selection);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.queryParams.deptId = undefined;
+      this.$refs.tree.setCurrentKey(null);
+      this.handleQuery();
+    },
+  },
+};
+</script>
+<style>
+/*隐藏radio展示的label及本身自带的样式*/
+/*.el-radio__label{*/
+/*  display:none;*/
+/*}*/
+</style>

src/components/parser/Parser.vue

@@ -34,8 +34,8 @@ const layouts = {
     let child = renderChildren.apply(this, arguments)
     if (scheme.type === 'flex') {
       child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
-              {child}
-            </el-row>
+        {child}
+      </el-row>
     }
     return (
       <el-col span={scheme.span}>
@@ -71,8 +71,8 @@ function renderFrom(h) {
 
 function formBtns(h) {
   return <el-col>
-    <el-form-item size="large">
-      <el-button type="primary" onClick={this.submitForm}>提交</el-button>
+    <el-form-item size='large'>
+      <el-button type='primary' onClick={this.submitForm}>提交</el-button>
       <el-button onClick={this.resetForm}>重置</el-button>
     </el-form-item>
   </el-col>
@@ -104,75 +104,75 @@ function setValue(event, config, scheme) {
 }
 
 function buildListeners(scheme) {
-  const config = scheme.__config__;
-  const methods = this.formConf.__methods__ || {};
-  const listeners = {};
+  const config = scheme.__config__
+  const methods = this.formConf.__methods__ || {}
+  const listeners = {}
 
   // 给__methods__中的方法绑定this和event
   Object.keys(methods).forEach((key) => {
-    listeners[key] = (event) => methods[key].call(this, event);
-  });
+    listeners[key] = (event) => methods[key].call(this, event)
+  })
 
   // 响应 render.js 中的 vModel $emit('input', val)
-  listeners.input = (event) => setValue.call(this, event, config, scheme);
+  listeners.input = (event) => setValue.call(this, event, config, scheme)
 
   // 上传表单元素组件的成功、移除和预览事件
-  if (config.tag === "el-upload") {
+  if (config.tag === 'el-upload') {
     listeners.upload = (response, file, fileList) =>
-      setUpload.call(this, config, scheme, response, file, fileList);
+      setUpload.call(this, config, scheme, response, file, fileList)
 
     listeners.deleteUpload = (file, fileList) =>
-      deleteUpload.call(this, config, scheme, file, fileList);
+      deleteUpload.call(this, config, scheme, file, fileList)
 
     listeners.previewUpload = (file, fileList) =>
-      window.open(file.url, "_blank");
+      window.open(file.url, '_blank')
   }
 
-  return listeners;
+  return listeners
 }
 
-//获取上传表单元素组件 上传的文件
+// 获取上传表单元素组件 上传的文件
 function setUpload(config, scheme, response, file, fileList) {
-  //response: 上传接口返回的数据
-  let fileObj = {
+  // response: 上传接口返回的数据
+  const fileObj = {
     name: response.fileName,
     url: response.url,
-    fileType: response.contentType,
-  };
-  let oldValue = "";
+    fileType: response.contentType
+  }
+  let oldValue = ''
   try {
-    oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]);
+    oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
   } catch (err) {
-    console.warn(err);
+    console.warn(err)
   }
 
   if (oldValue) {
-    oldValue.push(fileObj);
+    oldValue.push(fileObj)
   } else {
-    oldValue = [fileObj];
+    oldValue = [fileObj]
   }
 
-  this.$set(config, "defaultValue", JSON.stringify(oldValue));
+  this.$set(config, 'defaultValue', JSON.stringify(oldValue))
   this.$set(
     this[this.formConf.formModel],
     scheme.__vModel__,
     JSON.stringify(oldValue)
-  );
+  )
 }
 
-//获取上传表单元素组件 删除文件后的文件列表
+// 获取上传表单元素组件 删除文件后的文件列表
 function deleteUpload(config, scheme, file, fileList) {
-  let oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]);
+  const oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
 
-  //file 删除的文件
-  //过滤掉删除的文件
-  let newValue = oldValue.filter((item) => item.name !== file.name);
-  this.$set(config, "defaultValue", JSON.stringify(newValue));
+  // file 删除的文件
+  // 过滤掉删除的文件
+  const newValue = oldValue.filter((item) => item.name !== file.name)
+  this.$set(config, 'defaultValue', JSON.stringify(newValue))
   this.$set(
     this[this.formConf.formModel],
     scheme.__vModel__,
     JSON.stringify(newValue)
-  );
+  )
 }
 
 export default {
@@ -219,7 +219,13 @@ export default {
             config.regList.push(required)
           }
           rules[cur.__vModel__] = config.regList.map(item => {
-            item.pattern && (item.pattern = eval(item.pattern))
+            if (item.pattern) {
+              try {
+                item.pattern = new RegExp(item.pattern.slice(1, -1))
+              } catch (e) {
+                console.error('Invalid regex pattern:', item.pattern)
+              }
+            }
             item.trigger = ruleTrigger && ruleTrigger[config.tag]
             return item
           })
@@ -245,7 +251,7 @@ export default {
       })
     },
     // 传值给父组件
-    getData(){
+    getData() {
       this.$emit('getData', this[this.formConf.formModel])
       // this.$emit('getData',this.formConfCopy)
     }

src/components/render/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "form-gen-render",
+  "version": "1.0.4",
+  "description": "表单核心render",
+  "main": "lib/form-gen-render.umd.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JakHuang/form-generator.git"
+  },
+  "author": "jakhuang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JakHuang/form-generator/issues"
+  },
+  "homepage": "https://github.com/JakHuang/form-generator#readme"
+}

src/components/render/render.js

@@ -0,0 +1,147 @@
+import { deepClone } from '@/utils/index'
+
+const componentChild = {}
+/**
+ * 将./slots中的文件挂载到对象componentChild上
+ * 文件名为key，对应JSON配置中的__config__.tag
+ * 文件内容为value，解析JSON配置中的__slot__
+ */
+const slotsFiles = require.context('./slots', false, /\.js$/)
+const keys = slotsFiles.keys() || []
+keys.forEach(key => {
+  const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = slotsFiles(key).default
+  componentChild[tag] = value
+})
+
+function vModel(dataObject, defaultValue, config) {
+  // 获取上传表单元素组件上传的文件
+  if (config.tag === "el-upload") {
+    // 上传表单元素组件的成功和移除事件
+    dataObject.attrs["on-success"] = (response, file, fileList) => {
+      this.$emit("upload", response, file, fileList);
+    };
+
+    dataObject.attrs["on-remove"] = (file, fileList) => {
+      this.$emit("deleteUpload", file, fileList);
+    };
+
+    dataObject.attrs["on-preview"] = (file, fileList) => {
+      this.$emit("previewUpload", file, fileList);
+    };
+
+    // 获取上传表单元素的默认值
+    try {
+      dataObject.props["file-list"] = JSON.parse(defaultValue);
+    } catch (err) {
+      console.warn(err);
+    }
+
+    return;
+  }
+
+  // 获取普通表单元素的值
+  dataObject.props.value = defaultValue;
+  dataObject.on.input = (val) => {
+    this.$emit("input", val);
+  };
+}
+
+function mountSlotFiles(h, confClone, children) {
+  const childObjs = componentChild[confClone.__config__.tag]
+  if (childObjs) {
+    Object.keys(childObjs).forEach(key => {
+      const childFunc = childObjs[key]
+      if (confClone.__slot__ && confClone.__slot__[key]) {
+        children.push(childFunc(h, confClone, key))
+      }
+    })
+  }
+}
+
+function emitEvents(confClone) {
+  ['on', 'nativeOn'].forEach(attr => {
+    const eventKeyList = Object.keys(confClone[attr] || {})
+    eventKeyList.forEach(key => {
+      const val = confClone[attr][key]
+      if (typeof val === 'string') {
+        confClone[attr][key] = event => this.$emit(val, event)
+      }
+    })
+  })
+}
+
+function buildDataObject(confClone, dataObject) {
+  Object.keys(confClone).forEach(key => {
+    const val = confClone[key]
+    if (key === '__vModel__') {
+      vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone.__config__)
+    } else if (dataObject[key] !== undefined) {
+      if (dataObject[key] === null
+        || dataObject[key] instanceof RegExp
+        || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
+        dataObject[key] = val
+      } else if (Array.isArray(dataObject[key])) {
+        dataObject[key] = [...dataObject[key], ...val]
+      } else {
+        dataObject[key] = { ...dataObject[key], ...val }
+      }
+    } else {
+      dataObject.attrs[key] = val
+    }
+  })
+
+  // 清理属性
+  clearAttrs(dataObject)
+}
+
+function clearAttrs(dataObject) {
+  delete dataObject.attrs.__config__
+  delete dataObject.attrs.__slot__
+  delete dataObject.attrs.__methods__
+}
+
+function makeDataObject() {
+  // 深入数据对象：
+  // https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
+  return {
+    class: {},
+    attrs: {},
+    props: {},
+    domProps: {},
+    nativeOn: {},
+    on: {},
+    style: {},
+    directives: [],
+    scopedSlots: {},
+    slot: null,
+    key: null,
+    ref: null,
+    refInFor: true
+  }
+}
+
+export default {
+  props: {
+    conf: {
+      type: Object,
+      required: true
+    }
+  },
+  render(h) {
+    const dataObject = makeDataObject()
+    const confClone = deepClone(this.conf)
+    const children = this.$slots.default || []
+
+    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
+    mountSlotFiles.call(this, h, confClone, children)
+
+    // 将字符串类型的事件，发送为消息
+    emitEvents.call(this, confClone)
+
+    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
+    buildDataObject.call(this, confClone, dataObject)
+
+    return h(this.conf.__config__.tag, dataObject, children)
+  }
+}

src/components/render/slots/el-button.js

@@ -0,0 +1,5 @@
+export default {
+  default(h, conf, key) {
+    return conf.__slot__[key]
+  }
+}

src/components/render/slots/el-checkbox-group.js

@@ -0,0 +1,13 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      if (conf.__config__.optionType === 'button') {
+        list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
+      } else {
+        list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
+      }
+    })
+    return list
+  }
+}

src/components/render/slots/el-input.js

@@ -0,0 +1,8 @@
+export default {
+  prepend(h, conf, key) {
+    return <template slot="prepend">{conf.__slot__[key]}</template>
+  },
+  append(h, conf, key) {
+    return <template slot="append">{conf.__slot__[key]}</template>
+  }
+}

src/components/render/slots/el-radio-group.js

@@ -0,0 +1,13 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      if (conf.__config__.optionType === 'button') {
+        list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
+      } else {
+        list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
+      }
+    })
+    return list
+  }
+}

src/components/render/slots/el-select.js

@@ -0,0 +1,9 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      list.push(<el-option label={item.label} value={item.value} disabled={item.disabled}></el-option>)
+    })
+    return list
+  }
+}

src/components/render/slots/el-upload.js

@@ -0,0 +1,17 @@
+export default {
+  'list-type': (h, conf, key) => {
+    const list = []
+    const config = conf.__config__
+    if (conf['list-type'] === 'picture-card') {
+      list.push(<i class="el-icon-plus"></i>)
+    } else {
+      list.push(<el-button size="small" type="primary" icon="el-icon-upload">{config.buttonText}</el-button>)
+    }
+    if (config.showTip) {
+      list.push(
+        <div slot="tip" class="el-upload__tip">只能上传不超过 {config.fileSize}{config.sizeUnit} 的{conf.accept}文件</div>
+      )
+    }
+    return list
+  }
+}

src/permission.js

@@ -48,7 +48,7 @@ router.beforeEach((to, from, next) => {
         if (hasPermission(store.getters.roles, to.meta.roles)) {
           next()
         } else {
-          next({ path: '/401', replace: true, query: { noGoBack: true } })
+          next({ path: '/401', replace: true, query: { noGoBack: true }})
         }
       }
     }

src/utils/StrUtil.js

@@ -0,0 +1,553 @@
+/**
+ * 字符串工具类
+ **/
+export const StrUtil = {
+  /**
+   * 字符串是否为空白 空白的定义如下： <br>
+   * 1、为null <br>
+   * 2、为不可见字符（如空格）<br>
+   * 3、""<br>
+   *
+   * @param str 被检测的字符串
+   * @return boolean 是否为空
+   */
+  isBlank: function (str) {
+    return str === undefined || str == null || this.trim(str) === "";
+
+  },
+  /**
+   * 字符串是否为非空白 空白的定义如下： <br>
+   * 1、不为null <br>
+   * 2、不为不可见字符（如空格）<br>
+   * 3、不为""<br>
+   *
+   * @param str 被检测的字符串
+   * @return boolean 是否为非空
+   */
+  isNotBlank: function (str) {
+    // == 代表相同,=== 代表严格相同
+    return false === StrUtil.isBlank(str);
+  },
+  /**
+   * 字符串是否为空，空的定义如下:<br>
+   * 1、为null <br>
+   * 2、为""<br>
+   *
+   * @param str 被检测的字符串
+   * @return boolean 是否为空
+   */
+  isEmpty: function (str) {
+    return str == null || str === "";
+
+  },
+  /**
+   * 字符串是否为非空白 空白的定义如下： <br>
+   * 1、不为null <br>
+   * 2、不为""<br>
+   *
+   * @param str 被检测的字符串
+   * @return boolean 是否为非空
+   */
+  isNotEmpty: function (str) {
+    return !StrUtil.isEmpty(str);
+  },
+  /**
+   * 空对象转字符串
+   *
+   * @param str 被检查的字符串
+   * @return string 原字符串或者空串
+   */
+  nullToStr: function (str) {
+    if (StrUtil.isEmpty(str)) {
+      return "";
+    }
+    return str;
+  },
+  /**
+   * 空格截取
+   *
+   * @param str 截取的字符串
+   * @return string
+   */
+  trim: function (str) {
+    if (str == null) {
+      return "";
+    }
+    return str.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
+  },
+  /**
+   * 比较两个字符串（大小写敏感）
+   *
+   * @param str 字符串
+   * @param that 比较的字符串
+   * @return boolean
+   */
+  equals: function (str, that) {
+    return str === that;
+  },
+  /**
+   * 比较两个字符串（大小写不敏感）
+   *
+   * @param str 字符串
+   * @param that 比较的字符串
+   * @return boolean
+   */
+  equalsIgnoreCase: function (str, that) {
+    return String(str).toUpperCase() === String(that).toUpperCase();
+  },
+  /**
+   * 将字符串按指定字符分割
+   *
+   * @param str 字符串
+   * @param sep 比较的字符串
+   * @param maxLen 最大长度
+   * @return string[] 分割后的数组
+   */
+  split: function (str, sep, maxLen) {
+    if (StrUtil.isEmpty(str)) {
+      return null;
+    }
+    const value = String(str).split(sep);
+    return maxLen ? value.slice(0, maxLen - 1) : value;
+  },
+  /**
+   * 字符串格式化(%s )
+   *
+   * @param str 字符串
+   * @return 格式化后的字符串
+   */
+  sprintf: function (str) {
+    let args = arguments, flag = true, i = 1;
+    str = str.replace(/%s/g, function () {
+      const arg = args[i++];
+      if (typeof arg === 'undefined') {
+        flag = false;
+        return '';
+      }
+      return arg;
+    });
+    return flag ? str : '';
+  },
+  /**
+   * 判断字符串是否是以start开头
+   *
+   * @param str 字符串
+   * @param start 开始的字符串
+   * @return boolean
+   */
+  startWith: function (str, start) {
+    const reg = new RegExp("^" + start);
+    return reg.test(str);
+  },
+  /**
+   * 判断字符串是否是以end结尾
+   *
+   * @param str 字符串
+   * @param end 结尾的字符串
+   * @return boolean
+   */
+  endWith: function (str, end) {
+    const reg = new RegExp(end + "$");
+    return reg.test(str);
+  },
+  containsWhitespace: function (input) {
+    return this.contains(input, ' ');
+  },
+  //生成指定个数的字符
+  repeat: function (ch, repeatTimes) {
+    let result = "";
+    for (let i = 0; i < repeatTimes; i++) {
+      result += ch;
+    }
+    return result;
+  },
+  deleteWhitespace: function (input) {
+    return input.replace(/\s+/g, '');
+  },
+  rightPad: function (input, size, padStr) {
+    return input + this.repeat(padStr, size);
+  },
+  leftPad: function (input, size, padStr) {
+    return this.repeat(padStr, size) + input;
+  },
+  //首小写字母转大写
+  capitalize: function (input) {
+    let strLen = 0;
+    if (input == null || (strLen = input.length) === 0) {
+      return input;
+    }
+    return input.replace(/^[a-z]/, function (matchStr) {
+      return matchStr.toLocaleUpperCase();
+    });
+  },
+  //首大写字母转小写
+  uncapitalize: function (input) {
+    let strLen = 0;
+    if (input == null || (strLen = input.length) === 0) {
+      return input;
+    }
+    return input.replace(/^[A-Z]/, function (matchStr) {
+      return matchStr.toLocaleLowerCase();
+    });
+  },
+  //大写转小写，小写转大写
+  swapCase: function (input) {
+    return input.replace(/[a-z]/ig, function (matchStr) {
+      if (matchStr >= 'A' && matchStr <= 'Z') {
+        return matchStr.toLocaleLowerCase();
+      } else if (matchStr >= 'a' && matchStr <= 'z') {
+        return matchStr.toLocaleUpperCase();
+      }
+    });
+  },
+  //统计含有的子字符串的个数
+  countMatches: function (input, sub) {
+    if (this.isEmpty(input) || this.isEmpty(sub)) {
+      return 0;
+    }
+    let count = 0;
+    let index = 0;
+    while ((index = input.indexOf(sub, index)) !== -1) {
+      index += sub.length;
+      count++;
+    }
+    return count;
+  },
+  //只包含字母
+  isAlpha: function (input) {
+    return /^[a-z]+$/i.test(input);
+  },
+  //只包含字母、空格
+  isAlphaSpace: function (input) {
+    return /^[a-z\s]*$/i.test(input);
+  },
+  //只包含字母、数字
+  isAlphanumeric: function (input) {
+    return /^[a-z0-9]+$/i.test(input);
+  },
+  //只包含字母、数字和空格
+  isAlphanumericSpace: function (input) {
+    return /^[a-z0-9\s]*$/i.test(input);
+  },
+  //数字
+  isNumeric: function (input) {
+    return /^(?:[1-9]\d*|0)(?:\.\d+)?$/.test(input);
+  },
+  //小数
+  isDecimal: function (input) {
+    return /^[-+]?(?:0|[1-9]\d*)\.\d+$/.test(input);
+  },
+  //负小数
+  isNegativeDecimal: function (input) {
+    return /^\-?(?:0|[1-9]\d*)\.\d+$/.test(input);
+  },
+  //正小数
+  isPositiveDecimal: function (input) {
+    return /^\+?(?:0|[1-9]\d*)\.\d+$/.test(input);
+  },
+  //整数
+  isInteger: function (input) {
+    return /^[-+]?(?:0|[1-9]\d*)$/.test(input);
+  },
+  //正整数
+  isPositiveInteger: function (input) {
+    return /^\+?(?:0|[1-9]\d*)$/.test(input);
+  },
+  //负整数
+  isNegativeInteger: function (input) {
+    return /^\-?(?:0|[1-9]\d*)$/.test(input);
+  },
+  //只包含数字和空格
+  isNumericSpace: function (input) {
+    return /^[\d\s]*$/.test(input);
+  },
+  isWhitespace: function (input) {
+    return /^\s*$/.test(input);
+  },
+  isAllLowerCase: function (input) {
+    return /^[a-z]+$/.test(input);
+  },
+  isAllUpperCase: function (input) {
+    return /^[A-Z]+$/.test(input);
+  },
+  defaultString: function (input, defaultStr) {
+    return input == null ? defaultStr : input;
+  },
+  defaultIfBlank: function (input, defaultStr) {
+    return this.isBlank(input) ? defaultStr : input;
+  },
+  defaultIfEmpty: function (input, defaultStr) {
+    return this.isEmpty(input) ? defaultStr : input;
+  },
+  //字符串反转
+  reverse: function (input) {
+    if (this.isBlank(input)) {
+      input;
+    }
+    return input.split("").reverse().join("");
+  },
+  //删掉特殊字符(英文状态下)
+  removeSpecialCharacter: function (input) {
+    return input.replace(/[!-/:-@\[-`{-~]/g, "");
+  },
+  //只包含特殊字符、数字和字母（不包括空格，若想包括空格，改为[ -~]）
+  isSpecialCharacterAlphanumeric: function (input) {
+    return /^[!-~]+$/.test(input);
+  },
+  /**
+   * 校验时排除某些字符串，即不能包含某些字符串
+   * @param {Object} conditions:里面有多个属性，如下：
+   *
+   * @param {String} matcherFlag 匹配标识
+   * 0:数字；1：字母；2：小写字母；3:大写字母；4：特殊字符,指英文状态下的标点符号及括号等；5:中文;
+   * 6:数字和字母；7：数字和小写字母；8：数字和大写字母；9：数字、字母和特殊字符；10：数字和中文；
+   * 11：小写字母和特殊字符；12：大写字母和特殊字符；13：字母和特殊字符；14：小写字母和中文；15：大写字母和中文；
+   * 16：字母和中文；17：特殊字符、和中文；18：特殊字符、字母和中文；19：特殊字符、小写字母和中文；20：特殊字符、大写字母和中文；
+   * 100：所有字符;
+   * @param {Array} excludeStrArr 排除的字符串，数组格式
+   * @param {String} length 长度，可为空。1,2表示长度1到2之间；10，表示10个以上字符；5表示长度为5
+   * @param {Boolean} ignoreCase 是否忽略大小写
+   * conditions={matcherFlag:"0",excludeStrArr:[],length:"",ignoreCase:true}
+   */
+  isPatternMustExcludeSomeStr: function (input, conditions) {
+    //参数
+    const matcherFlag = conditions.matcherFlag;
+    const excludeStrArr = conditions.excludeStrArr;
+    const length = conditions.length;
+    const ignoreCase = conditions.ignoreCase;
+    //拼正则
+    const size = excludeStrArr.length;
+    let regex = (size === 0) ? "^" : "^(?!.*(?:{0}))";
+    let subPattern = "";
+    for (let i = 0; i < size; i++) {
+      excludeStrArr[i] = Bee.StringUtils.escapeMetacharacterOfStr(excludeStrArr[i]);
+      subPattern += excludeStrArr[i];
+      if (i !== size - 1) {
+        subPattern += "|";
+      }
+    }
+    regex = this.format(regex, [subPattern]);
+    switch (matcherFlag) {
+      case '0':
+        regex += "\\d";
+        break;
+      case '1':
+        regex += "[a-zA-Z]";
+        break;
+      case '2':
+        regex += "[a-z]";
+        break;
+      case '3':
+        regex += "[A-Z]";
+        break;
+      case '4':
+        regex += "[!-/:-@\[-`{-~]";
+        break;
+      case '5':
+        regex += "[\u4E00-\u9FA5]";
+        break;
+      case '6':
+        regex += "[a-zA-Z0-9]";
+        break;
+      case '7':
+        regex += "[a-z0-9]";
+        break;
+      case '8':
+        regex += "[A-Z0-9]";
+        break;
+      case '9':
+        regex += "[!-~]";
+        break;
+      case '10':
+        regex += "[0-9\u4E00-\u9FA5]";
+        break;
+      case '11':
+        regex += "[a-z!-/:-@\[-`{-~]";
+        break;
+      case '12':
+        regex += "[A-Z!-/:-@\[-`{-~]";
+        break;
+      case '13':
+        regex += "[a-zA-Z!-/:-@\[-`{-~]";
+        break;
+      case '14':
+        regex += "[a-z\u4E00-\u9FA5]";
+        break;
+      case '15':
+        regex += "[A-Z\u4E00-\u9FA5]";
+        break;
+      case '16':
+        regex += "[a-zA-Z\u4E00-\u9FA5]";
+        break;
+      case '17':
+        regex += "[\u4E00-\u9FA5!-/:-@\[-`{-~]";
+        break;
+      case '18':
+        regex += "[\u4E00-\u9FA5!-~]";
+        break;
+      case '19':
+        regex += "[a-z\u4E00-\u9FA5!-/:-@\[-`{-~]";
+        break;
+      case '20':
+        regex += "[A-Z\u4E00-\u9FA5!-/:-@\[-`{-~]";
+        break;
+      case '100':
+        regex += "[\s\S]";
+        break;
+      default:
+        alert(matcherFlag + ":This type is not supported!");
+    }
+    regex += this.isNotBlank(length) ? "{" + length + "}" : "+";
+    regex += "$";
+    const pattern = new RegExp(regex, ignoreCase ? "i" : "");
+    return pattern.test(input);
+  },
+  /**
+   * @param {String} message
+   * @param {Array} arr
+   * 消息格式化
+   */
+  format: function (message, arr) {
+    return message.replace(/{(\d+)}/g, function (matchStr, group1) {
+      return arr[group1];
+    });
+  },
+  /**
+   * 把连续出现多次的字母字符串进行压缩。如输入:aaabbbbcccccd 输出:3a4b5cd
+   * @param {String} input
+   * @param {Boolean} ignoreCase : true or false
+   */
+  compressRepeatedStr: function (input, ignoreCase) {
+    const pattern = new RegExp("([a-z])\\1+", ignoreCase ? "ig" : "g");
+    return input.replace(pattern, function (matchStr, group1) {
+      return matchStr.length + group1;
+    });
+  },
+  /**
+   * 校验必须同时包含某些字符串
+   * @param {String} input
+   * @param {Object} conditions:里面有多个属性，如下：
+   *
+   * @param {String} matcherFlag 匹配标识
+   * 0:数字；1：字母；2：小写字母；3:大写字母；4：特殊字符,指英文状态下的标点符号及括号等；5:中文;
+   * 6:数字和字母；7：数字和小写字母；8：数字和大写字母；9：数字、字母和特殊字符；10：数字和中文；
+   * 11：小写字母和特殊字符；12：大写字母和特殊字符；13：字母和特殊字符；14：小写字母和中文；15：大写字母和中文；
+   * 16：字母和中文；17：特殊字符、和中文；18：特殊字符、字母和中文；19：特殊字符、小写字母和中文；20：特殊字符、大写字母和中文；
+   * 100：所有字符;
+   * @param {Array} excludeStrArr 排除的字符串，数组格式
+   * @param {String} length 长度，可为空。1,2表示长度1到2之间；10，表示10个以上字符；5表示长度为5
+   * @param {Boolean} ignoreCase 是否忽略大小写
+   * conditions={matcherFlag:"0",containStrArr:[],length:"",ignoreCase:true}
+   *
+   */
+  isPatternMustContainSomeStr: function (input, conditions) {
+    //参数
+    const matcherFlag = conditions.matcherFlag;
+    const containStrArr = conditions.containStrArr;
+    const length = conditions.length;
+    const ignoreCase = conditions.ignoreCase;
+    //创建正则
+    const size = containStrArr.length;
+    let regex = "^";
+    let subPattern = "";
+    for (let i = 0; i < size; i++) {
+      containStrArr[i] = Bee.StringUtils.escapeMetacharacterOfStr(containStrArr[i]);
+      subPattern += "(?=.*" + containStrArr[i] + ")";
+    }
+    regex += subPattern;
+    switch (matcherFlag) {
+      case '0':
+        regex += "\\d";
+        break;
+      case '1':
+        regex += "[a-zA-Z]";
+        break;
+      case '2':
+        regex += "[a-z]";
+        break;
+      case '3':
+        regex += "[A-Z]";
+        break;
+      case '4':
+        regex += "[!-/:-@\[-`{-~]";
+        break;
+      case '5':
+        regex += "[\u4E00-\u9FA5]";
+        break;
+      case '6':
+        regex += "[a-zA-Z0-9]";
+        break;
+      case '7':
+        regex += "[a-z0-9]";
+        break;
+      case '8':
+        regex += "[A-Z0-9]";
+        break;
+      case '9':
+        regex += "[!-~]";
+        break;
+      case '10':
+        regex += "[0-9\u4E00-\u9FA5]";
+        break;
+      case '11':
+        regex += "[a-z!-/:-@\[-`{-~]";
+        break;
+      case '12':
+        regex += "[A-Z!-/:-@\[-`{-~]";
+        break;
+      case '13':
+        regex += "[a-zA-Z!-/:-@\[-`{-~]";
+        break;
+      case '14':
+        regex += "[a-z\u4E00-\u9FA5]";
+        break;
+      case '15':
+        regex += "[A-Z\u4E00-\u9FA5]";
+        break;
+      case '16':
+        regex += "[a-zA-Z\u4E00-\u9FA5]";
+        break;
+      case '17':
+        regex += "[\u4E00-\u9FA5!-/:-@\[-`{-~]";
+        break;
+      case '18':
+        regex += "[\u4E00-\u9FA5!-~]";
+        break;
+      case '19':
+        regex += "[a-z\u4E00-\u9FA5!-/:-@\[-`{-~]";
+        break;
+      case '20':
+        regex += "[A-Z\u4E00-\u9FA5!-/:-@\[-`{-~]";
+        break;
+      case '100':
+        regex += "[\s\S]";
+        break;
+      default:
+        alert(matcherFlag + ":This type is not supported!");
+    }
+    regex += this.isNotBlank(length) ? "{" + length + "}" : "+";
+    regex += "$";
+    const pattern = new RegExp(regex, ignoreCase ? "i" : "");
+    return pattern.test(input);
+  },
+  //中文校验
+  isChinese: function (input) {
+    return /^[\u4E00-\u9FA5]+$/.test(input);
+  },
+  //去掉中文字符
+  removeChinese: function (input) {
+    return input.replace(/[\u4E00-\u9FA5]+/gm, "");
+  },
+  //转义元字符
+  escapeMetacharacter: function (input) {
+    const metacharacter = "^$()*+.[]|\\-?{}|";
+    if (metacharacter.indexOf(input) >= 0) {
+      input = "\\" + input;
+    }
+    return input;
+  },
+  //转义字符串中的元字符
+  escapeMetacharacterOfStr: function (input) {
+    return input.replace(/[\^\$\*\+\.\|\\\-\?\{\}\|]/gm, "\\$&");
+  }
+};

src/utils/ruoyi.js

@@ -0,0 +1,233 @@
+
+
+/**
+ * 通用js方法封装处理
+ * Copyright (c) 2019 ruoyi
+ */
+
+// 日期格式化
+export function parseTime(time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+// 表单重置
+export function resetForm(refName) {
+  if (this.$refs[refName]) {
+    this.$refs[refName].resetFields();
+  }
+}
+
+// 添加日期范围
+export function addDateRange(params, dateRange, propName) {
+  let search = params;
+  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
+  dateRange = Array.isArray(dateRange) ? dateRange : [];
+  if (typeof (propName) === 'undefined') {
+    search.params['beginTime'] = dateRange[0];
+    search.params['endTime'] = dateRange[1];
+  } else {
+    search.params['begin' + propName] = dateRange[0];
+    search.params['end' + propName] = dateRange[1];
+  }
+  return search;
+}
+
+// 回显数据字典
+export function selectDictLabel(datas, value) {
+  if (value === undefined) {
+    return "";
+  }
+  var actions = [];
+  Object.keys(datas).some((key) => {
+    if (datas[key].value == ('' + value)) {
+      actions.push(datas[key].label);
+      return true;
+    }
+  })
+  if (actions.length === 0) {
+    actions.push(value);
+  }
+  return actions.join('');
+}
+
+// 回显数据字典（字符串、数组）
+export function selectDictLabels(datas, value, separator) {
+  if (value === undefined || value.length ===0) {
+    return "";
+  }
+  if (Array.isArray(value)) {
+    value = value.join(",");
+  }
+  var actions = [];
+  var currentSeparator = undefined === separator ? "," : separator;
+  var temp = value.split(currentSeparator);
+  Object.keys(value.split(currentSeparator)).some((val) => {
+    var match = false;
+    Object.keys(datas).some((key) => {
+      if (datas[key].value == ('' + temp[val])) {
+        actions.push(datas[key].label + currentSeparator);
+        match = true;
+      }
+    })
+    if (!match) {
+      actions.push(temp[val] + currentSeparator);
+    }
+  })
+  return actions.join('').substring(0, actions.join('').length - 1);
+}
+
+// 字符串格式化(%s )
+export function sprintf(str) {
+  var args = arguments, flag = true, i = 1;
+  str = str.replace(/%s/g, function () {
+    var arg = args[i++];
+    if (typeof arg === 'undefined') {
+      flag = false;
+      return '';
+    }
+    return arg;
+  });
+  return flag ? str : '';
+}
+
+// 转换字符串，undefined,null等转化为""
+export function parseStrEmpty(str) {
+  if (!str || str == "undefined" || str == "null") {
+    return "";
+  }
+  return str;
+}
+
+// 数据合并
+export function mergeRecursive(source, target) {
+  for (var p in target) {
+    try {
+      if (target[p].constructor == Object) {
+        source[p] = mergeRecursive(source[p], target[p]);
+      } else {
+        source[p] = target[p];
+      }
+    } catch (e) {
+      source[p] = target[p];
+    }
+  }
+  return source;
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export function handleTree(data, id, parentId, children) {
+  let config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children'
+  };
+
+  var childrenListMap = {};
+  var nodeIds = {};
+  var tree = [];
+
+  for (let d of data) {
+    let parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (let d of data) {
+    let parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (let t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (let c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+}
+
+/**
+* 参数处理
+* @param {*} params  参数
+*/
+export function tansParams(params) {
+  let result = ''
+  for (const propName of Object.keys(params)) {
+    const value = params[propName];
+    var part = encodeURIComponent(propName) + "=";
+    if (value !== null && value !== "" && typeof (value) !== "undefined") {
+      if (typeof value === 'object') {
+        for (const key of Object.keys(value)) {
+          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
+            let params = propName + '[' + key + ']';
+            var subPart = encodeURIComponent(params) + "=";
+            result += subPart + encodeURIComponent(value[key]) + "&";
+          }
+        }
+      } else {
+        result += part + encodeURIComponent(value) + "&";
+      }
+    }
+  }
+  return result
+}
+
+// 验证是否为blob格式
+export function blobValidate(data) {
+  return data.type !== 'application/json'
+}

src/views/flowable/definition/index.vue

@@ -232,15 +232,15 @@ import {
   exportDeployment,
   definitionStart,
   flowXmlAndNode
-} from "@/api/flowable/definition";
-import { getToken } from "@/utils/auth";
-import { getForm, addDeployForm, listForm } from "@/api/flowable/form";
+} from '@/api/flowable/definition'
+import { getToken } from '@/utils/auth'
+import { getForm, addDeployForm, listForm } from '@/api/flowable/form'
 import Parser from '@/components/parser/Parser'
 import flow from '@/views/flowable/task/myProcess/send/flow'
-import Model from './model';
+import Model from './model'
 import { dataTypeList } from '@/api/public'
 export default {
-  name: "Definition",
+  name: 'Definition',
   components: {
     Parser,
     flow,
@@ -265,35 +265,35 @@ export default {
       // 流程定义表格数据
       definitionList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       formConfOpen: false,
-      formTitle: "",
+      formTitle: '',
       formDeployOpen: false,
-      formDeployTitle: "",
+      formDeployTitle: '',
       formList: [],
       formTotal: 0,
       formConf: {}, // 默认表单数据
       formData: {}, // 默认表单数据
       readImage: {
         open: false,
-        src: "",
+        src: ''
       },
       // bpmn.xml 导入
       upload: {
         // 是否显示弹出层（xml导入）
         open: false,
         // 弹出层标题（xml导入）
-        title: "",
+        title: '',
         // 是否禁用上传
         isUploading: false,
         name: null,
         category: null,
         // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
+        headers: { Authorization: 'Bearer ' + getToken() },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/flowable/definition/import"
+        url: process.env.VUE_APP_BASE_API + '/flowable/definition/import'
       },
       // 查询参数
       queryParams: {
@@ -311,7 +311,7 @@ export default {
       },
       formQueryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
       // 挂载表单到流程实例
       formDeployParam: {
@@ -327,32 +327,32 @@ export default {
       // 表单校验
       rules: {
       }
-    };
+    }
   },
   created() {
-    this.getList();
-    this.getDictType();
+    this.getList()
+    this.getDictType()
   },
   activated() {
-    const time = this.$route.query.t;
+    const time = this.$route.query.t
     if (time != null) {
-      this.getList();
+      this.getList()
     }
   },
   methods: {
-     getDictType() {
+    getDictType() {
       dataTypeList({ dictType: 'sys_process_category' }).then(response => {
         this.sys_process_category = response.data.data
       })
     },
     /** 查询流程定义列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listDefinition(this.queryParams).then(response => {
-        this.definitionList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+        this.definitionList = response.data.records
+        this.total = response.data.total
+        this.loading = false
+      })
     },
     handleClose(done) {
       this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失？', '提示', {
@@ -360,13 +360,13 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        done();
-      }).catch(() => { });
+        done()
+      }).catch(() => { })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -381,18 +381,18 @@ export default {
         derivedFromRoot: null,
         parentDeploymentId: null,
         engineVersion: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -402,27 +402,27 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加流程定义";
+      this.reset()
+      this.open = true
+      this.title = '添加流程定义'
     },
     /** 跳转到流程设计页面 */
     handleLoadXml(row) {
       // this.dialogVisible = true;
       // this.deployId = row.deploymentId;
-      this.$router.push({ path: '/flowable/definition/model', query: { deployId: row.deploymentId } })
+      this.$router.push({ path: '/flowable/definition/model', query: { deployId: row.deploymentId }})
     },
     /** 流程图查看 */
     handleReadImage(deployId) {
-      this.readImage.title = "流程图";
-      this.readImage.open = true;
+      this.readImage.title = '流程图'
+      this.readImage.open = true
       // this.readImage.src = process.env.VUE_APP_BASE_API + "/flowable/definition/readImage/" + deploymentId;
       flowXmlAndNode({ deployId: deployId }).then(res => {
-        this.flowData = res.data;
+        this.flowData = res.data
       })
     },
     /** 表单查看 */
-    /*handleForm(formId){
+    /* handleForm(formId){
       getForm(formId).then(res =>{
         this.formTitle = "表单详情";
         this.formConfOpen = true;
@@ -431,14 +431,14 @@ export default {
     },*/
     handleForm(formId) {
       getForm(formId).then(res => {
-        this.formTitle = "表单详情";
-        this.formConfOpen = true;
+        this.formTitle = '表单详情'
+        this.formConfOpen = true
         this.$nextTick(() => {
           // 回显数据
           this.$refs.vFormRef.setFormJson(JSON.parse(res.data.formContent))
           this.$nextTick(() => {
             // 表单禁用
-            this.$refs.vFormRef.disableForm();
+            this.$refs.vFormRef.disableForm()
           })
         })
       })
@@ -446,7 +446,7 @@ export default {
     /** 启动流程 */
     handleDefinitionStart(row) {
       definitionStart(row.id).then(res => {
-        this.$modal.msgSuccess(res.msg);
+        this.$modal.msgSuccess(res.msg)
       })
     },
     /** 挂载表单弹框 */
@@ -457,10 +457,10 @@ export default {
     /** 挂载表单列表 */
     ListFormDeploy() {
       listForm(this.formQueryParams).then(res => {
-        this.formList = res.rows;
-        this.formTotal = res.total;
-        this.formDeployOpen = true;
-        this.formDeployTitle = "挂载表单";
+        this.formList = res.rows
+        this.formTotal = res.total
+        this.formDeployOpen = true
+        this.formDeployTitle = '挂载表单'
       })
     },
     // /** 更改挂载表单弹框 */
@@ -478,11 +478,11 @@ export default {
     // },
     /** 挂载表单 */
     submitFormDeploy(row) {
-      this.formDeployParam.formId = row.formId;
+      this.formDeployParam.formId = row.formId
       addDeployForm(this.formDeployParam).then(res => {
-        this.$modal.msgSuccess(res.msg);
-        this.formDeployOpen = false;
-        this.getList();
+        this.$modal.msgSuccess(res.msg)
+        this.formDeployOpen = false
+        this.getList()
       })
     },
     /* handleCurrentChange(data) {
@@ -497,14 +497,14 @@ export default {
           this.$refs.vFormCurrentRowRef.setFormJson(JSON.parse(data.formContent))
           this.$nextTick(() => {
             // 表单禁用
-            this.$refs.vFormCurrentRowRef.disableForm();
+            this.$refs.vFormCurrentRowRef.disableForm()
           })
         })
       }
     },
     /** 挂起/激活流程 */
     handleUpdateSuspensionState(row) {
-      let state = 1;
+      let state = 1
       if (row.suspensionState === 1) {
         state = 2
       }
@@ -513,88 +513,88 @@ export default {
         state: state
       }
       updateState(params).then(res => {
-        this.$modal.msgSuccess(res.msg);
-        this.getList();
-      });
+        this.$modal.msgSuccess(res.msg)
+        this.getList()
+      })
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.deploymentId || this.ids
       getDeployment(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改流程定义";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改流程定义'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateDeployment(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addDeployment(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const deploymentIds = row.deploymentId || this.ids;
-      this.$confirm('是否确认删除流程定义编号为"' + deploymentIds + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function () {
-        return delDeployment(deploymentIds);
+      const deploymentIds = row.deploymentId || this.ids
+      this.$confirm('是否确认删除流程定义编号为"' + deploymentIds + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return delDeployment(deploymentIds)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
       })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function () {
-        return exportDeployment(queryParams);
+      const queryParams = this.queryParams
+      this.$confirm('是否确认导出所有流程定义数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return exportDeployment(queryParams)
       }).then(response => {
-        this.download(response.msg);
+        this.download(response.msg)
       })
     },
     /** 导入bpmn.xml文件 */
     handleImport() {
-      this.upload.title = "bpmn20.xml文件导入";
-      this.upload.open = true;
+      this.upload.title = 'bpmn20.xml文件导入'
+      this.upload.open = true
     },
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
+      this.upload.isUploading = true
     },
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$message(response.msg);
-      this.getList();
+      this.upload.open = false
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.$message(response.msg)
+      this.getList()
     },
     // 提交上传文件
     submitFileForm() {
-      this.$refs.upload.submit();
+      this.$refs.upload.submit()
     }
   }
-};
+}
 </script>

src/views/flowable/definition/model.vue

@@ -21,14 +21,14 @@
   </div>
 </template>
 <script>
-import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
+import { readXml, roleList, saveXml, userList, expList } from '@/api/flowable/definition'
 import bpmnModeler from '@/components/Process/index'
 import vkBeautify from 'vkbeautify'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atelier-savanna-dark.css'
 import { dataTypeList } from '@/api/public'
 export default {
-  name: "Model",
+  name: 'Model',
   components: {
     bpmnModeler,
     vkBeautify
@@ -36,56 +36,56 @@ export default {
   // 自定义指令
   directives: {
     deep: true,
-    highlight:{
+    highlight: {
       deep: true,
       bind: function bind(el, binding) {
-        const targets = el.querySelectorAll('code');
-        let target;
-        let i;
+        const targets = el.querySelectorAll('code')
+        let target
+        let i
         for (i = 0; i < targets.length; i += 1) {
-          target = targets[i];
+          target = targets[i]
           if (typeof binding.value === 'string') {
-            target.textContent = binding.value;
+            target.textContent = binding.value
           }
-          hljs.highlightBlock(target);
+          hljs.highlightBlock(target)
         }
       },
       componentUpdated: function componentUpdated(el, binding) {
-        const targets = el.querySelectorAll('code');
-        let target;
-        let i;
+        const targets = el.querySelectorAll('code')
+        let target
+        let i
         for (i = 0; i < targets.length; i += 1) {
-          target = targets[i];
+          target = targets[i]
           if (typeof binding.value === 'string') {
-            target.textContent = binding.value;
-            hljs.highlightBlock(target);
+            target.textContent = binding.value
+            hljs.highlightBlock(target)
           }
         }
-      },
+      }
     }
   },
   data() {
     return {
-      xml: "", // 后端查询到的xml
-      modeler:"",
+      xml: '', // 后端查询到的xml
+      modeler: '',
       xmlOpen: false,
       xmlTitle: '',
       xmlData: '',
       users: [],
       groups: [],
       categorys: [],
-      exps: [],
+      exps: []
 
-    };
+    }
   },
-  created () {
-    const deployId = this.$route.query && this.$route.query.deployId;
+  created() {
+    const deployId = this.$route.query && this.$route.query.deployId
     //  查询流程xml
     if (deployId) {
-      this.getXmlData(deployId);
+      this.getXmlData(deployId)
     }
     dataTypeList({ dictType: 'sys_process_category' }).then(response => {
-        this.categorys = response.data.data
+      this.categorys = response.data.data
     })
     this.getDataList()
   },
@@ -93,8 +93,8 @@ export default {
     /** xml 文件 */
     getXmlData(deployId) {
       // 发送请求，获取xml
-      readXml(deployId).then(res =>{
-        this.xml = res.data;
+      readXml(deployId).then(res => {
+        this.xml = res.data
         this.modeler = res.data
       })
     },
@@ -108,38 +108,38 @@ export default {
       saveXml(params).then(res => {
         this.$modal.msgSuccess(res.msg)
         // 关闭当前标签页并返回上个页面
-        const obj = { path: "/flowable/definition", query: { t: Date.now()} };
-        this.$tab.closeOpenPage(obj);
+        const obj = { path: '/flowable/definition', query: { t: Date.now() }}
+        this.$tab.closeOpenPage(obj)
       })
     },
     /** 指定流程办理人员列表 */
     getDataList() {
-      userList().then(res =>{
-        res.data.forEach(val =>{
-          val.userId = val.userId.toString();
+      userList().then(res => {
+        res.data.forEach(val => {
+          val.userId = val.userId.toString()
         })
-        this.users = res.data;
+        this.users = res.data
         // let arr = {nickName: "流程发起人", userId: "${INITIATOR}"}
         // this.users.push(arr)
-      });
-      roleList().then(res =>{
-        res.data.forEach(val =>{
-          val.roleId = val.roleId.toString();
+      })
+      roleList().then(res => {
+        res.data.forEach(val => {
+          val.roleId = val.roleId.toString()
         })
-        this.groups = res.data;
-      });
-      expList().then(res =>{
-        this.exps = res.data;
-      });
+        this.groups = res.data
+      })
+      expList().then(res => {
+        this.exps = res.data
+      })
     },
     /** 展示xml */
-    showXML(xmlData){
-      this.xmlTitle = 'xml查看';
-      this.xmlOpen = true;
-      this.xmlData = vkBeautify.xml(xmlData);
-    },
-  },
-};
+    showXML(xmlData) {
+      this.xmlTitle = 'xml查看'
+      this.xmlOpen = true
+      this.xmlData = vkBeautify.xml(xmlData)
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .content-box{

src/views/flowable/expression/index.vue

@@ -114,10 +114,10 @@
 </template>
 
 <script>
-import { listExpression, getExpression, delExpression, addExpression, updateExpression } from "@/api/flowable/expression";
+import { listExpression, getExpression, delExpression, addExpression, updateExpression } from '@/api/flowable/expression'
 import { dataTypeList } from '@/api/public'
 export default {
-  name: "FlowExp",
+  name: 'FlowExp',
   data() {
     return {
       sys_common_status: [],
@@ -137,7 +137,7 @@ export default {
       // 流程达式表格数据
       expressionList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -146,7 +146,7 @@ export default {
         pageSize: 10,
         name: null,
         expression: null,
-        status: null,
+        status: null
       },
       // 表单参数
       form: {
@@ -155,14 +155,14 @@ export default {
       // 表单校验
       rules: {
       }
-    };
+    }
   },
   created() {
-    this.getList();
-    this.getDictType();
+    this.getList()
+    this.getDictType()
   },
   methods: {
-     getDictType() {
+    getDictType() {
       dataTypeList({ dictType: 'sys_common_status' }).then(response => {
         this.sys_common_status = response.data.data
       })
@@ -172,17 +172,17 @@ export default {
     },
     /** 查询流程达式列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listExpression(this.queryParams).then(response => {
-        this.expressionList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.expressionList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -196,18 +196,18 @@ export default {
         updateBy: null,
         status: null,
         remark: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -217,49 +217,49 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加流程达式";
+      this.reset()
+      this.open = true
+      this.title = '添加流程达式'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getExpression(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改流程达式";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改流程达式'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateExpression(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addExpression(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项？').then(function () {
-        return delExpression(ids);
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项？').then(function() {
+        return delExpression(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => { });
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => { })
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -268,5 +268,5 @@ export default {
       }, `expression_${new Date().getTime()}.xlsx`)
     }
   }
-};
+}
 </script>

src/views/flowable/listener/index.vue

@@ -127,10 +127,10 @@
 </template>
 
 <script>
-import { listListener, getListener, delListener, addListener, updateListener } from "@/api/flowable/listener";
+import { listListener, getListener, delListener, addListener, updateListener } from '@/api/flowable/listener'
 import { dataTypeList } from '@/api/public'
 export default {
-  name: "Listener",
+  name: 'Listener',
   data() {
     return {
       sys_listener_value_type: [],
@@ -150,7 +150,7 @@ export default {
       // 流程监听表格数据
       listenerList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -162,7 +162,7 @@ export default {
         eventType: null,
         valueType: null,
         value: null,
-        status: null,
+        status: null
       },
       // 表单参数
       form: {},
@@ -173,18 +173,18 @@ export default {
         { label: 'create', value: 'create' },
         { label: 'assignment', value: 'assignment' },
         { label: 'complete', value: 'complete' },
-        { label: 'delete', value: 'delete' },
+        { label: 'delete', value: 'delete' }
       ],
       executionListenerEventList: [
         { label: 'start', value: 'start' },
         { label: 'end', value: 'end' },
-        { label: 'take', value: 'take' },
-      ],
-    };
+        { label: 'take', value: 'take' }
+      ]
+    }
   },
   created() {
-    this.getList();
-    this.getDictType();
+    this.getList()
+    this.getDictType()
   },
   methods: {
     getDictType() {
@@ -197,17 +197,17 @@ export default {
     },
     /** 查询流程监听列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listListener(this.queryParams).then(response => {
-        this.listenerList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.listenerList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -224,18 +224,18 @@ export default {
         updateBy: null,
         status: null,
         remark: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -245,49 +245,49 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加流程监听";
+      this.reset()
+      this.open = true
+      this.title = '添加流程监听'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getListener(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改流程监听";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改流程监听'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateListener(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addListener(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除流程监听编号为"' + ids + '"的数据项？').then(function () {
-        return delListener(ids);
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除流程监听编号为"' + ids + '"的数据项？').then(function() {
+        return delListener(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => { });
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => { })
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -296,5 +296,5 @@ export default {
       }, `listener_${new Date().getTime()}.xlsx`)
     }
   }
-};
+}
 </script>

src/views/flowable/task/finished/detail/flow.vue

@@ -7,7 +7,7 @@
 import FlowView from './flowview'
 
 export default {
-  name: "Flow",
+  name: 'Flow',
   components: {
     FlowView
   },
@@ -18,7 +18,7 @@ export default {
     }
   },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>

src/views/flowable/task/finished/detail/flowview.vue

@@ -16,36 +16,36 @@
   </div>
 </template>
 <script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { CustomViewer as BpmnViewer } from '@/components/customBpmn'
 
 export default {
-  name: "FlowView",
+  name: 'FlowView',
   props: {
     flowData: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   data() {
     return {
       bpmnViewer: null
-    };
+    }
   },
   watch: {
     flowData: {
       handler(newVal) {
         if (Object.keys(newVal).length > 0) {
           // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
+          this.bpmnViewer && this.bpmnViewer.destroy()
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
+            height: 'calc(100vh - 200px)'
+          })
           this.loadFlowCanvas(newVal)
         }
       },
       immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
+      deep: true // 监听对象或数组的时候，要用到深度监听
     }
   },
   mounted() {
@@ -55,9 +55,9 @@ export default {
     async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
+        await self.bpmnViewer.importXML(flowData.xmlData)
         self.fitViewport()
-        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
+        if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {
           self.fillColor(flowData.nodeData)
         }
       } catch (err) {
@@ -67,18 +67,18 @@ export default {
     // 设置高亮颜色的class
     setNodeColor(nodeCodes, colorClass, canvas) {
       for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
+        canvas.addMarker(nodeCodes[i], colorClass)
       }
     },
     // 让图能自适应屏幕
     fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
+      this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
     },
     // 放大缩小
     zoomViewport(zoomIn = true) {
       this.zoom = this.bpmnViewer.get('canvas').zoom()
       this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
+      if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
     },
 
     // 设置高亮颜色的
@@ -91,50 +91,52 @@ export default {
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
-                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
-                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+            if (n.outgoing) {
+              n.outgoing.forEach(nn => {
+                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
+                if (targetTask) {
+                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
+                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
+                    canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
+                  } else {
+                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                    canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                  }
                 }
-              }
-            })
+              })
+            }
           }
         }
         // 排他网关
         else if (n.$type === 'bpmn:ExclusiveGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-
-            })
+            if (n.outgoing) {
+              n.outgoing.forEach(nn => {
+                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
+                if (targetTask) {
+                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                }
+              })
+            }
           }
-
         }
         // 并行网关
         else if (n.$type === 'bpmn:ParallelGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-            })
+            if (n.outgoing) {
+              n.outgoing.forEach(nn => {
+                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
+                if (targetTask) {
+                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                }
+              })
+            }
           }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
+        } else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
             const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
@@ -143,17 +145,16 @@ export default {
               return
             }
           })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
+        } else if (n.$type === 'bpmn:EndEvent') {
           if (endTask.key === n.id && endTask.completed) {
             canvas.addMarker(n.id, 'highlight')
             return
           }
         }
       })
-    },
+    }
   }
-};
+}
 </script>
 <style lang="scss">
   .bjs-powered-by {
@@ -235,4 +236,3 @@ export default {
       top: -20px !important;
     }
   }
-</style>

src/views/flowable/task/finished/detail/index.vue

@@ -69,17 +69,17 @@
 </template>
 
 <script>
-import {flowRecord} from "@/api/flowable/finished";
+import { flowRecord } from '@/api/flowable/finished'
 import Parser from '@/components/parser/Parser'
-import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
+import { getProcessVariables, flowXmlAndNode } from '@/api/flowable/definition'
 import flow from '@/views/flowable/task/finished/detail/flow'
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
-  name: "Record",
+  name: 'Record',
   components: {
     Parser,
-    flow,
+    flow
   },
   props: {},
   data() {
@@ -90,8 +90,8 @@ export default {
       // 用户表格数据
       userList: null,
       defaultProps: {
-        children: "children",
-        label: "label"
+        children: 'children',
+        label: 'label'
       },
       // 查询参数
       queryParams: {
@@ -102,63 +102,63 @@ export default {
       flowRecordList: [], // 流程流转数据
       formConfCopy: {},
       src: null,
-      taskForm:{
+      taskForm: {
         multiple: false,
-        comment:"", // 意见内容
-        procInsId: "", // 流程实例编号
-        instanceId: "", // 流程实例编号
-        deployId: "",  // 流程定义编号
-        taskId: "" ,// 流程任务编号
-        procDefId: "",  // 流程编号
-        vars: "",
-        targetKey:""
+        comment: '', // 意见内容
+        procInsId: '', // 流程实例编号
+        instanceId: '', // 流程实例编号
+        deployId: '', // 流程定义编号
+        taskId: '', // 流程任务编号
+        procDefId: '', // 流程编号
+        vars: '',
+        targetKey: ''
       },
       variables: [], // 流程变量数据
       variablesData: {}, // 流程变量数据
-      variableOpen: false, // 是否加载流程变量数据
-    };
+      variableOpen: false // 是否加载流程变量数据
+    }
   },
   created() {
-    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
-    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
-    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
+    this.taskForm.deployId = this.$route.query && this.$route.query.deployId
+    this.taskForm.taskId = this.$route.query && this.$route.query.taskId
+    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
     // 回显流程记录
     // 流程任务重获取变量表单
-    if (this.taskForm.taskId){
-      this.processVariables( this.taskForm.taskId)
+    if (this.taskForm.taskId) {
+      this.processVariables(this.taskForm.taskId)
     }
-    this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
+    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === '3') {
-        flowXmlAndNode({procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId}).then(res => {
-          this.flowData = res.data;
+        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then(res => {
+          this.flowData = res.data
         })
       }
     },
     setIcon(val) {
       if (val) {
-        return "el-icon-check";
+        return 'el-icon-check'
       } else {
-        return "el-icon-time";
+        return 'el-icon-time'
       }
     },
     setColor(val) {
       if (val) {
-        return "#2bc418";
+        return '#2bc418'
       } else {
-        return "#b3bdbb";
+        return '#b3bdbb'
       }
     },
     /** 流程流转记录 */
     getFlowRecordList(procInsId, deployId) {
       const that = this
-      const params = {procInsId: procInsId, deployId: deployId}
+      const params = { procInsId: procInsId, deployId: deployId }
       flowRecord(params).then(res => {
-        that.flowRecordList = res.data.flowList;
+        that.flowRecordList = res.data.flowList
       }).catch(res => {
-        this.goBack();
+        this.goBack()
       })
     },
     /** 获取流程变量内容 */
@@ -166,19 +166,19 @@ export default {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          this.variablesData = res.data.variables;
+          this.variablesData = res.data.variables
           this.variableOpen = true
-        });
+        })
       }
     },
     /** 返回页面 */
     goBack() {
       // 关闭当前标签页并返回上个页面
-      const obj = { path: "/task/finished", query: { t: Date.now()} };
-      this.$tab.closeOpenPage(obj);
-    },
+      const obj = { path: '/task/finished', query: { t: Date.now() }}
+      this.$tab.closeOpenPage(obj)
+    }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 .test-form {

src/views/flowable/task/finished/index.vue

@@ -74,10 +74,10 @@
 </template>
 
 <script>
-import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
+import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from '@/api/flowable/finished'
 
 export default {
-  name: "Deploy",
+  name: 'Deploy',
   components: {
   },
   data() {
@@ -97,10 +97,10 @@ export default {
       // 已办任务列表数据
       finishedList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
-      src: "",
+      src: '',
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -120,25 +120,25 @@ export default {
       // 表单校验
       rules: {
       }
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询流程定义列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       finishedList(this.queryParams).then(response => {
-        this.finishedList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+        this.finishedList = response.data.records
+        this.total = response.data.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -153,34 +153,32 @@ export default {
         derivedFromRoot: null,
         parentDeploymentId: null,
         engineVersion: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     setIcon(val) {
       if (val) {
-        return "el-icon-check";
+        return 'el-icon-check'
       } else {
-        return "el-icon-time";
+        return 'el-icon-time'
       }
-
     },
     setColor(val) {
       if (val) {
-        return "#2bc418";
+        return '#2bc418'
       } else {
-        return "#b3bdbb";
+        return '#b3bdbb'
       }
-
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -190,9 +188,9 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加流程定义";
+      this.reset()
+      this.open = true
+      this.title = '添加流程定义'
     },
     /** 流程流转记录 */
     handleFlowRecord(row) {
@@ -201,7 +199,7 @@ export default {
         query: {
           procInsId: row.procInsId,
           deployId: row.deployId,
-          taskId: row.taskId,
+          taskId: row.taskId
         }
       })
     },
@@ -211,67 +209,67 @@ export default {
         instanceId: row.procInsId
       }
       revokeProcess(params).then(res => {
-        this.$modal.msgSuccess(res.msg);
-        this.getList();
-      });
+        this.$modal.msgSuccess(res.msg)
+        this.getList()
+      })
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getDeployment(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改流程定义";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改流程定义'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateDeployment(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addDeployment(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function () {
-        return delDeployment(ids);
+      const ids = row.id || this.ids
+      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return delDeployment(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
       })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function () {
-        return exportDeployment(queryParams);
+      const queryParams = this.queryParams
+      this.$confirm('是否确认导出所有流程定义数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return exportDeployment(queryParams)
       }).then(response => {
-        this.download(response.msg);
+        this.download(response.msg)
       })
     }
   }
-};
+}
 </script>

src/views/flowable/task/flowForm/index.vue

@@ -26,19 +26,19 @@
 </template>
 
 <script>
-import {addForm, getForm, updateForm} from "@/api/flowable/form";
+import { addForm, getForm, updateForm } from '@/api/flowable/form'
 import { StrUtil } from '@/utils/StrUtil'
 
 export default {
-  name: "flowForm",
+  name: 'flowForm',
   data() {
     return {
-      formTitle: "",
+      formTitle: '',
       formOpen: false,
       // 表单校验
       rules: {
         formName: [
-          { required: true, message: "表单名称不能为空", trigger: "blur" }
+          { required: true, message: '表单名称不能为空', trigger: 'blur' }
         ]
       },
       // 表单参数
@@ -50,63 +50,63 @@ export default {
       },
       designerConfig: {
         generateSFCButton: false,
-        exportCodeButton: false,  //是否显示导出代码按钮
+        exportCodeButton: false, // 是否显示导出代码按钮
         toolbarMaxWidth: 320,
-        toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）
-        formHeader: false,
-      },
+        toolbarMinWidth: 300, // 设计器工具按钮栏最小宽度（单位像素）
+        formHeader: false
+      }
     }
   },
   mounted() {
-    const formId = this.$route.query && this.$route.query.formId;
+    const formId = this.$route.query && this.$route.query.formId
     if (StrUtil.isNotBlank(formId)) {
       getForm(formId).then(res => {
         this.$nextTick(() => {
           // 加载表单json数据
           this.$refs.vfDesigner.setFormJson(JSON.parse(res.data.formContent))
         })
-        this.form = res.data;
+        this.form = res.data
       })
-    }else {
+    } else {
       this.$nextTick(() => {
         // 加载表单json数据
-        this.$refs.vfDesigner.setFormJson({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
+        this.$refs.vfDesigner.setFormJson({ 'widgetList': [], 'formConfig': { 'modelName': 'formData', 'refName': 'vForm', 'rulesName': 'rules', 'labelWidth': 80, 'labelPosition': 'left', 'size': '', 'labelAlign': 'label-left-align', 'cssCode': '', 'customClass': '', 'functions': '', 'layoutType': 'PC', 'onFormCreated': '', 'onFormMounted': '', 'onFormDataChange': '', 'onFormValidate': '' }})
       })
     }
   },
-  methods:{
+  methods: {
     // 保存表单数据
     saveFormJson() {
-      let formJson = this.$refs.vfDesigner.getFormJson()
-      this.form.formContent = JSON.stringify(formJson);
-      this.formOpen = true;
+      const formJson = this.$refs.vfDesigner.getFormJson()
+      this.form.formContent = JSON.stringify(formJson)
+      this.formOpen = true
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.formId != null) {
             updateForm(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.formOpen = false;
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.formOpen = false
+            })
           } else {
             addForm(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.formOpen = false;
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.formOpen = false
+            })
           }
           // 关闭当前标签页并返回上个页面
-          const obj = { path: "/flowable/form", query: { t: Date.now()} };
-          this.$tab.closeOpenPage(obj);
+          const obj = { path: '/flowable/form', query: { t: Date.now() }}
+          this.$tab.closeOpenPage(obj)
         }
-      });
+      })
     },
     // 取消按钮
     cancel() {
-      this.formOpen = false;
-      this.reset();
-    },
+      this.formOpen = false
+      this.reset()
+    }
   }
 }
 </script>

src/views/flowable/task/form/index.vue

@@ -105,11 +105,11 @@
 </template>
 
   <script>
-  import { listForm, getForm, delForm, addForm, updateForm, exportForm } from "@/api/flowable/form";
-  import Editor from '@/components/Editor';
-  import Parser from '@/components/parser/Parser'
+  import { listForm, getForm, delForm, addForm, updateForm, exportForm } from '@/api/flowable/form'
+import Editor from '@/components/Editor'
+import Parser from '@/components/parser/Parser'
   export default {
-    name: "Form",
+    name: 'Form',
     components: {
       Editor,
       Parser
@@ -131,11 +131,11 @@
         // 流程表单表格数据
         formList: [],
         // 弹出层标题
-        title: "",
+        title: '',
         formConf: {}, // 默认表单数据
         formConfOpen: false,
-        formTitle: "",// 对话框标题，用于绑定到 el-dialog 的 :title
-        formRenderOpen: false,// 控制对话框的显示与隐藏，绑定到 el-dialog 的 :visible.sync
+        formTitle: '', // 对话框标题，用于绑定到 el-dialog 的 :title
+        formRenderOpen: false, // 控制对话框的显示与隐藏，绑定到 el-dialog 的 :visible.sync
         // 是否显示弹出层
         open: false,
         // 查询参数
@@ -143,7 +143,7 @@
           pageNum: 1,
           pageSize: 10,
           formName: null,
-          formContent: null,
+          formContent: null
         },
         // 表单参数
         form: {},
@@ -151,25 +151,25 @@
         rules: {
         },
         formData: {}// 表单数据，用于传递给 v-form-render 的 :form-data，存储表单的配置信息等
-      };
-    },
+      }
+  },
     created() {
-      this.getList();
-    },
+      this.getList()
+  },
     methods: {
       /** 查询流程表单列表 */
       getList() {
-        this.loading = true;
+        this.loading = true
         listForm(this.queryParams).then(response => {
-          this.formList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        });
+          this.formList = response.rows
+          this.total = response.total
+          this.loading = false
+        })
       },
       // 取消按钮
       cancel() {
-        this.open = false;
-        this.reset();
+        this.open = false
+        this.reset()
       },
       // 表单重置
       reset() {
@@ -182,18 +182,18 @@
           createBy: null,
           updateBy: null,
           remark: null
-        };
-        this.resetForm("form");
+        }
+        this.resetForm('form')
       },
       /** 搜索按钮操作 */
       handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
+        this.queryParams.pageNum = 1
+        this.getList()
       },
       /** 重置按钮操作 */
       resetQuery() {
-        this.resetForm("queryForm");
-        this.handleQuery();
+        this.resetForm('queryForm')
+        this.handleQuery()
       },
       // 多选框选中数据
       handleSelectionChange(selection) {
@@ -209,15 +209,15 @@
        },*/
       /** 表单配置信息 */
       handleDetail(row) {
-        this.formRenderOpen = true;
-        this.formTitle = "表单详情";
+        this.formRenderOpen = true
+        this.formTitle = '表单详情'
 
         this.$nextTick(() => {
           // 回显数据
           this.$refs.vFormRef.setFormJson(JSON.parse(row.formContent))
           this.$nextTick(() => {
             // 表单禁用
-            this.$refs.vFormRef.disableForm();
+            this.$refs.vFormRef.disableForm()
           })
         })
       },
@@ -226,7 +226,7 @@
         // this.reset();
         // this.open = true;
         // this.title = "添加流程表单";
-        /*this.$router.push({ path: '/tool/build/index', query: {formId: null }})*/
+        /* this.$router.push({ path: '/tool/build/index', query: {formId: null }})*/
         this.$router.push({ path: '/flowable/task/flowForm/index' })
       },
       /** 修改按钮操作 */
@@ -238,58 +238,58 @@
         //   this.open = true;
         //   this.title = "修改流程表单";
         // });
-        //this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
-        this.$router.push({ path: '/flowable/task/flowForm/index', query: { formId: row.formId } })
+        // this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
+        this.$router.push({ path: '/flowable/task/flowForm/index', query: { formId: row.formId }})
       },
       /** 提交按钮 */
       submitForm() {
-        this.$refs["form"].validate(valid => {
+        this.$refs['form'].validate(valid => {
           if (valid) {
             if (this.form.formId != null) {
               updateForm(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
+                this.$modal.msgSuccess('修改成功')
+                this.open = false
+                this.getList()
+              })
             } else {
               addForm(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
+                this.$modal.msgSuccess('新增成功')
+                this.open = false
+                this.getList()
+              })
             }
           }
-        });
+        })
       },
       /** 删除按钮操作 */
       handleDelete(row) {
-        const formIds = row.formId || this.ids;
-        this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function () {
-          return delForm(formIds);
+        const formIds = row.formId || this.ids
+        this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function() {
+          return delForm(formIds)
         }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
         })
       },
       /** 导出按钮操作 */
       handleExport() {
-        const queryParams = this.queryParams;
-        this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function () {
-          return exportForm(queryParams);
+        const queryParams = this.queryParams
+        this.$confirm('是否确认导出所有流程表单数据项?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function() {
+          return exportForm(queryParams)
         }).then(response => {
-          this.download(response.msg);
+          this.download(response.msg)
         })
       }
     }
-  };
+  }
 </script>
 
   <style lang="scss" scoped>

src/views/flowable/task/myProcess/detail/flow.vue

@@ -7,7 +7,7 @@
 import FlowView from './flowview'
 
 export default {
-  name: "Flow",
+  name: 'Flow',
   components: {
     FlowView
   },
@@ -18,7 +18,7 @@ export default {
     }
   },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>

src/views/flowable/task/myProcess/detail/flowview.vue

@@ -16,36 +16,36 @@
   </div>
 </template>
 <script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { CustomViewer as BpmnViewer } from '@/components/customBpmn'
 
 export default {
-  name: "FlowView",
+  name: 'FlowView',
   props: {
     flowData: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   data() {
     return {
       bpmnViewer: null
-    };
+    }
   },
   watch: {
     flowData: {
       handler(newVal) {
         if (Object.keys(newVal).length > 0) {
           // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
+          this.bpmnViewer && this.bpmnViewer.destroy()
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
-          this.loadFlowCanvas(newVal);
+            height: 'calc(100vh - 200px)'
+          })
+          this.loadFlowCanvas(newVal)
         }
       },
       immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
+      deep: true // 监听对象或数组的时候，要用到深度监听
     }
   },
   mounted() {
@@ -55,9 +55,9 @@ export default {
     async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
+        await self.bpmnViewer.importXML(flowData.xmlData)
         self.fitViewport()
-        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
+        if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {
           self.fillColor(flowData.nodeData)
         }
       } catch (err) {
@@ -67,18 +67,18 @@ export default {
     // 设置高亮颜色的class
     setNodeColor(nodeCodes, colorClass, canvas) {
       for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
+        canvas.addMarker(nodeCodes[i], colorClass)
       }
     },
     // 让图能自适应屏幕
     fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
+      this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
     },
     // 放大缩小
     zoomViewport(zoomIn = true) {
       this.zoom = this.bpmnViewer.get('canvas').zoom()
       this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
+      if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
     },
 
     // 设置高亮颜色的
@@ -91,13 +91,13 @@ export default {
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
+                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                   canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                   canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
+                } else {
                   canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                   canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 }
@@ -109,23 +109,20 @@ export default {
         else if (n.$type === 'bpmn:ExclusiveGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
               }
-
             })
           }
-
         }
         // 并行网关
         else if (n.$type === 'bpmn:ParallelGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -133,8 +130,7 @@ export default {
               }
             })
           }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
+        } else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
             const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
@@ -143,17 +139,16 @@ export default {
               return
             }
           })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
+        } else if (n.$type === 'bpmn:EndEvent') {
           if (endTask.key === n.id && endTask.completed) {
             canvas.addMarker(n.id, 'highlight')
             return
           }
         }
       })
-    },
+    }
   }
-};
+}
 </script>
 <style lang="scss">
   .bjs-powered-by {

src/views/flowable/task/myProcess/detail/index.vue

@@ -72,14 +72,14 @@
 </template>
 
 <script>
-import {flowRecord} from "@/api/flowable/finished";
+import { flowRecord } from '@/api/flowable/finished'
 import Parser from '@/components/parser/Parser'
-import {getProcessVariables, readXml, getFlowViewer, getHighlight, flowXmlAndNode} from "@/api/flowable/definition";
+import { getProcessVariables, readXml, getFlowViewer, getHighlight, flowXmlAndNode } from '@/api/flowable/definition'
 import flow from '@/views/flowable/task/myProcess/detail/flow'
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
-  name: "Record",
+  name: 'Record',
   components: {
     Parser,
     flow
@@ -97,112 +97,112 @@ export default {
       // 遮罩层
       loading: true,
       flowRecordList: [], // 流程流转数据
-      taskForm:{
+      taskForm: {
         multiple: false,
-        comment:"", // 意见内容
-        procInsId: "", // 流程实例编号
-        instanceId: "", // 流程实例编号
-        deployId: "",  // 流程定义编号
-        taskId: "" ,// 流程任务编号
-        procDefId: "",  // 流程编号
+        comment: '', // 意见内容
+        procInsId: '', // 流程实例编号
+        instanceId: '', // 流程实例编号
+        deployId: '', // 流程定义编号
+        taskId: '', // 流程任务编号
+        procDefId: '' // 流程编号
       },
-      variablesData: {}, // 流程变量数据
-    };
+      variablesData: {} // 流程变量数据
+    }
   },
   created() {
-    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
-    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
-    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
+    this.taskForm.deployId = this.$route.query && this.$route.query.deployId
+    this.taskForm.taskId = this.$route.query && this.$route.query.taskId
+    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
     // 回显流程记录
     // 流程任务重获取变量表单
-    this.processVariables( this.taskForm.taskId)
-    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
+    this.processVariables(this.taskForm.taskId)
+    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
   },
   methods: {
     handleClick(tab, event) {
-      if (tab.name === '3'){
-        flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
-          this.flowData = res.data;
+      if (tab.name === '3') {
+        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then(res => {
+          this.flowData = res.data
         })
       }
     },
-    getFlowViewer(procInsId,executionId) {
-      getFlowViewer(procInsId,executionId).then(res => {
+    getFlowViewer(procInsId, executionId) {
+      getFlowViewer(procInsId, executionId).then(res => {
         this.taskList = res.data
       })
     },
     setIcon(val) {
       if (val) {
-        return "el-icon-check";
+        return 'el-icon-check'
       } else {
-        return "el-icon-time";
+        return 'el-icon-time'
       }
     },
     setColor(val) {
       if (val) {
-        return "#2bc418";
+        return '#2bc418'
       } else {
-        return "#b3bdbb";
+        return '#b3bdbb'
       }
     },
     /** 流程流转记录 */
     getFlowRecordList(procInsId, deployId) {
       const that = this
-      const params = {procInsId: procInsId, deployId: deployId}
+      const params = { procInsId: procInsId, deployId: deployId }
       flowRecord(params).then(res => {
-        that.flowRecordList = res.data.flowList;
+        that.flowRecordList = res.data.flowList
       }).catch(res => {
-        this.goBack();
+        this.goBack()
       })
     },
     fillFormData(form, data) {
       form.fields.forEach((item) => {
-        const vModel = item.__vModel__;
-        const val = data[item.__vModel__];
+        const vModel = item.__vModel__
+        const val = data[item.__vModel__]
 
         // 特殊处理el-upload，回显图片
-        if (item.__config__.tag === "el-upload") {
+        if (item.__config__.tag === 'el-upload') {
           // 回显图片
-          item["file-list"] = (val || []).map((url) => ({
+          item['file-list'] = (val || []).map((url) => ({
             name: `${vModel}${i}`,
-            url,
-          }));
+            url
+          }))
         }
 
         if (val) {
-          item.__config__.defaultValue = val;
+          item.__config__.defaultValue = val
         }
-      });
+      })
     },
     /** 获取流程变量内容 */
     processVariables(taskId) {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          /*this.variablesData = res.data.variables;*/
+          /* this.variablesData = res.data.variables;*/
           this.$nextTick(() => {
             // 回显表单
-            this.$refs.vFormRef.setFormJson(res.data.formJson);
+            this.$refs.vFormRef.setFormJson(res.data.formJson)
             this.$nextTick(() => {
               // 加载表单填写的数据
-              this.$refs.vFormRef.setFormData(res.data);
+              this.$refs.vFormRef.setFormData(res.data)
               this.$nextTick(() => {
                 // 表单禁用
-                this.$refs.vFormRef.disableForm();
+                this.$refs.vFormRef.disableForm()
               })
             })
           })
-        });
+        })
       }
     },
     /** 返回页面 */
     goBack() {
       // 关闭当前标签页并返回上个页面
-      const obj = { path: "/task/process", query: { t: Date.now()} };
-      this.$tab.closeOpenPage(obj);
-    },
+      const obj = { path: '/task/process', query: { t: Date.now() }}
+      this.$tab.closeOpenPage(obj)
+    }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 .test-form {

src/views/flowable/task/myProcess/index.vue

@@ -128,11 +128,11 @@ import {
   updateDeployment,
   exportDeployment,
   flowRecord
-} from "@/api/flowable/finished";
-import { myProcessList, stopProcess } from "@/api/flowable/process";
-import { listDefinition } from "@/api/flowable/definition";
+} from '@/api/flowable/finished'
+import { myProcessList, stopProcess } from '@/api/flowable/process'
+import { listDefinition } from '@/api/flowable/definition'
 export default {
-  name: "Deploy",
+  name: 'Deploy',
   components: {
   },
   data() {
@@ -154,10 +154,10 @@ export default {
       // 我发起的流程列表数据
       myProcessList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
-      src: "",
+      src: '',
       definitionList: [],
       // 查询参数
       queryParams: {
@@ -191,26 +191,26 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      },
-    };
+      }
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询流程定义列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       myProcessList(this.queryParams).then(response => {
-        this.myProcessList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+        this.myProcessList = response.data.records
+        this.total = response.data.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -225,28 +225,28 @@ export default {
         derivedFromRoot: null,
         parentDeploymentId: null,
         engineVersion: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     /** 搜索按钮操作 */
     handleProcessQuery() {
-      this.queryProcessParams.pageNum = 1;
-      this.listDefinition();
+      this.queryProcessParams.pageNum = 1
+      this.listDefinition()
     },
     /** 重置按钮操作 */
     resetProcessQuery() {
-      this.resetForm("queryProcessForm");
-      this.handleProcessQuery();
+      this.resetForm('queryProcessForm')
+      this.handleProcessQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -256,16 +256,16 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.open = true;
-      this.title = "发起流程";
-      this.listDefinition();
+      this.open = true
+      this.title = '发起流程'
+      this.listDefinition()
     },
     listDefinition() {
       listDefinition(this.queryProcessParams).then(response => {
-        this.definitionList = response.data.records;
-        this.processTotal = response.data.total;
-        this.processLoading = false;
-      });
+        this.definitionList = response.data.records
+        this.processTotal = response.data.total
+        this.processLoading = false
+      })
     },
     /**  发起流程申请 */
     handleStartProcess(row) {
@@ -283,9 +283,9 @@ export default {
         instanceId: row.procInsId
       }
       stopProcess(params).then(res => {
-        this.$modal.msgSuccess(res.msg);
-        this.getList();
-      });
+        this.$modal.msgSuccess(res.msg)
+        this.getList()
+      })
     },
     /** 流程流转记录 */
     handleFlowRecord(row) {
@@ -300,61 +300,61 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getDeployment(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改流程定义";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改流程定义'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateDeployment(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addDeployment(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.procInsId || this.ids;// 暂不支持删除多个流程
-      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
+      const ids = row.procInsId || this.ids// 暂不支持删除多个流程
+      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(() => {
-        return delDeployment(ids);
+        return delDeployment(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
       })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
+      const queryParams = this.queryParams
+      this.$confirm('是否确认导出所有流程定义数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(() => {
-        return exportDeployment(queryParams);
+        return exportDeployment(queryParams)
       }).then(response => {
-        this.download(response.msg);
+        this.download(response.msg)
       })
     }
   }
-};
+}
 </script>

src/views/flowable/task/myProcess/send/flow.vue

@@ -7,7 +7,7 @@
 import FlowView from './flowview'
 
 export default {
-  name: "Flow",
+  name: 'Flow',
   components: {
     FlowView
   },
@@ -15,10 +15,10 @@ export default {
     flowData: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>

src/views/flowable/task/myProcess/send/flowview.vue

@@ -16,36 +16,36 @@
   </div>
 </template>
 <script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { CustomViewer as BpmnViewer } from '@/components/customBpmn'
 
 export default {
-  name: "FlowView",
+  name: 'FlowView',
   props: {
     flowData: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   data() {
     return {
       bpmnViewer: null
-    };
+    }
   },
   watch: {
     flowData: {
       handler(newVal) {
         if (Object.keys(newVal).length > 0) {
           // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
+          this.bpmnViewer && this.bpmnViewer.destroy()
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
+            height: 'calc(100vh - 200px)'
+          })
           this.loadFlowCanvas(newVal)
         }
       },
       immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
+      deep: true // 监听对象或数组的时候，要用到深度监听
     }
   },
   mounted() {},
@@ -54,7 +54,7 @@ export default {
     async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
+        await self.bpmnViewer.importXML(flowData.xmlData)
         self.fitViewport()
       } catch (err) {
         console.error(err.message, err.warnings)
@@ -62,16 +62,16 @@ export default {
     },
     // 让图能自适应屏幕
     fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
+      this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
     },
     // 放大缩小
     zoomViewport(zoomIn = true) {
       this.zoom = this.bpmnViewer.get('canvas').zoom()
       this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
-    },
+      if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
+    }
   }
-};
+}
 </script>
 <style lang="scss">
   .bjs-powered-by {

src/views/flowable/task/myProcess/send/index.vue

@@ -50,20 +50,20 @@
 
 <script>
 import Parser from '@/components/parser/Parser'
-import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
+import { definitionStart, flowXmlAndNode } from '@/api/flowable/definition'
 import flow from './flow'
-import {flowFormData} from "@/api/flowable/process";
-import {getNextFlowNodeByStart} from "@/api/flowable/todo";
+import { flowFormData } from '@/api/flowable/process'
+import { getNextFlowNodeByStart } from '@/api/flowable/todo'
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
 
 export default {
-  name: "Record",
+  name: 'Record',
   components: {
     Parser,
     flow,
     FlowUser,
-    FlowRole,
+    FlowRole
   },
   props: {},
   data() {
@@ -72,8 +72,8 @@ export default {
       flowData: {},
       activeName: '1', // 切换tab标签
       defaultProps: {
-        children: "children",
-        label: "label"
+        children: 'children',
+        label: 'label'
       },
       // 查询参数
       queryParams: {
@@ -81,85 +81,85 @@ export default {
       },
       // 遮罩层
       loading: true,
-      deployId: "",  // 流程定义编号
-      procDefId: "",  // 流程实例编号
-      //formConf: {}, // 默认表单数据
-      formRenderData: {},// 默认表单数据
+      deployId: '', // 流程定义编号
+      procDefId: '', // 流程实例编号
+      // formConf: {}, // 默认表单数据
+      formRenderData: {}, // 默认表单数据
       variables: [], // 流程变量数据
       taskTitle: null,
       taskOpen: false,
       checkSendUser: false, // 是否展示人员选择模块
-      checkSendRole: false,// 是否展示角色选择模块
+      checkSendRole: false, // 是否展示角色选择模块
       checkType: '', // 选择类型
       checkValues: null, // 选中任务接收人员数据
       formData: {}, // 填写的表单数据,
       multiInstanceVars: '', // 会签节点
       formJson: {} // 表单json
-    };
+    }
   },
   created() {
-    this.deployId = this.$route.query && this.$route.query.deployId;
+    this.deployId = this.$route.query && this.$route.query.deployId
     // 初始化表单
-    this.procDefId  = this.$route.query && this.$route.query.procDefId;
+    this.procDefId = this.$route.query && this.$route.query.procDefId
     // this.getNextFlowNodeByStart(this.deployId);
-    this.getFlowFormData(this.deployId);
+    this.getFlowFormData(this.deployId)
   },
   methods: {
     handleClick(tab, event) {
-      if (tab.name === '2'){
-        flowXmlAndNode({deployId:this.deployId}).then(res => {
-          this.flowData = res.data;
+      if (tab.name === '2') {
+        flowXmlAndNode({ deployId: this.deployId }).then(res => {
+          this.flowData = res.data
         })
       }
     },
     /** 流程表单数据 */
     getFlowFormData(deployId) {
       const that = this
-      const params = {deployId: deployId}
+      const params = { deployId: deployId }
       flowFormData(params).then(res => {
         // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
-          //that.formConf = res.data;
+        // that.formConf = res.data;
         this.$nextTick(() => {
           // 回显数据
-          this.$refs.vFormRef.setFormJson(res.data);
-          this.formJson = res.data;
+          this.$refs.vFormRef.setFormJson(res.data)
+          this.formJson = res.data
         })
       }).catch(res => {
-        this.goBack();
+        this.goBack()
       })
     },
     /** 返回页面 */
     goBack() {
       // 关闭当前标签页并返回上个页面
-      const obj = { path: "/task/process", query: { t: Date.now()} };
-      this.$tab.closeOpenPage(obj);
+      const obj = { path: '/task/process', query: { t: Date.now() }}
+      this.$tab.closeOpenPage(obj)
     },
     /** 接收子组件传的值 */
     getData(data) {
       if (data) {
-        const variables = [];
+        const variables = []
         data.fields.forEach(item => {
-          let variableData = {};
+          const variableData = {}
           variableData.label = item.__config__.label
           // 表单值为多个选项时
           if (item.__config__.defaultValue instanceof Array) {
-            const array = [];
+            const array = []
             item.__config__.defaultValue.forEach(val => {
               array.push(val)
             })
-            variableData.val = array;
+            variableData.val = array
           } else {
             variableData.val = item.__config__.defaultValue
           }
           variables.push(variableData)
         })
-        this.variables = variables;
+        this.variables = variables
       }
     },
     /** 申请流程表单数据提交 */
     submitForm(flag) {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-     /* getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => {
+      /* getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => {
         const data = res.data;
         if (data) {
           this.formData = formData;
@@ -197,41 +197,41 @@ export default {
         }
       })*/
       this.$refs.vFormRef.getFormData().then(formData => {
-        formData.auditPass=flag;
+        formData.auditPass = flag
         // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-        getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => {
-          const data = res.data;
+        getNextFlowNodeByStart({ deploymentId: this.deployId, variables: formData }).then(res => {
+          const data = res.data
           debugger
           if (data) {
-            this.formData = formData;
+            this.formData = formData
             if (data.dataType === 'dynamic') {
               if (data.type === 'assignee') { // 指定人员
-                this.checkSendUser = true;
-                this.checkType = "single";
-              } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
-                this.checkSendUser = true;
-                this.checkType = "multiple";
+                this.checkSendUser = true
+                this.checkType = 'single'
+              } else if (data.type === 'candidateUsers') { // 候选人员(多个)
+                this.checkSendUser = true
+                this.checkType = 'multiple'
               } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
-                this.checkSendRole = true;
+                this.checkSendRole = true
               } else { // 会签
                 // 流程设计指定的 elementVariable 作为会签人员列表
-                this.multiInstanceVars = data.vars;
-                this.checkSendUser = true;
-                this.checkType = "multiple";
+                this.multiInstanceVars = data.vars
+                this.checkSendUser = true
+                this.checkType = 'multiple'
               }
-              this.taskOpen = true;
-              this.taskTitle = "选择任务接收";
+              this.taskOpen = true
+              this.taskTitle = '选择任务接收'
             } else {
               if (this.procDefId) {
                 const param = {
-                  formJson:  this.formJson,
+                  formJson: this.formJson
                 }
                 // 复制对象的属性值给新的对象
-                Object.assign(param, formData);
+                Object.assign(param, formData)
                 // 启动流程并将表单数据加入流程变量
                 definitionStart(this.procDefId, param).then(res => {
-                  this.$modal.msgSuccess(res.msg);
-                  this.goBack();
+                  this.$modal.msgSuccess(res.msg)
+                  this.goBack()
                 })
               }
             }
@@ -243,19 +243,19 @@ export default {
     },
     /** 重置表单 */
     resetForm() {
-      this.$refs.vFormRef.resetForm();
+      this.$refs.vFormRef.resetForm()
     },
     /** 提交流程 */
     submitTask() {
-      if (!this.checkValues && this.checkSendUser){
-        this.$modal.msgError("请选择任务接收!");
-        return;
+      if (!this.checkValues && this.checkSendUser) {
+        this.$modal.msgError('请选择任务接收!')
+        return
       }
-      if (!this.checkValues && this.checkSendRole){
-        this.$modal.msgError("请选择流程接收角色组!");
-        return;
+      if (!this.checkValues && this.checkSendRole) {
+        this.$modal.msgError('请选择流程接收角色组!')
+        return
       }
-      /*if (this.formData) {
+      /* if (this.formData) {
         const variables = this.formData.valData;
         const formData = this.formData.formData;
         // 表单是否禁用
@@ -277,41 +277,41 @@ export default {
       }*/
       if (this.formData) {
         const param = {
-          formJson:  this.formJson,
+          formJson: this.formJson
         }
         // 复制对象的属性值给新的对象
-        Object.assign(param, this.formData);
+        Object.assign(param, this.formData)
         if (this.multiInstanceVars) {
-          this.$set(param, this.multiInstanceVars, this.checkValues);
+          this.$set(param, this.multiInstanceVars, this.checkValues)
         } else {
-          this.$set(param, "approval", this.checkValues);
+          this.$set(param, 'approval', this.checkValues)
         }
         // 启动流程并将表单数据加入流程变量
         definitionStart(this.procDefId, param).then(res => {
-          this.$modal.msgSuccess(res.msg);
-          this.goBack();
+          this.$modal.msgSuccess(res.msg)
+          this.goBack()
         })
       }
     },
     /** 根据当前任务获取流程设计配置的下一步节点 */
-    getNextFlowNodeByStart(deploymentId,variables) {
+    getNextFlowNodeByStart(deploymentId, variables) {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      getNextFlowNodeByStart({deploymentId: deploymentId,variables:variables}).then(res => {
-        const data = res.data;
+      getNextFlowNodeByStart({ deploymentId: deploymentId, variables: variables }).then(res => {
+        const data = res.data
         if (data) {
           if (data.type === 'assignee') { // 指定人员
-            this.checkSendUser = true;
-            this.checkType = "single";
-          } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
-            this.checkSendUser = true;
-            this.checkType = "multiple";
+            this.checkSendUser = true
+            this.checkType = 'single'
+          } else if (data.type === 'candidateUsers') { // 候选人员(多个)
+            this.checkSendUser = true
+            this.checkType = 'multiple'
           } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
-            this.checkSendRole = true;
+            this.checkSendRole = true
           } else if (data.type === 'multiInstance') { // 会签?
             // 流程设计指定的 elementVariable 作为会签人员列表
-            this.multiInstanceVars = data.vars;
-            this.checkSendUser = true;
-            this.checkType = "multiple";
+            this.multiInstanceVars = data.vars
+            this.checkSendUser = true
+            this.checkType = 'multiple'
           }
         }
       })
@@ -320,14 +320,14 @@ export default {
     handleUserSelect(selection) {
       if (selection) {
         if (selection instanceof Array) {
-          const selectVal = selection.map(item => item.userId);
+          const selectVal = selection.map(item => item.userId)
           if (this.multiInstanceVars) {
-            this.checkValues = selectVal;
+            this.checkValues = selectVal
           } else {
-            this.checkValues = selectVal.join(',');
+            this.checkValues = selectVal.join(',')
           }
         } else {
-          this.checkValues = selection.userId;
+          this.checkValues = selection.userId
         }
       }
     },
@@ -335,15 +335,15 @@ export default {
     handleRoleSelect(selection) {
       if (selection) {
         if (selection instanceof Array) {
-          const selectVal = selection.map(item => item.roleId);
+          const selectVal = selection.map(item => item.roleId)
           this.checkValues = selectVal.join(',')
         } else {
-          this.checkValues = selection;
+          this.checkValues = selection
         }
       }
-    },
+    }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 .test-form {

src/views/flowable/task/record/flow.vue

@@ -14,7 +14,7 @@ import bpmnModeler from '@/components/Process/index'
 import FlowView from './flowview'
 
 export default {
-  name: "Flow",
+  name: 'Flow',
   components: {
     bpmnModeler,
     FlowView
@@ -30,7 +30,7 @@ export default {
     }
   },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>

src/views/flowable/task/record/flowview.vue

@@ -16,10 +16,10 @@
   </div>
 </template>
 <script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { CustomViewer as BpmnViewer } from '@/components/customBpmn'
 
 export default {
-  name: "FlowView",
+  name: 'FlowView',
   props: {
     xmlData: {
       type: String,
@@ -33,7 +33,7 @@ export default {
   data() {
     return {
       bpmnViewer: null
-    };
+    }
   },
   watch: {
     xmlData: function(val) {
@@ -44,11 +44,11 @@ export default {
   },
   mounted() {
     // 生成实例
-    this.bpmnViewer && this.bpmnViewer.destroy();
+    this.bpmnViewer && this.bpmnViewer.destroy()
     this.bpmnViewer = new BpmnViewer({
       container: this.$refs.flowCanvas,
-      height: 'calc(100vh - 200px)',
-    });
+      height: 'calc(100vh - 200px)'
+    })
     // this.getImg(this.xmlData)
   },
   methods: {
@@ -56,9 +56,9 @@ export default {
     async getImg(xmlUrl) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(xmlUrl);
+        await self.bpmnViewer.importXML(xmlUrl)
         self.fitViewport()
-        if (self.taskList !==undefined && self.taskList.length > 0 ) {
+        if (self.taskList !== undefined && self.taskList.length > 0) {
           self.fillColor()
         }
       } catch (err) {
@@ -68,18 +68,18 @@ export default {
     // 设置高亮颜色的class
     setNodeColor(nodeCodes, colorClass, canvas) {
       for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
+        canvas.addMarker(nodeCodes[i], colorClass)
       }
     },
     // 让图能自适应屏幕
     fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
+      this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
     },
     // 放大缩小
     zoomViewport(zoomIn = true) {
       this.zoom = this.bpmnViewer.get('canvas').zoom()
       this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
+      if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
     },
 
     // 设置高亮颜色的
@@ -92,13 +92,13 @@ export default {
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
+                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                   canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                   canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
+                } else {
                   canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                   canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 }
@@ -110,23 +110,20 @@ export default {
         else if (n.$type === 'bpmn:ExclusiveGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
               }
-
             })
           }
-
         }
         // 并行网关
         else if (n.$type === 'bpmn:ParallelGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -134,8 +131,7 @@ export default {
               }
             })
           }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
+        } else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
             const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
@@ -144,17 +140,16 @@ export default {
               return
             }
           })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
+        } else if (n.$type === 'bpmn:EndEvent') {
           if (endTask.key === n.id && endTask.completed) {
             canvas.addMarker(n.id, 'highlight')
             return
           }
         }
       })
-    },
+    }
   }
-};
+}
 </script>
 <style lang="scss">
   .bjs-powered-by {

src/views/flowable/task/record/index.vue

@@ -195,18 +195,18 @@
 </template>
 
 <script>
-import {flowRecord} from "@/api/flowable/finished";
+import { flowRecord } from '@/api/flowable/finished'
 import Parser from '@/components/parser/Parser'
-import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
-import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
+import { definitionStart, getProcessVariables, readXml, getFlowViewer } from '@/api/flowable/definition'
+import { complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate } from '@/api/flowable/todo'
 import flow from '@/views/flowable/task/record/flow'
-import {treeselect} from "@/api/system/dept";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import Treeselect from "@riophae/vue-treeselect";
-import {listUser} from "@/api/system/user";
+import { treeselect } from '@/api/system/dept'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from '@riophae/vue-treeselect'
+import { listUser } from '@/api/system/user'
 
 export default {
-  name: "Record",
+  name: 'Record',
   components: {
     Parser,
     flow,
@@ -216,7 +216,7 @@ export default {
   data() {
     return {
       // 模型xml数据
-      xmlData: "",
+      xmlData: '',
       taskList: [],
       // 部门名称
       deptName: undefined,
@@ -225,8 +225,8 @@ export default {
       // 用户表格数据
       userList: null,
       defaultProps: {
-        children: "children",
-        label: "label"
+        children: 'children',
+        label: 'label'
       },
       // 查询参数
       queryParams: {
@@ -239,29 +239,29 @@ export default {
       src: null,
       rules: {}, // 表单校验
       variablesForm: {}, // 流程变量数据
-      taskForm:{
+      taskForm: {
         returnTaskShow: false, // 是否展示回退表单
         delegateTaskShow: false, // 是否展示回退表单
         defaultTaskShow: true, // 默认处理
         sendUserShow: false, // 审批用户
         multiple: false,
-        comment:"", // 意见内容
-        procInsId: "", // 流程实例编号
-        instanceId: "", // 流程实例编号
-        deployId: "",  // 流程定义编号
-        taskId: "" ,// 流程任务编号
-        procDefId: "",  // 流程编号
-        vars: "",
-        targetKey:""
+        comment: '', // 意见内容
+        procInsId: '', // 流程实例编号
+        instanceId: '', // 流程实例编号
+        deployId: '', // 流程定义编号
+        taskId: '', // 流程任务编号
+        procDefId: '', // 流程编号
+        vars: '',
+        targetKey: ''
       },
-      userDataList:[], // 流程候选人
+      userDataList: [], // 流程候选人
       assignee: null,
       formConf: {}, // 默认表单数据
       formConfOpen: false, // 是否加载默认表单数据
       variables: [], // 流程变量数据
       variablesData: {}, // 流程变量数据
       variableOpen: false, // 是否加载流程变量数据
-      returnTaskList: [],  // 回退列表数据
+      returnTaskList: [], // 回退列表数据
       finished: 'false',
       completeTitle: null,
       completeOpen: false,
@@ -269,54 +269,54 @@ export default {
       returnOpen: false,
       rejectOpen: false,
       rejectTitle: null,
-      userData:[],
+      userData: [],
       checkSendUser: false // 是否展示选择人员模块
-    };
+    }
   },
   created() {
-    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
-    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
-    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
-    this.taskForm.executionId = this.$route.query && this.$route.query.executionId;
-    this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
+    this.taskForm.deployId = this.$route.query && this.$route.query.deployId
+    this.taskForm.taskId = this.$route.query && this.$route.query.taskId
+    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
+    this.taskForm.executionId = this.$route.query && this.$route.query.executionId
+    this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId
     // 初始化表单
-    this.taskForm.procDefId  = this.$route.query && this.$route.query.procDefId;
+    this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId
     // 回显流程记录
-    this.getFlowViewer(this.taskForm.procInsId,this.taskForm.executionId);
-    this.getModelDetail(this.taskForm.deployId);
+    this.getFlowViewer(this.taskForm.procInsId, this.taskForm.executionId)
+    this.getModelDetail(this.taskForm.deployId)
     // 流程任务重获取变量表单
-    if (this.taskForm.taskId){
-      this.processVariables( this.taskForm.taskId)
+    if (this.taskForm.taskId) {
+      this.processVariables(this.taskForm.taskId)
       this.getNextFlowNode(this.taskForm.taskId)
       this.taskForm.deployId = null
     }
-    this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
-    this.finished =  this.$route.query && this.$route.query.finished
+    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
+    this.finished = this.$route.query && this.$route.query.finished
   },
   methods: {
     /** 查询部门下拉树结构 */
     getTreeselect() {
       treeselect().then(response => {
-        this.deptOptions = response.data;
-      });
+        this.deptOptions = response.data
+      })
     },
     /** 查询用户列表 */
     getList() {
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-        }
-      );
+        this.userList = response.rows
+        this.total = response.total
+      }
+      )
     },
     // 筛选节点
     filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
     // 节点单击事件
     handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.getList();
+      this.queryParams.deptId = data.id
+      this.getList()
     },
     /** xml 文件 */
     getModelDetail(deployId) {
@@ -325,71 +325,71 @@ export default {
         this.xmlData = res.data
       })
     },
-    getFlowViewer(procInsId,executionId) {
-      getFlowViewer(procInsId,executionId).then(res => {
+    getFlowViewer(procInsId, executionId) {
+      getFlowViewer(procInsId, executionId).then(res => {
         this.taskList = res.data
       })
     },
     setIcon(val) {
       if (val) {
-        return "el-icon-check";
+        return 'el-icon-check'
       } else {
-        return "el-icon-time";
+        return 'el-icon-time'
       }
     },
     setColor(val) {
       if (val) {
-        return "#2bc418";
+        return '#2bc418'
       } else {
-        return "#b3bdbb";
+        return '#b3bdbb'
       }
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       if (selection) {
         this.userData = selection
-        const selectVal = selection.map(item => item.userId);
+        const selectVal = selection.map(item => item.userId)
         if (selectVal instanceof Array) {
           this.taskForm.values = {
-            "approval": selectVal.join(',')
+            'approval': selectVal.join(',')
           }
         } else {
           this.taskForm.values = {
-            "approval": selectVal
+            'approval': selectVal
           }
         }
       }
     },
     // 关闭标签
     handleClose(tag) {
-      this.userData.splice(this.userData.indexOf(tag), 1);
+      this.userData.splice(this.userData.indexOf(tag), 1)
       this.$refs.singleTable.toggleRowSelection(tag, false)
     },
     /** 流程变量赋值 */
     handleCheckChange(val) {
       if (val instanceof Array) {
         this.taskForm.values = {
-          "approval": val.join(',')
+          'approval': val.join(',')
         }
       } else {
         this.taskForm.values = {
-          "approval": val
+          'approval': val
         }
       }
     },
     /** 流程流转记录 */
     getFlowRecordList(procInsId, deployId) {
       const that = this
-      const params = {procInsId: procInsId, deployId: deployId}
+      const params = { procInsId: procInsId, deployId: deployId }
       flowRecord(params).then(res => {
-        that.flowRecordList = res.data.flowList;
+        that.flowRecordList = res.data.flowList
         // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
         if (res.data.formData) {
-          that.formConf = res.data.formData;
+          that.formConf = res.data.formData
           that.formConfOpen = true
         }
       }).catch(res => {
-        this.goBack();
+        this.goBack()
       })
     },
     fillFormData(form, data) {
@@ -405,177 +405,177 @@ export default {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          this.variablesData = res.data.variables;
+          this.variablesData = res.data.variables
           this.variableOpen = true
-        });
+        })
       }
     },
     /** 根据当前任务或者流程设计配置的下一步节点 */
     getNextFlowNode(taskId) {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      const params = {taskId: taskId}
+      const params = { taskId: taskId }
       getNextFlowNode(params).then(res => {
-        const data = res.data;
+        const data = res.data
         if (data) {
           this.checkSendUser = true
           if (data.type === 'assignee') { // 指定人员
-            this.userDataList = res.data.userList;
-          } else if (data.type === 'candidateUsers') {  // 指定人员(多个)
-            this.userDataList = res.data.userList;
-            this.taskForm.multiple = true;
+            this.userDataList = res.data.userList
+          } else if (data.type === 'candidateUsers') { // 指定人员(多个)
+            this.userDataList = res.data.userList
+            this.taskForm.multiple = true
           } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
             res.data.roleList.forEach(role => {
-              role.userId = role.roleId;
-              role.nickName = role.roleName;
+              role.userId = role.roleId
+              role.nickName = role.roleName
             })
-            this.userDataList = res.data.roleList;
-            this.taskForm.multiple = false;
+            this.userDataList = res.data.roleList
+            this.taskForm.multiple = false
           } else if (data.type === 'multiInstance') { // 会签?
-            this.userDataList = res.data.userList;
-            this.taskForm.multiple = true;
-          }else if (data.type === 'fixed') { // 已经固定人员接收下一任务
-            this.checkSendUser = false;
+            this.userDataList = res.data.userList
+            this.taskForm.multiple = true
+          } else if (data.type === 'fixed') { // 已经固定人员接收下一任务
+            this.checkSendUser = false
           }
         }
       })
     },
     /** 审批任务选择 */
     handleComplete() {
-      this.completeOpen = true;
-      this.completeTitle = "审批流程";
-      this.getTreeselect();
+      this.completeOpen = true
+      this.completeTitle = '审批流程'
+      this.getTreeselect()
     },
     /** 审批任务 */
     taskComplete() {
-      if (!this.taskForm.values && this.checkSendUser){
-        this.msgError("请选择流程接收人员");
-        return;
+      if (!this.taskForm.values && this.checkSendUser) {
+        this.msgError('请选择流程接收人员')
+        return
       }
-      if (!this.taskForm.comment){
-        this.msgError("请输入审批意见");
-        return;
+      if (!this.taskForm.comment) {
+        this.msgError('请输入审批意见')
+        return
       }
       complete(this.taskForm).then(response => {
-       this.$modal.msgSuccess(response.msg);
-        this.goBack();
-      });
+        this.$modal.msgSuccess(response.msg)
+        this.goBack()
+      })
     },
     /** 委派任务 */
     handleDelegate() {
-      this.taskForm.delegateTaskShow = true;
-      this.taskForm.defaultTaskShow = false;
+      this.taskForm.delegateTaskShow = true
+      this.taskForm.defaultTaskShow = false
     },
-    handleAssign(){
+    handleAssign() {
 
     },
     /** 返回页面 */
     goBack() {
       // 关闭当前标签页并返回上个页面
-      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$store.dispatch('tagsView/delView', this.$route)
       this.$router.go(-1)
     },
     /** 接收子组件传的值 */
     getData(data) {
       if (data) {
-        const variables = [];
+        const variables = []
         data.fields.forEach(item => {
-          let variableData = {};
+          const variableData = {}
           variableData.label = item.__config__.label
           // 表单值为多个选项时
           if (item.__config__.defaultValue instanceof Array) {
-            const array = [];
+            const array = []
             item.__config__.defaultValue.forEach(val => {
               array.push(val)
             })
-            variableData.val = array;
+            variableData.val = array
           } else {
             variableData.val = item.__config__.defaultValue
           }
           variables.push(variableData)
         })
-        this.variables = variables;
+        this.variables = variables
       }
     },
     /** 申请流程表单数据提交 */
     submitForm(data) {
       if (data) {
-        const variables = data.valData;
-        const formData = data.formData;
-        formData.disabled = true;
-        formData.formBtns = false;
+        const variables = data.valData
+        const formData = data.formData
+        formData.disabled = true
+        formData.formBtns = false
         if (this.taskForm.procDefId) {
-          variables.variables = formData;
-           // 启动流程并将表单数据加入流程变量
+          variables.variables = formData
+          // 启动流程并将表单数据加入流程变量
           definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
-           this.$modal.msgSuccess(res.msg);
-            this.goBack();
+            this.$modal.msgSuccess(res.msg)
+            this.goBack()
           })
         }
       }
     },
     /** 驳回任务 */
     handleReject() {
-      this.rejectOpen = true;
-      this.rejectTitle = "驳回流程";
+      this.rejectOpen = true
+      this.rejectTitle = '驳回流程'
     },
     /** 驳回任务 */
     taskReject() {
-      this.$refs["taskForm"].validate(valid => {
+      this.$refs['taskForm'].validate(valid => {
         if (valid) {
           rejectTask(this.taskForm).then(res => {
-           this.$modal.msgSuccess(res.msg);
-            this.goBack();
-          });
+            this.$modal.msgSuccess(res.msg)
+            this.goBack()
+          })
         }
-      });
+      })
     },
     /** 可退回任务列表 */
     handleReturn() {
-      this.returnOpen = true;
-      this.returnTitle = "退回流程";
+      this.returnOpen = true
+      this.returnTitle = '退回流程'
       returnList(this.taskForm).then(res => {
-        this.returnTaskList = res.data;
-        this.taskForm.values = null;
+        this.returnTaskList = res.data
+        this.taskForm.values = null
       })
     },
     /** 提交退回任务 */
-   taskReturn() {
-      this.$refs["taskForm"].validate(valid => {
+    taskReturn() {
+      this.$refs['taskForm'].validate(valid => {
         if (valid) {
           returnTask(this.taskForm).then(res => {
-           this.$modal.msgSuccess(res.msg);
+            this.$modal.msgSuccess(res.msg)
             this.goBack()
-          });
+          })
         }
-      });
+      })
     },
     /** 取消回退任务按钮 */
     cancelTask() {
-      this.taskForm.returnTaskShow = false;
-      this.taskForm.defaultTaskShow = true;
-      this.taskForm.sendUserShow = true;
-      this.returnTaskList = [];
+      this.taskForm.returnTaskShow = false
+      this.taskForm.defaultTaskShow = true
+      this.taskForm.sendUserShow = true
+      this.returnTaskList = []
     },
     /** 委派任务 */
     submitDeleteTask() {
-      this.$refs["taskForm"].validate(valid => {
+      this.$refs['taskForm'].validate(valid => {
         if (valid) {
           delegate(this.taskForm).then(response => {
-           this.$modal.msgSuccess(response.msg);
-            this.goBack();
-          });
+            this.$modal.msgSuccess(response.msg)
+            this.goBack()
+          })
         }
-      });
+      })
     },
     /** 取消回退任务按钮 */
     cancelDelegateTask() {
-      this.taskForm.delegateTaskShow = false;
-      this.taskForm.defaultTaskShow = true;
-      this.taskForm.sendUserShow = true;
-      this.returnTaskList = [];
-    },
+      this.taskForm.delegateTaskShow = false
+      this.taskForm.defaultTaskShow = true
+      this.taskForm.sendUserShow = true
+      this.returnTaskList = []
+    }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 .test-form {

src/views/flowable/task/todo/detail/flow.vue

@@ -7,7 +7,7 @@
 import FlowView from './flowview'
 
 export default {
-  name: "Flow",
+  name: 'Flow',
   components: {
     FlowView
   },
@@ -15,10 +15,10 @@ export default {
     flowData: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   data() {
-    return {};
+    return {}
   }
-};
+}
 </script>

src/views/flowable/task/todo/detail/flowview.vue

@@ -19,37 +19,37 @@
   </div>
 </template>
 <script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
+import { CustomViewer as BpmnViewer } from '@/components/customBpmn'
 
 export default {
-  name: "FlowView",
+  name: 'FlowView',
   props: {
     flowData: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   data() {
     return {
       bpmnViewer: null,
       processVersion: null
-    };
+    }
   },
   watch: {
     flowData: {
       handler(newVal) {
         if (Object.keys(newVal).length > 0) {
           // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
+          this.bpmnViewer && this.bpmnViewer.destroy()
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
-          this.loadFlowCanvas(newVal);
+            height: 'calc(100vh - 200px)'
+          })
+          this.loadFlowCanvas(newVal)
         }
       },
       immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
+      deep: true // 监听对象或数组的时候，要用到深度监听
     }
   },
   mounted() {
@@ -59,12 +59,12 @@ export default {
     async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
+        await self.bpmnViewer.importXML(flowData.xmlData)
         self.fitViewport()
-        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
+        if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {
           self.fillColor(flowData.nodeData)
         }
-        this.processVersion=flowData.processVersion;
+        this.processVersion = flowData.processVersion
       } catch (err) {
         console.error(err.message, err.warnings)
       }
@@ -72,18 +72,18 @@ export default {
     // 设置高亮颜色的class
     setNodeColor(nodeCodes, colorClass, canvas) {
       for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
+        canvas.addMarker(nodeCodes[i], colorClass)
       }
     },
     // 让图能自适应屏幕
     fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
+      this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
     },
     // 放大缩小
     zoomViewport(zoomIn = true) {
       this.zoom = this.bpmnViewer.get('canvas').zoom()
       this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
+      if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
     },
 
     // 设置高亮颜色的
@@ -96,13 +96,13 @@ export default {
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
+                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                   canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                   canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
+                } else {
                   canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                   canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 }
@@ -114,23 +114,20 @@ export default {
         else if (n.$type === 'bpmn:ExclusiveGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
-
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
               }
-
             })
           }
-
         }
         // 并行网关
         else if (n.$type === 'bpmn:ParallelGateway') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
+            n.outgoing.forEach(nn => {
               const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -138,8 +135,7 @@ export default {
               }
             })
           }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
+        } else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
             const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
@@ -148,17 +144,16 @@ export default {
               return
             }
           })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
+        } else if (n.$type === 'bpmn:EndEvent') {
           if (endTask.key === n.id && endTask.completed) {
             canvas.addMarker(n.id, 'highlight')
             return
           }
         }
       })
-    },
+    }
   }
-};
+}
 </script>
 <style lang="scss">
   .bjs-powered-by {

src/views/flowable/task/todo/detail/index.vue

@@ -151,11 +151,11 @@
 </template>
 
 <script>
-import {flowRecord} from "@/api/flowable/finished";
+import { flowRecord } from '@/api/flowable/finished'
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
 import Parser from '@/components/parser/Parser'
-import {getProcessVariables, flowXmlAndNode, definitionStart} from "@/api/flowable/definition";
+import { getProcessVariables, flowXmlAndNode, definitionStart } from '@/api/flowable/definition'
 import {
   complete,
   rejectTask,
@@ -163,26 +163,26 @@ import {
   returnTask,
   getNextFlowNode,
   delegate,
-  flowTaskForm,
-} from "@/api/flowable/todo";
+  flowTaskForm
+} from '@/api/flowable/todo'
 import flow from '@/views/flowable/task/todo/detail/flow'
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import {listUser} from "@/api/system/user";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { listUser } from '@/api/system/user'
 
 export default {
-  name: "Record",
+  name: 'Record',
   components: {
     Parser,
     flow,
     FlowUser,
-    FlowRole,
+    FlowRole
   },
   props: {},
   data() {
     return {
-      eventName: "click",
+      eventName: 'click',
       // 模型xml数据
-      xmlData: "",
+      xmlData: '',
       flowData: {},
       activeName: '1',
       // 部门名称
@@ -191,8 +191,8 @@ export default {
       // 用户表格数据
       userList: null,
       defaultProps: {
-        children: "children",
-        label: "label"
+        children: 'children',
+        label: 'label'
       },
       // 查询参数
       queryParams: {
@@ -209,22 +209,22 @@ export default {
         returnTaskShow: false, // 是否展示回退表单
         delegateTaskShow: false, // 是否展示回退表单
         defaultTaskShow: true, // 默认处理
-        comment: "", // 意见内容
-        procInsId: "", // 流程实例编号
-        instanceId: "", // 流程实例编号
-        deployId: "",  // 流程定义编号
-        taskId: "",// 流程任务编号
-        procDefId: "",  // 流程编号
-        targetKey: "",
+        comment: '', // 意见内容
+        procInsId: '', // 流程实例编号
+        instanceId: '', // 流程实例编号
+        deployId: '', // 流程定义编号
+        taskId: '', // 流程任务编号
+        procDefId: '', // 流程编号
+        targetKey: '',
         variables: {
           variables: {}
-        },
+        }
       },
       assignee: null,
       formConf: {}, // 默认表单数据
       variables: [], // 流程变量数据
       variablesData: {}, // 流程变量数据
-      returnTaskList: [],  // 回退列表数据
+      returnTaskList: [], // 回退列表数据
       completeTitle: null,
       completeOpen: false,
       returnTitle: null,
@@ -233,68 +233,68 @@ export default {
       rejectTitle: null,
       userData: [],
       checkSendUser: false, // 是否展示人员选择模块
-      checkSendRole: false,// 是否展示角色选择模块
+      checkSendRole: false, // 是否展示角色选择模块
       checkType: 'single', // 选择类型
       taskName: null, // 任务节点
-      taskDefKey:null,//节点Id
+      taskDefKey: null, // 节点Id
       startUser: null, // 发起人信息,
       multiInstanceVars: '', // 会签节点
       formKeyExist: false, // 当前节点是否存在表单
-      formJson:{}
-    };
+      formJson: {}
+    }
   },
   created() {
     if (this.$route.query) {
-      this.taskName = this.$route.query.taskName;
-      this.taskDefKey = this.$route.query.taskDefKey;
-      this.startUser = this.$route.query.startUser;
-      this.taskForm.deployId = this.$route.query.deployId;
-      this.taskForm.taskId = this.$route.query.taskId;
-      this.taskForm.procInsId = this.$route.query.procInsId;
-      this.taskForm.executionId = this.$route.query.executionId;
-      this.taskForm.instanceId = this.$route.query.procInsId;
+      this.taskName = this.$route.query.taskName
+      this.taskDefKey = this.$route.query.taskDefKey
+      this.startUser = this.$route.query.startUser
+      this.taskForm.deployId = this.$route.query.deployId
+      this.taskForm.taskId = this.$route.query.taskId
+      this.taskForm.procInsId = this.$route.query.procInsId
+      this.taskForm.executionId = this.$route.query.executionId
+      this.taskForm.instanceId = this.$route.query.procInsId
       // 流程任务获取变量信息
       if (this.taskForm.taskId) {
         this.processVariables(this.taskForm.taskId)
         this.getFlowTaskForm(this.taskForm.taskId)
       }
-      this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
+      this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
     }
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === '3') {
-        flowXmlAndNode({procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId}).then(res => {
-          this.flowData = res.data;
+        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then(res => {
+          this.flowData = res.data
         })
       }
     },
     setIcon(val) {
       if (val) {
-        return "el-icon-check";
+        return 'el-icon-check'
       } else {
-        return "el-icon-time";
+        return 'el-icon-time'
       }
     },
     setColor(val) {
       if (val) {
-        return "#2bc418";
+        return '#2bc418'
       } else {
-        return "#b3bdbb";
+        return '#b3bdbb'
       }
     },
     // 用户信息选中数据
     handleUserSelect(selection) {
       if (selection) {
         if (selection instanceof Array) {
-          const selectVal = selection.map(item => item.userId);
+          const selectVal = selection.map(item => item.userId)
           if (this.multiInstanceVars) {
-            this.$set(this.taskForm.variables, this.multiInstanceVars, selectVal);
+            this.$set(this.taskForm.variables, this.multiInstanceVars, selectVal)
           } else {
-            this.$set(this.taskForm.variables, "approval", selectVal.join(','));
+            this.$set(this.taskForm.variables, 'approval', selectVal.join(','))
           }
         } else {
-          this.$set(this.taskForm.variables, "approval", selection.userId.toString());
+          this.$set(this.taskForm.variables, 'approval', selection.userId.toString())
         }
       }
     },
@@ -302,21 +302,21 @@ export default {
     handleRoleSelect(selection) {
       if (selection) {
         if (selection instanceof Array) {
-          const selectVal = selection.map(item => item.roleId);
-          this.$set(this.taskForm.variables, "approval", selectVal.join(','));
+          const selectVal = selection.map(item => item.roleId)
+          this.$set(this.taskForm.variables, 'approval', selectVal.join(','))
         } else {
-          this.$set(this.taskForm.variables, "approval", selection);
+          this.$set(this.taskForm.variables, 'approval', selection)
         }
       }
     },
     /** 流程流转记录 */
     getFlowRecordList(procInsId, deployId) {
       const that = this
-      const params = {procInsId: procInsId, deployId: deployId}
+      const params = { procInsId: procInsId, deployId: deployId }
       flowRecord(params).then(res => {
-        that.flowRecordList = res.data.flowList;
+        that.flowRecordList = res.data.flowList
       }).catch(res => {
-        this.goBack();
+        this.goBack()
       })
     },
     fillFormData(form, data) {
@@ -333,77 +333,77 @@ export default {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
           // this.variablesData = res.data.variables;
-        });
+        })
       }
     },
     /** 流程节点表单 */
     getFlowTaskForm(taskId) {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
-        flowTaskForm({taskId: taskId}).then(res => {
-          /*this.variablesData = res.data.formData;
+        flowTaskForm({ taskId: taskId }).then(res => {
+          /* this.variablesData = res.data.formData;
           this.taskForm.variables = res.data.formData;
           this.formKeyExist = res.data.formKeyExist;*/
           // 回显表单
-          this.$refs.vFormRef.setFormJson(res.data.formJson);
-          this.formJson = res.data.formJson;
+          this.$refs.vFormRef.setFormJson(res.data.formJson)
+          this.formJson = res.data.formJson
           this.$nextTick(() => {
             // 加载表单填写的数据
-            this.$refs.vFormRef.setFormData(res.data);
+            this.$refs.vFormRef.setFormData(res.data)
             // this.$nextTick(() => {
             //   // 表单禁用
             //   this.$refs.vFormRef.disableForm();
             // })
           })
-        });
+        })
       }
     },
     /** 加载审批任务弹框 */
     handleComplete(flag) {
       // this.completeOpen = true;
       // this.completeTitle = "流程审批";
-      //this.submitForm(null);
-      this.completeOpen = true;
-      this.completeTitle = "流程审批";
-      this.submitForm(flag);
+      // this.submitForm(null);
+      this.completeOpen = true
+      this.completeTitle = '流程审批'
+      this.submitForm(flag)
     },
     /** 用户审批任务 */
     taskComplete() {
       if (!this.taskForm.variables && this.checkSendUser) {
-        this.$modal.msgError("请选择流程接收人员!");
-        return;
+        this.$modal.msgError('请选择流程接收人员!')
+        return
       }
       if (!this.taskForm.variables && this.checkSendRole) {
-        this.$modal.msgError("请选择流程接收角色组!");
-        return;
+        this.$modal.msgError('请选择流程接收角色组!')
+        return
       }
       if (!this.taskForm.comment) {
-        this.$modal.msgError("请输入审批意见!");
-        return;
+        this.$modal.msgError('请输入审批意见!')
+        return
       }
       if (this.taskForm && this.formKeyExist) {
         // 表单是否禁用
-        this.taskForm.formData.formData.disabled = true;
+        this.taskForm.formData.formData.disabled = true
         // 是否显示按钮
-        this.taskForm.formData.formData.formBtns = false;
-        this.taskForm.variables = Object.assign({}, this.taskForm.variables, this.taskForm.formData.valData);
-        this.taskForm.variables.variables = this.taskForm.formData.formData;
+        this.taskForm.formData.formData.formBtns = false
+        this.taskForm.variables = Object.assign({}, this.taskForm.variables, this.taskForm.formData.valData)
+        this.taskForm.variables.variables = this.taskForm.formData.formData
         complete(this.taskForm).then(response => {
-          this.$modal.msgSuccess(response.msg);
-          this.goBack();
-        });
+          this.$modal.msgSuccess(response.msg)
+          this.goBack()
+        })
       } else {
         // 流程设计人员类型配置为固定人员接收任务时,直接提交任务到下一步
         complete(this.taskForm).then(response => {
-          this.$modal.msgSuccess(response.msg);
-          this.goBack();
-        });
+          this.$modal.msgSuccess(response.msg)
+          this.goBack()
+        })
       }
     },
     /** 委派任务 */
     handleDelegate() {
-      this.taskForm.delegateTaskShow = true;
-      this.taskForm.defaultTaskShow = false;
+      this.taskForm.delegateTaskShow = true
+      this.taskForm.defaultTaskShow = false
     },
     handleAssign() {
 
@@ -411,74 +411,74 @@ export default {
     /** 返回页面 */
     goBack() {
       // 关闭当前标签页并返回上个页面
-      const obj = { path: "/task/todo", query: { t: Date.now()} };
-      this.$tab.closeOpenPage(obj);
+      const obj = { path: '/task/todo', query: { t: Date.now() }}
+      this.$tab.closeOpenPage(obj)
     },
     /** 驳回任务 */
     handleReject() {
-      this.rejectOpen = true;
-      this.rejectTitle = "驳回流程";
+      this.rejectOpen = true
+      this.rejectTitle = '驳回流程'
     },
     /** 驳回任务 */
     taskReject() {
-      this.$refs["taskForm"].validate(valid => {
+      this.$refs['taskForm'].validate(valid => {
         if (valid) {
           rejectTask(this.taskForm).then(res => {
-            this.$modal.msgSuccess(res.msg);
-            this.goBack();
-          });
+            this.$modal.msgSuccess(res.msg)
+            this.goBack()
+          })
         }
-      });
+      })
     },
     /** 可退回任务列表 */
     handleReturn() {
-      this.returnOpen = true;
-      this.returnTitle = "退回流程";
+      this.returnOpen = true
+      this.returnTitle = '退回流程'
       returnList(this.taskForm).then(res => {
-        this.returnTaskList = res.data;
-        this.taskForm.variables = null;
+        this.returnTaskList = res.data
+        this.taskForm.variables = null
       })
     },
     /** 提交退回任务 */
     taskReturn() {
-      this.$refs["taskForm"].validate(valid => {
+      this.$refs['taskForm'].validate(valid => {
         if (valid) {
           returnTask(this.taskForm).then(res => {
-            this.$modal.msgSuccess(res.msg);
+            this.$modal.msgSuccess(res.msg)
             this.goBack()
-          });
+          })
         }
-      });
+      })
     },
     /** 取消回退任务按钮 */
     cancelTask() {
-      this.taskForm.returnTaskShow = false;
-      this.taskForm.defaultTaskShow = true;
-      this.returnTaskList = [];
+      this.taskForm.returnTaskShow = false
+      this.taskForm.defaultTaskShow = true
+      this.returnTaskList = []
     },
     /** 委派任务 */
     submitDeleteTask() {
-      this.$refs["taskForm"].validate(valid => {
+      this.$refs['taskForm'].validate(valid => {
         if (valid) {
           delegate(this.taskForm).then(response => {
-            this.$modal.msgSuccess(response.msg);
-            this.goBack();
-          });
+            this.$modal.msgSuccess(response.msg)
+            this.goBack()
+          })
         }
-      });
+      })
     },
     /** 取消回退任务按钮 */
     cancelDelegateTask() {
-      this.taskForm.delegateTaskShow = false;
-      this.taskForm.defaultTaskShow = true;
-      this.returnTaskList = [];
+      this.taskForm.delegateTaskShow = false
+      this.taskForm.defaultTaskShow = true
+      this.returnTaskList = []
     },
     /** 申请流程表单数据提交 */
     submitForm(flag) {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      const params = {taskId: this.taskForm.taskId}
+      const params = { taskId: this.taskForm.taskId }
       getNextFlowNode(params).then(res => {
-        /*const data = res.data;
+        /* const data = res.data;
         this.taskForm.formData = formData;
         if (data) {
           if (data.dataType === 'dynamic') {
@@ -501,29 +501,29 @@ export default {
         this.completeOpen = true;
         this.completeTitle = "流程审批";*/
         this.$refs.vFormRef.getFormData().then(formData => {
-          formData.auditPass=flag;
-          Object.assign(this.taskForm.variables, formData);
-          this.taskForm.variables.formJson = this.formJson;
-          console.log(this.taskForm, "流程审批提交表单数据1")
+          formData.auditPass = flag
+          Object.assign(this.taskForm.variables, formData)
+          this.taskForm.variables.formJson = this.formJson
+          console.log(this.taskForm, '流程审批提交表单数据1')
         }).catch(error => {
           // this.$modal.msgError(error)
         })
-        const data = res.data;
+        const data = res.data
         if (data) {
           if (data.dataType === 'dynamic') {
             if (data.type === 'assignee') { // 指定人员
-              this.checkSendUser = true;
-              this.checkType = "single";
-            } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
-              this.checkSendUser = true;
-              this.checkType = "multiple";
+              this.checkSendUser = true
+              this.checkType = 'single'
+            } else if (data.type === 'candidateUsers') { // 候选人员(多个)
+              this.checkSendUser = true
+              this.checkType = 'multiple'
             } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
-              this.checkSendRole = true;
+              this.checkSendRole = true
             } else { // 会签
               // 流程设计指定的 elementVariable 作为会签人员列表
-              this.multiInstanceVars = data.vars;
-              this.checkSendUser = true;
-              this.checkType = "multiple";
+              this.multiInstanceVars = data.vars
+              this.checkSendUser = true
+              this.checkType = 'multiple'
             }
           }
         }
@@ -531,10 +531,10 @@ export default {
     },
     // 动态绑定操作按钮的点击事件
     handleButtonClick(method) {
-      this[method]();
+      this[method]()
     }
-  },
-};
+  }
+}
 </script>
 <style lang="scss" scoped>
 .test-form {

src/views/flowable/task/todo/index.vue

@@ -89,11 +89,11 @@ import {
   getDeployment,
   delDeployment,
   exportDeployment,
-  claimTask,
-} from "@/api/flowable/todo";
+  claimTask
+} from '@/api/flowable/todo'
 
 export default {
-  name: "Deploy",
+  name: 'Deploy',
   components: {},
   data() {
     return {
@@ -112,7 +112,7 @@ export default {
       // 流程待办任务表格数据
       todoList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -126,20 +126,20 @@ export default {
       form: {},
       // 表单校验
       rules: {}
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询流程定义列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       todoList(this.queryParams).then(response => {
-        this.todoList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+        this.todoList = response.data.records
+        this.total = response.data.total
+        this.loading = false
+      })
     },
     // 跳转到处理页面
     handleProcess(row) {
@@ -152,14 +152,14 @@ export default {
           taskId: row.taskId,
           taskName: row.taskName,
           taskDefKey: row.taskDefKey,
-          startUser: row.startUserName + '-' + row.startDeptName,
+          startUser: row.startUserName + '-' + row.startDeptName
         }
       })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -174,18 +174,18 @@ export default {
         derivedFromRoot: null,
         parentDeploymentId: null,
         engineVersion: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -195,25 +195,25 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.taskId || this.ids;
-      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function () {
-        return delDeployment(ids);
+      const ids = row.taskId || this.ids
+      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return delDeployment(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
       })
     },
     handleSign(row) {
-      const taskId = row.taskId;
+      const taskId = row.taskId
       claimTask(taskId).then(() => {
-        this.$modal.msgSuccess("签收成功");
-        this.getList();
-      });
+        this.$modal.msgSuccess('签收成功')
+        this.getList()
+      })
     }
   }
-};
+}
 </script>