xsx
1 year ago
88 changed files with 14 additions and 11563 deletions
@ -1,12 +0,0 @@ |
|||||
@echo off |
|
||||
echo. |
|
||||
echo [信息] 打包Web工程，生成dist文件。 |
|
||||
echo. |
|
||||
|
|
||||
%~d0 |
|
||||
cd %~dp0 |
|
||||
|
|
||||
cd .. |
|
||||
yarn build:prod |
|
||||
|
|
||||
pause |
|
||||
@ -1,12 +0,0 @@ |
|||||
@echo off |
|
||||
echo. |
|
||||
echo [信息] 安装Web工程，生成node_modules文件。 |
|
||||
echo. |
|
||||
|
|
||||
%~d0 |
|
||||
cd %~dp0 |
|
||||
|
|
||||
cd .. |
|
||||
yarn --registry=https://registry.npmmirror.com |
|
||||
|
|
||||
pause |
|
||||
@ -1,12 +0,0 @@ |
|||||
@echo off |
|
||||
echo. |
|
||||
echo [信息] 使用 Vite 命令运行 Web 工程。 |
|
||||
echo. |
|
||||
|
|
||||
%~d0 |
|
||||
cd %~dp0 |
|
||||
|
|
||||
cd .. |
|
||||
yarn dev |
|
||||
|
|
||||
pause |
|
||||
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 34 KiB |
@ -1,62 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { DemoVO, DemoForm, DemoQuery } from '@/api/demo/demo/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询测试单列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const listDemo = (query?: DemoQuery): AxiosPromise<DemoVO[]> => { |
|
||||
return request({ |
|
||||
url: '/demo/demo/list', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询测试单详细 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const getDemo = (id: string | number): AxiosPromise<DemoVO> => { |
|
||||
return request({ |
|
||||
url: '/demo/demo/' + id, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增测试单 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const addDemo = (data: DemoForm) => { |
|
||||
return request({ |
|
||||
url: '/demo/demo', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改测试单 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const updateDemo = (data: DemoForm) => { |
|
||||
return request({ |
|
||||
url: '/demo/demo', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除测试单 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const delDemo = (id: string | number | Array<string | number>) => { |
|
||||
return request({ |
|
||||
url: '/demo/demo/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,90 +0,0 @@ |
|||||
export interface DemoVO { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 部门id |
|
||||
*/ |
|
||||
deptId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 用户id |
|
||||
*/ |
|
||||
userId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 排序号 |
|
||||
*/ |
|
||||
orderNum: number; |
|
||||
|
|
||||
/** |
|
||||
* key键 |
|
||||
*/ |
|
||||
testKey: string; |
|
||||
|
|
||||
/** |
|
||||
* 值 |
|
||||
*/ |
|
||||
value: string; |
|
||||
} |
|
||||
|
|
||||
export interface DemoForm extends BaseEntity { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 部门id |
|
||||
*/ |
|
||||
deptId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 用户id |
|
||||
*/ |
|
||||
userId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 排序号 |
|
||||
*/ |
|
||||
orderNum?: number; |
|
||||
|
|
||||
/** |
|
||||
* key键 |
|
||||
*/ |
|
||||
testKey?: string; |
|
||||
|
|
||||
/** |
|
||||
* 值 |
|
||||
*/ |
|
||||
value?: string; |
|
||||
} |
|
||||
|
|
||||
export interface DemoQuery extends PageQuery { |
|
||||
/** |
|
||||
* 部门id |
|
||||
*/ |
|
||||
deptId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 用户id |
|
||||
*/ |
|
||||
userId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 排序号 |
|
||||
*/ |
|
||||
orderNum?: number; |
|
||||
|
|
||||
/** |
|
||||
* key键 |
|
||||
*/ |
|
||||
testKey?: string; |
|
||||
|
|
||||
/** |
|
||||
* 值 |
|
||||
*/ |
|
||||
value?: string; |
|
||||
} |
|
||||
@ -1,62 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { TreeVO, TreeForm, TreeQuery } from '@/api/demo/tree/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询测试树列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const listTree = (query?: TreeQuery): AxiosPromise<TreeVO[]> => { |
|
||||
return request({ |
|
||||
url: '/demo/tree/list', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询测试树详细 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const getTree = (id: string | number): AxiosPromise<TreeVO> => { |
|
||||
return request({ |
|
||||
url: '/demo/tree/' + id, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增测试树 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const addTree = (data: TreeForm) => { |
|
||||
return request({ |
|
||||
url: '/demo/tree', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改测试树 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const updateTree = (data: TreeForm) => { |
|
||||
return request({ |
|
||||
url: '/demo/tree', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除测试树 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const delTree = (id: string | number | Array<string | number>) => { |
|
||||
return request({ |
|
||||
url: '/demo/tree/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,80 +0,0 @@ |
|||||
export interface TreeVO { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 父id |
|
||||
*/ |
|
||||
parentId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 部门id |
|
||||
*/ |
|
||||
deptId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 用户id |
|
||||
*/ |
|
||||
userId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 值 |
|
||||
*/ |
|
||||
treeName: string; |
|
||||
|
|
||||
/** |
|
||||
* 子对象 |
|
||||
*/ |
|
||||
children: TreeVO[]; |
|
||||
} |
|
||||
|
|
||||
export interface TreeForm extends BaseEntity { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 父id |
|
||||
*/ |
|
||||
parentId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 部门id |
|
||||
*/ |
|
||||
deptId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 用户id |
|
||||
*/ |
|
||||
userId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 值 |
|
||||
*/ |
|
||||
treeName?: string; |
|
||||
} |
|
||||
|
|
||||
export interface TreeQuery { |
|
||||
/** |
|
||||
* 父id |
|
||||
*/ |
|
||||
parentId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 部门id |
|
||||
*/ |
|
||||
deptId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 用户id |
|
||||
*/ |
|
||||
userId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 值 |
|
||||
*/ |
|
||||
treeName?: string; |
|
||||
} |
|
||||
@ -1,63 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { CategoryVO, CategoryForm, CategoryQuery } from '@/api/workflow/category/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询流程分类列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
|
|
||||
export const listCategory = (query?: CategoryQuery): AxiosPromise<CategoryVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/category/list', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询流程分类详细 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const getCategory = (id: string | number): AxiosPromise<CategoryVO> => { |
|
||||
return request({ |
|
||||
url: '/workflow/category/' + id, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增流程分类 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const addCategory = (data: CategoryForm) => { |
|
||||
return request({ |
|
||||
url: '/workflow/category', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改流程分类 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const updateCategory = (data: CategoryForm) => { |
|
||||
return request({ |
|
||||
url: '/workflow/category', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除流程分类 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const delCategory = (id: string | number | Array<string | number>) => { |
|
||||
return request({ |
|
||||
url: '/workflow/category/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,67 +0,0 @@ |
|||||
export interface CategoryVO { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id: string; |
|
||||
|
|
||||
/** |
|
||||
* 分类名称 |
|
||||
*/ |
|
||||
categoryName: string; |
|
||||
|
|
||||
/** |
|
||||
* 分类编码 |
|
||||
*/ |
|
||||
categoryCode: string; |
|
||||
|
|
||||
/** |
|
||||
* 父级id |
|
||||
*/ |
|
||||
parentId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 排序 |
|
||||
*/ |
|
||||
sortNum: number; |
|
||||
|
|
||||
children?: CategoryVO[]; |
|
||||
} |
|
||||
|
|
||||
export interface CategoryForm extends BaseEntity { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 分类名称 |
|
||||
*/ |
|
||||
categoryName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 分类编码 |
|
||||
*/ |
|
||||
categoryCode?: string; |
|
||||
|
|
||||
/** |
|
||||
* 父级id |
|
||||
*/ |
|
||||
parentId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 排序 |
|
||||
*/ |
|
||||
sortNum?: number; |
|
||||
} |
|
||||
|
|
||||
export interface CategoryQuery extends PageQuery { |
|
||||
/** |
|
||||
* 分类名称 |
|
||||
*/ |
|
||||
categoryName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 分类编码 |
|
||||
*/ |
|
||||
categoryCode?: string; |
|
||||
} |
|
||||
@ -1,49 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { DefinitionConfigVO, DefinitionConfigForm } from '@/api/workflow/definitionConfig/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询表单配置详细 |
|
||||
* @param definitionId |
|
||||
*/ |
|
||||
export const getByDefId = (definitionId: string | number): AxiosPromise<DefinitionConfigVO> => { |
|
||||
return request({ |
|
||||
url: '/workflow/definitionConfig/getByDefId/' + definitionId, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增表单配置 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const saveOrUpdate = (data: DefinitionConfigForm) => { |
|
||||
return request({ |
|
||||
url: '/workflow/definitionConfig/saveOrUpdate', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除表单配置 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const deldefinitionConfig = (id: string | number | Array<string | number>) => { |
|
||||
return request({ |
|
||||
url: '/workflow/definitionConfig/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询流程定义配置排除当前查询的流程定义 |
|
||||
* @param tableName |
|
||||
* @param definitionId |
|
||||
*/ |
|
||||
export const getByTableNameNotDefId = (tableName: string, definitionId: string | number) => { |
|
||||
return request({ |
|
||||
url: `/workflow/definitionConfig/getByTableNameNotDefId/${tableName}/${definitionId}`, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,102 +0,0 @@ |
|||||
import { FormManageVO } from '@/api/workflow/formManage/types'; |
|
||||
|
|
||||
export interface DefinitionConfigVO { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表名 |
|
||||
*/ |
|
||||
tableName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 流程定义ID |
|
||||
*/ |
|
||||
definitionId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 流程KEY |
|
||||
*/ |
|
||||
processKey: string; |
|
||||
|
|
||||
/** |
|
||||
* 流程版本 |
|
||||
*/ |
|
||||
version?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 备注 |
|
||||
*/ |
|
||||
remark: string; |
|
||||
|
|
||||
/** |
|
||||
* 表单管理 |
|
||||
*/ |
|
||||
wfFormManageVo: FormManageVO; |
|
||||
} |
|
||||
|
|
||||
export interface DefinitionConfigForm extends BaseEntity { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表名 |
|
||||
*/ |
|
||||
tableName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 流程定义ID |
|
||||
*/ |
|
||||
definitionId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 流程KEY |
|
||||
*/ |
|
||||
processKey?: string; |
|
||||
|
|
||||
/** |
|
||||
* 流程版本 |
|
||||
*/ |
|
||||
version?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 备注 |
|
||||
*/ |
|
||||
remark?: string; |
|
||||
|
|
||||
/** |
|
||||
* 表单管理 |
|
||||
*/ |
|
||||
wfFormManageVo?: FormManageVO; |
|
||||
} |
|
||||
|
|
||||
export interface DefinitionConfigQuery extends PageQuery { |
|
||||
/** |
|
||||
* 表名 |
|
||||
*/ |
|
||||
tableName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 流程定义ID |
|
||||
*/ |
|
||||
definitionId?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 流程KEY |
|
||||
*/ |
|
||||
processKey?: string; |
|
||||
|
|
||||
/** |
|
||||
* 流程版本 |
|
||||
*/ |
|
||||
version?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表单管理 |
|
||||
*/ |
|
||||
wfFormManageVo: FormManageVO; |
|
||||
} |
|
||||
@ -1,76 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { FormManageVO, FormManageForm, FormManageQuery } from '@/api/workflow/formManage/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询表单管理列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
|
|
||||
export const listFormManage = (query?: FormManageQuery): AxiosPromise<FormManageVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/formManage/list', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询表单管理列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
|
|
||||
export const selectListFormManage = (): AxiosPromise<FormManageVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/formManage/list/selectList', |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询表单管理详细 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const getFormManage = (id: string | number): AxiosPromise<FormManageVO> => { |
|
||||
return request({ |
|
||||
url: '/workflow/formManage/' + id, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增表单管理 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const addFormManage = (data: FormManageForm) => { |
|
||||
return request({ |
|
||||
url: '/workflow/formManage', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改表单管理 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const updateFormManage = (data: FormManageForm) => { |
|
||||
return request({ |
|
||||
url: '/workflow/formManage', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除表单管理 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const delFormManage = (id: string | number | Array<string | number>) => { |
|
||||
return request({ |
|
||||
url: '/workflow/formManage/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,69 +0,0 @@ |
|||||
export interface FormManageVO { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表单名称 |
|
||||
*/ |
|
||||
formName: string; |
|
||||
|
|
||||
/** |
|
||||
* 表单类型 |
|
||||
*/ |
|
||||
formType: string; |
|
||||
/** |
|
||||
* 表单类型名称 |
|
||||
*/ |
|
||||
formTypeName: string; |
|
||||
|
|
||||
/** |
|
||||
* 路由地址/表单ID |
|
||||
*/ |
|
||||
router: string; |
|
||||
|
|
||||
/** |
|
||||
* 备注 |
|
||||
*/ |
|
||||
remark: string; |
|
||||
} |
|
||||
|
|
||||
export interface FormManageForm extends BaseEntity { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id?: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表单名称 |
|
||||
*/ |
|
||||
formName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 表单类型 |
|
||||
*/ |
|
||||
formType?: string; |
|
||||
|
|
||||
/** |
|
||||
* 路由地址/表单ID |
|
||||
*/ |
|
||||
router?: string; |
|
||||
|
|
||||
/** |
|
||||
* 备注 |
|
||||
*/ |
|
||||
remark?: string; |
|
||||
} |
|
||||
|
|
||||
export interface FormManageQuery extends PageQuery { |
|
||||
/** |
|
||||
* 表单名称 |
|
||||
*/ |
|
||||
formName?: string; |
|
||||
|
|
||||
/** |
|
||||
* 表单类型 |
|
||||
*/ |
|
||||
formType?: string; |
|
||||
} |
|
||||
@ -1,63 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { LeaveVO, LeaveQuery, LeaveForm } from '@/api/workflow/leave/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询请假列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
|
|
||||
export const listLeave = (query?: LeaveQuery): AxiosPromise<LeaveVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/leave/list', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询请假详细 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const getLeave = (id: string | number): AxiosPromise<LeaveVO> => { |
|
||||
return request({ |
|
||||
url: '/workflow/leave/' + id, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增请假 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const addLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => { |
|
||||
return request({ |
|
||||
url: '/workflow/leave', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改请假 |
|
||||
* @param data |
|
||||
*/ |
|
||||
export const updateLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => { |
|
||||
return request({ |
|
||||
url: '/workflow/leave', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除请假 |
|
||||
* @param id |
|
||||
*/ |
|
||||
export const delLeave = (id: string | number | Array<string | number>) => { |
|
||||
return request({ |
|
||||
url: '/workflow/leave/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,24 +0,0 @@ |
|||||
export interface LeaveVO { |
|
||||
id: string | number; |
|
||||
leaveType: string; |
|
||||
startDate: string; |
|
||||
endDate: string; |
|
||||
leaveDays: number; |
|
||||
remark: string; |
|
||||
status?: string; |
|
||||
} |
|
||||
|
|
||||
export interface LeaveForm extends BaseEntity { |
|
||||
id?: string | number; |
|
||||
leaveType?: string; |
|
||||
startDate?: string; |
|
||||
endDate?: string; |
|
||||
leaveDays?: number; |
|
||||
remark?: string; |
|
||||
status?: string; |
|
||||
} |
|
||||
|
|
||||
export interface LeaveQuery extends PageQuery { |
|
||||
startLeaveDays?: number; |
|
||||
endLeaveDays?: number; |
|
||||
} |
|
||||
@ -1,104 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { ModelForm, ModelQuery, ModelVO } from '@/api/workflow/model/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询模型列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const listModel = (query: ModelQuery): AxiosPromise<ModelVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/model/list', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询模型信息 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getInfo = (id: string): AxiosPromise<ModelForm> => { |
|
||||
return request({ |
|
||||
url: '/workflow/model/getInfo/' + id, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新增模型 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const addModel = (data: ModelForm): AxiosPromise<void> => { |
|
||||
return request({ |
|
||||
url: '/workflow/model/save', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改模型信息 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export function update(data: ModelForm): AxiosPromise<void> { |
|
||||
return request({ |
|
||||
url: '/workflow/model/update', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 修改模型信息 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export function editModelXml(data: ModelForm): AxiosPromise<void> { |
|
||||
return request({ |
|
||||
url: '/workflow/model/editModelXml', |
|
||||
method: 'put', |
|
||||
data: data |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 按id删除模型 |
|
||||
* @returns {*} |
|
||||
* @param id 模型id |
|
||||
*/ |
|
||||
export function delModel(id: string | string[]): AxiosPromise<void> { |
|
||||
return request({ |
|
||||
url: '/workflow/model/' + id, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 模型部署 |
|
||||
* @returns {*} |
|
||||
* @param id 模型id |
|
||||
*/ |
|
||||
export const modelDeploy = (id: string): AxiosPromise<void> => { |
|
||||
return request({ |
|
||||
url: `/workflow/model/modelDeploy/${id}`, |
|
||||
method: 'post' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 复制模型 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const copyModel = (data: ModelForm): AxiosPromise<void> => { |
|
||||
return request({ |
|
||||
url: '/workflow/model/copyModel', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,66 +0,0 @@ |
|||||
export interface ModelForm { |
|
||||
id: string; |
|
||||
name: string; |
|
||||
key: string; |
|
||||
categoryCode: string; |
|
||||
xml: string; |
|
||||
svg: string; |
|
||||
description: string; |
|
||||
} |
|
||||
|
|
||||
export interface ModelQuery extends PageQuery { |
|
||||
name?: string; |
|
||||
key?: string; |
|
||||
categoryCode?: string; |
|
||||
} |
|
||||
|
|
||||
export interface OriginalPersistentState { |
|
||||
metaInfo: string; |
|
||||
editorSourceValueId: string; |
|
||||
createTime: string; |
|
||||
deploymentId?: string; |
|
||||
name: string; |
|
||||
tenantId: string; |
|
||||
category?: string; |
|
||||
version: number; |
|
||||
editorSourceExtraValueId?: string; |
|
||||
key: string; |
|
||||
lastUpdateTime: string; |
|
||||
} |
|
||||
|
|
||||
export interface PersistentState { |
|
||||
metaInfo: string; |
|
||||
editorSourceValueId: string; |
|
||||
createTime: string; |
|
||||
deploymentId?: string; |
|
||||
name: string; |
|
||||
tenantId: string; |
|
||||
category?: string; |
|
||||
version: number; |
|
||||
editorSourceExtraValueId?: string; |
|
||||
key: string; |
|
||||
lastUpdateTime: string; |
|
||||
} |
|
||||
|
|
||||
export interface ModelVO { |
|
||||
id: string; |
|
||||
revision: number; |
|
||||
originalPersistentState: OriginalPersistentState; |
|
||||
name: string; |
|
||||
key: string; |
|
||||
category?: string; |
|
||||
createTime: string; |
|
||||
lastUpdateTime: string; |
|
||||
version: number; |
|
||||
metaInfo: string; |
|
||||
deploymentId?: string; |
|
||||
editorSourceValueId: string; |
|
||||
editorSourceExtraValueId?: string; |
|
||||
tenantId: string; |
|
||||
persistentState: PersistentState; |
|
||||
revisionNext: number; |
|
||||
idPrefix: string; |
|
||||
inserted: boolean; |
|
||||
updated: boolean; |
|
||||
deleted: boolean; |
|
||||
} |
|
||||
@ -1,38 +0,0 @@ |
|||||
import { FormManageVO } from '@/api/workflow/formManage/types'; |
|
||||
|
|
||||
export interface NodeConfigVO { |
|
||||
/** |
|
||||
* 主键 |
|
||||
*/ |
|
||||
id: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表单id |
|
||||
*/ |
|
||||
formId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表单类型 |
|
||||
*/ |
|
||||
formType: string; |
|
||||
|
|
||||
/** |
|
||||
* 节点名称 |
|
||||
*/ |
|
||||
nodeName: string; |
|
||||
|
|
||||
/** |
|
||||
* 节点id |
|
||||
*/ |
|
||||
nodeId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 流程定义id |
|
||||
*/ |
|
||||
definitionId: string | number; |
|
||||
|
|
||||
/** |
|
||||
* 表单管理 |
|
||||
*/ |
|
||||
wfFormManageVo: FormManageVO; |
|
||||
} |
|
||||
@ -1,114 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { ProcessDefinitionQuery, ProcessDefinitionVO, definitionXmlVO } from '@/api/workflow/processDefinition/types'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
|
|
||||
/** |
|
||||
* 获取流程定义列表 |
|
||||
* @param query 流程实例id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const listProcessDefinition = (query: ProcessDefinitionQuery): AxiosPromise<ProcessDefinitionVO[]> => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/list`, |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
/** |
|
||||
* 按照流程定义key获取流程定义 |
|
||||
* @param processInstanceId 流程实例id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const getListByKey = (key: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/getListByKey/${key}`, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 通过流程定义id获取流程图 |
|
||||
*/ |
|
||||
export const definitionImage = (processDefinitionId: string): AxiosPromise<any> => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/definitionImage/${processDefinitionId}` + '?t' + Math.random(), |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 通过流程定义id获取xml |
|
||||
* @param processDefinitionId 流程定义id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const definitionXml = (processDefinitionId: string): AxiosPromise<definitionXmlVO> => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/definitionXml/${processDefinitionId}`, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 删除流程定义 |
|
||||
* @param deploymentId 部署id |
|
||||
* @param processDefinitionId 流程定义id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const deleteProcessDefinition = (deploymentId: string | string[], processDefinitionId: string | string[]) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/${deploymentId}/${processDefinitionId}`, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 挂起/激活 |
|
||||
* @param processDefinitionId 流程定义id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const updateDefinitionState = (processDefinitionId: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/updateDefinitionState/${processDefinitionId}`, |
|
||||
method: 'put' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 流程定义转换为模型 |
|
||||
* @param processDefinitionId 流程定义id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const convertToModel = (processDefinitionId: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/convertToModel/${processDefinitionId}`, |
|
||||
method: 'put' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 通过zip或xml部署流程定义 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export function deployProcessFile(data: any) { |
|
||||
return request({ |
|
||||
url: '/workflow/processDefinition/deployByFile', |
|
||||
method: 'post', |
|
||||
data: data, |
|
||||
headers: { |
|
||||
repeatSubmit: false |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 迁移流程 |
|
||||
* @param currentProcessDefinitionId |
|
||||
* @param fromProcessDefinitionId |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const migrationDefinition = (currentProcessDefinitionId: string, fromProcessDefinitionId: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processDefinition/migrationDefinition/${currentProcessDefinitionId}/${fromProcessDefinitionId}`, |
|
||||
method: 'put' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,24 +0,0 @@ |
|||||
import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types'; |
|
||||
export interface ProcessDefinitionQuery extends PageQuery { |
|
||||
key?: string; |
|
||||
name?: string; |
|
||||
categoryCode?: string; |
|
||||
} |
|
||||
|
|
||||
export interface ProcessDefinitionVO extends BaseEntity { |
|
||||
id: string; |
|
||||
name: string; |
|
||||
key: string; |
|
||||
version: number; |
|
||||
suspensionState: number; |
|
||||
resourceName: string; |
|
||||
diagramResourceName: string; |
|
||||
deploymentId: string; |
|
||||
deploymentTime: string; |
|
||||
wfDefinitionConfigVo: DefinitionConfigVO; |
|
||||
} |
|
||||
|
|
||||
export interface definitionXmlVO { |
|
||||
xml: string[]; |
|
||||
xmlStr: string; |
|
||||
} |
|
||||
@ -1,136 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
|
|
||||
/** |
|
||||
* 查询运行中实例列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByRunning = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/processInstance/getPageByRunning', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询已完成实例列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByFinish = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/processInstance/getPageByFinish', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 通过业务id获取历史流程图 |
|
||||
*/ |
|
||||
export const getHistoryImage = (businessKey: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/getHistoryImage/${businessKey}` + '?t' + Math.random(), |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 通过业务id获取历史流程图运行中，历史等节点 |
|
||||
*/ |
|
||||
export const getHistoryList = (businessKey: string): AxiosPromise<Record<string, any>> => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/getHistoryList/${businessKey}` + '?t' + Math.random(), |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 获取审批记录 |
|
||||
* @param businessKey 业务id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const getHistoryRecord = (businessKey: string | number) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/getHistoryRecord/${businessKey}`, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 作废 |
|
||||
* @param data 参数 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const deleteRunInstance = (data: object) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/deleteRunInstance`, |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 运行中的实例 删除程实例，删除历史记录，删除业务与流程关联信息 |
|
||||
* @param businessKey 业务id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const deleteRunAndHisInstance = (businessKey: string | string[]) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/deleteRunAndHisInstance/${businessKey}`, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 已完成的实例 删除程实例，删除历史记录，删除业务与流程关联信息 |
|
||||
* @param businessKey 业务id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const deleteFinishAndHisInstance = (businessKey: string | string[]) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/deleteFinishAndHisInstance/${businessKey}`, |
|
||||
method: 'delete' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 分页查询当前登录人单据 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByCurrent = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/processInstance/getPageByCurrent', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 撤销流程 |
|
||||
* @param businessKey 业务id |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const cancelProcessApply = (businessKey: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/processInstance/cancelProcessApply/${businessKey}`, |
|
||||
method: 'post' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
getPageByRunning, |
|
||||
getPageByFinish, |
|
||||
getHistoryImage, |
|
||||
getHistoryList, |
|
||||
getHistoryRecord, |
|
||||
deleteRunInstance, |
|
||||
deleteRunAndHisInstance, |
|
||||
deleteFinishAndHisInstance, |
|
||||
getPageByCurrent, |
|
||||
cancelProcessApply |
|
||||
}; |
|
||||
@ -1,27 +0,0 @@ |
|||||
import { TaskVO } from '@/api/workflow/task/types'; |
|
||||
|
|
||||
export interface ProcessInstanceQuery extends PageQuery { |
|
||||
categoryCode?: string; |
|
||||
name?: string; |
|
||||
key?: string; |
|
||||
startUserId?: string; |
|
||||
businessKey?: string; |
|
||||
} |
|
||||
|
|
||||
export interface ProcessInstanceVO extends BaseEntity { |
|
||||
id: string; |
|
||||
processDefinitionId: string; |
|
||||
processDefinitionName: string; |
|
||||
processDefinitionKey: string; |
|
||||
processDefinitionVersion: string; |
|
||||
deploymentId: string; |
|
||||
businessKey: string; |
|
||||
isSuspended?: any; |
|
||||
tenantId: string; |
|
||||
startTime: string; |
|
||||
endTime?: string; |
|
||||
startUserId: string; |
|
||||
businessStatus: string; |
|
||||
businessStatusName: string; |
|
||||
taskVoList: TaskVO[]; |
|
||||
} |
|
||||
@ -1,264 +0,0 @@ |
|||||
import request from '@/utils/request'; |
|
||||
import { AxiosPromise } from 'axios'; |
|
||||
import { TaskQuery, TaskVO } from '@/api/workflow/task/types'; |
|
||||
|
|
||||
/** |
|
||||
* 查询待办列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getPageByTaskWait', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询已办列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getPageByTaskFinish', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询当前用户的抄送列表 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByTaskCopy = (query: TaskQuery): AxiosPromise<TaskVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getPageByTaskCopy', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 当前租户所有待办任务 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByAllTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getPageByAllTaskWait', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 当前租户所有已办任务 |
|
||||
* @param query |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getPageByAllTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getPageByAllTaskFinish', |
|
||||
method: 'get', |
|
||||
params: query |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 启动流程 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const startWorkFlow = (data: object): any => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/startWorkFlow', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 办理流程 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const completeTask = (data: object) => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/completeTask', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 认领任务 |
|
||||
* @param taskId |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const claim = (taskId: string): any => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/claim/' + taskId, |
|
||||
method: 'post' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 归还任务 |
|
||||
* @param taskId |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const returnTask = (taskId: string): any => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/returnTask/' + taskId, |
|
||||
method: 'post' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 任务驳回 |
|
||||
* @param data |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const backProcess = (data: any): any => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/backProcess', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 获取当前任务 |
|
||||
* @param taskId |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const getTaskById = (taskId: string) => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getTaskById/' + taskId, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 加签 |
|
||||
* @param data |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const addMultiInstanceExecution = (data: any) => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/addMultiInstanceExecution', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 减签 |
|
||||
* @param data |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const deleteMultiInstanceExecution = (data: any) => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/deleteMultiInstanceExecution', |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 修改任务办理人 |
|
||||
* @param taskIds |
|
||||
* @param userId |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const updateAssignee = (taskIds: Array<string>, userId: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/task/updateAssignee/${taskIds}/${userId}`, |
|
||||
method: 'put' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 转办任务 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const transferTask = (data: any) => { |
|
||||
return request({ |
|
||||
url: `/workflow/task/transferTask`, |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 终止任务 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const terminationTask = (data: any) => { |
|
||||
return request({ |
|
||||
url: `/workflow/task/terminationTask`, |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询流程变量 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const getInstanceVariable = (taskId: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/task/getInstanceVariable/${taskId}`, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 获取可驳回得任务节点 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const getTaskNodeList = (processInstanceId: string) => { |
|
||||
return request({ |
|
||||
url: `/workflow/task/getTaskNodeList/${processInstanceId}`, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 委托任务 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const delegateTask = (data: any) => { |
|
||||
return request({ |
|
||||
url: `/workflow/task/delegateTask`, |
|
||||
method: 'post', |
|
||||
data: data |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询工作流任务用户选择加签人员 |
|
||||
* @param taskId |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getTaskUserIdsByAddMultiInstance = (taskId: string) => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getTaskUserIdsByAddMultiInstance/' + taskId, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询工作流选择减签人员 |
|
||||
* @param taskId |
|
||||
* @returns {*} |
|
||||
*/ |
|
||||
export const getListByDeleteMultiInstance = (taskId: string) => { |
|
||||
return request({ |
|
||||
url: '/workflow/task/getListByDeleteMultiInstance/' + taskId, |
|
||||
method: 'get' |
|
||||
}); |
|
||||
}; |
|
||||
@ -1,49 +0,0 @@ |
|||||
import { NodeConfigVO } from '@/api/workflow/nodeConfig/types'; |
|
||||
import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types'; |
|
||||
export interface TaskQuery extends PageQuery { |
|
||||
name?: string; |
|
||||
processDefinitionKey?: string; |
|
||||
processDefinitionName?: string; |
|
||||
} |
|
||||
|
|
||||
export interface ParticipantVo { |
|
||||
groupIds?: string[] | number[]; |
|
||||
candidate: string[] | number[]; |
|
||||
candidateName: string[]; |
|
||||
claim: boolean; |
|
||||
} |
|
||||
|
|
||||
export interface TaskVO extends BaseEntity { |
|
||||
id: string; |
|
||||
name: string; |
|
||||
description?: string; |
|
||||
priority: number; |
|
||||
owner?: string; |
|
||||
assignee?: string | number; |
|
||||
assigneeName?: string; |
|
||||
processInstanceId: string; |
|
||||
executionId: string; |
|
||||
taskDefinitionId?: any; |
|
||||
processDefinitionId: string; |
|
||||
endTime?: string; |
|
||||
taskDefinitionKey: string; |
|
||||
dueDate?: string; |
|
||||
category?: any; |
|
||||
parentTaskId?: any; |
|
||||
tenantId: string; |
|
||||
claimTime?: string; |
|
||||
businessStatus?: string; |
|
||||
businessStatusName?: string; |
|
||||
processDefinitionName?: string; |
|
||||
processDefinitionKey?: string; |
|
||||
participantVo?: ParticipantVo; |
|
||||
multiInstance?: boolean; |
|
||||
businessKey?: string; |
|
||||
wfNodeConfigVo?: NodeConfigVO; |
|
||||
wfDefinitionConfigVo?: DefinitionConfigVO; |
|
||||
} |
|
||||
|
|
||||
export interface VariableVo { |
|
||||
key: string; |
|
||||
value: string; |
|
||||
} |
|
||||
@ -1,29 +0,0 @@ |
|||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
|
|
||||
export default { |
|
||||
routerJump(routerJumpVo: RouterJumpVo, proxy) { |
|
||||
if (routerJumpVo.wfNodeConfigVo && routerJumpVo.wfNodeConfigVo.formType === 'static' && routerJumpVo.wfNodeConfigVo.wfFormManageVo) { |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.push({ |
|
||||
path: `${routerJumpVo.wfNodeConfigVo.wfFormManageVo.router}`, |
|
||||
query: { |
|
||||
id: routerJumpVo.businessKey, |
|
||||
type: routerJumpVo.type, |
|
||||
taskId: routerJumpVo.taskId |
|
||||
} |
|
||||
}); |
|
||||
} else if (routerJumpVo.wfNodeConfigVo && routerJumpVo.wfNodeConfigVo.formType === 'dynamic' && routerJumpVo.wfNodeConfigVo.wfFormManageVo) { |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.push({ |
|
||||
path: `${routerJumpVo.wfNodeConfigVo.wfFormManageVo.router}`, |
|
||||
query: { |
|
||||
id: routerJumpVo.businessKey, |
|
||||
type: routerJumpVo.type, |
|
||||
taskId: routerJumpVo.taskId |
|
||||
} |
|
||||
}); |
|
||||
} else { |
|
||||
proxy?.$modal.msgError('请到模型配置菜单！'); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
@ -1,16 +0,0 @@ |
|||||
import { NodeConfigVO } from '@/api/workflow/nodeConfig/types'; |
|
||||
import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types'; |
|
||||
|
|
||||
export interface RouterJumpVo { |
|
||||
wfNodeConfigVo: NodeConfigVO; |
|
||||
wfDefinitionConfigVo: DefinitionConfigVO; |
|
||||
businessKey: string; |
|
||||
taskId: string; |
|
||||
type: string; |
|
||||
} |
|
||||
|
|
||||
export interface StartProcessBo { |
|
||||
businessKey: string | number; |
|
||||
tableName: string; |
|
||||
variables: any; |
|
||||
} |
|
||||
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 34 KiB |
@ -1,23 +0,0 @@ |
|||||
function generateRandomValue() { |
|
||||
// 生成一个随机数
|
|
||||
const randomValue = Math.random().toString(36).slice(2, 12); |
|
||||
return `Process_${randomValue}`; |
|
||||
} |
|
||||
|
|
||||
const cartage: string = 'default'; |
|
||||
export default `<?xml version="1.0" encoding="UTF-8"?>
|
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef"> |
|
||||
<process id="process_${generateRandomValue()}" name="name_${generateRandomValue()}"> |
|
||||
<startEvent id="startNode1" name="开始" /> |
|
||||
</process> |
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_flow"> |
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c"> |
|
||||
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke=""> |
|
||||
<omgdc:Bounds x="240" y="200" width="30" height="30" /> |
|
||||
<bpmndi:BPMNLabel> |
|
||||
<omgdc:Bounds x="242" y="237" width="23" height="14" /> |
|
||||
</bpmndi:BPMNLabel> |
|
||||
</bpmndi:BPMNShape> |
|
||||
</bpmndi:BPMNPlane> |
|
||||
</bpmndi:BPMNDiagram> |
|
||||
</definitions>`;
|
|
||||
@ -1,126 +0,0 @@ |
|||||
export const NodeName = { |
|
||||
'bpmn:Process': '流程', |
|
||||
'bpmn:StartEvent': '开始事件', |
|
||||
'bpmn:IntermediateThrowEvent': '中间事件', |
|
||||
'bpmn:Task': '任务', |
|
||||
'bpmn:SendTask': '发送任务', |
|
||||
'bpmn:ReceiveTask': '接收任务', |
|
||||
'bpmn:UserTask': '用户任务', |
|
||||
'bpmn:ManualTask': '手工任务', |
|
||||
'bpmn:BusinessRuleTask': '业务规则任务', |
|
||||
'bpmn:ServiceTask': '服务任务', |
|
||||
'bpmn:ScriptTask': '脚本任务', |
|
||||
'bpmn:EndEvent': '结束事件', |
|
||||
'bpmn:SequenceFlow': '流程线', |
|
||||
'bpmn:ExclusiveGateway': '互斥网关', |
|
||||
'bpmn:ParallelGateway': '并行网关', |
|
||||
'bpmn:InclusiveGateway': '相容网关', |
|
||||
'bpmn:ComplexGateway': '复杂网关', |
|
||||
'bpmn:EventBasedGateway': '事件网关', |
|
||||
'bpmn:Participant': '池/参与者', |
|
||||
'bpmn:SubProcess': '子流程', |
|
||||
'bpmn:DataObjectReference': '数据对象引用', |
|
||||
'bpmn:DataStoreReference': '数据存储引用', |
|
||||
'bpmn:Group': '组' |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
'Activate hand tool': '启动手动工具', |
|
||||
'Activate lasso tool': '启动 Lasso 工具', |
|
||||
'Activate create/remove space tool': '启动创建/删除空间工具', |
|
||||
'Activate global connect tool': '启动全局连接工具', |
|
||||
'Ad-hoc': 'Ad-hoc', |
|
||||
'Add lane above': '在上方添加泳道', |
|
||||
'Add lane below': '在下方添加泳道', |
|
||||
'Business rule task': '规则任务', |
|
||||
'Call activity': '引用流程', |
|
||||
'Compensation end event': '结束补偿事件', |
|
||||
'Compensation intermediate throw event': '中间补偿抛出事件', |
|
||||
'Complex gateway': '复杂网关', |
|
||||
'Conditional intermediate catch event': '中间条件捕获事件', |
|
||||
'Conditional start event (non-interrupting)': '条件启动事件 (非中断)', |
|
||||
'Conditional start event': '条件启动事件', |
|
||||
'Connect using association': '文本关联', |
|
||||
'Connect using sequence/message flow or association': '消息关联', |
|
||||
'Change element': '更改元素', |
|
||||
'Change type': '更改类型', |
|
||||
'Create data object reference': '创建数据对象引用', |
|
||||
'Create data store reference': '创建数据存储引用', |
|
||||
'Create expanded sub-process': '创建可折叠子流程', |
|
||||
'Create pool/participant': '创建池/参与者', |
|
||||
'Collection': '集合', |
|
||||
'Connect using data input association': '数据输入关联', |
|
||||
'Data store reference': '数据存储引用', |
|
||||
'Data object reference': '数据对象引用', |
|
||||
'Divide into two lanes': '分成两个泳道', |
|
||||
'Divide into three lanes': '分成三个泳道', |
|
||||
'End event': '结束事件', |
|
||||
'Error end event': '结束错误事件', |
|
||||
'Escalation end event': '结束升级事件', |
|
||||
'Escalation intermediate throw event': '中间升级抛出事件', |
|
||||
'Event sub-process': '事件子流程', |
|
||||
'Event-based gateway': '事件网关', |
|
||||
'Exclusive gateway': '互斥网关', |
|
||||
'Empty pool/participant (removes content)': '清空池/参与者 (删除内容)', |
|
||||
'Empty pool/participant': '清空池/参与者', |
|
||||
'Expanded pool/participant': '展开池/参与者', |
|
||||
'Inclusive gateway': '相容网关', |
|
||||
'Intermediate throw event': '中间抛出事件', |
|
||||
'Loop': '循环', |
|
||||
'Link intermediate catch event': '中间链接捕获事件', |
|
||||
'Link intermediate throw event': '中间链接抛出事件', |
|
||||
'Manual task': '手动任务', |
|
||||
'Message end event': '结束消息事件', |
|
||||
'Message intermediate catch event': '中间消息捕获事件', |
|
||||
'Message intermediate throw event': '中间消息抛出事件', |
|
||||
'Message start event': '消息启动事件', |
|
||||
'Parallel gateway': '并行网关', |
|
||||
'Parallel multi-instance': '并行多实例', |
|
||||
'Participant multiplicity': '参与者多重性', |
|
||||
'Receive task': '接受任务', |
|
||||
'Remove': '移除', |
|
||||
'Script task': '脚本任务', |
|
||||
'Send task': '发送任务', |
|
||||
'Sequential multi-instance': '串行多实例', |
|
||||
'Service task': '服务任务', |
|
||||
'Signal end event': '结束信号事件', |
|
||||
'Signal intermediate catch event': '中间信号捕获事件', |
|
||||
'Signal intermediate throw event': '中间信号抛出事件', |
|
||||
'Signal start event (non-interrupting)': '信号启动事件 (非中断)', |
|
||||
'Signal start event': '信号启动事件', |
|
||||
'Start event': '开始事件', |
|
||||
'Sub-process (collapsed)': '可折叠子流程', |
|
||||
'Sub-process (expanded)': '可展开子流程', |
|
||||
'Sub rocess': '子流程', |
|
||||
'Task': '任务', |
|
||||
'Transaction': '事务', |
|
||||
'Terminate end event': '终止边界事件', |
|
||||
'Timer intermediate catch event': '中间定时捕获事件', |
|
||||
'Timer start event (non-interrupting)': '定时启动事件 (非中断)', |
|
||||
'Timer start event': '定时启动事件', |
|
||||
'User task': '用户任务', |
|
||||
'Create start event': '创建开始事件', |
|
||||
'Create gateway': '创建网关', |
|
||||
'Create intermediate/boundary event': '创建中间/边界事件', |
|
||||
'Create end event': '创建结束事件', |
|
||||
'Create group': '创建组', |
|
||||
'Create startEvent': '开始节点', |
|
||||
'Create endEvent': '结束节点', |
|
||||
'Create exclusiveGateway': '互斥网关', |
|
||||
'Create parallelGateway': '并行网关', |
|
||||
'Create task': '任务节点', |
|
||||
'Create userTask': '用户任务节点', |
|
||||
'Condition type': '条件类型', |
|
||||
'Append end event': '追加结束事件节点', |
|
||||
'Append gateway': '追加网关节点', |
|
||||
'Append task': '追加任务', |
|
||||
'Append user task': '追加用户任务节点', |
|
||||
'Append text annotation': '追加文本注释', |
|
||||
'Append intermediate/boundary event': '追加中间或边界事件', |
|
||||
'Append receive task': '追加接收任务节点', |
|
||||
'Append message intermediate catch event': '追加中间消息捕获事件', |
|
||||
'Append timer intermediate catch event': '追加中间定时捕获事件', |
|
||||
'Append conditional intermediate catch event': '追加中间条件捕获事件', |
|
||||
'Append signal intermediate catch event': '追加中间信号捕获事件', |
|
||||
'flow elements must be children of pools/participants': '流程元素必须是池/参与者的子元素' |
|
||||
}; |
|
||||
File diff suppressed because it is too large
@ -1,138 +0,0 @@ |
|||||
import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider'; |
|
||||
import { Injector } from 'didi'; |
|
||||
import EventBus from 'diagram-js/lib/core/EventBus'; |
|
||||
import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad'; |
|
||||
import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js'; |
|
||||
import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory'; |
|
||||
import Connect from 'diagram-js/lib/features/connect/Connect'; |
|
||||
import Create from 'diagram-js/lib/features/create/Create'; |
|
||||
import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu'; |
|
||||
import Canvas from 'diagram-js/lib/core/Canvas'; |
|
||||
import Rules from 'diagram-js/lib/features/rules/Rules'; |
|
||||
import { Element, Shape } from 'diagram-js/lib/model/Types'; |
|
||||
import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory'; |
|
||||
import modeler from '@/store/modules/modeler'; |
|
||||
|
|
||||
// @Description: 增强元素连线事件
|
|
||||
|
|
||||
class CustomContextPadProvider extends ContextPadProvider { |
|
||||
private _contextPad: ContextPad; |
|
||||
private _modeling: Modeling; |
|
||||
private _elementFactory: ElementFactory; |
|
||||
private _autoPlace: any; |
|
||||
private _connect: Connect; |
|
||||
private _create: Create; |
|
||||
private _popupMenu: PopupMenu; |
|
||||
private _canvas: Canvas; |
|
||||
private _rules: Rules; |
|
||||
|
|
||||
constructor( |
|
||||
config: any, |
|
||||
injector: Injector, |
|
||||
eventBus: EventBus, |
|
||||
contextPad: ContextPad, |
|
||||
modeling: Modeling, |
|
||||
elementFactory: ElementFactory, |
|
||||
connect: Connect, |
|
||||
create: Create, |
|
||||
popupMenu: PopupMenu, |
|
||||
canvas: Canvas, |
|
||||
rules: Rules, |
|
||||
translate |
|
||||
) { |
|
||||
// @ts-expect-error 忽略异常
|
|
||||
super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate); |
|
||||
|
|
||||
this._contextPad = contextPad; |
|
||||
this._modeling = modeling; |
|
||||
this._elementFactory = elementFactory; |
|
||||
this._connect = connect; |
|
||||
this._create = create; |
|
||||
this._popupMenu = popupMenu; |
|
||||
this._canvas = canvas; |
|
||||
this._rules = rules; |
|
||||
|
|
||||
this._autoPlace = injector.get('autoPlace', false); |
|
||||
} |
|
||||
|
|
||||
getContextPadEntries(element: Element) { |
|
||||
const actions: Record<string, any> = {}; |
|
||||
|
|
||||
const appendUserTask = (event: Event, element: Shape) => { |
|
||||
const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' }); |
|
||||
this._create.start(event, shape, { |
|
||||
source: element |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const appendMultiInstanceUserTask = (event: Event, element: Shape) => { |
|
||||
const store = modeler(); |
|
||||
const bpmnFactory = store.getModeler().get('bpmnFactory') as BpmnFactory; |
|
||||
const businessObject = bpmnFactory.create('bpmn:UserTask', { |
|
||||
// name: '多实例用户任务',
|
|
||||
isForCompensation: false |
|
||||
}); |
|
||||
businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics'); |
|
||||
// 创建 Shape
|
|
||||
const shape = this._elementFactory.createShape({ |
|
||||
type: 'bpmn:UserTask', |
|
||||
businessObject: businessObject |
|
||||
}); |
|
||||
this._create.start(event, shape, { source: element }); |
|
||||
}; |
|
||||
|
|
||||
const appendTask = this._autoPlace |
|
||||
? (event, element) => { |
|
||||
const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory'); |
|
||||
const businessObject = bpmnFactory.create('bpmn:UserTask', { |
|
||||
// name: '多实例用户任务',// 右键创建显示
|
|
||||
isForCompensation: false |
|
||||
}); |
|
||||
|
|
||||
// 创建多实例属性并分配给用户任务的 loopCharacteristics
|
|
||||
businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics'); |
|
||||
|
|
||||
// 创建 Shape
|
|
||||
const shape = this._elementFactory.createShape({ |
|
||||
type: 'bpmn:UserTask', |
|
||||
businessObject: businessObject |
|
||||
}); |
|
||||
|
|
||||
this._autoPlace.append(element, shape); |
|
||||
} |
|
||||
: appendMultiInstanceUserTask; |
|
||||
|
|
||||
const append = this._autoPlace |
|
||||
? (event: Event, element: Shape) => { |
|
||||
const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' }); |
|
||||
this._autoPlace.append(element, shape); |
|
||||
} |
|
||||
: appendUserTask; |
|
||||
|
|
||||
// // 添加创建用户任务按钮
|
|
||||
actions['append.append-user-task'] = { |
|
||||
group: 'model', |
|
||||
className: 'bpmn-icon-user-task', |
|
||||
title: '用户任务', |
|
||||
action: { |
|
||||
dragstart: appendUserTask, |
|
||||
click: append |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// 添加创建多实例用户任务按钮
|
|
||||
actions['append.append-multi-instance-user-task'] = { |
|
||||
group: 'model', |
|
||||
className: 'bpmn-icon-user', // 你可以使用多实例用户任务的图标 bpmn-icon-user bpmn-icon-user-task
|
|
||||
title: '多实例用户任务', |
|
||||
action: { |
|
||||
dragstart: appendMultiInstanceUserTask, |
|
||||
click: appendTask |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
return actions; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default CustomContextPadProvider; |
|
||||
@ -1,109 +0,0 @@ |
|||||
import { assign } from 'min-dash'; |
|
||||
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'; |
|
||||
import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory'; |
|
||||
import Create from 'diagram-js/lib/features/create/Create'; |
|
||||
import SpaceTool from 'diagram-js/lib/features/space-tool/SpaceTool'; |
|
||||
import LassoTool from 'diagram-js/lib/features/lasso-tool/LassoTool'; |
|
||||
import HandTool from 'diagram-js/lib/features/hand-tool/HandTool'; |
|
||||
import GlobalConnect from 'diagram-js/lib/features/global-connect/GlobalConnect'; |
|
||||
import Palette from 'diagram-js/lib/features/palette/Palette'; |
|
||||
import modeler from '@/store/modules/modeler'; |
|
||||
import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory'; |
|
||||
|
|
||||
// @Description: 增强左侧面板
|
|
||||
class CustomPaletteProvider extends PaletteProvider { |
|
||||
private readonly _palette: Palette; |
|
||||
private readonly _create: Create; |
|
||||
private readonly _elementFactory: ElementFactory; |
|
||||
private readonly _spaceTool: SpaceTool; |
|
||||
private readonly _lassoTool: LassoTool; |
|
||||
private readonly _handTool: HandTool; |
|
||||
private readonly _globalConnect: GlobalConnect; |
|
||||
private readonly _translate: any; |
|
||||
|
|
||||
constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) { |
|
||||
super(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate); |
|
||||
this._palette = palette; |
|
||||
this._create = create; |
|
||||
this._elementFactory = elementFactory; |
|
||||
this._spaceTool = spaceTool; |
|
||||
this._lassoTool = lassoTool; |
|
||||
this._handTool = handTool; |
|
||||
this._globalConnect = globalConnect; |
|
||||
this._translate = translate; |
|
||||
} |
|
||||
|
|
||||
getPaletteEntries() { |
|
||||
const actions = {}, |
|
||||
create = this._create, |
|
||||
elementFactory = this._elementFactory, |
|
||||
translate = this._translate; |
|
||||
|
|
||||
function createAction(type: string, group: string, className: string, title: string, options?: object) { |
|
||||
function createListener(event) { |
|
||||
const shape = elementFactory.createShape(assign({ type: type }, options)); |
|
||||
if (options) { |
|
||||
!shape.businessObject.di && (shape.businessObject.di = {}); |
|
||||
shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded; |
|
||||
} |
|
||||
create.start(event, shape, null); |
|
||||
} |
|
||||
const shortType = type.replace(/^bpmn:/, ''); |
|
||||
return { |
|
||||
group: group, |
|
||||
className: className, |
|
||||
title: title || translate('Create {type}', { type: shortType }), |
|
||||
action: { |
|
||||
dragstart: createListener, |
|
||||
click: createListener |
|
||||
} |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
function createMultiInstanceUserTask(event) { |
|
||||
const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory(); |
|
||||
// 创建一个 bpmn:UserTask
|
|
||||
const userTask = bpmnFactory.create('bpmn:UserTask', { |
|
||||
// name: '多实例用户任务', // 在画板中显示字段
|
|
||||
isForCompensation: false |
|
||||
}); |
|
||||
// 将多实例属性分配给 bpmn:UserTask 的 loopCharacteristics
|
|
||||
userTask.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics'); |
|
||||
const customUserTask = elementFactory.createShape({ |
|
||||
type: 'bpmn:UserTask', |
|
||||
businessObject: userTask // 分配创建的 userTask 到 businessObject
|
|
||||
}); |
|
||||
create.start(event, customUserTask, {}); |
|
||||
} |
|
||||
|
|
||||
assign(actions, { |
|
||||
'create.parallel-gateway': createAction('bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel', '并行网关'), |
|
||||
'create.event-base-gateway': createAction('bpmn:EventBasedGateway', 'gateway', 'bpmn-icon-gateway-eventbased', '事件网关'), |
|
||||
// 分组线
|
|
||||
'gateway-separator': { |
|
||||
group: 'gateway', |
|
||||
separator: true |
|
||||
}, |
|
||||
'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'), |
|
||||
'create.multi-instance-user-task': { |
|
||||
group: 'activity', |
|
||||
type: 'bpmn:UserTask', |
|
||||
className: 'bpmn-icon-user task-multi-instance', |
|
||||
title: '创建多实例用户任务', |
|
||||
action: { |
|
||||
click: createMultiInstanceUserTask, |
|
||||
dragstart: createMultiInstanceUserTask |
|
||||
} |
|
||||
}, |
|
||||
'task-separator': { |
|
||||
group: 'activity', |
|
||||
separator: true |
|
||||
} |
|
||||
}); |
|
||||
return actions; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
CustomPaletteProvider['$inject'] = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate']; |
|
||||
|
|
||||
export default CustomPaletteProvider; |
|
||||
@ -1,56 +0,0 @@ |
|||||
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'; |
|
||||
import { |
|
||||
append as svgAppend, |
|
||||
attr as svgAttr, |
|
||||
create as svgCreate, |
|
||||
select as svgSelect, |
|
||||
selectAll as svgSelectAll, |
|
||||
clone as svgClone, |
|
||||
clear as svgClear, |
|
||||
remove as svgRemove |
|
||||
} from 'tiny-svg'; |
|
||||
|
|
||||
const HIGH_PRIORITY = 1500; |
|
||||
export default class CustomRenderer extends BaseRenderer { |
|
||||
bpmnRenderer: BaseRenderer; |
|
||||
modeling: any; |
|
||||
constructor(eventBus, bpmnRenderer, modeling) { |
|
||||
super(eventBus, HIGH_PRIORITY); |
|
||||
this.bpmnRenderer = bpmnRenderer; |
|
||||
this.modeling = modeling; |
|
||||
} |
|
||||
canRender(element) { |
|
||||
// ignore labels
|
|
||||
return !element.labelTarget; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 自定义节点图形 |
|
||||
* @param {*} parentNode 当前元素的svgNode |
|
||||
* @param {*} element |
|
||||
* @returns |
|
||||
*/ |
|
||||
drawShape(parentNode, element) { |
|
||||
const shape = this.bpmnRenderer.drawShape(parentNode, element); |
|
||||
const { type, width, height } = element; |
|
||||
// 开始 填充绿色
|
|
||||
if (type === 'bpmn:StartEvent') { |
|
||||
svgAttr(shape, { fill: '#77DF6D' }); |
|
||||
return shape; |
|
||||
} |
|
||||
if (type === 'bpmn:EndEvent') { |
|
||||
svgAttr(shape, { fill: '#EE7B77' }); |
|
||||
return shape; |
|
||||
} |
|
||||
if (type === 'bpmn:UserTask') { |
|
||||
svgAttr(shape, { fill: '#A9C4F8' }); |
|
||||
return shape; |
|
||||
} |
|
||||
return shape; |
|
||||
} |
|
||||
|
|
||||
getShapePath(shape) { |
|
||||
return this.bpmnRenderer.getShapePath(shape); |
|
||||
} |
|
||||
} |
|
||||
CustomRenderer['$inject'] = ['eventBus', 'bpmnRenderer']; |
|
||||
@ -1,15 +0,0 @@ |
|||||
import zh from '../../lang/zh'; |
|
||||
|
|
||||
const customTranslate = (template: any, replacements: any) => { |
|
||||
replacements = replacements || {}; |
|
||||
template = zh[template] || template; |
|
||||
return template.replace(/{([^}]+)}/g, function (_: any, key: any) { |
|
||||
return replacements[key] || '{' + key + '}'; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export const translateModule = { |
|
||||
translate: ['value', customTranslate] |
|
||||
}; |
|
||||
|
|
||||
export default translateModule; |
|
||||
@ -1,17 +0,0 @@ |
|||||
// 翻译模块
|
|
||||
import TranslationModule from './Translate'; |
|
||||
import { ModuleDeclaration } from 'didi'; |
|
||||
import CustomPaletteProvider from './Palette/CustomPaletteProvider'; |
|
||||
import CustomRenderer from './Renderer/CustomRenderer'; |
|
||||
import CustomContextPadProvider from './ContextPad/CustomContextPadProvider'; |
|
||||
|
|
||||
const Module: ModuleDeclaration[] = [ |
|
||||
{ |
|
||||
__init__: ['customPaletteProvider', 'customContextPadProvider', 'customRenderer'], |
|
||||
customPaletteProvider: ['type', CustomPaletteProvider], |
|
||||
customRenderer: ['type', CustomRenderer], |
|
||||
customContextPadProvider: ['type', CustomContextPadProvider] |
|
||||
}, |
|
||||
TranslationModule |
|
||||
]; |
|
||||
export default Module; |
|
||||
@ -1,50 +0,0 @@ |
|||||
export default { |
|
||||
'bpmn:EndEvent': {}, |
|
||||
'bpmn:StartEvent': { |
|
||||
initiator: true, |
|
||||
formKey: true |
|
||||
}, |
|
||||
'bpmn:UserTask': { |
|
||||
allocationType: true, |
|
||||
specifyDesc: true, |
|
||||
multipleUserAuditType: true, |
|
||||
async: true, |
|
||||
priority: true, |
|
||||
skipExpression: true, |
|
||||
dueDate: true, |
|
||||
taskListener: true, |
|
||||
executionListener: true |
|
||||
}, |
|
||||
'bpmn:ServiceTask': { |
|
||||
async: true, |
|
||||
skipExpression: true, |
|
||||
isForCompensation: true, |
|
||||
triggerable: true, |
|
||||
class: true |
|
||||
}, |
|
||||
'bpmn:ScriptTask': { |
|
||||
async: true, |
|
||||
isForCompensation: true, |
|
||||
autoStoreVariables: true |
|
||||
}, |
|
||||
'bpmn:ManualTask': { |
|
||||
async: true, |
|
||||
isForCompensation: true |
|
||||
}, |
|
||||
'bpmn:ReceiveTask': { |
|
||||
async: true, |
|
||||
isForCompensation: true |
|
||||
}, |
|
||||
'bpmn:SendTask': { |
|
||||
async: true, |
|
||||
isForCompensation: true |
|
||||
}, |
|
||||
'bpmn:BusinessRuleTask': { |
|
||||
async: true, |
|
||||
isForCompensation: true, |
|
||||
ruleVariablesInput: true, |
|
||||
rules: true, |
|
||||
resultVariable: true, |
|
||||
exclude: true |
|
||||
} |
|
||||
}; |
|
||||
@ -1,284 +0,0 @@ |
|||||
.djs-palette { |
|
||||
width: 300px; |
|
||||
|
|
||||
.bpmn-icon-hand-tool:hover { |
|
||||
&:after { |
|
||||
content: '启动手动工具'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-lasso-tool:hover { |
|
||||
&:after { |
|
||||
content: '启动套索工具'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-space-tool:hover { |
|
||||
&:after { |
|
||||
content: '启动创建/删除空间工具'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 170px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-connection-multi:hover { |
|
||||
&:after { |
|
||||
content: '启动全局连接工具'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 140px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-start-event-none:hover { |
|
||||
&:after { |
|
||||
content: '创建开始事件'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-intermediate-event-none:hover { |
|
||||
&:after { |
|
||||
content: '创建中间/边界事件'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 140px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-end-event-none:hover { |
|
||||
&:after { |
|
||||
content: '创建结束事件'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-gateway-none:hover { |
|
||||
&:after { |
|
||||
content: '创建网关'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 90px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-gateway-parallel:hover { |
|
||||
&:after { |
|
||||
content: '创建并行网关'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-gateway-eventbased:hover { |
|
||||
&:after { |
|
||||
content: '创建事件网关'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-task:hover { |
|
||||
&:after { |
|
||||
content: '创建任务'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 80px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-subprocess-expanded:hover { |
|
||||
&:after { |
|
||||
content: '创建可折叠子流程'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 140px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-user-task:hover { |
|
||||
&:after { |
|
||||
content: '创建用户任务'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.task-multi-instance:hover { |
|
||||
&:after { |
|
||||
content: '创建多实例用户任务'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 160px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-participant:hover { |
|
||||
&:after { |
|
||||
content: '创建泳池/泳道'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-data-object { |
|
||||
display: none; |
|
||||
&:hover { |
|
||||
&:after { |
|
||||
content: '创建数据对象'; |
|
||||
position: absolute; |
|
||||
left: 45px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-data-store { |
|
||||
display: none; |
|
||||
&:hover { |
|
||||
&:after { |
|
||||
content: '创建数据存储'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 120px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.bpmn-icon-group { |
|
||||
display: none; |
|
||||
&:hover { |
|
||||
&:after { |
|
||||
content: '创建分组'; |
|
||||
position: absolute; |
|
||||
left: 100px; |
|
||||
width: 100px; |
|
||||
font-size: 15px; |
|
||||
font-weight: bold; |
|
||||
color: #3a84de; |
|
||||
border-radius: 2px; |
|
||||
border: 1px solid #cccccc; |
|
||||
background-color: #fafafa; |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,145 +0,0 @@ |
|||||
import showConfig from '../assets/showConfig'; |
|
||||
import type { ModdleElement } from 'bpmn'; |
|
||||
import useModelerStore from '@/store/modules/modeler'; |
|
||||
import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums'; |
|
||||
interface Options { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
|
|
||||
export default (ops: Options) => { |
|
||||
const { element } = ops; |
|
||||
const { getModeling, getModdle } = useModelerStore(); |
|
||||
const modeling = getModeling(); |
|
||||
const moddle = getModdle(); |
|
||||
|
|
||||
/** |
|
||||
* 当前节点类型 |
|
||||
*/ |
|
||||
const elementType = computed(() => { |
|
||||
const bizObj = element.businessObject; |
|
||||
return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type; |
|
||||
}); |
|
||||
|
|
||||
/** |
|
||||
* 用于控制面板字段显示与隐藏的配置 |
|
||||
*/ |
|
||||
const config = computed(() => showConfig[elementType.value] || {}); |
|
||||
|
|
||||
/** |
|
||||
* 创建一个节点 |
|
||||
* @param elementType 节点类型 |
|
||||
* @param properties 属性 |
|
||||
* @param parent 父节点 |
|
||||
*/ |
|
||||
const createModdleElement = (elementType: string, properties: any, parent: ModdleElement) => { |
|
||||
const element = moddle.create(elementType, properties); |
|
||||
parent && (element.$parent = parent); |
|
||||
return element; |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 获取扩展属性，如果不存在会自动创建 |
|
||||
*/ |
|
||||
const getExtensionElements = (create = true) => { |
|
||||
let extensionElements = element.businessObject.get<ModdleElement>('extensionElements'); |
|
||||
if (!extensionElements && create) { |
|
||||
extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject); |
|
||||
modeling.updateModdleProperties(element, element.businessObject, { extensionElements }); |
|
||||
} |
|
||||
return extensionElements; |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 获取extensionElements下的properties |
|
||||
* @param extensionElements 可选参数，默认获取当前Element下的extensionElements下的Properties |
|
||||
*/ |
|
||||
const getPropertiesElements = (extensionElements?: ModdleElement) => { |
|
||||
if (!extensionElements) { |
|
||||
extensionElements = getExtensionElements(); |
|
||||
} |
|
||||
let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties'); |
|
||||
if (!propertiesElements) { |
|
||||
propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements); |
|
||||
modeling.updateModdleProperties(element, extensionElements, { |
|
||||
values: [...extensionElements.get<[]>('values'), propertiesElements] |
|
||||
}); |
|
||||
} |
|
||||
return propertiesElements; |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 更新节点属性 |
|
||||
* @param properties 属性值 |
|
||||
*/ |
|
||||
const updateProperties = (properties: any) => { |
|
||||
modeling.updateProperties(element, properties); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 更新节点信息 |
|
||||
* @param updateElement 需要更新的节点 |
|
||||
* @param properties 属性 |
|
||||
*/ |
|
||||
const updateModdleProperties = (updateElement, properties: any) => { |
|
||||
modeling.updateModdleProperties(element, updateElement, properties); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 更新Property属性 |
|
||||
* @param name key值 |
|
||||
* @param value 值 |
|
||||
*/ |
|
||||
const updateProperty = (name: string, value: string) => { |
|
||||
const propertiesElements = getPropertiesElements(); |
|
||||
|
|
||||
let propertyElements = propertiesElements.values.find((item) => item.name === name); |
|
||||
if (!propertyElements) { |
|
||||
propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements); |
|
||||
modeling.updateModdleProperties(element, propertiesElements, { |
|
||||
values: [...propertiesElements.get('values'), propertyElements] |
|
||||
}); |
|
||||
} else { |
|
||||
propertyElements.name = name; |
|
||||
propertyElements.value = value; |
|
||||
} |
|
||||
return propertyElements; |
|
||||
}; |
|
||||
|
|
||||
const idChange = (newVal: string) => { |
|
||||
if (newVal) { |
|
||||
updateProperties({ id: newVal }); |
|
||||
} |
|
||||
}; |
|
||||
const nameChange = (newVal: string) => { |
|
||||
if (newVal) { |
|
||||
updateProperties({ name: newVal }); |
|
||||
} |
|
||||
}; |
|
||||
const formKeyChange = (newVal: string) => { |
|
||||
updateProperties({ formKey: newVal }); |
|
||||
}; |
|
||||
const constant = { |
|
||||
MultiInstanceType: [ |
|
||||
{ id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE }, |
|
||||
{ id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL }, |
|
||||
{ id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL } |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
return { |
|
||||
elementType, |
|
||||
constant, |
|
||||
showConfig: config, |
|
||||
|
|
||||
updateProperties, |
|
||||
updateProperty, |
|
||||
updateModdleProperties, |
|
||||
|
|
||||
createModdleElement, |
|
||||
idChange, |
|
||||
nameChange, |
|
||||
formKeyChange, |
|
||||
getExtensionElements, |
|
||||
getPropertiesElements |
|
||||
}; |
|
||||
}; |
|
||||
@ -1,34 +0,0 @@ |
|||||
import type { ModdleElement } from 'bpmn'; |
|
||||
|
|
||||
interface Options { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
|
|
||||
interface Data { |
|
||||
id: string; |
|
||||
} |
|
||||
|
|
||||
export default (ops: Options) => { |
|
||||
const { element } = ops; |
|
||||
|
|
||||
const parseData = <T>(): T => { |
|
||||
const result = { |
|
||||
...element.businessObject, |
|
||||
...element.businessObject.$attrs |
|
||||
}; |
|
||||
|
|
||||
// 移除flowable前缀，格式化数组
|
|
||||
for (const key in result) { |
|
||||
if (key.indexOf('flowable:') === 0) { |
|
||||
const newKey = key.replace('flowable:', ''); |
|
||||
result[newKey] = result[key]; |
|
||||
delete result[key]; |
|
||||
} |
|
||||
} |
|
||||
return { ...result } as T; |
|
||||
}; |
|
||||
|
|
||||
return { |
|
||||
parseData |
|
||||
}; |
|
||||
}; |
|
||||
@ -1,496 +0,0 @@ |
|||||
<template> |
|
||||
<div class="containers-bpmn"> |
|
||||
<!-- dark模式下 连接线的箭头样式 --> |
|
||||
<svg width="0" height="0" style="position: absolute"> |
|
||||
<defs> |
|
||||
<marker id="markerArrow-dark-mode" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto"> |
|
||||
<path d="M 1 5 L 11 10 L 1 15 Z" class="arrow-dark" /> |
|
||||
</marker> |
|
||||
</defs> |
|
||||
</svg> |
|
||||
<div v-loading="loading" class="app-containers-bpmn"> |
|
||||
<el-container class="h-full"> |
|
||||
<el-container style="align-items: stretch"> |
|
||||
<el-header> |
|
||||
<div class="process-toolbar"> |
|
||||
<el-space wrap :size="10"> |
|
||||
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom"> |
|
||||
<el-button size="small" icon="Rank" @click="fitViewport" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip effect="dark" content="放大" placement="bottom"> |
|
||||
<el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip effect="dark" content="缩小" placement="bottom"> |
|
||||
<el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip effect="dark" content="后退" placement="bottom"> |
|
||||
<el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip effect="dark" content="前进" placement="bottom"> |
|
||||
<el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" /> |
|
||||
</el-tooltip> |
|
||||
</el-space> |
|
||||
<el-space wrap :size="10" style="float: right; padding-right: 10px"> |
|
||||
<el-button size="small" type="primary" @click="saveXml">保 存</el-button> |
|
||||
<el-dropdown size="small"> |
|
||||
<el-button size="small" type="primary"> 预 览 </el-button> |
|
||||
<template #dropdown> |
|
||||
<el-dropdown-menu> |
|
||||
<el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item> |
|
||||
<el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item> |
|
||||
</el-dropdown-menu> |
|
||||
</template> |
|
||||
</el-dropdown> |
|
||||
<el-dropdown size="small"> |
|
||||
<el-button size="small" type="primary"> 下 载 </el-button> |
|
||||
<template #dropdown> |
|
||||
<el-dropdown-menu> |
|
||||
<el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item> |
|
||||
<el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item> |
|
||||
</el-dropdown-menu> |
|
||||
</template> |
|
||||
</el-dropdown> |
|
||||
</el-space> |
|
||||
</div> |
|
||||
</el-header> |
|
||||
<div ref="canvas" class="canvas" /> |
|
||||
</el-container> |
|
||||
<div :class="{ 'process-panel': true, 'hide': panelFlag }"> |
|
||||
<div class="process-panel-bar" @click="panelBarClick"> |
|
||||
<div class="open-bar"> |
|
||||
<el-link type="default" :underline="false"> |
|
||||
<svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon> |
|
||||
</el-link> |
|
||||
</div> |
|
||||
</div> |
|
||||
<transition enter-active-class="animate__animated animate__fadeIn"> |
|
||||
<div v-show="showPanel" v-if="bpmnModeler" class="panel-content"> |
|
||||
<PropertyPanel :modeler="bpmnModeler" /> |
|
||||
</div> |
|
||||
</transition> |
|
||||
</div> |
|
||||
</el-container> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
<el-dialog v-model="perviewXMLShow" title="XML预览" width="80%" append-to-body> |
|
||||
<highlightjs :code="xmlStr" language="XML" /> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
<div> |
|
||||
<el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%" append-to-body> |
|
||||
<div style="text-align: center" v-html="svgData" /> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup name="BpmnDesign"> |
|
||||
import 'bpmn-js/dist/assets/diagram-js.css'; |
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; |
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'; |
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'; |
|
||||
import './assets/style/index.scss'; |
|
||||
import type { Canvas, Modeler } from 'bpmn'; |
|
||||
import PropertyPanel from './panel/index.vue'; |
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler.js'; |
|
||||
import defaultXML from './assets/defaultXML'; |
|
||||
import flowableModdle from './assets/moddle/flowable'; |
|
||||
import Modules from './assets/module/index'; |
|
||||
import useModelerStore from '@/store/modules/modeler'; |
|
||||
import useDialog from '@/hooks/useDialog'; |
|
||||
|
|
||||
const emit = defineEmits(['closeCallBack', 'saveCallBack']); |
|
||||
|
|
||||
const { visible, title, openDialog, closeDialog } = useDialog({ |
|
||||
title: '编辑流程' |
|
||||
}); |
|
||||
const modelerStore = useModelerStore(); |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const panelFlag = ref(false); |
|
||||
const showPanel = ref(true); |
|
||||
const canvas = ref<HTMLDivElement>(); |
|
||||
const panel = ref<HTMLDivElement>(); |
|
||||
const bpmnModeler = ref<Modeler>(); |
|
||||
const zoom = ref(1); |
|
||||
const perviewXMLShow = ref(false); |
|
||||
const perviewSVGShow = ref(false); |
|
||||
const xmlStr = ref(''); |
|
||||
const svgData = ref(''); |
|
||||
const loading = ref(false); |
|
||||
|
|
||||
const panelBarClick = () => { |
|
||||
// 延迟执行，否则会导致面板收起时，属性面板不显示 |
|
||||
panelFlag.value = !panelFlag.value; |
|
||||
setTimeout(() => { |
|
||||
showPanel.value = !panelFlag.value; |
|
||||
}, 100); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 初始化Canvas |
|
||||
*/ |
|
||||
const initCanvas = () => { |
|
||||
bpmnModeler.value = new BpmnModeler({ |
|
||||
container: canvas.value, |
|
||||
// 键盘 |
|
||||
keyboard: { |
|
||||
bindTo: window // 或者window，注意与外部表单的键盘监听事件是否冲突 |
|
||||
}, |
|
||||
propertiesPanel: { |
|
||||
parent: panel.value |
|
||||
}, |
|
||||
additionalModules: Modules, |
|
||||
moddleExtensions: { |
|
||||
flowable: flowableModdle |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 初始化Model |
|
||||
*/ |
|
||||
const initModel = () => { |
|
||||
if (modelerStore.getModeler()) { |
|
||||
modelerStore.getModeler().destroy(); |
|
||||
modelerStore.setModeler(undefined); |
|
||||
} |
|
||||
modelerStore.setModeler(bpmnModeler.value); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 新建 |
|
||||
*/ |
|
||||
const newDiagram = async () => { |
|
||||
await proxy?.$modal.confirm('是否确认新建'); |
|
||||
initDiagram(); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 初始化 |
|
||||
*/ |
|
||||
const initDiagram = (xml?: string) => { |
|
||||
if (!xml) xml = defaultXML; |
|
||||
bpmnModeler.value.importXML(xml); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 自适应屏幕 |
|
||||
*/ |
|
||||
const fitViewport = () => { |
|
||||
zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport'); |
|
||||
const bbox = document.querySelector<SVGGElement>('.app-containers-bpmn .viewport').getBBox(); |
|
||||
const currentViewBox = bpmnModeler.value.get<Canvas>('canvas').viewbox(); |
|
||||
const elementMid = { |
|
||||
x: bbox.x + bbox.width / 2 - 65, |
|
||||
y: bbox.y + bbox.height / 2 |
|
||||
}; |
|
||||
bpmnModeler.value.get<Canvas>('canvas').viewbox({ |
|
||||
x: elementMid.x - currentViewBox.width / 2, |
|
||||
y: elementMid.y - currentViewBox.height / 2, |
|
||||
width: currentViewBox.width, |
|
||||
height: currentViewBox.height |
|
||||
}); |
|
||||
zoom.value = (bbox.width / currentViewBox.width) * 1.8; |
|
||||
}; |
|
||||
/** |
|
||||
* 放大或者缩小 |
|
||||
* @param zoomIn true 放大 | false 缩小 |
|
||||
*/ |
|
||||
const zoomViewport = (zoomIn = true) => { |
|
||||
zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom(); |
|
||||
zoom.value += zoomIn ? 0.1 : -0.1; |
|
||||
bpmnModeler.value.get<Canvas>('canvas').zoom(zoom.value); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 下载XML |
|
||||
*/ |
|
||||
const downloadXML = async () => { |
|
||||
try { |
|
||||
const { xml } = await bpmnModeler.value.saveXML({ format: true }); |
|
||||
downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml'); |
|
||||
} catch (e) { |
|
||||
proxy?.$modal.msgError(e); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 下载SVG |
|
||||
*/ |
|
||||
const downloadSVG = async () => { |
|
||||
try { |
|
||||
const { svg } = await bpmnModeler.value.saveSVG(); |
|
||||
downloadFile(getProcessElement().name, svg, 'image/svg+xml'); |
|
||||
} catch (e) { |
|
||||
proxy?.$modal.msgError(e); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* XML预览 |
|
||||
*/ |
|
||||
const previewXML = async () => { |
|
||||
try { |
|
||||
const { xml } = await bpmnModeler.value.saveXML({ format: true }); |
|
||||
xmlStr.value = xml; |
|
||||
perviewXMLShow.value = true; |
|
||||
} catch (e) { |
|
||||
proxy?.$modal.msgError(e); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* SVG预览 |
|
||||
*/ |
|
||||
const previewSVG = async () => { |
|
||||
try { |
|
||||
const { svg } = await bpmnModeler.value.saveSVG(); |
|
||||
svgData.value = svg; |
|
||||
perviewSVGShow.value = true; |
|
||||
} catch (e) { |
|
||||
proxy?.$modal.msgError(e); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const curNodeInfo = reactive({ |
|
||||
curType: '', // 任务类型 用户任务 |
|
||||
curNode: '', |
|
||||
expValue: '' //多用户和部门角色实现 |
|
||||
}); |
|
||||
|
|
||||
const downloadFile = (fileName: string, data: any, type: string) => { |
|
||||
const a = document.createElement('a'); |
|
||||
const url = window.URL.createObjectURL(new Blob([data], { type: type })); |
|
||||
a.href = url; |
|
||||
a.download = fileName; |
|
||||
a.click(); |
|
||||
window.URL.revokeObjectURL(url); |
|
||||
}; |
|
||||
|
|
||||
const getProcessElement = () => { |
|
||||
const rootElements = bpmnModeler.value?.getDefinitions().rootElements; |
|
||||
for (let i = 0; i < rootElements.length; i++) { |
|
||||
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const getProcess = () => { |
|
||||
const element = getProcessElement(); |
|
||||
return { |
|
||||
id: element.id, |
|
||||
name: element.name |
|
||||
}; |
|
||||
}; |
|
||||
|
|
||||
const saveXml = async () => { |
|
||||
const { xml } = await bpmnModeler.value.saveXML({ format: true }); |
|
||||
const { svg } = await bpmnModeler.value.saveSVG(); |
|
||||
const process = getProcess(); |
|
||||
let data = { |
|
||||
xml: xml, |
|
||||
svg: svg, |
|
||||
key: process.id, |
|
||||
name: process.name, |
|
||||
loading: loading |
|
||||
}; |
|
||||
emit('saveCallBack', data); |
|
||||
}; |
|
||||
|
|
||||
const open = (xml?: string) => { |
|
||||
openDialog(); |
|
||||
nextTick(() => { |
|
||||
initDiagram(xml); |
|
||||
}); |
|
||||
}; |
|
||||
const close = () => { |
|
||||
closeDialog(); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
nextTick(() => { |
|
||||
initCanvas(); |
|
||||
initModel(); |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
/** |
|
||||
* 对外暴露子组件方法 |
|
||||
*/ |
|
||||
defineExpose({ |
|
||||
initDiagram, |
|
||||
saveXml, |
|
||||
open, |
|
||||
close |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
/** 夜间模式 线条的颜色 */ |
|
||||
$stroke-color-dark: white; |
|
||||
$bpmn-font-size: 12px; |
|
||||
/** 日间模式 字体颜色 */ |
|
||||
$bpmn-font-color-dark: white; |
|
||||
/** 夜间模式 字体颜色 */ |
|
||||
$bpmn-font-color-light: #222; |
|
||||
|
|
||||
/* 背景网格 */ |
|
||||
@mixin djs-container { |
|
||||
background-image: linear-gradient(90deg, hsl(0deg 0% 78.4% / 15%) 10%, transparent 0), linear-gradient(hsl(0deg 0% 78.4% / 15%) 10%, transparent 0) !important; |
|
||||
background-size: 10px 10px !important; |
|
||||
} |
|
||||
|
|
||||
html[class='light'] { |
|
||||
/** 从左侧拖动时的背景图 */ |
|
||||
svg.new-parent { |
|
||||
@include djs-container; |
|
||||
} |
|
||||
|
|
||||
/** 双击编辑元素时样式保持一致 */ |
|
||||
div.djs-direct-editing-parent { |
|
||||
border-radius: 10px; |
|
||||
background-color: transparent !important; |
|
||||
color: $bpmn-font-color-light; |
|
||||
} |
|
||||
|
|
||||
g.djs-visual { |
|
||||
.djs-label { |
|
||||
fill: $bpmn-font-color-light !important; |
|
||||
font-size: $bpmn-font-size !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
html[class='dark'] { |
|
||||
/** dark模式下 连接线的箭头样式 */ |
|
||||
.arrow-dark { |
|
||||
stroke-width: 1px; |
|
||||
stroke-linecap: round; |
|
||||
stroke: $stroke-color-dark; |
|
||||
fill: $stroke-color-dark; |
|
||||
stroke-linejoin: round; |
|
||||
} |
|
||||
|
|
||||
/** 从左侧拖动时的背景图 */ |
|
||||
svg.new-parent { |
|
||||
background-color: black !important; |
|
||||
@include djs-container; |
|
||||
} |
|
||||
|
|
||||
/** 双击编辑元素时样式保持一致 */ |
|
||||
div.djs-direct-editing-parent { |
|
||||
border-radius: 10px; |
|
||||
background-color: transparent !important; |
|
||||
color: $bpmn-font-color-dark; |
|
||||
} |
|
||||
|
|
||||
/** 元素相关设置 */ |
|
||||
g.djs-visual { |
|
||||
/** 元素边框 需要去除文字(.djs-label) */ |
|
||||
& > *:first-child:not(.djs-label) { |
|
||||
stroke: $stroke-color-dark !important; |
|
||||
} |
|
||||
|
|
||||
/** 字体颜色 */ |
|
||||
.djs-label { |
|
||||
fill: $bpmn-font-color-dark !important; |
|
||||
font-size: $bpmn-font-size !important; |
|
||||
} |
|
||||
|
|
||||
/* 连接线样式 */ |
|
||||
path[data-corner-radius] { |
|
||||
stroke: $stroke-color-dark !important; |
|
||||
marker-end: url('#markerArrow-dark-mode') !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.containers-bpmn { |
|
||||
height: 100%; |
|
||||
.app-containers-bpmn { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
.canvas { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
@include djs-container; |
|
||||
} |
|
||||
.el-header { |
|
||||
height: 35px; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.process-panel { |
|
||||
transition: width 0.25s ease-in; |
|
||||
.process-panel-bar { |
|
||||
width: 34px; |
|
||||
height: 40px; |
|
||||
.open-bar { |
|
||||
width: 34px; |
|
||||
line-height: 40px; |
|
||||
} |
|
||||
} |
|
||||
// 收起面板样式 |
|
||||
&.hide { |
|
||||
width: 34px; |
|
||||
overflow: hidden; |
|
||||
padding: 0; |
|
||||
.process-panel-bar { |
|
||||
width: 34px; |
|
||||
height: 100%; |
|
||||
box-sizing: border-box; |
|
||||
display: block; |
|
||||
text-align: left; |
|
||||
line-height: 34px; |
|
||||
} |
|
||||
.process-panel-bar:hover { |
|
||||
background-color: var(--bpmn-panel-bar-background-color); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
pre { |
|
||||
margin: 0; |
|
||||
height: 100%; |
|
||||
max-height: calc(80vh - 32px); |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: auto; |
|
||||
.hljs { |
|
||||
word-break: break-word; |
|
||||
white-space: pre-wrap; |
|
||||
padding: 0.5em; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.open-bar { |
|
||||
font-size: 20px; |
|
||||
cursor: pointer; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.process-panel { |
|
||||
box-sizing: border-box; |
|
||||
padding: 0 8px 0 8px; |
|
||||
border-left: 1px solid var(--bpmn-panel-border); |
|
||||
box-shadow: var(--bpmn-panel-box-shadow) 0 0 8px; |
|
||||
max-height: 100%; |
|
||||
width: 25%; |
|
||||
height: calc(100vh - 100px); |
|
||||
.el-collapse { |
|
||||
height: calc(100vh - 182px); |
|
||||
overflow: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 任务栏 透明度 |
|
||||
//:deep(.djs-palette) { |
|
||||
// opacity: 0.3; |
|
||||
// transition: all 1s; |
|
||||
//} |
|
||||
// |
|
||||
//:deep(.djs-palette:hover) { |
|
||||
// opacity: 1; |
|
||||
// transition: all 1s; |
|
||||
//} |
|
||||
</style> |
|
||||
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px"> |
|
||||
<el-form-item prop="id" label="节点 ID"> |
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="name" label="节点名称"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
</el-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import type { Modeler, ModdleElement } from 'bpmn'; |
|
||||
import type { GatewayPanel } from 'bpmnDesign'; |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
const { nameChange, idChange } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const currentCollapseItem = ref(['1', '2']); |
|
||||
const formData = ref(parseData<GatewayPanel>()); |
|
||||
|
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px"> |
|
||||
<el-form-item prop="id" label="节点 ID"> |
|
||||
<el-input v-model="formData.id" @change="idChange"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="name" label="节点名称"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
</el-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
import type { ModdleElement } from 'bpmn'; |
|
||||
import type { ParticipantPanel } from 'bpmnDesign'; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
|
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
const { nameChange, idChange } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
|
|
||||
const formData = ref(parseData<ParticipantPanel>()); |
|
||||
const currentCollapseItem = ref(['1', '2']); |
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -1,71 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px"> |
|
||||
<el-form-item label="流程标识" prop="id"> |
|
||||
<el-input v-model="formData.id" @change="idChange"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程名称" prop="name"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
</el-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import type { Modeler, ModdleElement } from 'bpmn'; |
|
||||
import type { ProcessPanel } from 'bpmnDesign'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
|
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { idChange, nameChange } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const currentCollapseItem = ref(['1', '2']); |
|
||||
const formData = ref<ProcessPanel>(parseData<ProcessPanel>()); |
|
||||
|
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"></style> |
|
||||
@ -1,95 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px"> |
|
||||
<el-form-item prop="id" label="节点 ID"> |
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="name" label="节点名称"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="conditionExpression" label="跳转条件"> |
|
||||
<el-input v-model="formData.conditionExpressionValue" @change="conditionExpressionChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="skipExpression" label="跳过表达式"> |
|
||||
<el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
</el-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import useModelerStore from '@/store/modules/modeler'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
import type { Modeler, ModdleElement } from 'bpmn'; |
|
||||
import type { SequenceFlowPanel } from 'bpmnDesign'; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
const { nameChange, idChange, updateProperties } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const moddle = useModelerStore().getModdle(); |
|
||||
const currentCollapseItem = ref(['1', '2']); |
|
||||
const formData = ref(parseData<SequenceFlowPanel>()); |
|
||||
|
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
|
|
||||
const conditionExpressionChange = (val: string) => { |
|
||||
if (val) { |
|
||||
const newCondition = moddle.create('bpmn:FormalExpression', { body: val }); |
|
||||
updateProperties({ conditionExpression: newCondition }); |
|
||||
} else { |
|
||||
updateProperties({ conditionExpression: null }); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const skipExpressionChange = (val: string) => { |
|
||||
updateProperties({ 'flowable:skipExpression': val }); |
|
||||
}; |
|
||||
|
|
||||
onBeforeMount(() => { |
|
||||
if (formData.value.conditionExpression) { |
|
||||
formData.value.conditionExpressionValue = formData.value.conditionExpression.body; |
|
||||
} |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -1,67 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px"> |
|
||||
<el-form-item prop="id" label="节点 ID"> |
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="name" label="节点名称"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
</el-collapse> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import type { Modeler, ModdleElement } from 'bpmn'; |
|
||||
import type { StartEndPanel } from 'bpmnDesign'; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
const { nameChange, idChange } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
|
|
||||
const formData = ref(parseData<StartEndPanel>()); |
|
||||
const currentCollapseItem = ref(['1', '2']); |
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -1,193 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px"> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form-item prop="id" label="节点 ID"> |
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="name" label="节点名称"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
<el-collapse-item name="3"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<HelpFilled /> |
|
||||
</el-icon> |
|
||||
多实例 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form-item label="多实例类型"> |
|
||||
<el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange"> |
|
||||
<el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE"> |
|
||||
<el-form-item label="集合"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
集合 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br /> |
|
||||
不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br /> |
|
||||
这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-input v-model="formData.collection" @change="collectionChange"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="元素变量"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
元素变量 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br /> |
|
||||
创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br /> |
|
||||
一般来说，该字符串应与指定人员变量相同。 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="完成条件"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
完成条件 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br /> |
|
||||
结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br /> |
|
||||
活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br /> |
|
||||
表示当任务完成60%时，该节点就算完成 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
</el-collapse> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import type { ModdleElement } from 'bpmn'; |
|
||||
import type { SubProcessPanel } from 'bpmnDesign'; |
|
||||
import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums'; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
const { nameChange, idChange, updateProperties, createModdleElement, constant } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
|
|
||||
const formData = ref(parseData<SubProcessPanel>()); |
|
||||
const currentCollapseItem = ref(['1', '2', '3']); |
|
||||
|
|
||||
const multiInstanceTypeChange = (newVal) => { |
|
||||
if (newVal !== MultiInstanceTypeEnum.NONE) { |
|
||||
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL; |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
} else { |
|
||||
updateProperties({ loopCharacteristics: undefined }); |
|
||||
} |
|
||||
}; |
|
||||
const collectionChange = (newVal) => { |
|
||||
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined; |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
}; |
|
||||
const elementVariableChange = (newVal) => { |
|
||||
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined; |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
}; |
|
||||
const completionConditionChange = (newVal) => { |
|
||||
let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
if (newVal && newVal.length > 0) { |
|
||||
if (!loopCharacteristics.completionCondition) { |
|
||||
loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics); |
|
||||
} else { |
|
||||
loopCharacteristics.completionCondition.body = newVal; |
|
||||
} |
|
||||
} else { |
|
||||
loopCharacteristics.completionCondition = undefined; |
|
||||
} |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
}; |
|
||||
|
|
||||
onBeforeMount(() => { |
|
||||
if (formData.value.loopCharacteristics) { |
|
||||
const loopCharacteristics = formData.value.loopCharacteristics; |
|
||||
formData.value.collection = loopCharacteristics.collection || ''; |
|
||||
formData.value.elementVariable = loopCharacteristics.elementVariable || ''; |
|
||||
formData.value.completionCondition = loopCharacteristics.completionCondition?.body || ''; |
|
||||
formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -1,491 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-form ref="formRef" size="default" :model="formData" :rules="formRules" label-width="100px"> |
|
||||
<el-collapse v-model="currentCollapseItem"> |
|
||||
<el-collapse-item name="1"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<InfoFilled /> |
|
||||
</el-icon> |
|
||||
常规 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form-item prop="id" label="节点 ID"> |
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="name" label="节点名称"> |
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式"> |
|
||||
<el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-loading="formManageListLoading" prop="formKey" label="表单地址"> |
|
||||
<el-select v-model="formData.formKey" clearable filterable placeholder="请选择表单" style="width: 260px" @change="formKeyChange"> |
|
||||
<el-option |
|
||||
v-for="item in formManageList" |
|
||||
:key="item.id" |
|
||||
:label="item.formTypeName + ':' + item.formName" |
|
||||
:value="item.formType + ':' + item.id" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
<el-collapse-item name="2"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<Checked /> |
|
||||
</el-icon> |
|
||||
任务 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form-item v-if="showConfig.async" prop="sync" label="是否异步"> |
|
||||
<el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" /> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-tabs tab-position="left" class="demo-tabs"> |
|
||||
<el-tab-pane label="身份存储"> |
|
||||
<el-form-item label="分配人员"> |
|
||||
<el-input v-model="formData.assignee" @blur="blurAssignee(formData.assignee)"> |
|
||||
<template #append> |
|
||||
<el-button icon="Search" type="primary" @click="openSingleUserSelect" /> |
|
||||
</template> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="候选人员"> |
|
||||
<el-badge :value="selectUserLength" :max="99"> |
|
||||
<el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button> |
|
||||
</el-badge> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="候选组"> |
|
||||
<el-badge :value="selectRoleLength" :max="99"> |
|
||||
<el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button> |
|
||||
</el-badge> |
|
||||
</el-form-item> |
|
||||
</el-tab-pane> |
|
||||
|
|
||||
<!-- <el-tab-pane label="固定值"> |
|
||||
<el-form-item prop="auditUserType" label="分配类型"> |
|
||||
<el-select v-model="formData.allocationType"> |
|
||||
<el-option v-for="item in AllocationTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员"> |
|
||||
<el-input v-model="formData.assignee"> |
|
||||
<template #append> |
|
||||
<el-button icon="Search" type="primary" @click="openSingleUserSelect" /> |
|
||||
</template> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<div v-if="formData.allocationType === AllocationTypeEnum.CANDIDATE"> |
|
||||
<el-form-item label="候选人员"> |
|
||||
<el-badge :value="selectUserLength" :max="99"> |
|
||||
<el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button> |
|
||||
</el-badge> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="候选组"> |
|
||||
<el-badge :value="selectRoleLength" :max="99"> |
|
||||
<el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button> |
|
||||
</el-badge> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
<el-form-item v-if="formData.allocationType === AllocationTypeEnum.SPECIFY && showConfig.specifyDesc" style=""> |
|
||||
<el-radio-group v-model="formData.specifyDesc" class="ml-4"> |
|
||||
<el-radio v-for="item in SpecifyDesc" :key="item.id" :value="item.value" size="large">{{ item.label }}</el-radio> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
</el-tab-pane> --> |
|
||||
</el-tabs> |
|
||||
|
|
||||
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间"> |
|
||||
<el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click="openDueDate"> |
|
||||
<template #append> |
|
||||
<el-button icon="Search" type="primary" @click="openDueDate" /> |
|
||||
</template> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级"> |
|
||||
<el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
<el-collapse-item name="3"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<HelpFilled /> |
|
||||
</el-icon> |
|
||||
多实例 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<el-form-item label="多实例类型"> |
|
||||
<el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange"> |
|
||||
<el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE"> |
|
||||
<el-form-item label="集合"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
集合 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br /> |
|
||||
不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br /> |
|
||||
这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-input v-model="formData.collection" @change="collectionChange"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="元素变量"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
元素变量 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br /> |
|
||||
创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br /> |
|
||||
一般来说，该字符串应与指定人员变量相同。 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="完成条件"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
完成条件 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br /> |
|
||||
结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br /> |
|
||||
活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br /> |
|
||||
表示当任务完成60%时，该节点就算完成 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
<el-collapse-item v-if="showConfig.taskListener" name="4"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
任务监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
<el-collapse-item v-if="showConfig.executionListener" name="5"> |
|
||||
<template #title> |
|
||||
<div class="collapse__title"> |
|
||||
<el-icon> |
|
||||
<BellFilled /> |
|
||||
</el-icon> |
|
||||
执行监听器 |
|
||||
</div> |
|
||||
</template> |
|
||||
<div> |
|
||||
<ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener> |
|
||||
</div> |
|
||||
</el-collapse-item> |
|
||||
|
|
||||
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿"> |
|
||||
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发"> |
|
||||
<el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量"> |
|
||||
<el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量"> |
|
||||
<el-input v-model="formData.ruleVariablesInput"> </el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.exclude" prop="exclude" label="排除"> |
|
||||
<el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="showConfig.class" prop="class" label="类"> |
|
||||
<el-input v-model="formData.class"> </el-input> |
|
||||
</el-form-item> |
|
||||
</el-collapse> |
|
||||
</el-form> |
|
||||
<UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect> |
|
||||
<UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect> |
|
||||
<RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect> |
|
||||
<DueDate ref="dueDateRef" v-model="formData.dueDate" :data="formData.dueDate" @confirm-call-back="dueDateCallBack"></DueDate> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import useParseElement from '../hooks/useParseElement'; |
|
||||
import usePanel from '../hooks/usePanel'; |
|
||||
import UserSelect from '@/components/UserSelect'; |
|
||||
import RoleSelect from '@/components/RoleSelect'; |
|
||||
import ExecutionListener from './property/ExecutionListener.vue'; |
|
||||
import TaskListener from './property/TaskListener.vue'; |
|
||||
import DueDate from './property/DueDate.vue'; |
|
||||
import type { ModdleElement } from 'bpmn'; |
|
||||
import type { TaskPanel } from 'bpmnDesign'; |
|
||||
import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums'; |
|
||||
import { UserVO } from '@/api/system/user/types'; |
|
||||
import { RoleVO } from '@/api/system/role/types'; |
|
||||
import { selectListFormManage } from '@/api/workflow/formManage'; |
|
||||
import { FormManageVO } from '@/api/workflow/formManage/types'; |
|
||||
const formManageList = ref<FormManageVO[]>([]); |
|
||||
const formManageListLoading = ref(false); |
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
const { showConfig, nameChange, formKeyChange, idChange, updateProperties, getExtensionElements, createModdleElement, constant } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { parseData } = useParseElement({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
|
|
||||
const initFormData = { |
|
||||
id: '', |
|
||||
name: '', |
|
||||
dueDate: '', |
|
||||
multiInstanceType: MultiInstanceTypeEnum.NONE, |
|
||||
allocationType: AllocationTypeEnum.USER, |
|
||||
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE |
|
||||
}; |
|
||||
const formData = ref({ ...initFormData, ...parseData<TaskPanel>() }); |
|
||||
const assignee = ref<Partial<UserVO>>({ |
|
||||
userName: '' |
|
||||
}); |
|
||||
const currentCollapseItem = ref(['1', '2']); |
|
||||
const userSelectRef = ref<InstanceType<typeof UserSelect>>(); |
|
||||
const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>(); |
|
||||
const roleSelectRef = ref<InstanceType<typeof RoleSelect>>(); |
|
||||
const dueDateRef = ref<InstanceType<typeof DueDate>>(); |
|
||||
|
|
||||
const openUserSelect = () => { |
|
||||
userSelectRef.value.open(); |
|
||||
}; |
|
||||
const openSingleUserSelect = () => { |
|
||||
if (formData.value.assignee?.includes('$')) { |
|
||||
formData.value.assignee = ''; |
|
||||
} |
|
||||
singleUserSelectRef.value.open(); |
|
||||
}; |
|
||||
const openRoleSelect = () => { |
|
||||
roleSelectRef.value.open(); |
|
||||
}; |
|
||||
const openDueDate = (e) => { |
|
||||
dueDateRef.value.openDialog(); |
|
||||
}; |
|
||||
const blurAssignee = (assignee) => { |
|
||||
updateProperties({ 'flowable:assignee': assignee ? assignee : undefined }); |
|
||||
}; |
|
||||
const singleUserSelectCallBack = (data: UserVO[]) => { |
|
||||
const user: UserVO = data.length !== 0 ? data[0] : undefined; |
|
||||
updateProperties({ 'flowable:assignee': user?.userId }); |
|
||||
assignee.value = user ? user : { userName: '' }; |
|
||||
formData.value.assignee = String(user?.userId); |
|
||||
let extensionElements = getExtensionElements(); |
|
||||
extensionElements.values = extensionElements.get('values').filter((item) => item.$type !== 'flowable:extAssignee'); |
|
||||
if (user) { |
|
||||
const extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements); |
|
||||
extensionElements.get('values').push(extAssigneeElement); |
|
||||
extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId }); |
|
||||
} |
|
||||
if (extensionElements.values.length === 0) { |
|
||||
extensionElements = undefined; |
|
||||
} |
|
||||
updateProperties({ extensionElements: extensionElements }); |
|
||||
}; |
|
||||
const userSelectCallBack = (data: UserVO[]) => { |
|
||||
let extensionElements = getExtensionElements(); |
|
||||
extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers'); |
|
||||
if (data.length === 0) { |
|
||||
formData.value.candidateUsers = undefined; |
|
||||
updateProperties({ 'flowable:candidateUsers': undefined }); |
|
||||
} else { |
|
||||
const userIds = data.map((item) => item.userId).join(','); |
|
||||
formData.value.candidateUsers = userIds; |
|
||||
updateProperties({ 'flowable:candidateUsers': userIds }); |
|
||||
const extCandidateUsersElement = createModdleElement('flowable:extCandidateUsers', { body: '' }, extensionElements); |
|
||||
extensionElements.values.push(extCandidateUsersElement); |
|
||||
const users = data.map((item) => { |
|
||||
return { |
|
||||
userId: item.userId, |
|
||||
userName: item.userName |
|
||||
}; |
|
||||
}); |
|
||||
extCandidateUsersElement.body = JSON.stringify(users); |
|
||||
} |
|
||||
if (extensionElements.values.length === 0) { |
|
||||
extensionElements = undefined; |
|
||||
} |
|
||||
updateProperties({ extensionElements: extensionElements }); |
|
||||
}; |
|
||||
const roleSelectCallBack = (data: RoleVO[]) => { |
|
||||
if (data.length === 0) { |
|
||||
formData.value.candidateGroups = ''; |
|
||||
updateProperties({ 'flowable:candidateGroups': undefined }); |
|
||||
} else { |
|
||||
const roleIds = data.map((item) => item.roleId).join(','); |
|
||||
formData.value.candidateGroups = roleIds; |
|
||||
updateProperties({ 'flowable:candidateGroups': roleIds }); |
|
||||
} |
|
||||
}; |
|
||||
const dueDateCallBack = (data: string) => { |
|
||||
updateProperties({ 'flowable:dueDate': data }); |
|
||||
}; |
|
||||
|
|
||||
const taskTabClick = (e) => { |
|
||||
formData.value.candidateGroups = ''; |
|
||||
formData.value.candidateUsers = ''; |
|
||||
formData.value.assignee = ''; |
|
||||
// formData.value.fixedAssignee = ''; |
|
||||
assignee.value = {}; |
|
||||
}; |
|
||||
|
|
||||
const syncChange = (newVal) => { |
|
||||
updateProperties({ 'flowable:async': newVal }); |
|
||||
}; |
|
||||
const skipExpressionChange = (newVal) => { |
|
||||
updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined }); |
|
||||
}; |
|
||||
const priorityChange = (newVal) => { |
|
||||
updateProperties({ 'flowable:priority': newVal }); |
|
||||
}; |
|
||||
const fixedAssigneeChange = (newVal) => { |
|
||||
updateProperties({ 'flowable:assignee': newVal && newVal.length > 0 ? newVal : undefined }); |
|
||||
}; |
|
||||
const multiInstanceTypeChange = (newVal) => { |
|
||||
if (newVal !== MultiInstanceTypeEnum.NONE) { |
|
||||
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL; |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
} else { |
|
||||
updateProperties({ loopCharacteristics: undefined }); |
|
||||
} |
|
||||
}; |
|
||||
const collectionChange = (newVal) => { |
|
||||
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined; |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
}; |
|
||||
const elementVariableChange = (newVal) => { |
|
||||
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined; |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
}; |
|
||||
const completionConditionChange = (newVal) => { |
|
||||
let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics'); |
|
||||
if (!loopCharacteristics) { |
|
||||
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject); |
|
||||
} |
|
||||
if (newVal && newVal.length > 0) { |
|
||||
if (!loopCharacteristics.completionCondition) { |
|
||||
loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics); |
|
||||
} else { |
|
||||
loopCharacteristics.completionCondition.body = newVal; |
|
||||
} |
|
||||
} else { |
|
||||
loopCharacteristics.completionCondition = undefined; |
|
||||
} |
|
||||
updateProperties({ loopCharacteristics: loopCharacteristics }); |
|
||||
}; |
|
||||
const dueDateChange = (newVal) => { |
|
||||
updateProperties({ 'flowable:dueDate': newVal && newVal.length > 0 ? newVal : undefined }); |
|
||||
}; |
|
||||
const selectUserLength = computed(() => { |
|
||||
if (formData.value.candidateUsers) { |
|
||||
return formData.value.candidateUsers.split(',').length; |
|
||||
} else { |
|
||||
return 0; |
|
||||
} |
|
||||
}); |
|
||||
const selectRoleLength = computed(() => { |
|
||||
if (formData.value.candidateGroups) { |
|
||||
return formData.value.candidateGroups.split(',').length; |
|
||||
} else { |
|
||||
return 0; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
onBeforeMount(() => { |
|
||||
const extensionElements = getExtensionElements(false); |
|
||||
if (extensionElements && extensionElements.get('values')) { |
|
||||
let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee'); |
|
||||
if (extAssigneeElement) { |
|
||||
assignee.value = JSON.parse(extAssigneeElement.body); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
if (formData.value.loopCharacteristics) { |
|
||||
const loopCharacteristics = formData.value.loopCharacteristics; |
|
||||
formData.value.collection = loopCharacteristics.collection || ''; |
|
||||
formData.value.elementVariable = loopCharacteristics.elementVariable || ''; |
|
||||
formData.value.completionCondition = loopCharacteristics.completionCondition?.body || ''; |
|
||||
formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL; |
|
||||
} |
|
||||
|
|
||||
if (formData.value.assignee) { |
|
||||
formData.value.fixedAssignee = formData.value.assignee; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const formRules = ref<ElFormRules>({ |
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
|
|
||||
const AllocationTypeSelect = [ |
|
||||
{ id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: AllocationTypeEnum.USER }, |
|
||||
{ id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '候选人员', value: AllocationTypeEnum.CANDIDATE }, |
|
||||
{ id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: AllocationTypeEnum.YOURSELF }, |
|
||||
{ id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: AllocationTypeEnum.SPECIFY } |
|
||||
]; |
|
||||
const SpecifyDesc = [ |
|
||||
{ id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' }, |
|
||||
{ id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' } |
|
||||
]; |
|
||||
|
|
||||
const listFormManage = async () => { |
|
||||
formManageListLoading.value = true; |
|
||||
const res = await selectListFormManage(); |
|
||||
formManageList.value = res.data; |
|
||||
formManageListLoading.value = false; |
|
||||
}; |
|
||||
onMounted(() => { |
|
||||
nextTick(() => { |
|
||||
listFormManage(); |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
@ -1,110 +0,0 @@ |
|||||
<template> |
|
||||
<div ref="propertyPanel"> |
|
||||
<div v-if="nodeName" class="node-name">{{ nodeName }}</div> |
|
||||
<component :is="component" v-if="element" :element="element" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts" name="PropertyPanel"> |
|
||||
import { NodeName } from '../assets/lang/zh'; |
|
||||
import TaskPanel from './TaskPanel.vue'; |
|
||||
import ProcessPanel from './ProcessPanel.vue'; |
|
||||
import StartEndPanel from './StartEndPanel.vue'; |
|
||||
import GatewayPanel from './GatewayPanel.vue'; |
|
||||
import SequenceFlowPanel from './SequenceFlowPanel.vue'; |
|
||||
import ParticipantPanel from './ParticipantPanel.vue'; |
|
||||
import SubProcessPanel from './SubProcessPanel.vue'; |
|
||||
import type { Modeler, ModdleElement } from 'bpmn'; |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
interface propsType { |
|
||||
modeler: Modeler; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<propsType>(), {}); |
|
||||
|
|
||||
const element = ref<ModdleElement>(); |
|
||||
const processElement = ref<ModdleElement>(); |
|
||||
|
|
||||
const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent']; |
|
||||
const taskType = [ |
|
||||
'bpmn:UserTask', |
|
||||
'bpmn:Task', |
|
||||
'bpmn:SendTask', |
|
||||
'bpmn:ReceiveTask', |
|
||||
'bpmn:ManualTask', |
|
||||
'bpmn:BusinessRuleTask', |
|
||||
'bpmn:ServiceTask', |
|
||||
'bpmn:ScriptTask' |
|
||||
]; |
|
||||
const sequenceType = ['bpmn:SequenceFlow']; |
|
||||
const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway', 'bpmn:ComplexGateway']; |
|
||||
const processType = ['bpmn:Process']; |
|
||||
|
|
||||
// 组件计算 |
|
||||
const component = computed(() => { |
|
||||
if (!element.value) return null; |
|
||||
const type = element.value.type; |
|
||||
if (startEndType.includes(type)) return StartEndPanel; |
|
||||
if (taskType.includes(type)) return TaskPanel; |
|
||||
if (sequenceType.includes(type)) return SequenceFlowPanel; |
|
||||
if (gatewayType.includes(type)) return GatewayPanel; |
|
||||
if (processType.includes(type)) return ProcessPanel; |
|
||||
if (type === 'bpmn:Participant') return ParticipantPanel; |
|
||||
if (type === 'bpmn:SubProcess') return SubProcessPanel; |
|
||||
//return proxy?.$modal.msgWarning('面板开发中....'); |
|
||||
return undefined; |
|
||||
}); |
|
||||
|
|
||||
const nodeName = computed(() => { |
|
||||
if (element.value) { |
|
||||
const bizObj = element.value.businessObject; |
|
||||
const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type; |
|
||||
return NodeName[type] || type; |
|
||||
} |
|
||||
return ''; |
|
||||
}); |
|
||||
|
|
||||
const handleModeler = () => { |
|
||||
props.modeler.on('root.added', (e: any) => { |
|
||||
element.value = null; |
|
||||
if (e.element.type === 'bpmn:Process') { |
|
||||
nextTick(() => { |
|
||||
element.value = e.element; |
|
||||
processElement.value = e.element; |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
props.modeler.on('element.click', (e: any) => { |
|
||||
if (e.element.type === 'bpmn:Process') { |
|
||||
nextTick(() => { |
|
||||
element.value = e.element; |
|
||||
processElement.value = e.element; |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
props.modeler.on('selection.changed', (e: any) => { |
|
||||
// 先给null为了让vue刷新 |
|
||||
element.value = null; |
|
||||
const newElement = e.newSelection[0]; |
|
||||
if (newElement) { |
|
||||
nextTick(() => { |
|
||||
element.value = newElement; |
|
||||
}); |
|
||||
} else { |
|
||||
nextTick(() => { |
|
||||
element.value = processElement.value; |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
handleModeler(); |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.node-name { |
|
||||
font-size: 16px; |
|
||||
font-weight: bold; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,252 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-dialog v-model="visible" :title="title" width="600px" append-to-body> |
|
||||
<el-form label-width="100px"> |
|
||||
<el-form-item label="小时"> |
|
||||
<el-radio-group v-model="hourValue" @change="hourChange"> |
|
||||
<el-radio-button label="4" value="4" /> |
|
||||
<el-radio-button label="8" value="8" /> |
|
||||
<el-radio-button label="12" value="12" /> |
|
||||
<el-radio-button label="24" value="24" /> |
|
||||
<el-radio-button label="自定义" value="自定义" /> |
|
||||
<el-input-number v-show="hourValue === '自定义'" v-model="customHourValue" :min="1" @change="customHourValueChange"></el-input-number> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="天"> |
|
||||
<el-radio-group v-model="dayValue" @change="dayChange"> |
|
||||
<el-radio-button label="1" value="1" /> |
|
||||
<el-radio-button label="2" value="2" /> |
|
||||
<el-radio-button label="3" value="3" /> |
|
||||
<el-radio-button label="4" value="4" /> |
|
||||
<el-radio-button label="自定义" value="自定义" /> |
|
||||
<el-input-number v-show="dayValue === '自定义'" v-model="customDayValue" :min="1" @change="customDayValueChange"></el-input-number> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="周"> |
|
||||
<el-radio-group v-model="weekValue" @change="weekChange"> |
|
||||
<el-radio-button label="1" value="1" /> |
|
||||
<el-radio-button label="2" value="2" /> |
|
||||
<el-radio-button label="3" value="3" /> |
|
||||
<el-radio-button label="4" value="4" /> |
|
||||
<el-radio-button label="自定义" value="自定义" /> |
|
||||
<el-input-number v-show="weekValue === '自定义'" v-model="customWeekValue" :min="1" @change="customWeekValueChange"></el-input-number> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="月"> |
|
||||
<el-radio-group v-model="monthValue" @change="monthChange"> |
|
||||
<el-radio-button label="1" value="1" /> |
|
||||
<el-radio-button label="2" value="2" /> |
|
||||
<el-radio-button label="3" value="3" /> |
|
||||
<el-radio-button label="4" value="4" /> |
|
||||
<el-radio-button label="自定义" value="自定义" /> |
|
||||
<el-input-number v-show="monthValue === '自定义'" v-model="customMonthValue" :min="1" @change="customMonthValueChange"></el-input-number> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
|
|
||||
<template #footer> |
|
||||
<div> |
|
||||
<el-button @click="closeDialog">取消</el-button> |
|
||||
<el-button type="primary" @click="confirm">确定</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import useDialog from '@/hooks/useDialog'; |
|
||||
|
|
||||
interface PropType { |
|
||||
modelValue?: string; |
|
||||
data?: string; |
|
||||
} |
|
||||
const prop = withDefaults(defineProps<PropType>(), { |
|
||||
modelValue: '', |
|
||||
data: '' |
|
||||
}); |
|
||||
const emit = defineEmits(['update:modelValue', 'confirmCallBack']); |
|
||||
|
|
||||
const { title, visible, openDialog, closeDialog } = useDialog({ |
|
||||
title: '设置任务到期时间' |
|
||||
}); |
|
||||
const formValue = ref(); |
|
||||
const valueType = ref(); |
|
||||
|
|
||||
const hourValue = ref(''); |
|
||||
const dayValue = ref(''); |
|
||||
const weekValue = ref(''); |
|
||||
const monthValue = ref(''); |
|
||||
|
|
||||
const customHourValue = ref(1); |
|
||||
const customDayValue = ref(1); |
|
||||
const customWeekValue = ref(1); |
|
||||
const customMonthValue = ref(1); |
|
||||
|
|
||||
const hourValueConst = ['4', '8', '12', '24']; |
|
||||
const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4']; |
|
||||
|
|
||||
const initValue = () => { |
|
||||
formValue.value = prop.data; |
|
||||
if (prop.data) { |
|
||||
const lastStr = prop.data.substring(prop.data.length - 1); |
|
||||
if (lastStr === 'H') { |
|
||||
const hourValueValue = prop.data.substring(2, prop.data.length - 1); |
|
||||
if (hourValueConst.includes(hourValueValue)) { |
|
||||
hourValue.value = hourValueValue; |
|
||||
} else { |
|
||||
hourValue.value = '自定义'; |
|
||||
customHourValue.value = Number(hourValueValue); |
|
||||
} |
|
||||
} |
|
||||
const dayAndWeekAndMonthValue = prop.data.substring(1, prop.data.length - 1); |
|
||||
if (lastStr === 'D') { |
|
||||
if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) { |
|
||||
dayValue.value = dayAndWeekAndMonthValue; |
|
||||
} else { |
|
||||
dayValue.value = '自定义'; |
|
||||
customDayValue.value = Number(dayAndWeekAndMonthValue); |
|
||||
} |
|
||||
} |
|
||||
if (lastStr === 'W') { |
|
||||
if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) { |
|
||||
weekValue.value = dayAndWeekAndMonthValue; |
|
||||
} else { |
|
||||
weekValue.value = '自定义'; |
|
||||
customWeekValue.value = Number(dayAndWeekAndMonthValue); |
|
||||
} |
|
||||
} |
|
||||
if (lastStr === 'M') { |
|
||||
if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) { |
|
||||
monthValue.value = dayAndWeekAndMonthValue; |
|
||||
} else { |
|
||||
monthValue.value = '自定义'; |
|
||||
customMonthValue.value = Number(dayAndWeekAndMonthValue); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const confirm = () => { |
|
||||
emit('update:modelValue', formValue.value); |
|
||||
emit('confirmCallBack', formValue.value); |
|
||||
closeDialog(); |
|
||||
}; |
|
||||
|
|
||||
const customHourValueChange = (customHourValue) => { |
|
||||
formValue.value = `PT${customHourValue}H`; |
|
||||
|
|
||||
dayValue.value = ''; |
|
||||
weekValue.value = ''; |
|
||||
monthValue.value = ''; |
|
||||
customDayValue.value = 1; |
|
||||
customWeekValue.value = 1; |
|
||||
customMonthValue.value = 1; |
|
||||
}; |
|
||||
const customDayValueChange = (customDayValue) => { |
|
||||
formValue.value = `P${customDayValue}D`; |
|
||||
hourValue.value = ''; |
|
||||
weekValue.value = ''; |
|
||||
monthValue.value = ''; |
|
||||
|
|
||||
customHourValue.value = 1; |
|
||||
customWeekValue.value = 1; |
|
||||
customMonthValue.value = 1; |
|
||||
}; |
|
||||
|
|
||||
const customWeekValueChange = (customWeekValue) => { |
|
||||
formValue.value = `P${customWeekValue}W`; |
|
||||
hourValue.value = ''; |
|
||||
dayValue.value = ''; |
|
||||
monthValue.value = ''; |
|
||||
|
|
||||
customHourValue.value = 1; |
|
||||
customDayValue.value = 1; |
|
||||
customMonthValue.value = 1; |
|
||||
}; |
|
||||
|
|
||||
const customMonthValueChange = (customMonthValue) => { |
|
||||
formValue.value = `P${customMonthValue}M`; |
|
||||
hourValue.value = ''; |
|
||||
dayValue.value = ''; |
|
||||
weekValue.value = ''; |
|
||||
|
|
||||
customHourValue.value = 1; |
|
||||
customDayValue.value = 1; |
|
||||
customWeekValue.value = 1; |
|
||||
}; |
|
||||
|
|
||||
const hourChange = (hourValue) => { |
|
||||
if (hourValue === '自定义') { |
|
||||
formValue.value = `PT${customHourValue.value}H`; |
|
||||
} else { |
|
||||
formValue.value = `PT${hourValue}H`; |
|
||||
} |
|
||||
|
|
||||
dayValue.value = ''; |
|
||||
weekValue.value = ''; |
|
||||
monthValue.value = ''; |
|
||||
customDayValue.value = 1; |
|
||||
customWeekValue.value = 1; |
|
||||
customMonthValue.value = 1; |
|
||||
}; |
|
||||
const dayChange = (dayValue) => { |
|
||||
if (dayValue === '自定义') { |
|
||||
formValue.value = `P${customDayValue.value}D`; |
|
||||
} else { |
|
||||
formValue.value = `P${dayValue}D`; |
|
||||
} |
|
||||
|
|
||||
hourValue.value = ''; |
|
||||
weekValue.value = ''; |
|
||||
monthValue.value = ''; |
|
||||
|
|
||||
customHourValue.value = 1; |
|
||||
customWeekValue.value = 1; |
|
||||
customMonthValue.value = 1; |
|
||||
}; |
|
||||
const weekChange = (weekValue) => { |
|
||||
if (weekValue === '自定义') { |
|
||||
formValue.value = `P${customWeekValue.value}W`; |
|
||||
} else { |
|
||||
formValue.value = `P${weekValue}W`; |
|
||||
} |
|
||||
|
|
||||
hourValue.value = ''; |
|
||||
dayValue.value = ''; |
|
||||
monthValue.value = ''; |
|
||||
|
|
||||
customHourValue.value = 1; |
|
||||
customDayValue.value = 1; |
|
||||
customMonthValue.value = 1; |
|
||||
}; |
|
||||
const monthChange = (monthValue) => { |
|
||||
if (monthValue === '自定义') { |
|
||||
formValue.value = `P${customMonthValue.value}M`; |
|
||||
} else { |
|
||||
formValue.value = `P${monthValue}M`; |
|
||||
} |
|
||||
|
|
||||
hourValue.value = ''; |
|
||||
dayValue.value = ''; |
|
||||
weekValue.value = ''; |
|
||||
|
|
||||
customHourValue.value = 1; |
|
||||
customDayValue.value = 1; |
|
||||
customWeekValue.value = 1; |
|
||||
}; |
|
||||
|
|
||||
watch( |
|
||||
() => visible.value, |
|
||||
() => { |
|
||||
if (visible.value) { |
|
||||
initValue(); |
|
||||
} |
|
||||
} |
|
||||
); |
|
||||
|
|
||||
defineExpose({ |
|
||||
openDialog, |
|
||||
closeDialog |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,308 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<vxe-toolbar> |
|
||||
<template #buttons> |
|
||||
<el-button type="primary" link size="small" @click="insertEvent">新增</el-button> |
|
||||
<el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button> |
|
||||
</template> |
|
||||
</vxe-toolbar> |
|
||||
<vxe-table |
|
||||
ref="tableRef" |
|
||||
size="mini" |
|
||||
height="100px" |
|
||||
border |
|
||||
show-overflow |
|
||||
keep-source |
|
||||
:data="tableData" |
|
||||
:menu-config="menuConfig" |
|
||||
@cell-dblclick="cellDBLClickEvent" |
|
||||
@menu-click="contextMenuClickEvent" |
|
||||
> |
|
||||
<vxe-column type="checkbox" width="40"></vxe-column> |
|
||||
<vxe-column type="seq" width="40"></vxe-column> |
|
||||
<vxe-column field="event" title="事件" min-width="100px"> |
|
||||
<template #default="slotParams"> |
|
||||
<span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column field="type" title="类型" min-width="100px"> |
|
||||
<template #default="slotParams"> |
|
||||
<span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column> |
|
||||
</vxe-table> |
|
||||
|
|
||||
<el-dialog |
|
||||
v-model="formDialog.visible.value" |
|
||||
:title="formDialog.title.value" |
|
||||
width="600px" |
|
||||
:close-on-click-modal="false" |
|
||||
:close-on-press-escape="false" |
|
||||
:show-close="false" |
|
||||
append-to-body |
|
||||
> |
|
||||
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px"> |
|
||||
<el-form-item label="事件" prop="event"> |
|
||||
<el-select v-model="formData.event"> |
|
||||
<el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="类型" prop="type"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
类型 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口<br /> |
|
||||
表达式：示例 ${myObject.callMethod(task, task.eventName)}<br /> |
|
||||
委托表达式：示例 ${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-select v-model="formData.type"> |
|
||||
<el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
:label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'" |
|
||||
prop="className" |
|
||||
> |
|
||||
<el-input v-model="formData.className" type="text"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<el-tabs type="border-card"> |
|
||||
<el-tab-pane label="参数"> |
|
||||
<ListenerParam ref="listenerParamRef" :table-data="formData.params" /> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="formDialog.closeDialog">取 消</el-button> |
|
||||
<el-button type="primary" @click="submitEvent">确 定</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import ListenerParam from './ListenerParam.vue'; |
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'; |
|
||||
import type { ExecutionListenerVO } from 'bpmnDesign'; |
|
||||
import type { Moddle, Modeler, ModdleElement } from 'bpmn'; |
|
||||
|
|
||||
import usePanel from '../../hooks/usePanel'; |
|
||||
import useDialog from '@/hooks/useDialog'; |
|
||||
import useModelerStore from '@/store/modules/modeler'; |
|
||||
|
|
||||
const emit = defineEmits(['close']); |
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const selectRow = ref<ExecutionListenerVO | null>(); |
|
||||
const formDialog = useDialog({ |
|
||||
title: selectRow.value ? '编辑&保存' : '新增&保存' |
|
||||
}); |
|
||||
|
|
||||
const { showConfig, elementType, updateProperties } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { getModdle } = useModelerStore(); |
|
||||
const moddle = getModdle(); |
|
||||
|
|
||||
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>(); |
|
||||
const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>(); |
|
||||
const formRef = ref<ElFormInstance>(); |
|
||||
|
|
||||
const initData: ExecutionListenerVO = { |
|
||||
event: '', |
|
||||
type: '', |
|
||||
className: '', |
|
||||
params: [] |
|
||||
}; |
|
||||
const formData = ref<ExecutionListenerVO>({ ...initData }); |
|
||||
const tableData = ref<ExecutionListenerVO[]>([]); |
|
||||
const tableRules = ref<ElFormRules>({ |
|
||||
event: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
type: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
className: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
|
|
||||
const submitEvent = async () => { |
|
||||
const error = await listenerParamRef.value.validate(); |
|
||||
await formRef.value.validate((validate) => { |
|
||||
if (validate && !error) { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
formData.value.params = listenerParamRef.value.getTableData(); |
|
||||
if (selectRow.value) { |
|
||||
Object.assign(selectRow.value, formData.value); |
|
||||
} else { |
|
||||
$table.insertAt({ ...formData.value }, -1); |
|
||||
} |
|
||||
updateElement(); |
|
||||
formDialog.closeDialog(); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const removeSelectRowEvent = async () => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
const selectCount = $table.getCheckboxRecords().length; |
|
||||
if (selectCount === 0) { |
|
||||
proxy?.$modal.msgWarning('请选择行'); |
|
||||
} else { |
|
||||
await $table.removeCheckboxRow(); |
|
||||
updateElement(); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
const insertEvent = async () => { |
|
||||
Object.assign(formData.value, initData); |
|
||||
selectRow.value = null; |
|
||||
formDialog.openDialog(); |
|
||||
}; |
|
||||
|
|
||||
const editEvent = (row: ExecutionListenerVO) => { |
|
||||
Object.assign(formData.value, row); |
|
||||
selectRow.value = row; |
|
||||
formDialog.openDialog(); |
|
||||
}; |
|
||||
|
|
||||
const removeEvent = async (row: ExecutionListenerVO) => { |
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?'); |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
await $table.remove(row); |
|
||||
updateElement(); |
|
||||
} |
|
||||
}; |
|
||||
const updateElement = () => { |
|
||||
const $table = tableRef.value; |
|
||||
const data = $table.getTableData().fullData; |
|
||||
if (data.length) { |
|
||||
let extensionElements = props.element.businessObject.get('extensionElements'); |
|
||||
if (!extensionElements) { |
|
||||
extensionElements = moddle.create('bpmn:ExtensionElements'); |
|
||||
} |
|
||||
// 清除旧值 |
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? []; |
|
||||
data.forEach((item) => { |
|
||||
const executionListener = moddle.create('flowable:ExecutionListener'); |
|
||||
executionListener['event'] = item.event; |
|
||||
executionListener[item.type] = item.className; |
|
||||
if (item.params && item.params.length) { |
|
||||
item.params.forEach((field) => { |
|
||||
const fieldElement = moddle.create('flowable:Field'); |
|
||||
fieldElement['name'] = field.name; |
|
||||
fieldElement[field.type] = field.value; |
|
||||
executionListener.get('fields').push(fieldElement); |
|
||||
}); |
|
||||
} |
|
||||
extensionElements.get('values').push(executionListener); |
|
||||
}); |
|
||||
updateProperties({ extensionElements: extensionElements }); |
|
||||
} else { |
|
||||
const extensionElements = props.element.businessObject[`extensionElements`]; |
|
||||
if (extensionElements) { |
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? []; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => { |
|
||||
editEvent(row); |
|
||||
}; |
|
||||
|
|
||||
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({ |
|
||||
body: { |
|
||||
options: [ |
|
||||
[ |
|
||||
{ code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false }, |
|
||||
{ code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false } |
|
||||
] |
|
||||
] |
|
||||
}, |
|
||||
visibleMethod({ options, column }) { |
|
||||
const isDisabled = !column; |
|
||||
options.forEach((list) => { |
|
||||
list.forEach((item) => { |
|
||||
item.disabled = isDisabled; |
|
||||
}); |
|
||||
}); |
|
||||
return true; |
|
||||
} |
|
||||
}); |
|
||||
const contextMenuClickEvent: VxeTableEvents.MenuClick<ExecutionListenerVO> = ({ menu, row, column }) => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
switch (menu.code) { |
|
||||
case 'edit': |
|
||||
editEvent(row); |
|
||||
break; |
|
||||
case 'remove': |
|
||||
removeEvent(row); |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const initTableData = () => { |
|
||||
tableData.value = |
|
||||
props.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'; |
|
||||
return { |
|
||||
name: field.name, |
|
||||
type: fieldType, |
|
||||
value: field[fieldType] |
|
||||
}; |
|
||||
}) ?? [] |
|
||||
}; |
|
||||
}) ?? []; |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
initTableData(); |
|
||||
}); |
|
||||
|
|
||||
const typeSelect = [ |
|
||||
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' }, |
|
||||
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }, |
|
||||
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' } |
|
||||
]; |
|
||||
const eventSelect = [ |
|
||||
{ id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '开始', value: 'start' }, |
|
||||
{ id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '结束', value: 'end' }, |
|
||||
{ id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '启用', value: 'take' } |
|
||||
]; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.el-badge { |
|
||||
:deep(.el-badge__content) { |
|
||||
top: 10px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,121 +0,0 @@ |
|||||
<template> |
|
||||
<vxe-toolbar> |
|
||||
<template #buttons> |
|
||||
<el-button icon="Plus" @click="insertRow">新增</el-button> |
|
||||
</template> |
|
||||
</vxe-toolbar> |
|
||||
<vxe-table |
|
||||
ref="tableRef" |
|
||||
:height="height" |
|
||||
border |
|
||||
show-overflow |
|
||||
keep-source |
|
||||
:data="tableData" |
|
||||
:edit-rules="tableRules" |
|
||||
:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" |
|
||||
> |
|
||||
<vxe-column type="seq" width="40"></vxe-column> |
|
||||
<vxe-column field="type" title="类型" :edit-render="{}"> |
|
||||
<template #default="slotParams"> |
|
||||
<span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span> |
|
||||
</template> |
|
||||
<template #edit="slotParams"> |
|
||||
<vxe-select v-model="slotParams.row.type"> |
|
||||
<vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option> |
|
||||
</vxe-select> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column field="name" title="名称" :edit-render="{}"> |
|
||||
<template #edit="slotParams"> |
|
||||
<vxe-input v-model="slotParams.row.name" type="text"></vxe-input> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column field="value" title="值" :edit-render="{}"> |
|
||||
<template #edit="slotParams"> |
|
||||
<vxe-input v-model="slotParams.row.value" type="text"></vxe-input> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column title="操作" width="100" show-overflow align="center"> |
|
||||
<template #default="slotParams"> |
|
||||
<el-tooltip content="删除" placement="top"> |
|
||||
<el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
</vxe-table> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'; |
|
||||
import type { ParamVO } from 'bpmnDesign'; |
|
||||
import useDialog from '@/hooks/useDialog'; |
|
||||
|
|
||||
interface PropType { |
|
||||
height?: string; |
|
||||
tableData?: ParamVO[]; |
|
||||
} |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const props = withDefaults(defineProps<PropType>(), { |
|
||||
height: '200px', |
|
||||
tableData: () => [] |
|
||||
}); |
|
||||
|
|
||||
const tableRules = ref<VxeTablePropTypes.EditRules>({ |
|
||||
type: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
value: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
|
|
||||
const { title, visible, openDialog, closeDialog } = useDialog({ |
|
||||
title: '监听器参数' |
|
||||
}); |
|
||||
const typeSelect = [ |
|
||||
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '字符串', value: 'stringValue' }, |
|
||||
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' } |
|
||||
]; |
|
||||
|
|
||||
const tableRef = ref<VxeTableInstance<ParamVO>>(); |
|
||||
|
|
||||
const getTableData = () => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
return $table.getTableData().fullData; |
|
||||
} |
|
||||
return []; |
|
||||
}; |
|
||||
|
|
||||
const insertRow = async () => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
const { row: newRow } = await $table.insertAt({}, -1); |
|
||||
// 插入一条数据并触发校验 |
|
||||
await $table.validate(newRow); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const removeRow = async (row: ParamVO) => { |
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?'); |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
await $table.remove(row); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const validate = async () => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
return await $table.validate(true); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ |
|
||||
closeDialog, |
|
||||
openDialog, |
|
||||
validate, |
|
||||
getTableData |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"></style> |
|
||||
@ -1,310 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<vxe-toolbar> |
|
||||
<template #buttons> |
|
||||
<el-button type="primary" link size="small" @click="insertEvent">新增</el-button> |
|
||||
<el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button> |
|
||||
</template> |
|
||||
</vxe-toolbar> |
|
||||
<vxe-table |
|
||||
ref="tableRef" |
|
||||
size="mini" |
|
||||
height="100px" |
|
||||
border |
|
||||
show-overflow |
|
||||
keep-source |
|
||||
:data="tableData" |
|
||||
:menu-config="menuConfig" |
|
||||
@cell-dblclick="cellDBLClickEvent" |
|
||||
@menu-click="contextMenuClickEvent" |
|
||||
> |
|
||||
<vxe-column type="checkbox" width="40"></vxe-column> |
|
||||
<vxe-column type="seq" width="40"></vxe-column> |
|
||||
<vxe-column field="event" title="事件" min-width="100px"> |
|
||||
<template #default="slotParams"> |
|
||||
<span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column field="type" title="类型" min-width="100px"> |
|
||||
<template #default="slotParams"> |
|
||||
<span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span> |
|
||||
</template> |
|
||||
</vxe-column> |
|
||||
<vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column> |
|
||||
</vxe-table> |
|
||||
|
|
||||
<el-dialog |
|
||||
v-model="formDialog.visible.value" |
|
||||
:title="formDialog.title.value" |
|
||||
width="600px" |
|
||||
:close-on-click-modal="false" |
|
||||
:close-on-press-escape="false" |
|
||||
:show-close="false" |
|
||||
append-to-body |
|
||||
> |
|
||||
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px"> |
|
||||
<el-form-item label="事件" prop="event"> |
|
||||
<template #label> |
|
||||
<span> |
|
||||
事件 |
|
||||
<el-tooltip placement="top"> |
|
||||
<el-icon><QuestionFilled /></el-icon> |
|
||||
<template #content> |
|
||||
create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br /> |
|
||||
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br /> |
|
||||
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br /> |
|
||||
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。 |
|
||||
</template> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</template> |
|
||||
<el-select v-model="formData.event"> |
|
||||
<el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="类型" prop="type"> |
|
||||
<el-select v-model="formData.type"> |
|
||||
<el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
:label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'" |
|
||||
prop="className" |
|
||||
> |
|
||||
<el-input v-model="formData.className" type="text"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<el-tabs type="border-card"> |
|
||||
<el-tab-pane label="参数"> |
|
||||
<ListenerParam ref="listenerParamRef" :table-data="formData.params" /> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="formDialog.closeDialog">取 消</el-button> |
|
||||
<el-button type="primary" @click="submitEvent">确 定</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import ListenerParam from './ListenerParam.vue'; |
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'; |
|
||||
import type { TaskListenerVO } from 'bpmnDesign'; |
|
||||
import type { ModdleElement } from 'bpmn'; |
|
||||
|
|
||||
import usePanel from '../../hooks/usePanel'; |
|
||||
import useDialog from '@/hooks/useDialog'; |
|
||||
import useModelerStore from '@/store/modules/modeler'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
interface PropType { |
|
||||
element: ModdleElement; |
|
||||
} |
|
||||
const props = withDefaults(defineProps<PropType>(), {}); |
|
||||
|
|
||||
const selectRow = ref<TaskListenerVO | null>(); |
|
||||
const formDialog = useDialog({ |
|
||||
title: selectRow.value ? '编辑&保存' : '新增&保存' |
|
||||
}); |
|
||||
const { showConfig, elementType, updateProperties } = usePanel({ |
|
||||
element: toRaw(props.element) |
|
||||
}); |
|
||||
const { getModdle } = useModelerStore(); |
|
||||
const moddle = getModdle(); |
|
||||
|
|
||||
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>(); |
|
||||
const tableRef = ref<VxeTableInstance<TaskListenerVO>>(); |
|
||||
const formRef = ref<ElFormInstance>(); |
|
||||
|
|
||||
const initData: TaskListenerVO = { |
|
||||
event: '', |
|
||||
type: '', |
|
||||
className: '', |
|
||||
name: '', |
|
||||
params: [] |
|
||||
}; |
|
||||
const formData = ref<TaskListenerVO>({ ...initData }); |
|
||||
const currentIndex = ref(0); |
|
||||
const tableData = ref<TaskListenerVO[]>([]); |
|
||||
const tableRules = ref<VxeTablePropTypes.EditRules>({ |
|
||||
event: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
type: [{ required: true, message: '请选择', trigger: 'blur' }], |
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }], |
|
||||
className: [{ required: true, message: '请输入', trigger: 'blur' }] |
|
||||
}); |
|
||||
|
|
||||
const submitEvent = async () => { |
|
||||
const error = await listenerParamRef.value.validate(); |
|
||||
await formRef.value.validate((validate) => { |
|
||||
if (validate && !error) { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
formData.value.params = listenerParamRef.value.getTableData(); |
|
||||
if (selectRow.value) { |
|
||||
Object.assign(selectRow.value, formData.value); |
|
||||
} else { |
|
||||
$table.insertAt({ ...formData.value }, -1); |
|
||||
} |
|
||||
updateElement(); |
|
||||
formDialog.closeDialog(); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const insertEvent = async () => { |
|
||||
Object.assign(formData.value, initData); |
|
||||
selectRow.value = null; |
|
||||
formDialog.openDialog(); |
|
||||
}; |
|
||||
|
|
||||
const editEvent = (row: TaskListenerVO) => { |
|
||||
Object.assign(formData.value, row); |
|
||||
selectRow.value = row; |
|
||||
formDialog.openDialog(); |
|
||||
}; |
|
||||
const removeEvent = async (row: TaskListenerVO) => { |
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?'); |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
await $table.remove(row); |
|
||||
updateElement(); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const removeSelectRowEvent = async () => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
const selectCount = $table.getCheckboxRecords().length; |
|
||||
if (selectCount === 0) { |
|
||||
proxy?.$modal.msgWarning('请选择行'); |
|
||||
} else { |
|
||||
await $table.removeCheckboxRow(); |
|
||||
updateElement(); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
const updateElement = () => { |
|
||||
const $table = tableRef.value; |
|
||||
const data = $table.getTableData().fullData; |
|
||||
if (data.length) { |
|
||||
let extensionElements = props.element.businessObject.get('extensionElements'); |
|
||||
if (!extensionElements) { |
|
||||
extensionElements = moddle.create('bpmn:ExtensionElements'); |
|
||||
} |
|
||||
// 清除旧值 |
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? []; |
|
||||
data.forEach((item) => { |
|
||||
const taskListener = moddle.create('flowable:TaskListener'); |
|
||||
taskListener['event'] = item.event; |
|
||||
taskListener[item.type] = item.className; |
|
||||
if (item.params && item.params.length) { |
|
||||
item.params.forEach((field) => { |
|
||||
const fieldElement = moddle.create('flowable:Field'); |
|
||||
fieldElement['name'] = field.name; |
|
||||
fieldElement[field.type] = field.value; |
|
||||
taskListener.get('fields').push(fieldElement); |
|
||||
}); |
|
||||
} |
|
||||
extensionElements.get('values').push(taskListener); |
|
||||
}); |
|
||||
updateProperties({ extensionElements: extensionElements }); |
|
||||
} else { |
|
||||
const extensionElements = props.element.businessObject[`extensionElements`]; |
|
||||
if (extensionElements) { |
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? []; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => { |
|
||||
editEvent(row); |
|
||||
}; |
|
||||
|
|
||||
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({ |
|
||||
body: { |
|
||||
options: [ |
|
||||
[ |
|
||||
{ code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false }, |
|
||||
{ code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false } |
|
||||
] |
|
||||
] |
|
||||
}, |
|
||||
visibleMethod({ options, column }) { |
|
||||
const isDisabled = !column; |
|
||||
options.forEach((list) => { |
|
||||
list.forEach((item) => { |
|
||||
item.disabled = isDisabled; |
|
||||
}); |
|
||||
}); |
|
||||
return true; |
|
||||
} |
|
||||
}); |
|
||||
const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => { |
|
||||
const $table = tableRef.value; |
|
||||
if ($table) { |
|
||||
switch (menu.code) { |
|
||||
case 'edit': |
|
||||
editEvent(row); |
|
||||
break; |
|
||||
case 'remove': |
|
||||
removeEvent(row); |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
const initTableData = () => { |
|
||||
tableData.value = |
|
||||
props.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'; |
|
||||
return { |
|
||||
name: field.name, |
|
||||
type: fieldType, |
|
||||
value: field[fieldType] |
|
||||
}; |
|
||||
}) ?? [] |
|
||||
}; |
|
||||
}) ?? []; |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
initTableData(); |
|
||||
}); |
|
||||
|
|
||||
const typeSelect = [ |
|
||||
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' }, |
|
||||
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }, |
|
||||
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' } |
|
||||
]; |
|
||||
const eventSelect = [ |
|
||||
{ id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '创建', value: 'create' }, |
|
||||
{ id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '指派', value: 'assignment' }, |
|
||||
{ id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '完成', value: 'complete' }, |
|
||||
{ id: '68801972-85f1-482f-bd86-1fad015c26ed', label: '删除', value: 'delete' } |
|
||||
]; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.el-badge { |
|
||||
:deep(.el-badge__content) { |
|
||||
top: 10px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,71 +0,0 @@ |
|||||
<template> |
|
||||
<div class="design"> |
|
||||
<el-dialog v-model="visible" width="100%" fullscreen :title="title"> |
|
||||
<div class="modeler"> |
|
||||
<bpmn-design ref="bpmnDesignRef" @save-call-back="saveCallBack"></bpmn-design> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup name="Design"> |
|
||||
import { getInfo, editModelXml } from '@/api/workflow/model'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
import { ModelForm } from '@/api/workflow/model/types'; |
|
||||
import BpmnDesign from '@/bpmn/index.vue'; |
|
||||
import useDialog from '@/hooks/useDialog'; |
|
||||
const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>(); |
|
||||
const modelForm = ref<ModelForm>(); |
|
||||
const emit = defineEmits(['closeCallBack']); |
|
||||
const { visible, title } = useDialog({ |
|
||||
title: '编辑流程' |
|
||||
}); |
|
||||
const modelId = ref(''); |
|
||||
const open = async (id) => { |
|
||||
visible.value = true; |
|
||||
modelId.value = id; |
|
||||
const { data } = await getInfo(id); |
|
||||
modelForm.value = data; |
|
||||
bpmnDesignRef.value.initDiagram(modelForm.value.xml); |
|
||||
}; |
|
||||
//保存模型 |
|
||||
const saveCallBack = async (data) => { |
|
||||
await proxy?.$modal.confirm('是否确认保存？'); |
|
||||
data.loading.value = true; |
|
||||
modelForm.value.id = modelId.value; |
|
||||
modelForm.value.xml = data.xml; |
|
||||
modelForm.value.svg = data.svg; |
|
||||
modelForm.value.key = data.key; |
|
||||
modelForm.value.name = data.name; |
|
||||
editModelXml(modelForm.value).then((res) => { |
|
||||
if (res.code === 200) { |
|
||||
visible.value = false; |
|
||||
proxy?.$modal.msgSuccess('保存成功'); |
|
||||
emit('closeCallBack', data); |
|
||||
} |
|
||||
}); |
|
||||
data.loading.value = false; |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 对外暴露子组件方法 |
|
||||
*/ |
|
||||
defineExpose({ |
|
||||
open |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.design { |
|
||||
:deep(.el-dialog .el-dialog__body) { |
|
||||
max-height: 100% !important; |
|
||||
min-height: calc(100vh - 80px); |
|
||||
padding: 10px 0 10px 0 !important; |
|
||||
} |
|
||||
:deep(.el-dialog__header) { |
|
||||
padding: 0 0 5px 0 !important; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,411 +0,0 @@ |
|||||
<template> |
|
||||
<div v-loading="loading" class="bpmnDialogContainers"> |
|
||||
<el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto"> |
|
||||
<div class="header-div"> |
|
||||
<div> |
|
||||
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom"> |
|
||||
<el-button size="small" icon="Rank" @click="fitViewport" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip effect="dark" content="放大" placement="bottom"> |
|
||||
<el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip effect="dark" content="缩小" placement="bottom"> |
|
||||
<el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" /> |
|
||||
</el-tooltip> |
|
||||
</div> |
|
||||
<div> |
|
||||
<div class="tips-label"> |
|
||||
<div class="un-complete">未完成</div> |
|
||||
<div class="in-progress">进行中</div> |
|
||||
<div class="complete">已完成</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-header> |
|
||||
<div class="flow-containers"> |
|
||||
<el-container class="bpmn-el-container" style="align-items: stretch"> |
|
||||
<el-main style="padding: 0"> |
|
||||
<div ref="canvas" class="canvas" /> |
|
||||
</el-main> |
|
||||
</el-container> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer'; |
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'; |
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'; |
|
||||
import { ModuleDeclaration } from 'didi'; |
|
||||
import type { Canvas, ModdleElement } from 'bpmn'; |
|
||||
import EventBus from 'diagram-js/lib/core/EventBus'; |
|
||||
import Overlays from 'diagram-js/lib/features/overlays/Overlays'; |
|
||||
import processApi from '@/api/workflow/processInstance/index'; |
|
||||
|
|
||||
const canvas = ref<HTMLElement>(); |
|
||||
const modeler = ref<BpmnViewer>(); |
|
||||
const taskList = ref([]); |
|
||||
const zoom = ref(1); |
|
||||
const xml = ref(''); |
|
||||
const loading = ref(false); |
|
||||
const bpmnVisible = ref(true); |
|
||||
const historyList = ref([]); |
|
||||
|
|
||||
const init = (businessKey) => { |
|
||||
loading.value = true; |
|
||||
bpmnVisible.value = true; |
|
||||
nextTick(async () => { |
|
||||
if (modeler.value) modeler.value.destroy(); |
|
||||
modeler.value = new BpmnViewer({ |
|
||||
container: canvas.value, |
|
||||
additionalModules: [ |
|
||||
{ |
|
||||
//禁止滚轮滚动 |
|
||||
zoomScroll: ['value', ''] |
|
||||
}, |
|
||||
ZoomScrollModule, |
|
||||
MoveCanvasModule |
|
||||
] as ModuleDeclaration[] |
|
||||
}); |
|
||||
const resp = await processApi.getHistoryList(businessKey); |
|
||||
xml.value = resp.data.xml; |
|
||||
taskList.value = resp.data.taskList; |
|
||||
historyList.value = resp.data.historyList; |
|
||||
await createDiagram(xml.value); |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const initXml = (xmlStr: string) => { |
|
||||
loading.value = true; |
|
||||
bpmnVisible.value = true; |
|
||||
nextTick(async () => { |
|
||||
if (modeler.value) modeler.value.destroy(); |
|
||||
modeler.value = new BpmnViewer({ |
|
||||
container: canvas.value, |
|
||||
additionalModules: [ |
|
||||
{ |
|
||||
//禁止滚轮滚动 |
|
||||
zoomScroll: ['value', ''] |
|
||||
}, |
|
||||
ZoomScrollModule, |
|
||||
MoveCanvasModule |
|
||||
] as ModuleDeclaration[] |
|
||||
}); |
|
||||
xml.value = xmlStr; |
|
||||
await createDiagram(xml.value); |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const createDiagram = async (data) => { |
|
||||
try { |
|
||||
await modeler.value.importXML(data); |
|
||||
fitViewport(); |
|
||||
fillColor(); |
|
||||
loading.value = false; |
|
||||
addEventBusListener(); |
|
||||
} catch (err) { |
|
||||
console.log(err); |
|
||||
} |
|
||||
}; |
|
||||
const addEventBusListener = () => { |
|
||||
const eventBus = modeler.value.get<EventBus>('eventBus'); |
|
||||
const overlays = modeler.value.get<Overlays>('overlays'); |
|
||||
eventBus.on<ModdleElement>('element.hover', (e) => { |
|
||||
let data = historyList.value.find((t) => t.taskDefinitionKey === e.element.id); |
|
||||
if (e.element.type === 'bpmn:UserTask' && data) { |
|
||||
setTimeout(() => { |
|
||||
genNodeDetailBox(e, overlays, data); |
|
||||
}, 10); |
|
||||
} |
|
||||
}); |
|
||||
eventBus.on('element.out', (e) => { |
|
||||
overlays.clear(); |
|
||||
}); |
|
||||
}; |
|
||||
const genNodeDetailBox = (e, overlays, data) => { |
|
||||
overlays.add(e.element.id, { |
|
||||
position: { top: e.element.height, left: 0 }, |
|
||||
html: `<div class="verlays"> |
|
||||
<p>审批人员: ${data.nickName || ''}<p/> |
|
||||
<p>节点状态：${data.status || ''}</p> |
|
||||
<p>开始时间：${data.startTime || ''}</p> |
|
||||
<p>结束时间：${data.endTime || ''}</p> |
|
||||
<p>审批耗时：${data.runDuration || ''}</p> |
|
||||
<p>流程版本：v${data.version || ''}</p> |
|
||||
</div>` |
|
||||
}); |
|
||||
}; |
|
||||
// 让图能自适应屏幕 |
|
||||
const fitViewport = () => { |
|
||||
zoom.value = modeler.value.get<Canvas>('canvas').zoom('fit-viewport'); |
|
||||
const bbox = document.querySelector<SVGGElement>('.flow-containers .viewport').getBBox(); |
|
||||
const currentViewBox = modeler.value.get('canvas').viewbox(); |
|
||||
const elementMid = { |
|
||||
x: bbox.x + bbox.width / 2 - 65, |
|
||||
y: bbox.y + bbox.height / 2 |
|
||||
}; |
|
||||
modeler.value.get<Canvas>('canvas').viewbox({ |
|
||||
x: elementMid.x - currentViewBox.width / 2, |
|
||||
y: elementMid.y - currentViewBox.height / 2, |
|
||||
width: currentViewBox.width, |
|
||||
height: currentViewBox.height |
|
||||
}); |
|
||||
zoom.value = (bbox.width / currentViewBox.width) * 1.8; |
|
||||
}; |
|
||||
// 放大缩小 |
|
||||
const zoomViewport = (zoomIn = true) => { |
|
||||
zoom.value = modeler.value.get<Canvas>('canvas').zoom(); |
|
||||
zoom.value += zoomIn ? 0.1 : -0.1; |
|
||||
modeler.value.get<Canvas>('canvas').zoom(zoom.value); |
|
||||
}; |
|
||||
//上色 |
|
||||
const fillColor = () => { |
|
||||
const canvas = modeler.value.get<Canvas>('canvas'); |
|
||||
bpmnNodeList(modeler.value._definitions.rootElements[0].flowElements, canvas); |
|
||||
}; |
|
||||
//递归上色 |
|
||||
const bpmnNodeList = (flowElements, canvas) => { |
|
||||
flowElements.forEach((n) => { |
|
||||
if (n.$type === 'bpmn:UserTask') { |
|
||||
const completeTask = taskList.value.find((m) => m.key === n.id); |
|
||||
if (completeTask) { |
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
n.outgoing?.forEach((nn) => { |
|
||||
const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id); |
|
||||
if (targetTask) { |
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
} else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { |
|
||||
canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
nn.targetRef.outgoing.forEach((e) => { |
|
||||
gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed); |
|
||||
}); |
|
||||
} else if (nn.targetRef.$type === 'bpmn:ParallelGateway') { |
|
||||
canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
nn.targetRef.outgoing.forEach((e) => { |
|
||||
gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed); |
|
||||
}); |
|
||||
} else if (nn.targetRef.$type === 'bpmn:InclusiveGateway') { |
|
||||
canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
nn.targetRef.outgoing.forEach((e) => { |
|
||||
gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed); |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
} else if (n.$type === 'bpmn:ExclusiveGateway') { |
|
||||
n.outgoing.forEach((nn) => { |
|
||||
const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id); |
|
||||
if (targetTask) { |
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
}); |
|
||||
} else if (n.$type === 'bpmn:ParallelGateway') { |
|
||||
n.outgoing.forEach((nn) => { |
|
||||
const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id); |
|
||||
if (targetTask) { |
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
}); |
|
||||
} else if (n.$type === 'bpmn:InclusiveGateway') { |
|
||||
n.outgoing.forEach((nn) => { |
|
||||
const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id); |
|
||||
if (targetTask) { |
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
}); |
|
||||
} else if (n.$type === 'bpmn:SubProcess') { |
|
||||
const completeTask = taskList.value.find((m) => m.key === n.id); |
|
||||
if (completeTask) { |
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
bpmnNodeList(n.flowElements, canvas); |
|
||||
} else if (n.$type === 'bpmn:StartEvent') { |
|
||||
canvas.addMarker(n.id, 'startEvent'); |
|
||||
if (n.outgoing) { |
|
||||
n.outgoing.forEach((nn) => { |
|
||||
const completeTask = taskList.value.find((m) => m.key === nn.targetRef.id); |
|
||||
if (completeTask) { |
|
||||
canvas.addMarker(nn.id, 'highlight'); |
|
||||
canvas.addMarker(n.id, 'highlight'); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
} else if (n.$type === 'bpmn:EndEvent') { |
|
||||
canvas.addMarker(n.id, 'endEvent'); |
|
||||
const completeTask = taskList.value.find((m) => m.key === n.id); |
|
||||
if (completeTask) { |
|
||||
canvas.addMarker(completeTask.key, 'highlight'); |
|
||||
canvas.addMarker(n.id, 'highlight'); |
|
||||
return; |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
const gateway = (id, targetRefType, targetRefId, canvas, completed) => { |
|
||||
if (targetRefType === 'bpmn:ExclusiveGateway') { |
|
||||
canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo'); |
|
||||
canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
if (targetRefType === 'bpmn:ParallelGateway') { |
|
||||
canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo'); |
|
||||
canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
if (targetRefType === 'bpmn:InclusiveGateway') { |
|
||||
canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo'); |
|
||||
canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo'); |
|
||||
} |
|
||||
}; |
|
||||
defineExpose({ |
|
||||
init, |
|
||||
initXml |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.canvas { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.header-div { |
|
||||
display: flex; |
|
||||
padding: 10px 0; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.tips-label { |
|
||||
display: flex; |
|
||||
div { |
|
||||
margin-right: 10px; |
|
||||
padding: 5px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
.un-complete { |
|
||||
border: 1px solid #000; |
|
||||
} |
|
||||
.in-progress { |
|
||||
background-color: rgb(255, 237, 204); |
|
||||
border: 1px dashed orange; |
|
||||
} |
|
||||
.complete { |
|
||||
background-color: rgb(204, 230, 204); |
|
||||
border: 1px solid green; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.view-mode { |
|
||||
.el-header, |
|
||||
.el-aside, |
|
||||
.djs-palette, |
|
||||
.bjs-powered-by { |
|
||||
display: none; |
|
||||
} |
|
||||
.el-loading-mask { |
|
||||
background-color: initial; |
|
||||
} |
|
||||
.el-loading-spinner { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
.bpmn-el-container { |
|
||||
height: calc(100vh - 350px); |
|
||||
} |
|
||||
.flow-containers { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow-y: auto; |
|
||||
.canvas { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.load { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
:deep(.el-form-item__label) { |
|
||||
font-size: 13px; |
|
||||
} |
|
||||
|
|
||||
:deep(.djs-palette) { |
|
||||
left: 0 !important; |
|
||||
top: 0; |
|
||||
border-top: none; |
|
||||
} |
|
||||
|
|
||||
:deep(.djs-container svg) { |
|
||||
min-height: 650px; |
|
||||
} |
|
||||
|
|
||||
:deep(.startEvent.djs-shape .djs-visual > :nth-child(1)) { |
|
||||
fill: #77df6d !important; |
|
||||
} |
|
||||
:deep(.endEvent.djs-shape .djs-visual > :nth-child(1)) { |
|
||||
fill: #ee7b77 !important; |
|
||||
} |
|
||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) { |
|
||||
fill: green !important; |
|
||||
stroke: green !important; |
|
||||
fill-opacity: 0.2 !important; |
|
||||
} |
|
||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) { |
|
||||
fill: green !important; |
|
||||
} |
|
||||
:deep(.highlight.djs-shape .djs-visual > path) { |
|
||||
fill: green !important; |
|
||||
fill-opacity: 0.2 !important; |
|
||||
stroke: green !important; |
|
||||
} |
|
||||
:deep(.highlight.djs-connection > .djs-visual > path) { |
|
||||
stroke: green !important; |
|
||||
} |
|
||||
|
|
||||
// 边框滚动动画 |
|
||||
@keyframes path-animation { |
|
||||
from { |
|
||||
stroke-dashoffset: 100%; |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
stroke-dashoffset: 0%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(.highlight-todo.djs-connection > .djs-visual > path) { |
|
||||
animation: path-animation 60s; |
|
||||
animation-timing-function: linear; |
|
||||
animation-iteration-count: infinite; |
|
||||
stroke-dasharray: 4px !important; |
|
||||
stroke: orange !important; |
|
||||
fill-opacity: 0.2 !important; |
|
||||
marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr'); |
|
||||
} |
|
||||
|
|
||||
:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) { |
|
||||
animation: path-animation 60s; |
|
||||
animation-timing-function: linear; |
|
||||
animation-iteration-count: infinite; |
|
||||
stroke-dasharray: 4px !important; |
|
||||
stroke: orange !important; |
|
||||
fill: orange !important; |
|
||||
fill-opacity: 0.2 !important; |
|
||||
} |
|
||||
} |
|
||||
:deep(.verlays) { |
|
||||
width: 250px; |
|
||||
background: rgb(102, 102, 102); |
|
||||
border-radius: 4px; |
|
||||
border: 1px solid #ebeef5; |
|
||||
color: #fff; |
|
||||
padding: 15px 10px; |
|
||||
p { |
|
||||
line-height: 28px; |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,13 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<svg-icon icon-class="question" @click="goto" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
const url = ref('https://plus-doc.dromara.org/'); |
|
||||
|
|
||||
function goto() { |
|
||||
window.open(url.value); |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,13 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<svg-icon icon-class="github" @click="goto" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
const url = ref('https://gitee.com/dromara/RuoYi-Vue-Plus'); |
|
||||
|
|
||||
function goto() { |
|
||||
window.open(url.value); |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,254 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="部门id" prop="deptId"> |
|
||||
<el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="用户id" prop="userId"> |
|
||||
<el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="排序号" prop="orderNum"> |
|
||||
<el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="key键" prop="testKey"> |
|
||||
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="值" prop="value"> |
|
||||
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
|
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['demo:demo:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" |
|
||||
>删除</el-button |
|
||||
> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column v-if="true" label="主键" align="center" prop="id" /> |
|
||||
<el-table-column label="部门id" align="center" prop="deptId" /> |
|
||||
<el-table-column label="用户id" align="center" prop="userId" /> |
|
||||
<el-table-column label="排序号" align="center" prop="orderNum" /> |
|
||||
<el-table-column label="key键" align="center" prop="testKey" /> |
|
||||
<el-table-column label="值" align="center" prop="value" /> |
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-tooltip content="修改" placement="top"> |
|
||||
<el-button v-hasPermi="['demo:demo:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip content="删除" placement="top"> |
|
||||
<el-button v-hasPermi="['demo:demo:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" /> |
|
||||
</el-card> |
|
||||
<!-- 添加或修改测试单对话框 --> |
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body> |
|
||||
<el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px"> |
|
||||
<el-form-item label="部门id" prop="deptId"> |
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="用户id" prop="userId"> |
|
||||
<el-input v-model="form.userId" placeholder="请输入用户id" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="排序号" prop="orderNum"> |
|
||||
<el-input v-model="form.orderNum" placeholder="请输入排序号" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="key键" prop="testKey"> |
|
||||
<el-input v-model="form.testKey" placeholder="请输入key键" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="值" prop="value"> |
|
||||
<el-input v-model="form.value" placeholder="请输入值" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button> |
|
||||
<el-button @click="cancel">取 消</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup name="Demo" lang="ts"> |
|
||||
import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo'; |
|
||||
import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const demoList = ref<DemoVO[]>([]); |
|
||||
const buttonLoading = ref(false); |
|
||||
const loading = ref(true); |
|
||||
const showSearch = ref(true); |
|
||||
const ids = ref<Array<string | number>>([]); |
|
||||
const single = ref(true); |
|
||||
const multiple = ref(true); |
|
||||
const total = ref(0); |
|
||||
|
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const demoFormRef = ref<ElFormInstance>(); |
|
||||
|
|
||||
const dialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '' |
|
||||
}); |
|
||||
|
|
||||
const initFormData: DemoForm = { |
|
||||
id: undefined, |
|
||||
deptId: undefined, |
|
||||
userId: undefined, |
|
||||
orderNum: undefined, |
|
||||
testKey: undefined, |
|
||||
value: undefined |
|
||||
}; |
|
||||
const data = reactive<PageData<DemoForm, DemoQuery>>({ |
|
||||
form: { ...initFormData }, |
|
||||
queryParams: { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
deptId: undefined, |
|
||||
userId: undefined, |
|
||||
orderNum: undefined, |
|
||||
testKey: undefined, |
|
||||
value: undefined |
|
||||
}, |
|
||||
rules: { |
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }], |
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }], |
|
||||
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }], |
|
||||
orderNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }], |
|
||||
testKey: [{ required: true, message: 'key键不能为空', trigger: 'blur' }], |
|
||||
value: [{ required: true, message: '值不能为空', trigger: 'blur' }] |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const { queryParams, form, rules } = toRefs(data); |
|
||||
|
|
||||
/** 查询测试单列表 */ |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const res = await listDemo(queryParams.value); |
|
||||
demoList.value = res.rows; |
|
||||
total.value = res.total; |
|
||||
loading.value = false; |
|
||||
}; |
|
||||
|
|
||||
/** 取消按钮 */ |
|
||||
const cancel = () => { |
|
||||
reset(); |
|
||||
dialog.visible = false; |
|
||||
}; |
|
||||
|
|
||||
/** 表单重置 */ |
|
||||
const reset = () => { |
|
||||
form.value = { ...initFormData }; |
|
||||
demoFormRef.value?.resetFields(); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
queryParams.value.pageNum = 1; |
|
||||
getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
|
|
||||
/** 多选框选中数据 */ |
|
||||
const handleSelectionChange = (selection: DemoVO[]) => { |
|
||||
ids.value = selection.map((item) => item.id); |
|
||||
single.value = selection.length != 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
|
|
||||
/** 新增按钮操作 */ |
|
||||
const handleAdd = () => { |
|
||||
reset(); |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '添加测试单'; |
|
||||
}; |
|
||||
|
|
||||
/** 修改按钮操作 */ |
|
||||
const handleUpdate = async (row?: DemoVO) => { |
|
||||
reset(); |
|
||||
const _id = row?.id || ids.value[0]; |
|
||||
const res = await getDemo(_id); |
|
||||
Object.assign(form.value, res.data); |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '修改测试单'; |
|
||||
}; |
|
||||
|
|
||||
/** 提交按钮 */ |
|
||||
const submitForm = () => { |
|
||||
demoFormRef.value?.validate(async (valid: boolean) => { |
|
||||
if (valid) { |
|
||||
buttonLoading.value = true; |
|
||||
if (form.value.id) { |
|
||||
await updateDemo(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} else { |
|
||||
await addDemo(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('修改成功'); |
|
||||
dialog.visible = false; |
|
||||
await getList(); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row?: DemoVO) => { |
|
||||
const _ids = row?.id || ids.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false)); |
|
||||
await delDemo(_ids); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
await getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 导出按钮操作 */ |
|
||||
const handleExport = () => { |
|
||||
proxy?.download( |
|
||||
'demo/demo/export', |
|
||||
{ |
|
||||
...queryParams.value |
|
||||
}, |
|
||||
`demo_${new Date().getTime()}.xlsx` |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,258 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="树节点名" prop="treeName"> |
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
|
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
<el-table |
|
||||
ref="treeTableRef" |
|
||||
v-loading="loading" |
|
||||
:data="treeList" |
|
||||
row-key="id" |
|
||||
:default-expand-all="isExpandAll" |
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
|
||||
> |
|
||||
<el-table-column label="父id" align="center" prop="parentId" /> |
|
||||
<el-table-column label="部门id" align="center" prop="deptId" /> |
|
||||
<el-table-column label="用户id" align="center" prop="userId" /> |
|
||||
<el-table-column label="树节点名" align="center" prop="treeName" /> |
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-tooltip content="修改" placement="top"> |
|
||||
<el-button v-hasPermi="['demo:tree:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip content="新增" placement="top"> |
|
||||
<el-button v-hasPermi="['demo:tree:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip content="删除" placement="top"> |
|
||||
<el-button v-hasPermi="['demo:tree:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" /> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-card> |
|
||||
<!-- 添加或修改测试树对话框 --> |
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body> |
|
||||
<el-form ref="treeFormRef" :model="form" :rules="rules" label-width="80px"> |
|
||||
<el-form-item label="父id" prop="parentId"> |
|
||||
<el-tree-select |
|
||||
v-model="form.parentId" |
|
||||
:data="treeOptions" |
|
||||
:props="{ value: 'id', label: 'treeName', children: 'children' }" |
|
||||
value-key="id" |
|
||||
placeholder="请选择父id" |
|
||||
check-strictly |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="部门id" prop="deptId"> |
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="用户id" prop="userId"> |
|
||||
<el-input v-model="form.userId" placeholder="请输入用户id" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="值" prop="treeName"> |
|
||||
<el-input v-model="form.treeName" placeholder="请输入值" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button> |
|
||||
<el-button @click="cancel">取 消</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup name="Tree" lang="ts"> |
|
||||
import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree'; |
|
||||
import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types'; |
|
||||
|
|
||||
type TreeOption = { |
|
||||
id: number; |
|
||||
treeName: string; |
|
||||
children?: TreeOption[]; |
|
||||
}; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const treeList = ref<TreeVO[]>([]); |
|
||||
const treeOptions = ref<TreeOption[]>([]); |
|
||||
const buttonLoading = ref(false); |
|
||||
const showSearch = ref(true); |
|
||||
const isExpandAll = ref(true); |
|
||||
const loading = ref(false); |
|
||||
|
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const treeFormRef = ref<ElFormInstance>(); |
|
||||
const treeTableRef = ref<ElTableInstance>(); |
|
||||
|
|
||||
const dialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '' |
|
||||
}); |
|
||||
|
|
||||
const initFormData: TreeForm = { |
|
||||
id: undefined, |
|
||||
parentId: undefined, |
|
||||
deptId: undefined, |
|
||||
userId: undefined, |
|
||||
treeName: undefined |
|
||||
}; |
|
||||
|
|
||||
const data = reactive<PageData<TreeForm, TreeQuery>>({ |
|
||||
form: { ...initFormData }, |
|
||||
queryParams: { |
|
||||
parentId: undefined, |
|
||||
deptId: undefined, |
|
||||
userId: undefined, |
|
||||
treeName: undefined |
|
||||
}, |
|
||||
rules: { |
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }], |
|
||||
parentId: [{ required: true, message: '父id不能为空', trigger: 'blur' }], |
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }], |
|
||||
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }], |
|
||||
treeName: [{ required: true, message: '值不能为空', trigger: 'blur' }] |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const { queryParams, form, rules } = toRefs(data); |
|
||||
|
|
||||
/** 查询测试树列表 */ |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const res = await listTree(queryParams.value); |
|
||||
const data = proxy?.handleTree<TreeVO>(res.data, 'id', 'parentId'); |
|
||||
if (data) { |
|
||||
treeList.value = data; |
|
||||
loading.value = false; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
/** 查询测试树下拉树结构 */ |
|
||||
const getTreeselect = async () => { |
|
||||
const res = await listTree(); |
|
||||
treeOptions.value = []; |
|
||||
const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] }; |
|
||||
data.children = proxy?.handleTree<TreeOption>(res.data, 'id', 'parentId'); |
|
||||
treeOptions.value.push(data); |
|
||||
}; |
|
||||
|
|
||||
// 取消按钮 |
|
||||
const cancel = () => { |
|
||||
reset(); |
|
||||
dialog.visible = false; |
|
||||
}; |
|
||||
|
|
||||
// 表单重置 |
|
||||
const reset = () => { |
|
||||
form.value = { ...initFormData }; |
|
||||
treeFormRef.value?.resetFields(); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
|
|
||||
/** 新增按钮操作 */ |
|
||||
const handleAdd = (row?: TreeVO) => { |
|
||||
reset(); |
|
||||
getTreeselect(); |
|
||||
if (row && row.id) { |
|
||||
form.value.parentId = row.id; |
|
||||
} else { |
|
||||
form.value.parentId = 0; |
|
||||
} |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '添加测试树'; |
|
||||
}; |
|
||||
|
|
||||
/** 展开/折叠操作 */ |
|
||||
const handleToggleExpandAll = () => { |
|
||||
isExpandAll.value = !isExpandAll.value; |
|
||||
toggleExpandAll(treeList.value, isExpandAll.value); |
|
||||
}; |
|
||||
|
|
||||
/** 展开/折叠操作 */ |
|
||||
const toggleExpandAll = (data: TreeVO[], status: boolean) => { |
|
||||
data.forEach((item) => { |
|
||||
treeTableRef.value?.toggleRowExpansion(item, status); |
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status); |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 修改按钮操作 */ |
|
||||
const handleUpdate = async (row: TreeVO) => { |
|
||||
reset(); |
|
||||
await getTreeselect(); |
|
||||
if (row) { |
|
||||
form.value.parentId = row.id; |
|
||||
} |
|
||||
const res = await getTree(row.id); |
|
||||
Object.assign(form.value, res.data); |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '修改测试树'; |
|
||||
}; |
|
||||
|
|
||||
/** 提交按钮 */ |
|
||||
const submitForm = () => { |
|
||||
treeFormRef.value?.validate(async (valid: boolean) => { |
|
||||
if (valid) { |
|
||||
buttonLoading.value = true; |
|
||||
if (form.value.id) { |
|
||||
await updateTree(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} else { |
|
||||
await addTree(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
dialog.visible = false; |
|
||||
await getList(); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row: TreeVO) => { |
|
||||
await proxy?.$modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？'); |
|
||||
loading.value = true; |
|
||||
await delTree(row.id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,9 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<i-frame v-model:src="url"></i-frame> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
const url = ref(import.meta.env.VITE_APP_MONITOR_ADMIN); |
|
||||
</script> |
|
||||
@ -1,9 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<i-frame v-model:src="url"></i-frame> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
const url = ref(import.meta.env.VITE_APP_SNAILJOB_ADMIN); |
|
||||
</script> |
|
||||
@ -1,263 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="search"> |
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="分类名称" prop="categoryName"> |
|
||||
<el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="分类编码" prop="categoryCode"> |
|
||||
<el-input v-model="queryParams.categoryCode" placeholder="请输入分类编码" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</transition> |
|
||||
|
|
||||
<el-card shadow="never"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:category:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
<el-table |
|
||||
ref="categoryTableRef" |
|
||||
v-loading="loading" |
|
||||
:data="categoryList" |
|
||||
row-key="id" |
|
||||
:default-expand-all="isExpandAll" |
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
|
||||
> |
|
||||
<el-table-column label="分类名称" prop="categoryName" /> |
|
||||
<el-table-column label="分类编码" align="center" prop="categoryCode" /> |
|
||||
<el-table-column label="排序" align="center" prop="sortNum" /> |
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-tooltip content="修改" placement="top"> |
|
||||
<el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip content="新增" placement="top"> |
|
||||
<el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" /> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip content="删除" placement="top"> |
|
||||
<el-button v-hasPermi="['workflow:category:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" /> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-card> |
|
||||
<!-- 添加或修改流程分类对话框 --> |
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body> |
|
||||
<el-form ref="categoryFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px"> |
|
||||
<el-form-item label="父级分类" prop="parentId"> |
|
||||
<el-tree-select |
|
||||
v-model="form.parentId" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ value: 'id', label: 'categoryName', children: 'children' }" |
|
||||
value-key="id" |
|
||||
placeholder="请选择父级id" |
|
||||
check-strictly |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="分类名称" prop="categoryName"> |
|
||||
<el-input v-model="form.categoryName" placeholder="请输入分类名称" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="分类编码" prop="categoryCode"> |
|
||||
<el-input v-model="form.categoryCode" placeholder="请输入分类编码" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="排序" prop="sortNum"> |
|
||||
<el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button> |
|
||||
<el-button @click="cancel">取 消</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup name="Category" lang="ts"> |
|
||||
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category'; |
|
||||
import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types'; |
|
||||
|
|
||||
type CategoryOption = { |
|
||||
id: number; |
|
||||
categoryName: string; |
|
||||
children?: CategoryOption[]; |
|
||||
}; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const categoryList = ref<CategoryVO[]>([]); |
|
||||
const categoryOptions = ref<CategoryOption[]>([]); |
|
||||
const buttonLoading = ref(false); |
|
||||
const showSearch = ref(true); |
|
||||
const isExpandAll = ref(true); |
|
||||
const loading = ref(false); |
|
||||
|
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const categoryFormRef = ref<ElFormInstance>(); |
|
||||
const categoryTableRef = ref<ElTableInstance>(); |
|
||||
|
|
||||
const dialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '' |
|
||||
}); |
|
||||
|
|
||||
const initFormData: CategoryForm = { |
|
||||
id: undefined, |
|
||||
categoryName: undefined, |
|
||||
categoryCode: undefined, |
|
||||
parentId: undefined, |
|
||||
sortNum: 0 |
|
||||
}; |
|
||||
|
|
||||
const data = reactive<PageData<CategoryForm, CategoryQuery>>({ |
|
||||
form: { ...initFormData }, |
|
||||
queryParams: { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
categoryName: undefined, |
|
||||
categoryCode: undefined |
|
||||
}, |
|
||||
rules: { |
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }], |
|
||||
categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }], |
|
||||
categoryCode: [{ required: true, message: '分类编码不能为空', trigger: 'blur' }], |
|
||||
parentId: [{ required: true, message: '父级id不能为空', trigger: 'blur' }] |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const { queryParams, form, rules } = toRefs(data); |
|
||||
|
|
||||
/** 查询流程分类列表 */ |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const res = await listCategory(queryParams.value); |
|
||||
const data = proxy?.handleTree<CategoryVO>(res.data, 'id', 'parentId'); |
|
||||
if (data) { |
|
||||
categoryList.value = data; |
|
||||
loading.value = false; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
/** 查询流程分类下拉树结构 */ |
|
||||
const getTreeselect = async () => { |
|
||||
const res = await listCategory(); |
|
||||
categoryOptions.value = []; |
|
||||
const data: CategoryOption = { id: 0, categoryName: '顶级节点', children: [] }; |
|
||||
data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); |
|
||||
categoryOptions.value.push(data); |
|
||||
}; |
|
||||
|
|
||||
// 取消按钮 |
|
||||
const cancel = () => { |
|
||||
reset(); |
|
||||
dialog.visible = false; |
|
||||
}; |
|
||||
|
|
||||
// 表单重置 |
|
||||
const reset = () => { |
|
||||
form.value = { ...initFormData }; |
|
||||
categoryFormRef.value?.resetFields(); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
|
|
||||
/** 新增按钮操作 */ |
|
||||
const handleAdd = (row?: CategoryVO) => { |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '添加流程分类'; |
|
||||
nextTick(() => { |
|
||||
reset(); |
|
||||
getTreeselect(); |
|
||||
if (row != null && row.id) { |
|
||||
form.value.parentId = row.id; |
|
||||
} else { |
|
||||
form.value.parentId = 0; |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 展开/折叠操作 */ |
|
||||
const handleToggleExpandAll = () => { |
|
||||
isExpandAll.value = !isExpandAll.value; |
|
||||
toggleExpandAll(categoryList.value, isExpandAll.value); |
|
||||
}; |
|
||||
|
|
||||
/** 展开/折叠操作 */ |
|
||||
const toggleExpandAll = (data: CategoryVO[], status: boolean) => { |
|
||||
data.forEach((item) => { |
|
||||
categoryTableRef.value?.toggleRowExpansion(item, status); |
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status); |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 修改按钮操作 */ |
|
||||
const handleUpdate = (row: CategoryVO) => { |
|
||||
loading.value = true; |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '修改流程分类'; |
|
||||
nextTick(async () => { |
|
||||
reset(); |
|
||||
await getTreeselect(); |
|
||||
if (row != null) { |
|
||||
form.value.parentId = row.id; |
|
||||
} |
|
||||
const res = await getCategory(row.id); |
|
||||
loading.value = false; |
|
||||
Object.assign(form.value, res.data); |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 提交按钮 */ |
|
||||
const submitForm = () => { |
|
||||
categoryFormRef.value.validate(async (valid: boolean) => { |
|
||||
if (valid) { |
|
||||
buttonLoading.value = true; |
|
||||
if (form.value.id) { |
|
||||
await updateCategory(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} else { |
|
||||
await addCategory(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
dialog.visible = false; |
|
||||
await getList(); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row: CategoryVO) => { |
|
||||
await proxy?.$modal.confirm('是否确认删除流程分类编号为"' + row.id + '"的数据项？'); |
|
||||
loading.value = true; |
|
||||
await delCategory(row.id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,243 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="search"> |
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="表单名称" prop="formName"> |
|
||||
<el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</transition> |
|
||||
|
|
||||
<el-card shadow="never"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:formManage:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:formManage:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" |
|
||||
>修改</el-button |
|
||||
> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:formManage:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" |
|
||||
>删除</el-button |
|
||||
> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:formManage:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" :data="formManageList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column label="表单名称" align="center" prop="formName" /> |
|
||||
<el-table-column label="表单类型" align="center"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag :options="wf_form_type" :value="scope.row.formType"></dict-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="地址" align="center" prop="router" /> |
|
||||
<el-table-column label="备注" align="center" prop="remark" /> |
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-tooltip content="修改" placement="top"> |
|
||||
<el-button v-hasPermi="['workflow:formManage:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip content="删除" placement="top"> |
|
||||
<el-button v-hasPermi="['workflow:formManage:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" /> |
|
||||
</el-card> |
|
||||
<!-- 添加或修改表单管理对话框 --> |
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body> |
|
||||
<el-form ref="formManageFormRef" :model="form" :rules="rules" label-width="80px"> |
|
||||
<el-form-item label="表单名称" prop="formName"> |
|
||||
<el-input v-model="form.formName" placeholder="请输入表单名称" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="表单类型" prop="formType"> |
|
||||
<el-radio-group v-model="form.formType" @change="form.router = ''"> |
|
||||
<el-radio v-for="dict in wf_form_type" :key="dict.value" border :value="dict.value">{{ dict.label }}</el-radio> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="form.formType === 'static'" label="路由地址" prop="router"> |
|
||||
<el-input v-model="form.router" placeholder="请输入路由地址" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-else label="表单" prop="router"> |
|
||||
<el-input v-model="form.router" disabled placeholder="请选择表单"> |
|
||||
<template #append> |
|
||||
<el-button icon="Search" /> |
|
||||
</template> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="备注" prop="remark"> |
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button> |
|
||||
<el-button @click="cancel">取 消</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup name="FormManage" lang="ts"> |
|
||||
import { listFormManage, getFormManage, delFormManage, addFormManage, updateFormManage } from '@/api/workflow/formManage'; |
|
||||
import { FormManageVO, FormManageQuery, FormManageForm } from '@/api/workflow/formManage/types'; |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_form_type } = toRefs<any>(proxy?.useDict('wf_form_type')); |
|
||||
|
|
||||
const formManageList = ref<FormManageVO[]>([]); |
|
||||
const buttonLoading = ref(false); |
|
||||
const loading = ref(true); |
|
||||
const showSearch = ref(true); |
|
||||
const ids = ref<Array<string | number>>([]); |
|
||||
const single = ref(true); |
|
||||
const multiple = ref(true); |
|
||||
const total = ref(0); |
|
||||
|
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const formManageFormRef = ref<ElFormInstance>(); |
|
||||
|
|
||||
const dialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '' |
|
||||
}); |
|
||||
|
|
||||
const initFormData: FormManageForm = { |
|
||||
id: undefined, |
|
||||
formName: undefined, |
|
||||
formType: 'static', |
|
||||
remark: undefined |
|
||||
}; |
|
||||
const data = reactive<PageData<FormManageForm, FormManageQuery>>({ |
|
||||
form: { ...initFormData }, |
|
||||
queryParams: { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
formName: undefined, |
|
||||
formType: undefined |
|
||||
}, |
|
||||
rules: { |
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }], |
|
||||
formName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }], |
|
||||
formType: [{ required: true, message: '表单类型不能为空', trigger: 'change' }], |
|
||||
router: [{ required: true, message: '不能为空', trigger: 'blur' }] |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const { queryParams, form, rules } = toRefs(data); |
|
||||
|
|
||||
/** 查询表单管理列表 */ |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const res = await listFormManage(queryParams.value); |
|
||||
formManageList.value = res.rows; |
|
||||
total.value = res.total; |
|
||||
loading.value = false; |
|
||||
}; |
|
||||
|
|
||||
/** 取消按钮 */ |
|
||||
const cancel = () => { |
|
||||
reset(); |
|
||||
dialog.visible = false; |
|
||||
}; |
|
||||
|
|
||||
/** 表单重置 */ |
|
||||
const reset = () => { |
|
||||
form.value = { ...initFormData }; |
|
||||
formManageFormRef.value?.resetFields(); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
queryParams.value.pageNum = 1; |
|
||||
getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
|
|
||||
/** 多选框选中数据 */ |
|
||||
const handleSelectionChange = (selection: FormManageVO[]) => { |
|
||||
ids.value = selection.map((item) => item.id); |
|
||||
single.value = selection.length != 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
|
|
||||
/** 新增按钮操作 */ |
|
||||
const handleAdd = () => { |
|
||||
reset(); |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '添加表单管理'; |
|
||||
}; |
|
||||
|
|
||||
/** 修改按钮操作 */ |
|
||||
const handleUpdate = async (row?: FormManageVO) => { |
|
||||
reset(); |
|
||||
const _id = row?.id || ids.value[0]; |
|
||||
const res = await getFormManage(_id); |
|
||||
Object.assign(form.value, res.data); |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '修改表单管理'; |
|
||||
}; |
|
||||
|
|
||||
/** 提交按钮 */ |
|
||||
const submitForm = () => { |
|
||||
formManageFormRef.value?.validate(async (valid: boolean) => { |
|
||||
if (valid) { |
|
||||
buttonLoading.value = true; |
|
||||
if (form.value.id) { |
|
||||
await updateFormManage(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} else { |
|
||||
await addFormManage(form.value).finally(() => (buttonLoading.value = false)); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
dialog.visible = false; |
|
||||
await getList(); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row?: FormManageVO) => { |
|
||||
const _ids = row?.id || ids.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除表单管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false)); |
|
||||
await delFormManage(_ids); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
await getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 导出按钮操作 */ |
|
||||
const handleExport = () => { |
|
||||
proxy?.download( |
|
||||
'workflow/formManage/export', |
|
||||
{ |
|
||||
...queryParams.value |
|
||||
}, |
|
||||
`formManage_${new Date().getTime()}.xlsx` |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,242 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="search"> |
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="请假天数" prop="startLeaveDays"> |
|
||||
<el-input v-model="queryParams.startLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="endLeaveDays"> 至 </el-form-item> |
|
||||
<el-form-item prop="endLeaveDays"> |
|
||||
<el-input v-model="queryParams.endLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</transition> |
|
||||
|
|
||||
<el-card shadow="never"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:leave:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button v-hasPermi="['workflow:leave:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" :data="leaveList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column v-if="false" label="主键" align="center" prop="id" /> |
|
||||
<el-table-column label="请假类型" align="center"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag>{{ options.find((e) => e.value === scope.row.leaveType)?.label }}</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="开始时间" align="center" prop="startDate"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="结束时间" align="center" prop="endDate"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="请假天数" align="center" prop="leaveDays" /> |
|
||||
<el-table-column label="请假原因" align="center" prop="remark" /> |
|
||||
<el-table-column align="center" label="流程状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag :options="wf_business_status" :value="scope.row.status"></dict-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-button |
|
||||
v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'" |
|
||||
v-hasPermi="['workflow:leave:edit']" |
|
||||
size="small" |
|
||||
link |
|
||||
type="primary" |
|
||||
icon="Edit" |
|
||||
@click="handleUpdate(scope.row)" |
|
||||
>修改</el-button |
|
||||
> |
|
||||
<el-button |
|
||||
v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'" |
|
||||
v-hasPermi="['workflow:leave:remove']" |
|
||||
size="small" |
|
||||
link |
|
||||
type="primary" |
|
||||
icon="Delete" |
|
||||
@click="handleDelete(scope.row)" |
|
||||
>删除</el-button |
|
||||
> |
|
||||
<el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button> |
|
||||
<el-button |
|
||||
v-if="scope.row.status === 'waiting'" |
|
||||
link |
|
||||
size="small" |
|
||||
type="primary" |
|
||||
icon="Notification" |
|
||||
@click="handleCancelProcessApply(scope.row.id)" |
|
||||
>撤销</el-button |
|
||||
> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" /> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup name="Leave" lang="ts"> |
|
||||
import { delLeave, listLeave } from '@/api/workflow/leave'; |
|
||||
import { cancelProcessApply } from '@/api/workflow/processInstance'; |
|
||||
import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
|
||||
const leaveList = ref<LeaveVO[]>([]); |
|
||||
const loading = ref(true); |
|
||||
const showSearch = ref(true); |
|
||||
const ids = ref<Array<string | number>>([]); |
|
||||
const single = ref(true); |
|
||||
const multiple = ref(true); |
|
||||
const total = ref(0); |
|
||||
const options = [ |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '事假' |
|
||||
}, |
|
||||
{ |
|
||||
value: '2', |
|
||||
label: '调休' |
|
||||
}, |
|
||||
{ |
|
||||
value: '3', |
|
||||
label: '病假' |
|
||||
}, |
|
||||
{ |
|
||||
value: '4', |
|
||||
label: '婚假' |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
|
|
||||
const data = reactive<PageData<LeaveForm, LeaveQuery>>({ |
|
||||
form: {}, |
|
||||
queryParams: { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
startLeaveDays: undefined, |
|
||||
endLeaveDays: undefined |
|
||||
}, |
|
||||
rules: {} |
|
||||
}); |
|
||||
|
|
||||
const { queryParams } = toRefs(data); |
|
||||
|
|
||||
/** 查询请假列表 */ |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const res = await listLeave(queryParams.value); |
|
||||
leaveList.value = res.rows; |
|
||||
total.value = res.total; |
|
||||
loading.value = false; |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
queryParams.value.pageNum = 1; |
|
||||
getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
|
|
||||
/** 多选框选中数据 */ |
|
||||
const handleSelectionChange = (selection: LeaveVO[]) => { |
|
||||
ids.value = selection.map((item) => item.id); |
|
||||
single.value = selection.length != 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
|
|
||||
/** 新增按钮操作 */ |
|
||||
const handleAdd = () => { |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.push({ |
|
||||
path: `/workflow/leaveEdit/index`, |
|
||||
query: { |
|
||||
type: 'add' |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 修改按钮操作 */ |
|
||||
const handleUpdate = (row?: LeaveVO) => { |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.push({ |
|
||||
path: `/workflow/leaveEdit/index`, |
|
||||
query: { |
|
||||
id: row.id, |
|
||||
type: 'update' |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 查看按钮操作 */ |
|
||||
const handleView = (row?: LeaveVO) => { |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.push({ |
|
||||
path: `/workflow/leaveEdit/index`, |
|
||||
query: { |
|
||||
id: row.id, |
|
||||
type: 'view' |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row?: LeaveVO) => { |
|
||||
const _ids = row?.id || ids.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除请假编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false)); |
|
||||
await delLeave(_ids); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
await getList(); |
|
||||
}; |
|
||||
|
|
||||
/** 导出按钮操作 */ |
|
||||
const handleExport = () => { |
|
||||
proxy?.download( |
|
||||
'workflow/leave/export', |
|
||||
{ |
|
||||
...queryParams.value |
|
||||
}, |
|
||||
`leave_${new Date().getTime()}.xlsx` |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
/** 撤销按钮操作 */ |
|
||||
const handleCancelProcessApply = async (id: string) => { |
|
||||
await proxy?.$modal.confirm('是否确认撤销当前单据？'); |
|
||||
loading.value = true; |
|
||||
await cancelProcessApply(id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('撤销成功'); |
|
||||
}; |
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,252 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<el-card shadow="never"> |
|
||||
<div style="display: flex; justify-content: space-between"> |
|
||||
<div> |
|
||||
<el-button v-if="submitButtonShow" :loading="buttonLoading" type="info" @click="submitForm('draft')">暂存</el-button> |
|
||||
<el-button v-if="submitButtonShow" :loading="buttonLoading" type="primary" @click="submitForm('submit')">提 交</el-button> |
|
||||
<el-button v-if="approvalButtonShow" :loading="buttonLoading" type="primary" @click="approvalVerifyOpen">审批</el-button> |
|
||||
<el-button v-if="form && form.id && form.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button> |
|
||||
</div> |
|
||||
<div> |
|
||||
<el-button style="float: right" @click="goBack()">返回</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
<el-card shadow="never" style="height: 78vh; overflow-y: auto"> |
|
||||
<el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form" :rules="rules" label-width="80px"> |
|
||||
<el-form-item label="请假类型" prop="leaveType"> |
|
||||
<el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%"> |
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="请假时间"> |
|
||||
<el-date-picker |
|
||||
v-model="leaveTime" |
|
||||
value-format="YYYY-MM-DD HH:mm:ss" |
|
||||
type="daterange" |
|
||||
range-separator="To" |
|
||||
start-placeholder="开始时间" |
|
||||
end-placeholder="结束时间" |
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" |
|
||||
@change="changeLeaveTime()" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="请假天数" prop="leaveDays"> |
|
||||
<el-input v-model="form.leaveDays" disabled type="number" placeholder="请输入请假天数" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="请假原因" prop="remark"> |
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入请假原因" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
<!-- 提交组件 --> |
|
||||
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" /> |
|
||||
<!-- 审批记录 --> |
|
||||
<approvalRecord ref="approvalRecordRef" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup name="Leave" lang="ts"> |
|
||||
import { addLeave, getLeave, updateLeave } from '@/api/workflow/leave'; |
|
||||
import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types'; |
|
||||
import { startWorkFlow } from '@/api/workflow/task'; |
|
||||
import SubmitVerify from '@/components/Process/submitVerify.vue'; |
|
||||
import ApprovalRecord from '@/components/Process/approvalRecord.vue'; |
|
||||
import { AxiosResponse } from 'axios'; |
|
||||
import { StartProcessBo } from '@/api/workflow/workflowCommon/types'; |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const buttonLoading = ref(false); |
|
||||
const loading = ref(true); |
|
||||
const leaveTime = ref<Array<string>>([]); |
|
||||
//路由参数 |
|
||||
const routeParams = ref<Record<string, any>>({}); |
|
||||
const options = [ |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '事假' |
|
||||
}, |
|
||||
{ |
|
||||
value: '2', |
|
||||
label: '调休' |
|
||||
}, |
|
||||
{ |
|
||||
value: '3', |
|
||||
label: '病假' |
|
||||
}, |
|
||||
{ |
|
||||
value: '4', |
|
||||
label: '婚假' |
|
||||
} |
|
||||
]; |
|
||||
//提交组件 |
|
||||
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>(); |
|
||||
//审批记录组件 |
|
||||
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>(); |
|
||||
|
|
||||
const leaveFormRef = ref<ElFormInstance>(); |
|
||||
|
|
||||
const submitFormData = ref<StartProcessBo>({ |
|
||||
businessKey: '', |
|
||||
tableName: '', |
|
||||
variables: {} |
|
||||
}); |
|
||||
const taskVariables = ref<Record<string, any>>({}); |
|
||||
|
|
||||
const initFormData: LeaveForm = { |
|
||||
id: undefined, |
|
||||
leaveType: undefined, |
|
||||
startDate: undefined, |
|
||||
endDate: undefined, |
|
||||
leaveDays: undefined, |
|
||||
remark: undefined, |
|
||||
status: undefined |
|
||||
}; |
|
||||
const data = reactive<PageData<LeaveForm, LeaveQuery>>({ |
|
||||
form: { ...initFormData }, |
|
||||
queryParams: { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
startLeaveDays: undefined, |
|
||||
endLeaveDays: undefined |
|
||||
}, |
|
||||
rules: { |
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }], |
|
||||
leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }], |
|
||||
leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }], |
|
||||
leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }] |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const { form, rules } = toRefs(data); |
|
||||
|
|
||||
/** 表单重置 */ |
|
||||
const reset = () => { |
|
||||
form.value = { ...initFormData }; |
|
||||
leaveTime.value = []; |
|
||||
leaveFormRef.value?.resetFields(); |
|
||||
}; |
|
||||
|
|
||||
const changeLeaveTime = () => { |
|
||||
const startDate = new Date(leaveTime.value[0]).getTime(); |
|
||||
const endDate = new Date(leaveTime.value[1]).getTime(); |
|
||||
const diffInMilliseconds = endDate - startDate; |
|
||||
form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24)) + 1; |
|
||||
}; |
|
||||
/** 获取详情 */ |
|
||||
const getInfo = () => { |
|
||||
loading.value = true; |
|
||||
buttonLoading.value = false; |
|
||||
nextTick(async () => { |
|
||||
const res = await getLeave(routeParams.value.id); |
|
||||
Object.assign(form.value, res.data); |
|
||||
leaveTime.value = []; |
|
||||
leaveTime.value.push(form.value.startDate); |
|
||||
leaveTime.value.push(form.value.endDate); |
|
||||
loading.value = false; |
|
||||
buttonLoading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 提交按钮 */ |
|
||||
const submitForm = (status: string) => { |
|
||||
if (leaveTime.value.length === 0) { |
|
||||
proxy?.$modal.msgError('请假时间不能为空'); |
|
||||
return; |
|
||||
} |
|
||||
try { |
|
||||
leaveFormRef.value?.validate(async (valid: boolean) => { |
|
||||
form.value.startDate = leaveTime.value[0]; |
|
||||
form.value.endDate = leaveTime.value[1]; |
|
||||
if (valid) { |
|
||||
buttonLoading.value = true; |
|
||||
let res: AxiosResponse<LeaveVO>; |
|
||||
if (form.value.id) { |
|
||||
res = await updateLeave(form.value); |
|
||||
} else { |
|
||||
res = await addLeave(form.value); |
|
||||
} |
|
||||
form.value = res.data; |
|
||||
if (status === 'draft') { |
|
||||
buttonLoading.value = false; |
|
||||
proxy?.$modal.msgSuccess('暂存成功'); |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.go(-1); |
|
||||
} else { |
|
||||
await handleStartWorkFlow(res.data); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
} finally { |
|
||||
buttonLoading.value = false; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
//提交申请 |
|
||||
const handleStartWorkFlow = async (data: LeaveVO) => { |
|
||||
try { |
|
||||
submitFormData.value.tableName = 'test_leave'; |
|
||||
submitFormData.value.businessKey = data.id; |
|
||||
//流程变量 |
|
||||
taskVariables.value = { |
|
||||
entity: data, |
|
||||
leaveDays: data.leaveDays, |
|
||||
userList: ["1", "3"], |
|
||||
userList2: ["1", "3"] |
|
||||
}; |
|
||||
submitFormData.value.variables = taskVariables.value; |
|
||||
const resp = await startWorkFlow(submitFormData.value); |
|
||||
if (submitVerifyRef.value) { |
|
||||
buttonLoading.value = false; |
|
||||
submitVerifyRef.value.openDialog(resp.data.taskId); |
|
||||
} |
|
||||
} finally { |
|
||||
buttonLoading.value = false; |
|
||||
} |
|
||||
}; |
|
||||
//审批记录 |
|
||||
const handleApprovalRecord = () => { |
|
||||
approvalRecordRef.value.init(form.value.id); |
|
||||
}; |
|
||||
//提交回调 |
|
||||
const submitCallback = async () => { |
|
||||
await proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.go(-1); |
|
||||
}; |
|
||||
|
|
||||
//返回 |
|
||||
const goBack = () => { |
|
||||
proxy.$tab.closePage(proxy.$route); |
|
||||
proxy.$router.go(-1); |
|
||||
}; |
|
||||
//审批 |
|
||||
const approvalVerifyOpen = async () => { |
|
||||
submitVerifyRef.value.openDialog(routeParams.value.taskId); |
|
||||
}; |
|
||||
//校验提交按钮是否显示 |
|
||||
const submitButtonShow = computed(() => { |
|
||||
return ( |
|
||||
routeParams.value.type === 'add' || |
|
||||
(routeParams.value.type === 'update' && |
|
||||
form.value.status && |
|
||||
(form.value.status === 'draft' || form.value.status === 'cancel' || form.value.status === 'back')) |
|
||||
); |
|
||||
}); |
|
||||
|
|
||||
//校验审批按钮是否显示 |
|
||||
const approvalButtonShow = computed(() => { |
|
||||
return routeParams.value.type === 'approval' && form.value.status && form.value.status === 'waiting'; |
|
||||
}); |
|
||||
|
|
||||
onMounted(() => { |
|
||||
nextTick(async () => { |
|
||||
routeParams.value = proxy.$route.query; |
|
||||
reset(); |
|
||||
loading.value = false; |
|
||||
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') { |
|
||||
getInfo(); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,383 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<el-row :gutter="20"> |
|
||||
<!-- 流程分类树 --> |
|
||||
<el-col :lg="4" :xs="24" style=""> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> |
|
||||
<el-tree |
|
||||
ref="categoryTreeRef" |
|
||||
class="mt-2" |
|
||||
node-key="id" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ label: 'categoryName', children: 'children' }" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
highlight-current |
|
||||
default-expand-all |
|
||||
@node-click="handleNodeClick" |
|
||||
></el-tree> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
<el-col :lg="20" :xs="24"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="模型名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="模型KEY" prop="key"> |
|
||||
<el-input v-model="queryParams.key" placeholder="请输入模型KEY" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="primary" plain :disabled="multiple" icon="Download" @click="clickExportZip()">导出</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="modelList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column fixed align="center" type="index" label="序号" width="80"></el-table-column> |
|
||||
<el-table-column align="center" :show-overflow-tooltip="true" prop="name" label="模型名称" width="200"></el-table-column> |
|
||||
<el-table-column align="center" prop="key" label="模型KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="version" label="版本号" width="90"> |
|
||||
<template #default="scope"> v{{ scope.row.version }}.0</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="metaInfo" label="备注说明" min-width="130"></el-table-column> |
|
||||
<el-table-column align="center" :show-overflow-tooltip="true" prop="createTime" label="创建时间" width="160"></el-table-column> |
|
||||
<el-table-column align="center" :show-overflow-tooltip="true" prop="lastUpdateTime" label="更新时间" width="160"></el-table-column> |
|
||||
<el-table-column fixed="right" label="操作" align="center" width="170" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Pointer" @click="clickDesign(scope.row.id)">设计流程</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="ScaleToOriginal" @click="clickDeploy(scope.row.id, scope.row.key)"> |
|
||||
流程部署 |
|
||||
</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="CopyDocument" @click="handleCopy(scope.row)"> 复制模型 </el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="getList" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<!-- 设计流程开始 --> |
|
||||
<Design ref="designRef" @close-call-back="handleQuery"></Design> |
|
||||
<!-- 设计流程结束 --> |
|
||||
<!-- 添加模型对话框 --> |
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false"> |
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> |
|
||||
<el-form-item label="模型名称：" prop="name"> |
|
||||
<el-input v-model="form.name" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="模型KEY：" prop="key"> |
|
||||
<el-input v-model="form.key" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程分类" prop="categoryCode"> |
|
||||
<el-tree-select |
|
||||
v-model="form.categoryCode" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ value: 'categoryCode', label: 'categoryName', children: 'children' }" |
|
||||
value-key="categoryCode" |
|
||||
placeholder="请选择流程分类" |
|
||||
check-strictly |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="备注：" prop="description"> |
|
||||
<el-input v-model="form.description" type="textarea" maxlength="200" show-word-limit></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<span class="dialog-footer"> |
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
||||
<el-button @click="cancel">取 消</el-button> |
|
||||
</span> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup name="Model"> |
|
||||
import Design from '../../../components/BpmnDesign/index.vue'; |
|
||||
import { listModel, addModel, delModel, modelDeploy, getInfo, update } from '@/api/workflow/model'; |
|
||||
import { ModelQuery, ModelForm, ModelVO } from '@/api/workflow/model/types'; |
|
||||
import { listCategory } from '@/api/workflow/category'; |
|
||||
import { copyModel } from '@/api/workflow/model'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const formRef = ref<ElFormInstance>(); |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const categoryTreeRef = ref<ElTreeInstance>(); |
|
||||
const designRef = ref<InstanceType<typeof Design>>(); |
|
||||
|
|
||||
type CategoryOption = { |
|
||||
categoryCode: string; |
|
||||
categoryName: string; |
|
||||
children?: CategoryOption[]; |
|
||||
}; |
|
||||
|
|
||||
const buttonLoading = ref(false); |
|
||||
const loading = ref(true); |
|
||||
const ids = ref<string[]>([]); |
|
||||
const single = ref(true); |
|
||||
const multiple = ref(true); |
|
||||
const showSearch = ref(true); |
|
||||
const total = ref(0); |
|
||||
const modelList = ref<ModelVO[]>([]); |
|
||||
const categoryOptions = ref<CategoryOption[]>([]); |
|
||||
const categoryName = ref(''); |
|
||||
const billType = ref<string>(''); |
|
||||
|
|
||||
const dialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '' |
|
||||
}); |
|
||||
|
|
||||
const initFormData: ModelForm = { |
|
||||
id: '', |
|
||||
name: '', |
|
||||
key: '', |
|
||||
categoryCode: '', |
|
||||
xml: '', |
|
||||
svg: '', |
|
||||
description: '' |
|
||||
}; |
|
||||
const data = reactive<PageData<ModelForm, ModelQuery>>({ |
|
||||
form: { ...initFormData }, |
|
||||
queryParams: { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: '', |
|
||||
key: '', |
|
||||
categoryCode: '' |
|
||||
}, |
|
||||
rules: { |
|
||||
name: [{ required: true, message: '模型不能为空', trigger: 'blur' }], |
|
||||
key: [{ required: true, message: '模型KEY不能为空', trigger: 'blur' }], |
|
||||
categoryCode: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }] |
|
||||
} |
|
||||
}); |
|
||||
const { queryParams, form, rules } = toRefs(data); |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
getTreeselect(); |
|
||||
}); |
|
||||
|
|
||||
/** 节点单击事件 */ |
|
||||
const handleNodeClick = (data: ModelForm) => { |
|
||||
queryParams.value.categoryCode = data.categoryCode; |
|
||||
if (data.categoryCode === 'ALL') { |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
} |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
/** 通过条件过滤节点 */ |
|
||||
const filterNode = (value: string, data: any) => { |
|
||||
if (!value) return true; |
|
||||
return data.categoryName.indexOf(value) !== -1; |
|
||||
}; |
|
||||
/** 根据名称筛选部门树 */ |
|
||||
watchEffect( |
|
||||
() => { |
|
||||
categoryTreeRef.value?.filter(categoryName.value); |
|
||||
}, |
|
||||
{ |
|
||||
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 |
|
||||
} |
|
||||
); |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
queryParams.value.pageNum = 1; |
|
||||
getList(); |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: ModelVO[]) => { |
|
||||
ids.value = selection.map((item: ModelVO) => item.id); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
//分页 |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const resp = await listModel(queryParams.value); |
|
||||
modelList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}; |
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row?: ModelVO) => { |
|
||||
const id = row?.id || ids.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除模型id为【' + id + '】的数据项？'); |
|
||||
loading.value = true; |
|
||||
await delModel(id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
}; |
|
||||
// 流程部署 |
|
||||
const clickDeploy = async (id: string, key: string) => { |
|
||||
await proxy?.$modal.confirm('是否部署模型key为【' + key + '】流程？'); |
|
||||
loading.value = true; |
|
||||
await modelDeploy(id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('部署成功'); |
|
||||
}; |
|
||||
//新增打开 |
|
||||
const handleAdd = () => { |
|
||||
billType.value = 'add'; |
|
||||
ids.value = []; |
|
||||
getTreeselect(); |
|
||||
form.value = { ...initFormData }; |
|
||||
dialog.visible = true; |
|
||||
dialog.title = '新增模型'; |
|
||||
}; |
|
||||
//修改打开 |
|
||||
const handleUpdate = () => { |
|
||||
billType.value = 'update'; |
|
||||
dialog.title = '修改模型'; |
|
||||
nextTick(async () => { |
|
||||
await getTreeselect(); |
|
||||
const _id = ids.value[0]; |
|
||||
const res = await getInfo(_id); |
|
||||
Object.assign(form.value, res.data); |
|
||||
dialog.visible = true; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
//复制打开 |
|
||||
const handleCopy = (row?: ModelVO) => { |
|
||||
billType.value = 'copy'; |
|
||||
dialog.title = '复制模型'; |
|
||||
nextTick(async () => { |
|
||||
await getTreeselect(); |
|
||||
form.value = { ...initFormData }; |
|
||||
form.value.id = row.id; |
|
||||
dialog.visible = true; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 提交按钮 */ |
|
||||
const submitForm = () => { |
|
||||
formRef.value.validate(async (valid: boolean) => { |
|
||||
if (valid) { |
|
||||
buttonLoading.value = true; |
|
||||
if ('copy' === billType.value) { |
|
||||
await copyModel(form.value); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
} else if (ids.value && ids.value.length > 0 && 'update' === billType.value) { |
|
||||
form.value.id = ids.value[0]; |
|
||||
await update(form.value); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
} else { |
|
||||
initXml(form.value.key, form.value.name); |
|
||||
form.value.xml = xml.value; |
|
||||
await addModel(form.value); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
} |
|
||||
dialog.visible = false; |
|
||||
await getList(); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 取消按钮 */ |
|
||||
const cancel = () => { |
|
||||
reset(); |
|
||||
dialog.visible = false; |
|
||||
}; |
|
||||
|
|
||||
/** 表单重置 */ |
|
||||
const reset = () => { |
|
||||
form.value = { ...initFormData }; |
|
||||
formRef.value.resetFields(); |
|
||||
}; |
|
||||
|
|
||||
// 打开设计流程 |
|
||||
const clickDesign = async (id: string) => { |
|
||||
await designRef.value.open(id); |
|
||||
}; |
|
||||
// 导出流程模型 |
|
||||
const clickExportZip = () => { |
|
||||
proxy?.$download.zip('/workflow/model/export/zip/' + ids.value, '模型'); |
|
||||
}; |
|
||||
/** 查询流程分类下拉树结构 */ |
|
||||
const getTreeselect = async () => { |
|
||||
const res = await listCategory(); |
|
||||
categoryOptions.value = []; |
|
||||
const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] }; |
|
||||
data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); |
|
||||
categoryOptions.value.push(data); |
|
||||
}; |
|
||||
|
|
||||
const xml = ref<string>(''); |
|
||||
|
|
||||
const initXml = async (key: string, name: string) => { |
|
||||
xml.value = `<?xml version="1.0" encoding="UTF-8"?> |
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef"> |
|
||||
<process id="${key}" name="${name}"> |
|
||||
<startEvent id="startNode1" name="开始" /> |
|
||||
</process> |
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_flow"> |
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c"> |
|
||||
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke=""> |
|
||||
<omgdc:Bounds x="240" y="200" width="30" height="30" /> |
|
||||
<bpmndi:BPMNLabel> |
|
||||
<omgdc:Bounds x="242" y="237" width="23" height="14" /> |
|
||||
</bpmndi:BPMNLabel> |
|
||||
</bpmndi:BPMNShape> |
|
||||
</bpmndi:BPMNPlane> |
|
||||
</bpmndi:BPMNDiagram> |
|
||||
</definitions>`; |
|
||||
return xml; |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,45 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog v-model="data.visible" title="预览" width="70%" append-to-body destroy-on-close> |
|
||||
<div v-if="data.type === 'bpmn' && data.xmlStr"> |
|
||||
<BpmnViewer ref="bpmnViewerRef"></BpmnViewer> |
|
||||
</div> |
|
||||
<div v-if="data.type === 'xml' && data.xmlStr"> |
|
||||
<highlightjs language="xml" :code="data.xmlStr" /> |
|
||||
</div> |
|
||||
<template #footer> |
|
||||
<span v-if="data.type === 'xml'" class="dialog-footer"> </span> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import BpmnViewer from '@/components/BpmnView/index.vue'; |
|
||||
|
|
||||
const data = reactive({ |
|
||||
visible: false, |
|
||||
type: '', |
|
||||
xmlStr: '' |
|
||||
}); |
|
||||
|
|
||||
const bpmnViewerRef = ref<InstanceType<typeof BpmnViewer>>(); |
|
||||
type PreviewType = 'xml' | 'bpmn'; |
|
||||
//打开 |
|
||||
const openDialog = (xmlStr: string, type: PreviewType) => { |
|
||||
data.visible = true; |
|
||||
data.xmlStr = xmlStr; |
|
||||
data.type = type; |
|
||||
/** 流程图 */ |
|
||||
if (type === 'bpmn') { |
|
||||
/** 必须放在nextTick 否则第一次打开为空 */ |
|
||||
nextTick(() => { |
|
||||
bpmnViewerRef.value?.initXml(data.xmlStr); |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
/** |
|
||||
* 对外暴露子组件方法 |
|
||||
*/ |
|
||||
defineExpose({ |
|
||||
openDialog |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,517 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<el-row :gutter="20"> |
|
||||
<!-- 流程分类树 --> |
|
||||
<el-col :lg="4" :xs="24" style=""> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> |
|
||||
<el-tree |
|
||||
ref="categoryTreeRef" |
|
||||
class="mt-2" |
|
||||
node-key="id" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ label: 'categoryName', children: 'children' }" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
highlight-current |
|
||||
default-expand-all |
|
||||
@node-click="handleNodeClick" |
|
||||
></el-tree> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
<el-col :lg="20" :xs="24"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px"> |
|
||||
<el-form-item label="流程定义名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义KEY" prop="key"> |
|
||||
<el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" clearable @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="primary" icon="UploadFilled" @click="uploadDialog.visible = true">部署流程文件</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="processDefinitionList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column align="center" prop="name" label="流程定义名称" :show-overflow-tooltip="true"></el-table-column> |
|
||||
<el-table-column align="center" prop="key" label="标识KEY" width="80"></el-table-column> |
|
||||
<el-table-column align="center" prop="version" label="版本号" width="80"> |
|
||||
<template #default="scope"> v{{ scope.row.version }}.0</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="resourceName" label="流程XML" width="100" :show-overflow-tooltip="true"> |
|
||||
<template #default="scope"> |
|
||||
<el-link type="primary" @click="clickPreview(scope.row.id, 'xml')">{{ scope.row.resourceName }}</el-link> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="diagramResourceName" label="流程图片" width="100" :show-overflow-tooltip="true"> |
|
||||
<template #default="scope"> |
|
||||
<el-link type="primary" @click="clickPreview(scope.row.id, 'bpmn')">{{ scope.row.diagramResourceName }}</el-link> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="suspensionState" label="状态" width="80"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag v-if="scope.row.suspensionState == 1" type="success">激活</el-tag> |
|
||||
<el-tag v-else type="danger">挂起</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="deploymentTime" label="部署时间" width="120" :show-overflow-tooltip="true"></el-table-column> |
|
||||
<el-table-column align="center" label="表名/表单KEY" width="120" :show-overflow-tooltip="true"> |
|
||||
<template #default="scope"> |
|
||||
<span v-if="scope.row.wfDefinitionConfigVo"> |
|
||||
{{ scope.row.wfDefinitionConfigVo.tableName }} |
|
||||
</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column fixed="right" label="操作" align="center" width="220" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button |
|
||||
link |
|
||||
type="primary" |
|
||||
size="small" |
|
||||
:icon="scope.row.suspensionState === 1 ? 'Lock' : 'Unlock'" |
|
||||
@click="handleProcessDefState(scope.row)" |
|
||||
> |
|
||||
{{ scope.row.suspensionState === 1 ? '挂起流程' : '激活流程' }} |
|
||||
</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Document" @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)"> |
|
||||
历史版本 |
|
||||
</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Sort" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(scope.row)">绑定业务</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="getList" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<!-- 预览图片或xml --> |
|
||||
<process-preview ref="previewRef" /> |
|
||||
|
|
||||
<!-- 部署文件 --> |
|
||||
<el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="30%"> |
|
||||
<div v-loading="uploadDialogLoading"> |
|
||||
<div class="mb5"> |
|
||||
<el-text class="mx-1" size="large"><span class="text-danger">*</span>请选择部署流程分类：</el-text> |
|
||||
<el-tree-select |
|
||||
v-model="selectCategory" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ value: 'categoryCode', label: 'categoryName', children: 'children' }" |
|
||||
filterable |
|
||||
value-key="categoryCode" |
|
||||
:render-after-expand="false" |
|
||||
check-strictly |
|
||||
style="width: 240px" |
|
||||
/> |
|
||||
</div> |
|
||||
<el-upload |
|
||||
class="upload-demo" |
|
||||
drag |
|
||||
multiple |
|
||||
accept="application/zip,application/xml,.bpmn" |
|
||||
:before-upload="handlerBeforeUpload" |
|
||||
:http-request="handerDeployProcessFile" |
|
||||
> |
|
||||
<el-icon class="UploadFilled"><upload-filled /></el-icon> |
|
||||
<div class="el-upload__text"><em>点击上传，选择BPMN流程文件</em></div> |
|
||||
<div class="el-upload__text">仅支持 .zip、.bpmn20.xml、bpmn 格式文件</div> |
|
||||
<div class="el-upload__text">PS:如若部署请部署从本项目模型管理导出的数据</div> |
|
||||
</el-upload> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
|
|
||||
<!-- 历史版本 --> |
|
||||
<el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%"> |
|
||||
<el-table v-loading="loading" :data="processDefinitionHistoryList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column align="center" prop="name" label="流程定义名称" :show-overflow-tooltip="true" min-width="80"></el-table-column> |
|
||||
<el-table-column align="center" prop="key" label="标识KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="version" label="版本号" width="90"> |
|
||||
<template #default="scope"> v{{ scope.row.version }}.0</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true"> |
|
||||
<template #default="scope"> |
|
||||
<el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true"> |
|
||||
<template #default="scope"> |
|
||||
<el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="suspensionState" label="状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag v-if="scope.row.suspensionState == 1" type="success">激活</el-tag> |
|
||||
<el-tag v-else type="danger">挂起</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column> |
|
||||
<el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button |
|
||||
link |
|
||||
type="primary" |
|
||||
size="small" |
|
||||
:icon="scope.row.suspensionState === 1 ? 'Lock' : 'Unlock'" |
|
||||
@click="handleProcessDefState(scope.row)" |
|
||||
> |
|
||||
{{ scope.row.suspensionState === 1 ? '挂起流程' : '激活流程' }} |
|
||||
</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="text" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(scope.row)">绑定业务</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" icon="Sort" size="small" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" icon="Delete" size="small" @click="handleDelete(scope.row)">删除</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-dialog> |
|
||||
|
|
||||
<!-- 表单配置 --> |
|
||||
<el-dialog |
|
||||
v-model="definitionConfigDialog.visible" |
|
||||
:title="definitionConfigDialog.title" |
|
||||
width="650px" |
|
||||
append-to-body |
|
||||
:close-on-click-modal="false" |
|
||||
> |
|
||||
<el-form :model="definitionConfigForm" label-width="auto"> |
|
||||
<el-form-item label="流程KEY"> |
|
||||
<el-input v-model="definitionConfigForm.processKey" disabled /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="表名" prop="formId"> |
|
||||
<el-input v-model="definitionConfigForm.tableName" placeholder="示例:test_leave" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="备注"> |
|
||||
<el-input v-model="definitionConfigForm.remark" type="textarea" resize="none" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
|
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="definitionConfigDialog.visible = false">取消</el-button> |
|
||||
<el-button type="primary" @click="handlerSaveForm">保存</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup name="processDefinition"> |
|
||||
import { |
|
||||
listProcessDefinition, |
|
||||
definitionImage, |
|
||||
definitionXml, |
|
||||
deleteProcessDefinition, |
|
||||
updateDefinitionState, |
|
||||
convertToModel, |
|
||||
deployProcessFile, |
|
||||
getListByKey |
|
||||
} from '@/api/workflow/processDefinition'; |
|
||||
import { getByTableNameNotDefId, getByDefId, saveOrUpdate } from '@/api/workflow/definitionConfig'; |
|
||||
import ProcessPreview from './components/processPreview.vue'; |
|
||||
import { listCategory } from '@/api/workflow/category'; |
|
||||
import { CategoryVO } from '@/api/workflow/category/types'; |
|
||||
import { ProcessDefinitionQuery, ProcessDefinitionVO } from '@/api/workflow/processDefinition/types'; |
|
||||
import { DefinitionConfigForm } from '@/api/workflow/definitionConfig/types'; |
|
||||
import { UploadRequestOptions, ElMessage, ElMessageBox } from 'element-plus'; |
|
||||
|
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
|
|
||||
const previewRef = ref<InstanceType<typeof ProcessPreview>>(); |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const categoryTreeRef = ref<ElTreeInstance>(); |
|
||||
const definitionConfigForm = ref<DefinitionConfigForm>({}); |
|
||||
|
|
||||
type CategoryOption = { |
|
||||
categoryCode: string; |
|
||||
categoryName: string; |
|
||||
children?: CategoryOption[]; |
|
||||
}; |
|
||||
|
|
||||
const loading = ref(true); |
|
||||
const ids = ref<Array<any>>([]); |
|
||||
const deploymentIds = ref<Array<any>>([]); |
|
||||
const keys = ref<Array<any>>([]); |
|
||||
const single = ref(true); |
|
||||
const multiple = ref(true); |
|
||||
const showSearch = ref(true); |
|
||||
const total = ref(0); |
|
||||
const uploadDialogLoading = ref(false); |
|
||||
const processDefinitionList = ref<ProcessDefinitionVO[]>([]); |
|
||||
const processDefinitionHistoryList = ref<ProcessDefinitionVO[]>([]); |
|
||||
const categoryOptions = ref<CategoryOption[]>([]); |
|
||||
const categoryName = ref(''); |
|
||||
/** 部署文件分类选择 */ |
|
||||
const selectCategory = ref(); |
|
||||
|
|
||||
const uploadDialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '部署流程文件' |
|
||||
}); |
|
||||
|
|
||||
const processDefinitionDialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '历史版本' |
|
||||
}); |
|
||||
|
|
||||
const definitionConfigDialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '流程定义配置' |
|
||||
}); |
|
||||
|
|
||||
// 查询参数 |
|
||||
const queryParams = ref<ProcessDefinitionQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
key: undefined, |
|
||||
categoryCode: undefined |
|
||||
}); |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
getTreeselect(); |
|
||||
}); |
|
||||
|
|
||||
/** 节点单击事件 */ |
|
||||
const handleNodeClick = (data: CategoryVO) => { |
|
||||
queryParams.value.categoryCode = data.categoryCode; |
|
||||
if (data.categoryCode === 'ALL') { |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
} |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
/** 通过条件过滤节点 */ |
|
||||
const filterNode = (value: string, data: any) => { |
|
||||
if (!value) return true; |
|
||||
return data.categoryName.indexOf(value) !== -1; |
|
||||
}; |
|
||||
/** 根据名称筛选部门树 */ |
|
||||
watchEffect( |
|
||||
() => { |
|
||||
categoryTreeRef.value.filter(categoryName.value); |
|
||||
}, |
|
||||
{ |
|
||||
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 |
|
||||
} |
|
||||
); |
|
||||
|
|
||||
/** 查询流程分类下拉树结构 */ |
|
||||
const getTreeselect = async () => { |
|
||||
const res = await listCategory(); |
|
||||
categoryOptions.value = []; |
|
||||
const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] }; |
|
||||
data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); |
|
||||
categoryOptions.value.push(data); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
queryParams.value.pageNum = 1; |
|
||||
getList(); |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: any) => { |
|
||||
ids.value = selection.map((item: any) => item.id); |
|
||||
deploymentIds.value = selection.map((item: any) => item.deploymentId); |
|
||||
keys.value = selection.map((item: any) => item.key); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
//分页 |
|
||||
const getList = async () => { |
|
||||
loading.value = true; |
|
||||
const resp = await listProcessDefinition(queryParams.value); |
|
||||
processDefinitionList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}; |
|
||||
//获取历史流程定义 |
|
||||
const getProcessDefinitionHitoryList = async (id: string, key: string) => { |
|
||||
processDefinitionDialog.visible = true; |
|
||||
loading.value = true; |
|
||||
const resp = await getListByKey(key); |
|
||||
if (resp.data && resp.data.length > 0) { |
|
||||
processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id); |
|
||||
} |
|
||||
loading.value = false; |
|
||||
}; |
|
||||
|
|
||||
type PreviewType = 'xml' | 'bpmn'; |
|
||||
//预览 公共方法 |
|
||||
const clickPreview = async (id: string, type: PreviewType) => { |
|
||||
loading.value = true; |
|
||||
const resp = await definitionXml(id); |
|
||||
if (previewRef.value) { |
|
||||
const xmlStr = resp.data.xmlStr; |
|
||||
loading.value = false; |
|
||||
previewRef.value.openDialog(xmlStr, type); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row?: ProcessDefinitionVO) => { |
|
||||
const id = row?.id || ids.value; |
|
||||
const deployIds = row?.deploymentId || deploymentIds.value; |
|
||||
const defKeys = row?.key || keys.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除流程定义KEY为【' + defKeys + '】的数据项？'); |
|
||||
loading.value = true; |
|
||||
await deleteProcessDefinition(deployIds, id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
}; |
|
||||
/** 挂起/激活 */ |
|
||||
const handleProcessDefState = async (row: ProcessDefinitionVO) => { |
|
||||
let msg: string; |
|
||||
if (row.suspensionState === 1) { |
|
||||
msg = `暂停后，此流程下的所有任务都不允许往后流转，您确定挂起【${row.name || row.key}】吗？`; |
|
||||
} else { |
|
||||
msg = `启动后，此流程下的所有任务都允许往后流转，您确定激活【${row.name || row.key}】吗？`; |
|
||||
} |
|
||||
await proxy?.$modal.confirm(msg); |
|
||||
loading.value = true; |
|
||||
await updateDefinitionState(row.id).finally(() => (loading.value = false)); |
|
||||
await getList(); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
}; |
|
||||
/** 流程定义转换为模型 */ |
|
||||
const handleConvertToModel = async (row: ProcessDefinitionVO) => { |
|
||||
await proxy?.$modal.confirm('是否确认转换流程定义key为【' + row.key + '】的数据项？'); |
|
||||
await convertToModel(row.id).finally(() => (loading.value = false)); |
|
||||
getList(); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
}; |
|
||||
|
|
||||
//上传文件前的钩子 |
|
||||
const handlerBeforeUpload = () => { |
|
||||
if (selectCategory.value === 'ALL') { |
|
||||
proxy?.$modal.msgError('顶级节点不可作为分类！'); |
|
||||
return false; |
|
||||
} |
|
||||
if (!selectCategory.value) { |
|
||||
proxy?.$modal.msgError('请选择左侧要上传的分类！'); |
|
||||
return false; |
|
||||
} |
|
||||
}; |
|
||||
//部署文件 |
|
||||
const handerDeployProcessFile = (data: UploadRequestOptions): XMLHttpRequest => { |
|
||||
let formData = new FormData(); |
|
||||
uploadDialogLoading.value = true; |
|
||||
formData.append('file', data.file); |
|
||||
formData.append('categoryCode', selectCategory.value); |
|
||||
deployProcessFile(formData) |
|
||||
.then(() => { |
|
||||
uploadDialog.visible = false; |
|
||||
proxy?.$modal.msgSuccess('部署成功'); |
|
||||
handleQuery(); |
|
||||
}) |
|
||||
.finally(() => { |
|
||||
uploadDialogLoading.value = false; |
|
||||
}); |
|
||||
return; |
|
||||
}; |
|
||||
//打开流程定义配置 |
|
||||
const handleDefinitionConfigOpen = async (row: ProcessDefinitionVO) => { |
|
||||
definitionConfigDialog.visible = true; |
|
||||
definitionConfigForm.value.processKey = row.key; |
|
||||
definitionConfigForm.value.definitionId = row.id; |
|
||||
definitionConfigForm.value.version = row.version; |
|
||||
const resp = await getByDefId(row.id); |
|
||||
if (resp.data) { |
|
||||
definitionConfigForm.value = resp.data; |
|
||||
} else { |
|
||||
definitionConfigForm.value.tableName = undefined; |
|
||||
definitionConfigForm.value.remark = undefined; |
|
||||
} |
|
||||
}; |
|
||||
//保存表单 |
|
||||
const handlerSaveForm = async () => { |
|
||||
getByTableNameNotDefId(definitionConfigForm.value.tableName, definitionConfigForm.value.definitionId).then((res) => { |
|
||||
if (res.data && res.data.length > 0) { |
|
||||
ElMessageBox.confirm('表名已被【' + res.data[0].processKey + '】版本v' + res.data[0].version + '.0绑定确认后将会删除绑定的流程KEY!', '提示', { |
|
||||
confirmButtonText: '确认', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
}).then(() => { |
|
||||
saveOrUpdate(definitionConfigForm.value).then((resp) => { |
|
||||
if (resp.code === 200) { |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
definitionConfigDialog.visible = false; |
|
||||
getList(); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
} else { |
|
||||
saveOrUpdate(definitionConfigForm.value).then((resp) => { |
|
||||
if (resp.code === 200) { |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
definitionConfigDialog.visible = false; |
|
||||
getList(); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,364 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<el-row :gutter="20"> |
|
||||
<!-- 流程分类树 --> |
|
||||
<el-col :lg="4" :xs="24" style=""> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> |
|
||||
<el-tree |
|
||||
ref="categoryTreeRef" |
|
||||
class="mt-2" |
|
||||
node-key="id" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ label: 'categoryName', children: 'children' }" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
highlight-current |
|
||||
default-expand-all |
|
||||
@node-click="handleNodeClick" |
|
||||
></el-tree> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
<el-col :lg="20" :xs="24"> |
|
||||
<div class="mb-[10px]"> |
|
||||
<el-card shadow="hover" class="text-center"> |
|
||||
<el-radio-group v-model="tab" @change="changeTab(tab)"> |
|
||||
<el-radio-button value="running">运行中</el-radio-button> |
|
||||
<el-radio-button value="finish">已完成</el-radio-button> |
|
||||
</el-radio-group> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px"> |
|
||||
<el-form-item label="流程定义名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义KEY" prop="key"> |
|
||||
<el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90"> |
|
||||
<template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag> |
|
||||
<el-tag v-else type="danger">挂起</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" label="流程状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column> |
|
||||
<el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column> |
|
||||
<el-table-column label="操作" align="center" :width="130"> |
|
||||
<template #default="scope"> |
|
||||
<el-row v-if="tab === 'running'" :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300"> |
|
||||
<el-input v-model="deleteReason" resize="none" :rows="3" type="textarea" placeholder="请输入作废原因" /> |
|
||||
<div style="text-align: right; margin: 5px 0px 0px 0px"> |
|
||||
<el-button size="small" text @click="cancelPopover(scope.$index)">取消</el-button> |
|
||||
<el-button size="small" type="primary" @click="handleInvalid(scope.row)">确认</el-button> |
|
||||
</div> |
|
||||
<template #reference> |
|
||||
<el-button link type="primary" size="small" icon="CircleClose">作废</el-button> |
|
||||
</template> |
|
||||
</el-popover> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="handleQuery" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%"> |
|
||||
<el-table v-loading="loading" :data="processDefinitionHistoryList"> |
|
||||
<el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column> |
|
||||
<el-table-column align="center" prop="key" label="标识Key"></el-table-column> |
|
||||
<el-table-column align="center" prop="version" label="版本号" width="90"> |
|
||||
<template #default="scope"> v{{ scope.row.version }}.0</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="suspensionState" label="状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag v-if="scope.row.suspensionState == 1" type="success">激活</el-tag> |
|
||||
<el-tag v-else type="danger">挂起</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column> |
|
||||
<el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-button link type="primary" size="small" icon="Sort" @click="handleChange(scope.row.id)">切换</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { |
|
||||
getPageByRunning, |
|
||||
getPageByFinish, |
|
||||
deleteRunAndHisInstance, |
|
||||
deleteFinishAndHisInstance, |
|
||||
deleteRunInstance |
|
||||
} from '@/api/workflow/processInstance'; |
|
||||
import { getListByKey, migrationDefinition } from '@/api/workflow/processDefinition'; |
|
||||
import { listCategory } from '@/api/workflow/category'; |
|
||||
import { CategoryVO } from '@/api/workflow/category/types'; |
|
||||
import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types'; |
|
||||
import workflowCommon from '@/api/workflow/workflowCommon'; |
|
||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
//审批记录组件 |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const categoryTreeRef = ref<ElTreeInstance>(); |
|
||||
|
|
||||
// 遮罩层 |
|
||||
const loading = ref(true); |
|
||||
// 选中数组 |
|
||||
const ids = ref<Array<any>>([]); |
|
||||
// 选中业务id数组 |
|
||||
const businessKeys = ref<Array<any>>([]); |
|
||||
// 非单个禁用 |
|
||||
const single = ref(true); |
|
||||
// 非多个禁用 |
|
||||
const multiple = ref(true); |
|
||||
// 显示搜索条件 |
|
||||
const showSearch = ref(true); |
|
||||
// 总条数 |
|
||||
const total = ref(0); |
|
||||
// 流程定义id |
|
||||
const processDefinitionId = ref<string>(''); |
|
||||
// 模型定义表格数据 |
|
||||
const processInstanceList = ref<ProcessInstanceVO[]>([]); |
|
||||
const processDefinitionHistoryList = ref<Array<any>>([]); |
|
||||
const categoryOptions = ref<CategoryOption[]>([]); |
|
||||
const categoryName = ref(''); |
|
||||
|
|
||||
const processDefinitionDialog = reactive<DialogOption>({ |
|
||||
visible: false, |
|
||||
title: '流程定义' |
|
||||
}); |
|
||||
|
|
||||
type CategoryOption = { |
|
||||
categoryCode: string; |
|
||||
categoryName: string; |
|
||||
children?: CategoryOption[]; |
|
||||
}; |
|
||||
|
|
||||
const tab = ref('running'); |
|
||||
// 作废原因 |
|
||||
const deleteReason = ref(''); |
|
||||
// 查询参数 |
|
||||
const queryParams = ref<ProcessInstanceQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
key: undefined, |
|
||||
categoryCode: undefined |
|
||||
}); |
|
||||
|
|
||||
/** 节点单击事件 */ |
|
||||
const handleNodeClick = (data: CategoryVO) => { |
|
||||
queryParams.value.categoryCode = data.categoryCode; |
|
||||
if (data.categoryCode === 'ALL') { |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
} |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
/** 通过条件过滤节点 */ |
|
||||
const filterNode = (value: string, data: any) => { |
|
||||
if (!value) return true; |
|
||||
return data.categoryName.indexOf(value) !== -1; |
|
||||
}; |
|
||||
/** 根据名称筛选部门树 */ |
|
||||
watchEffect( |
|
||||
() => { |
|
||||
categoryTreeRef.value.filter(categoryName.value); |
|
||||
}, |
|
||||
{ |
|
||||
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 |
|
||||
} |
|
||||
); |
|
||||
|
|
||||
/** 查询流程分类下拉树结构 */ |
|
||||
const getTreeselect = async () => { |
|
||||
const res = await listCategory(); |
|
||||
categoryOptions.value = []; |
|
||||
const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] }; |
|
||||
data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); |
|
||||
categoryOptions.value.push(data); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
if ('running' === tab.value) { |
|
||||
getProcessInstanceRunningList(); |
|
||||
} else { |
|
||||
getProcessInstanceFinishList(); |
|
||||
} |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: ProcessInstanceVO[]) => { |
|
||||
ids.value = selection.map((item: any) => item.id); |
|
||||
businessKeys.value = selection.map((item: any) => item.businessKey); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
//分页 |
|
||||
const getProcessInstanceRunningList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByRunning(queryParams.value).then((resp) => { |
|
||||
processInstanceList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
//分页 |
|
||||
const getProcessInstanceFinishList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByFinish(queryParams.value).then((resp) => { |
|
||||
processInstanceList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row: any) => { |
|
||||
const businessKey = row.businessKey || businessKeys.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除业务id为【' + businessKey + '】的数据项？'); |
|
||||
loading.value = true; |
|
||||
if ('running' === tab.value) { |
|
||||
await deleteRunAndHisInstance(businessKey).finally(() => (loading.value = false)); |
|
||||
getProcessInstanceRunningList(); |
|
||||
} else { |
|
||||
await deleteFinishAndHisInstance(businessKey).finally(() => (loading.value = false)); |
|
||||
getProcessInstanceFinishList(); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
}; |
|
||||
const changeTab = async (data: string) => { |
|
||||
processInstanceList.value = []; |
|
||||
queryParams.value.pageNum = 1; |
|
||||
if ('running' === data) { |
|
||||
getProcessInstanceRunningList(); |
|
||||
} else { |
|
||||
getProcessInstanceFinishList(); |
|
||||
} |
|
||||
}; |
|
||||
/** 作废按钮操作 */ |
|
||||
const handleInvalid = async (row: ProcessInstanceVO) => { |
|
||||
await proxy?.$modal.confirm('是否确认作废业务id为【' + row.businessKey + '】的数据项？'); |
|
||||
loading.value = true; |
|
||||
if ('running' === tab.value) { |
|
||||
let param = { |
|
||||
businessKey: row.businessKey, |
|
||||
deleteReason: deleteReason.value |
|
||||
}; |
|
||||
await deleteRunInstance(param).finally(() => (loading.value = false)); |
|
||||
getProcessInstanceRunningList(); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
} |
|
||||
}; |
|
||||
const cancelPopover = async (index: any) => { |
|
||||
(proxy?.$refs[`popoverRef${index}`] as any).hide(); //关闭弹窗 |
|
||||
}; |
|
||||
//获取流程定义 |
|
||||
const getProcessDefinitionHitoryList = (id: string, key: string) => { |
|
||||
processDefinitionDialog.visible = true; |
|
||||
processDefinitionId.value = id; |
|
||||
loading.value = true; |
|
||||
getListByKey(key).then((resp) => { |
|
||||
if (resp.data && resp.data.length > 0) { |
|
||||
processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id); |
|
||||
} |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
//切换流程版本 |
|
||||
const handleChange = async (id: string) => { |
|
||||
await proxy?.$modal.confirm('是否确认切换？'); |
|
||||
loading.value = true; |
|
||||
migrationDefinition(processDefinitionId.value, id).then((resp) => { |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
getProcessInstanceRunningList(); |
|
||||
processDefinitionDialog.visible = false; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
/** 查看按钮操作 */ |
|
||||
const handleView = (row) => { |
|
||||
const routerJumpVo = reactive<RouterJumpVo>({ |
|
||||
wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
|
||||
wfNodeConfigVo: row.wfNodeConfigVo, |
|
||||
businessKey: row.businessKey, |
|
||||
taskId: row.id, |
|
||||
type: 'view' |
|
||||
}); |
|
||||
workflowCommon.routerJump(routerJumpVo, proxy); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getProcessInstanceRunningList(); |
|
||||
getTreeselect(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,286 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<div class="mb-[10px]"> |
|
||||
<el-card shadow="hover" class="text-center"> |
|
||||
<el-radio-group v-model="tab" @change="changeTab(tab)"> |
|
||||
<el-radio-button value="waiting">待办任务</el-radio-button> |
|
||||
<el-radio-button value="finish">已办任务</el-radio-button> |
|
||||
</el-radio-group> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="任务名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName"> |
|
||||
<el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey"> |
|
||||
<el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button type="primary" plain icon="Edit" :disabled="multiple" @click="handleUpdate">修改办理人</el-button> |
|
||||
</el-col> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="name" label="任务名称"></el-table-column> |
|
||||
<el-table-column align="center" prop="assigneeName" label="办理人"> |
|
||||
<template v-if="tab === 'waiting'" #default="scope"> |
|
||||
<template v-if="scope.row.participantVo && scope.row.assignee === null"> |
|
||||
<el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success"> |
|
||||
{{ item }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<el-tag type="success"> |
|
||||
{{ scope.row.assigneeName || '无' }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</template> |
|
||||
<template v-else-if="tab === 'finish'" #default="scope"> |
|
||||
<el-tag type="success"> |
|
||||
{{ scope.row.assigneeName || '无' }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" label="流程状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag v-if="tab === 'waiting'" :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> |
|
||||
<el-tag v-else type="success">已完成</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column v-if="tab === 'waiting'" align="center" prop="createTime" label="创建时间" width="160"></el-table-column> |
|
||||
<el-table-column v-if="tab === 'finish'" align="center" prop="startTime" label="创建时间" width="160"></el-table-column> |
|
||||
<el-table-column label="操作" align="center" :width="tab === 'finish' ? '80' : '151'"> |
|
||||
<template #default="scope"> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button> |
|
||||
</el-col> |
|
||||
<el-col v-if="tab === 'waiting'" :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Document" @click="handleInstanceVariable(scope.row)">流程变量</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row v-if="scope.row.multiInstance" :gutter="10" class="mb8"> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="Remove" @click="deleteMultiInstanceUser(scope.row)">减签</el-button> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<el-button link type="primary" size="small" icon="CirclePlus" @click="addMultiInstanceUser(scope.row)">加签</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="handleQuery" |
|
||||
/> |
|
||||
</el-card> |
|
||||
<!-- 加签组件 --> |
|
||||
<multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="handleQuery" /> |
|
||||
<!-- 选人组件 --> |
|
||||
<UserSelect ref="userSelectRef" :multiple="false" @confirm-call-back="submitCallback"></UserSelect> |
|
||||
<!-- 流程变量开始 --> |
|
||||
<el-dialog v-model="variableVisible" draggable title="流程变量" width="60%" :close-on-click-modal="false"> |
|
||||
<el-card v-loading="variableLoading" class="box-card"> |
|
||||
<template #header> |
|
||||
<div class="clearfix"> |
|
||||
<span |
|
||||
>流程定义名称：<el-tag>{{ processDefinitionName }}</el-tag></span |
|
||||
> |
|
||||
</div> |
|
||||
</template> |
|
||||
<div v-for="(v, index) in variableList" :key="index"> |
|
||||
<el-form v-if="v.key !== '_FLOWABLE_SKIP_EXPRESSION_ENABLED'" :label-position="'right'" label-width="150px"> |
|
||||
<el-form-item :label="v.key + '：'"> |
|
||||
{{ v.value }} |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</el-dialog> |
|
||||
<!-- 流程变量结束 --> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { getPageByAllTaskWait, getPageByAllTaskFinish, updateAssignee, getInstanceVariable } from '@/api/workflow/task'; |
|
||||
import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue'; |
|
||||
import UserSelect from '@/components/UserSelect'; |
|
||||
import { TaskQuery, TaskVO, VariableVo } from '@/api/workflow/task/types'; |
|
||||
import workflowCommon from '@/api/workflow/workflowCommon'; |
|
||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
//审批记录组件 |
|
||||
//加签组件 |
|
||||
const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>(); |
|
||||
//选人组件 |
|
||||
const userSelectRef = ref<InstanceType<typeof UserSelect>>(); |
|
||||
|
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
|
||||
// 遮罩层 |
|
||||
const loading = ref(true); |
|
||||
// 选中数组 |
|
||||
const ids = ref<Array<any>>([]); |
|
||||
// 非单个禁用 |
|
||||
const single = ref(true); |
|
||||
// 非多个禁用 |
|
||||
const multiple = ref(true); |
|
||||
// 显示搜索条件 |
|
||||
const showSearch = ref(true); |
|
||||
// 总条数 |
|
||||
const total = ref(0); |
|
||||
// 模型定义表格数据 |
|
||||
const taskList = ref([]); |
|
||||
const title = ref(''); |
|
||||
// 流程变量是否显示 |
|
||||
const variableVisible = ref(false); |
|
||||
const variableLoading = ref(true); |
|
||||
// 流程变量 |
|
||||
const variableList = ref<VariableVo>({ |
|
||||
key: '', |
|
||||
value: '' |
|
||||
}); |
|
||||
//流程定义名称 |
|
||||
const processDefinitionName = ref(); |
|
||||
// 查询参数 |
|
||||
const queryParams = ref<TaskQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
processDefinitionName: undefined, |
|
||||
processDefinitionKey: undefined |
|
||||
}); |
|
||||
const tab = ref('waiting'); |
|
||||
|
|
||||
//加签 |
|
||||
const addMultiInstanceUser = (row: TaskVO) => { |
|
||||
if (multiInstanceUserRef.value) { |
|
||||
title.value = '加签人员'; |
|
||||
multiInstanceUserRef.value.getAddMultiInstanceList(row.id, []); |
|
||||
} |
|
||||
}; |
|
||||
//减签 |
|
||||
const deleteMultiInstanceUser = (row: TaskVO) => { |
|
||||
if (multiInstanceUserRef.value) { |
|
||||
title.value = '减签人员'; |
|
||||
multiInstanceUserRef.value.getDeleteMultiInstanceList(row.id); |
|
||||
} |
|
||||
}; |
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
if ('waiting' === tab.value) { |
|
||||
getWaitingList(); |
|
||||
} else { |
|
||||
getFinishList(); |
|
||||
} |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: any) => { |
|
||||
ids.value = selection.map((item: any) => item.id); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
const changeTab = async (data: string) => { |
|
||||
taskList.value = []; |
|
||||
queryParams.value.pageNum = 1; |
|
||||
if ('waiting' === data) { |
|
||||
getWaitingList(); |
|
||||
} else { |
|
||||
getFinishList(); |
|
||||
} |
|
||||
}; |
|
||||
//分页 |
|
||||
const getWaitingList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByAllTaskWait(queryParams.value).then((resp) => { |
|
||||
taskList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
const getFinishList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByAllTaskFinish(queryParams.value).then((resp) => { |
|
||||
taskList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
//打开修改选人 |
|
||||
const handleUpdate = () => { |
|
||||
userSelectRef.value.open(); |
|
||||
}; |
|
||||
//修改办理人 |
|
||||
const submitCallback = async (data) => { |
|
||||
if (data && data.length > 0) { |
|
||||
await proxy?.$modal.confirm('是否确认提交？'); |
|
||||
loading.value = true; |
|
||||
await updateAssignee(ids.value, data[0].userId); |
|
||||
handleQuery(); |
|
||||
proxy?.$modal.msgSuccess('操作成功'); |
|
||||
} else { |
|
||||
proxy?.$modal.msgWarning('请选择用户！'); |
|
||||
} |
|
||||
}; |
|
||||
//查询流程变量 |
|
||||
const handleInstanceVariable = async (row: TaskVO) => { |
|
||||
variableLoading.value = true; |
|
||||
variableVisible.value = true; |
|
||||
processDefinitionName.value = row.processDefinitionName; |
|
||||
let data = await getInstanceVariable(row.id); |
|
||||
variableList.value = data.data; |
|
||||
variableLoading.value = false; |
|
||||
}; |
|
||||
/** 查看按钮操作 */ |
|
||||
const handleView = (row) => { |
|
||||
const routerJumpVo = reactive<RouterJumpVo>({ |
|
||||
wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
|
||||
wfNodeConfigVo: row.wfNodeConfigVo, |
|
||||
businessKey: row.businessKey, |
|
||||
taskId: row.id, |
|
||||
type: 'view' |
|
||||
}); |
|
||||
workflowCommon.routerJump(routerJumpVo, proxy); |
|
||||
}; |
|
||||
onMounted(() => { |
|
||||
getWaitingList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,255 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<el-row :gutter="20"> |
|
||||
<!-- 流程分类树 --> |
|
||||
<el-col :lg="4" :xs="24" style=""> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable /> |
|
||||
<el-tree |
|
||||
ref="categoryTreeRef" |
|
||||
class="mt-2" |
|
||||
node-key="id" |
|
||||
:data="categoryOptions" |
|
||||
:props="{ label: 'categoryName', children: 'children' }" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
highlight-current |
|
||||
default-expand-all |
|
||||
@node-click="handleNodeClick" |
|
||||
></el-tree> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
<el-col :lg="20" :xs="24"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px"> |
|
||||
<el-form-item label="流程定义名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column> |
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90"> |
|
||||
<template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag> |
|
||||
<el-tag v-else type="danger">挂起</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" label="流程状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column> |
|
||||
<el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column> |
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
||||
<template #default="scope"> |
|
||||
<el-tooltip |
|
||||
v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'" |
|
||||
content="修改" |
|
||||
placement="top" |
|
||||
> |
|
||||
<el-button link type="primary" icon="Edit" @click="handleOpen(scope.row, 'update')"></el-button> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip |
|
||||
v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'" |
|
||||
content="删除" |
|
||||
placement="top" |
|
||||
> |
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip placement="top" content="查看"> |
|
||||
<el-button link type="primary" icon="View" @click="handleOpen(scope.row, 'view')"></el-button> |
|
||||
</el-tooltip> |
|
||||
<el-tooltip v-if="scope.row.businessStatus === 'waiting'" content="撤销" placement="top"> |
|
||||
<el-button link type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.businessKey)"></el-button> |
|
||||
</el-tooltip> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="getList" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<!-- 提交组件 --> |
|
||||
<submitVerify ref="submitVerifyRef" @submit-callback="getList" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { getPageByCurrent, deleteRunAndHisInstance, cancelProcessApply } from '@/api/workflow/processInstance'; |
|
||||
import { listCategory } from '@/api/workflow/category'; |
|
||||
import { CategoryVO } from '@/api/workflow/category/types'; |
|
||||
import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types'; |
|
||||
import workflowCommon from '@/api/workflow/workflowCommon'; |
|
||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const categoryTreeRef = ref<ElTreeInstance>(); |
|
||||
|
|
||||
// 遮罩层 |
|
||||
const loading = ref(true); |
|
||||
// 选中数组 |
|
||||
const businessKeys = ref<Array<any>>([]); |
|
||||
// 非单个禁用 |
|
||||
const single = ref(true); |
|
||||
// 非多个禁用 |
|
||||
const multiple = ref(true); |
|
||||
// 显示搜索条件 |
|
||||
const showSearch = ref(true); |
|
||||
// 总条数 |
|
||||
const total = ref(0); |
|
||||
// 模型定义表格数据 |
|
||||
const processInstanceList = ref<ProcessInstanceVO[]>([]); |
|
||||
|
|
||||
const categoryOptions = ref<CategoryOption[]>([]); |
|
||||
const categoryName = ref(''); |
|
||||
|
|
||||
interface CategoryOption { |
|
||||
categoryCode: string; |
|
||||
categoryName: string; |
|
||||
children?: CategoryOption[]; |
|
||||
} |
|
||||
|
|
||||
const tab = ref('running'); |
|
||||
// 查询参数 |
|
||||
const queryParams = ref<ProcessInstanceQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
categoryCode: undefined |
|
||||
}); |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList(); |
|
||||
getTreeselect(); |
|
||||
}); |
|
||||
|
|
||||
/** 节点单击事件 */ |
|
||||
const handleNodeClick = (data: CategoryVO) => { |
|
||||
queryParams.value.categoryCode = data.categoryCode; |
|
||||
if (data.categoryCode === 'ALL') { |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
} |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
/** 通过条件过滤节点 */ |
|
||||
const filterNode = (value: string, data: any) => { |
|
||||
if (!value) return true; |
|
||||
return data.categoryName.indexOf(value) !== -1; |
|
||||
}; |
|
||||
/** 根据名称筛选部门树 */ |
|
||||
watchEffect( |
|
||||
() => { |
|
||||
categoryTreeRef.value.filter(categoryName.value); |
|
||||
}, |
|
||||
{ |
|
||||
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 |
|
||||
} |
|
||||
); |
|
||||
|
|
||||
/** 查询流程分类下拉树结构 */ |
|
||||
const getTreeselect = async () => { |
|
||||
const res = await listCategory(); |
|
||||
categoryOptions.value = []; |
|
||||
const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] }; |
|
||||
data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); |
|
||||
categoryOptions.value.push(data); |
|
||||
}; |
|
||||
|
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
getList(); |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.categoryCode = ''; |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: ProcessInstanceVO[]) => { |
|
||||
businessKeys.value = selection.map((item: any) => item.businessKey); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
//分页 |
|
||||
const getList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByCurrent(queryParams.value).then((resp) => { |
|
||||
processInstanceList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 删除按钮操作 */ |
|
||||
const handleDelete = async (row: ProcessInstanceVO) => { |
|
||||
const businessKey = row.businessKey || businessKeys.value; |
|
||||
await proxy?.$modal.confirm('是否确认删除业务id为【' + businessKey + '】的数据项？'); |
|
||||
loading.value = true; |
|
||||
if ('running' === tab.value) { |
|
||||
await deleteRunAndHisInstance(businessKey).finally(() => (loading.value = false)); |
|
||||
getList(); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('删除成功'); |
|
||||
}; |
|
||||
|
|
||||
/** 撤销按钮操作 */ |
|
||||
const handleCancelProcessApply = async (businessKey: string) => { |
|
||||
await proxy?.$modal.confirm('是否确认撤销当前单据？'); |
|
||||
loading.value = true; |
|
||||
if ('running' === tab.value) { |
|
||||
await cancelProcessApply(businessKey).finally(() => (loading.value = false)); |
|
||||
getList(); |
|
||||
} |
|
||||
proxy?.$modal.msgSuccess('撤销成功'); |
|
||||
}; |
|
||||
|
|
||||
//办理 |
|
||||
const handleOpen = async (row, type) => { |
|
||||
const routerJumpVo = reactive<RouterJumpVo>({ |
|
||||
wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
|
||||
wfNodeConfigVo: row.wfNodeConfigVo, |
|
||||
businessKey: row.businessKey, |
|
||||
taskId: row.id, |
|
||||
type: type |
|
||||
}); |
|
||||
workflowCommon.routerJump(routerJumpVo, proxy); |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,150 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="任务名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName"> |
|
||||
<el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey"> |
|
||||
<el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="name" label="任务名称"></el-table-column> |
|
||||
<el-table-column align="center" prop="assigneeName" label="办理人"> |
|
||||
<template #default="scope"> |
|
||||
<template v-if="scope.row.participantVo && scope.row.assignee === null"> |
|
||||
<el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success"> |
|
||||
{{ item }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<el-tag type="success"> |
|
||||
{{ scope.row.assigneeName || '无' }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" label="流程状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="操作" align="center" width="200"> |
|
||||
<template #default="scope"> |
|
||||
<el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="handleQuery" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { getPageByTaskCopy } from '@/api/workflow/task'; |
|
||||
import { TaskQuery } from '@/api/workflow/task/types'; |
|
||||
import workflowCommon from '@/api/workflow/workflowCommon'; |
|
||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
//审批记录组件 |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
|
||||
// 遮罩层 |
|
||||
const loading = ref(true); |
|
||||
// 选中数组 |
|
||||
const ids = ref<Array<any>>([]); |
|
||||
// 非单个禁用 |
|
||||
const single = ref(true); |
|
||||
// 非多个禁用 |
|
||||
const multiple = ref(true); |
|
||||
// 显示搜索条件 |
|
||||
const showSearch = ref(true); |
|
||||
// 总条数 |
|
||||
const total = ref(0); |
|
||||
// 模型定义表格数据 |
|
||||
const taskList = ref([]); |
|
||||
// 查询参数 |
|
||||
const queryParams = ref<TaskQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
processDefinitionName: undefined, |
|
||||
processDefinitionKey: undefined |
|
||||
}); |
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
getTaskCopyList(); |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: any) => { |
|
||||
ids.value = selection.map((item: any) => item.id); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
//分页 |
|
||||
const getTaskCopyList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByTaskCopy(queryParams.value).then((resp) => { |
|
||||
taskList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
/** 查看按钮操作 */ |
|
||||
const handleView = (row) => { |
|
||||
const routerJumpVo = reactive<RouterJumpVo>({ |
|
||||
wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
|
||||
wfNodeConfigVo: row.wfNodeConfigVo, |
|
||||
businessKey: row.businessKey, |
|
||||
taskId: row.id, |
|
||||
type: 'view' |
|
||||
}); |
|
||||
workflowCommon.routerJump(routerJumpVo, proxy); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getTaskCopyList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,136 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="任务名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName"> |
|
||||
<el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey"> |
|
||||
<el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="name" label="任务名称"></el-table-column> |
|
||||
<el-table-column align="center" prop="assigneeName" label="办理人"> |
|
||||
<template #default="scope"> |
|
||||
<el-tag type="success"> |
|
||||
{{ scope.row.assigneeName || '无' }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="startTime" label="创建时间" width="160"></el-table-column> |
|
||||
<el-table-column label="操作" align="center" width="200"> |
|
||||
<template #default="scope"> |
|
||||
<el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="handleQuery" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { getPageByTaskFinish } from '@/api/workflow/task'; |
|
||||
import { TaskQuery, TaskVO } from '@/api/workflow/task/types'; |
|
||||
import workflowCommon from '@/api/workflow/workflowCommon'; |
|
||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
//审批记录组件 |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
// 遮罩层 |
|
||||
const loading = ref(true); |
|
||||
// 选中数组 |
|
||||
const ids = ref<Array<any>>([]); |
|
||||
// 非单个禁用 |
|
||||
const single = ref(true); |
|
||||
// 非多个禁用 |
|
||||
const multiple = ref(true); |
|
||||
// 显示搜索条件 |
|
||||
const showSearch = ref(true); |
|
||||
// 总条数 |
|
||||
const total = ref(0); |
|
||||
// 模型定义表格数据 |
|
||||
const taskList = ref([]); |
|
||||
// 查询参数 |
|
||||
const queryParams = ref<TaskQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
processDefinitionName: undefined, |
|
||||
processDefinitionKey: undefined |
|
||||
}); |
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
getFinishList(); |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: any) => { |
|
||||
ids.value = selection.map((item: any) => item.id); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
const getFinishList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByTaskFinish(queryParams.value).then((resp) => { |
|
||||
taskList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
/** 查看按钮操作 */ |
|
||||
const handleView = (row: TaskVO) => { |
|
||||
const routerJumpVo = reactive<RouterJumpVo>({ |
|
||||
wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
|
||||
wfNodeConfigVo: row.wfNodeConfigVo, |
|
||||
businessKey: row.businessKey, |
|
||||
taskId: row.id, |
|
||||
type: 'view' |
|
||||
}); |
|
||||
workflowCommon.routerJump(routerJumpVo, proxy); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getFinishList(); |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,149 +0,0 @@ |
|||||
<template> |
|
||||
<div class="p-2"> |
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
|
||||
<div v-show="showSearch" class="mb-[10px]"> |
|
||||
<el-card shadow="hover"> |
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true"> |
|
||||
<el-form-item label="任务名称" prop="name"> |
|
||||
<el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName"> |
|
||||
<el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey"> |
|
||||
<el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</transition> |
|
||||
<el-card shadow="hover"> |
|
||||
<template #header> |
|
||||
<el-row :gutter="10" class="mb8"> |
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
|
||||
<el-table-column align="center" prop="name" label="任务名称"></el-table-column> |
|
||||
<el-table-column align="center" prop="assigneeName" label="办理人"> |
|
||||
<template #default="scope"> |
|
||||
<template v-if="scope.row.participantVo && scope.row.assignee === null"> |
|
||||
<el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success"> |
|
||||
{{ item }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<el-tag type="success"> |
|
||||
{{ scope.row.assigneeName || '无' }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" label="流程状态" min-width="70"> |
|
||||
<template #default="scope"> |
|
||||
<dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column> |
|
||||
<el-table-column label="操作" align="center" width="200"> |
|
||||
<template #default="scope"> |
|
||||
<el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<pagination |
|
||||
v-show="total > 0" |
|
||||
v-model:page="queryParams.pageNum" |
|
||||
v-model:limit="queryParams.pageSize" |
|
||||
:total="total" |
|
||||
@pagination="handleQuery" |
|
||||
/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { getPageByTaskWait } from '@/api/workflow/task'; |
|
||||
import { TaskQuery, TaskVO } from '@/api/workflow/task/types'; |
|
||||
import workflowCommon from '@/api/workflow/workflowCommon'; |
|
||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
|
||||
//提交组件 |
|
||||
const queryFormRef = ref<ElFormInstance>(); |
|
||||
// 遮罩层 |
|
||||
const loading = ref(true); |
|
||||
// 选中数组 |
|
||||
const ids = ref<Array<any>>([]); |
|
||||
// 非单个禁用 |
|
||||
const single = ref(true); |
|
||||
// 非多个禁用 |
|
||||
const multiple = ref(true); |
|
||||
// 显示搜索条件 |
|
||||
const showSearch = ref(true); |
|
||||
// 总条数 |
|
||||
const total = ref(0); |
|
||||
// 模型定义表格数据 |
|
||||
const taskList = ref([]); |
|
||||
// 查询参数 |
|
||||
const queryParams = ref<TaskQuery>({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
name: undefined, |
|
||||
processDefinitionName: undefined, |
|
||||
processDefinitionKey: undefined |
|
||||
}); |
|
||||
onMounted(() => { |
|
||||
getWaitingList(); |
|
||||
}); |
|
||||
/** 搜索按钮操作 */ |
|
||||
const handleQuery = () => { |
|
||||
getWaitingList(); |
|
||||
}; |
|
||||
/** 重置按钮操作 */ |
|
||||
const resetQuery = () => { |
|
||||
queryFormRef.value?.resetFields(); |
|
||||
queryParams.value.pageNum = 1; |
|
||||
queryParams.value.pageSize = 10; |
|
||||
handleQuery(); |
|
||||
}; |
|
||||
// 多选框选中数据 |
|
||||
const handleSelectionChange = (selection: any) => { |
|
||||
ids.value = selection.map((item: any) => item.id); |
|
||||
single.value = selection.length !== 1; |
|
||||
multiple.value = !selection.length; |
|
||||
}; |
|
||||
//分页 |
|
||||
const getWaitingList = () => { |
|
||||
loading.value = true; |
|
||||
getPageByTaskWait(queryParams.value).then((resp) => { |
|
||||
taskList.value = resp.rows; |
|
||||
total.value = resp.total; |
|
||||
loading.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
//办理 |
|
||||
const handleOpen = async (row: TaskVO) => { |
|
||||
const routerJumpVo = reactive<RouterJumpVo>({ |
|
||||
wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
|
||||
wfNodeConfigVo: row.wfNodeConfigVo, |
|
||||
businessKey: row.businessKey, |
|
||||
taskId: row.id, |
|
||||
type: 'approval' |
|
||||
}); |
|
||||
workflowCommon.routerJump(routerJumpVo, proxy); |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,18 +0,0 @@ |
|||||
# http://editorconfig.org |
|
||||
root = true |
|
||||
|
|
||||
# 空格替代Tab缩进在各种编辑工具下效果一致 |
|
||||
[*] |
|
||||
indent_style = space |
|
||||
indent_size = 4 |
|
||||
charset = utf-8 |
|
||||
end_of_line = lf |
|
||||
trim_trailing_whitespace = true |
|
||||
insert_final_newline = true |
|
||||
|
|
||||
[*.{json,yml,yaml}] |
|
||||
indent_size = 2 |
|
||||
|
|
||||
[*.md] |
|
||||
insert_final_newline = false |
|
||||
trim_trailing_whitespace = false |
|
||||
@ -1,48 +0,0 @@ |
|||||
###################################################################### |
|
||||
# Build Tools |
|
||||
|
|
||||
.gradle |
|
||||
/build/ |
|
||||
!gradle/wrapper/gradle-wrapper.jar |
|
||||
|
|
||||
target/ |
|
||||
!.mvn/wrapper/maven-wrapper.jar |
|
||||
|
|
||||
###################################################################### |
|
||||
# IDE |
|
||||
|
|
||||
### STS ### |
|
||||
.apt_generated |
|
||||
.classpath |
|
||||
.factorypath |
|
||||
.project |
|
||||
.settings |
|
||||
.springBeans |
|
||||
|
|
||||
### IntelliJ IDEA ### |
|
||||
.idea |
|
||||
*.iws |
|
||||
*.iml |
|
||||
*.ipr |
|
||||
|
|
||||
### JRebel ### |
|
||||
rebel.xml |
|
||||
|
|
||||
### NetBeans ### |
|
||||
nbproject/private/ |
|
||||
build/* |
|
||||
nbbuild/ |
|
||||
nbdist/ |
|
||||
.nb-gradle/ |
|
||||
|
|
||||
###################################################################### |
|
||||
# Others |
|
||||
*.log |
|
||||
*.xml.versionsBackup |
|
||||
*.swp |
|
||||
|
|
||||
!*/build/*.java |
|
||||
!*/build/*.html |
|
||||
!*/build/*.xml |
|
||||
|
|
||||
.flattened-pom.xml |
|
||||
@ -1,182 +0,0 @@ |
|||||
<img src="https://foruda.gitee.com/images/1679673773341074847/178e8451_1766278.png" width="50%" height="50%"> |
|
||||
<div style="height: 10px; clear: both;"></div> |
|
||||
|
|
||||
- - - |
|
||||
## 平台简介 |
|
||||
|
|
||||
[](https://gitee.com/dromara/RuoYi-Vue-Plus) |
|
||||
[](https://github.com/dromara/RuoYi-Vue-Plus) |
|
||||
[](https://gitee.com/dromara/RuoYi-Vue-Plus/blob/master/LICENSE) |
|
||||
[](https://www.jetbrains.com/?from=RuoYi-Vue-Plus) |
|
||||
<br> |
|
||||
[](https://gitee.com/dromara/RuoYi-Vue-Plus) |
|
||||
[]() |
|
||||
[]() |
|
||||
[]() |
|
||||
|
|
||||
> RuoYi-Vue-Plus 是重写 RuoYi-Vue 针对 `分布式集群与多租户` 场景全方位升级(不兼容原框架) |
|
||||
|
|
||||
> 项目代码、文档 均开源免费可商用 遵循开源协议在项目中保留开源协议文件即可<br> |
|
||||
活到老写到老 为兴趣而开源 为学习而开源 为让大家真正可以学到技术而开源 |
|
||||
|
|
||||
> 系统演示: [传送门](https://plus-doc.dromara.org/#/common/demo_system) |
|
||||
|
|
||||
> 前端项目地址: [plus-ui](https://gitee.com/JavaLionLi/plus-ui) |
|
||||
|
|
||||
> 文档地址: [plus-doc](https://plus-doc.dromara.org) |
|
||||
|
|
||||
## 赞助商 |
|
||||
|
|
||||
MaxKey 业界领先单点登录产品 - https://gitee.com/dromara/MaxKey <br> |
|
||||
CCFlow 驰聘低代码-流程-表单 - https://gitee.com/opencc/RuoYi-JFlow <br> |
|
||||
数舵科技 软件定制开发APP小程序等 - http://www.shuduokeji.com/ <br> |
|
||||
引迈信息 软件开发平台 - https://www.jnpfsoft.com/index.html?from=plus-doc <br> |
|
||||
[如何成为赞助商 加群联系作者详谈](https://plus-doc.dromara.org/#/common/add_group) |
|
||||
|
|
||||
# 本框架与RuoYi的功能差异 |
|
||||
|
|
||||
| 功能 | 本框架 | RuoYi | |
|
||||
|-------------|-------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| |
|
||||
| 前端项目 | 采用 Vue3 + TS + ElementPlus 重写 | 基于Vue2/Vue3 + JS | |
|
||||
| 后端项目结构 | 采用插件化 + 扩展包形式 结构解耦 易于扩展 | 模块相互注入耦合严重难以扩展 | |
|
||||
| 后端代码风格 | 严格遵守Alibaba规范与项目统一配置的代码格式化 | 代码书写与常规结构不同阅读障碍大 | |
|
||||
| Web容器 | 采用 Undertow 基于 XNIO 的高性能容器 | 采用 Tomcat | |
|
||||
| 权限认证 | 采用 Sa-Token、Jwt 静态使用功能齐全 低耦合 高扩展 | Spring Security 配置繁琐扩展性极差 | |
|
||||
| 权限注解 | 采用 Sa-Token 支持注解 登录校验、角色校验、权限校验、二级认证校验、HttpBasic校验、忽略校验<br/>角色与权限校验支持多种条件 如 `AND` `OR` 或 `权限 OR 角色` 等复杂表达式 | 只支持是否存在匹配 | |
|
||||
| 三方鉴权 | 采用 JustAuth 第三方登录组件 支持微信、钉钉等数十种三方认证 | 无 | |
|
||||
| 关系数据库支持 | 原生支持 MySQL、Oracle、PostgreSQL、SQLServer<br/>可同时使用异构切换(支持其他 mybatis-plus 支持的所有数据库 只需要增加jdbc依赖即可使用 达梦金仓等均有成功案例) | 支持 Mysql、Oracle 不支持同时使用、不支持异构切换 | |
|
||||
| 缓存数据库 | 支持 Redis 5-7 支持大部分新功能特性 如 分布式限流、分布式队列 | Redis 简单 get set 支持 | |
|
||||
| Redis客户端 | 采用 Redisson Redis官方推荐 基于Netty的客户端工具<br/>支持Redis 90%以上的命令 底层优化规避很多不正确的用法 例如: keys被转换为scan<br/>支持单机、哨兵、单主集群、多主集群等模式 | Lettuce + RedisTemplate 支持模式少 工具使用繁琐<br/>连接池采用 common-pool Bug多经常性出问题 | |
|
||||
| 缓存注解 | 采用 Spring-Cache 注解 对其扩展了实现支持了更多功能<br/>例如 过期时间 最大空闲时间 组最大长度等 只需一个注解即可完成数据自动缓存 | 需手动编写Redis代码逻辑 | |
|
||||
| ORM框架 | 采用 Mybatis-Plus 基于对象几乎不用写SQL全java操作 功能强大插件众多<br/>例如多租户插件 分页插件 乐观锁插件等等 | 采用 Mybatis 基于XML需要手写SQL | |
|
||||
| SQL监控 | 采用 p6spy 可输出完整SQL与执行时间监控 | log输出 需手动拼接sql与参数无法快速查看调试问题 | |
|
||||
| 数据分页 | 采用 Mybatis-Plus 分页插件<br/>框架对其进行了扩展 对象化分页对象 支持多种方式传参 支持前端多排序 复杂排序 | 采用 PageHelper 仅支持单查询分页 参数只能从param传 只能单排序 功能扩展性差 体验不好 | |
|
||||
| 数据权限 | 采用 Mybatis-Plus 插件 自行分析拼接SQL 无感式过滤<br/>只需为Mapper设置好注解条件 支持多种自定义 不限于部门角色 | 采用 注解+aop 实现 基于部门角色 生成的sql兼容性差 不支持其他业务扩展<br/>生成sql后需手动拼接到具体业务sql上 对于多个Mapper查询不起作用 | |
|
||||
| 数据脱敏 | 采用 注解 + jackson 序列化期间脱敏 支持不同模块不同的脱敏条件<br/>支持多种策略 如身份证、手机号、地址、邮箱、银行卡等 可自行扩展 | 无 | |
|
||||
| 数据加解密 | 采用 注解 + mybatis 拦截器 对存取数据期间自动加解密<br/>支持多种策略 如BASE64、AES、RSA、SM2、SM4等 | 无 | |
|
||||
| 接口传输加密 | 采用 动态 AES + RSA 加密请求 body 每一次请求秘钥都不同大幅度降低可破解性 | 无 | |
|
||||
| 数据翻译 | 采用 注解 + jackson 序列化期间动态修改数据 数据进行翻译<br/>支持多种模式: `映射翻译` `直接翻译` `其他扩展条件翻译` 接口化两步即可完成自定义扩展 内置多种翻译实现 | 无 | |
|
||||
| 多数据源框架 | 采用 dynamic-datasource 支持市面大部分数据库<br/>通过yml配置即可动态管理异构不同种类的数据库 也可通过前端页面添加数据源<br/>支持spel表达式从请求头参数等条件切换数据源 | 基于 druid 手动编写代码配置数据源 配置繁琐 支持性差 | |
|
||||
| 多数据源事务 | 采用 dynamic-datasource 支持多数据源不同种类的数据库事务回滚 | 不支持 | |
|
||||
| 数据库连接池 | 采用 HikariCP Spring官方内置连接池 配置简单 以性能与稳定性闻名天下 | 采用 druid bug众多 社区维护差 活跃度低 配置众多繁琐性能一般 | |
|
||||
| 数据库主键 | 采用 雪花ID 基于时间戳的 有序增长 唯一ID 再也不用为分库分表 数据合并主键冲突重复而发愁 | 采用 数据库自增ID 支持数据量有限 不支持多数据源主键唯一 | |
|
||||
| WebSocket协议 | 基于 Spring 封装的 WebSocket 协议 扩展了Token鉴权与分布式会话同步 不再只是基于单机的废物 | 无 | |
|
||||
| SSE推送 | 采用 Spring SSE 实现 扩展了Token鉴权与分布式会话同步 | 无 | |
|
||||
| 序列化 | 采用 Jackson Spring官方内置序列化 靠谱!!! | 采用 fastjson bugjson 远近闻名 | |
|
||||
| 分布式幂等 | 参考美团GTIS防重系统简化实现(细节可看文档) | 手动编写注解基于aop实现 | |
|
||||
| 分布式锁 | 采用 Lock4j 底层基于 Redisson | 无 | |
|
||||
| 分布式任务调度 | 采用 SnailJob 天生支持分布式 统一的管理中心 支持多种数据库 支持分片重试DAG任务流等 | 采用 Quartz 基于数据库锁性能差 集群需要做很多配置与改造 | |
|
||||
| 文件存储 | 采用 Minio 分布式文件存储 天生支持多机、多硬盘、多分片、多副本存储<br/>支持权限管理 安全可靠 文件可加密存储 | 采用 本机文件存储 文件裸漏 易丢失泄漏 不支持集群有单点效应 | |
|
||||
| 云存储 | 采用 AWS S3 协议客户端 支持 七牛、阿里、腾讯 等一切支持S3协议的厂家 | 不支持 | |
|
||||
| 短信 | 采用 sms4j 短信融合包 支持数十种短信厂家 只需在yml配置好厂家密钥即可使用 可多厂家共用 | 不支持 | |
|
||||
| 邮件 | 采用 mail-api 通用协议支持大部分邮件厂商 | 不支持 | |
|
||||
| 接口文档 | 采用 SpringDoc、javadoc 无注解零入侵基于java注释<br/>只需把注释写好 无需再写一大堆的文档注解了 | 采用 Springfox 已停止维护 需要编写大量的注解来支持文档生成 | |
|
||||
| 校验框架 | 采用 Validation 支持注解与工具类校验 注解支持国际化 | 仅支持注解 且注解不支持国际化 | |
|
||||
| Excel框架 | 采用 Alibaba EasyExcel 基于插件化<br/>框架对其增加了很多功能 例如 自动合并相同内容 自动排列布局 字典翻译等 | 基于 POI 手写实现 功能有限 复杂 扩展性差 | |
|
||||
| 工作流支持 | 支持各种复杂审批 转办 委派 加减签 会签 或签 票签 等功能 | 无 | |
|
||||
| 工具类框架 | 采用 Hutool、Lombok 上百种工具覆盖90%的使用需求 基于注解自动生成 get set 等简化框架大量代码 | 手写工具稳定性差易出问题 工具数量有限 代码臃肿需自己手写 get set 等 | |
|
||||
| 监控框架 | 采用 SpringBoot-Admin 基于SpringBoot官方 actuator 探针机制<br/>实时监控服务状态 框架还为其扩展了在线日志查看监控 | 无 | |
|
||||
| 链路追踪 | 采用 Apache SkyWalking 还在为请求不知道去哪了 到哪出了问题而烦恼吗<br/>用了它即可实时查看请求经过的每一处每一个节点 | 无 | |
|
||||
| 代码生成器 | 只需设计好表结构 一键生成所有crud代码与页面<br/>降低80%的开发量 把精力都投入到业务设计上<br/>框架为其适配MP、SpringDoc规范化代码 同时支持动态多数据源代码生成 | 代码生成原生结构 只支持单数据源生成 | |
|
||||
| 部署方式 | 支持 Docker 编排 一键搭建所有环境 让开发人员从此不再为搭建环境而烦恼 | 原生jar部署 其他环境需手动下载安装 自行搭建 | |
|
||||
| 项目路径修改 | 提供详细的修改方案文档 并为其做了一些改动 非常简单即可修改成自己想要的 | 需要做很多改造 文档说明有限 | |
|
||||
| 国际化 | 基于请求头动态返回不同语种的文本内容 开发难度低 有对应的工具类 支持大部分注解内容国际化 | 只提供基础功能 其他需自行编写扩展 | |
|
||||
| 代码单例测试 | 提供单例测试 使用方式编写方法与maven多环境单测插件 | 只提供基础功能 其他需自行编写扩展 | |
|
||||
| Demo案例 | 提供框架功能的实际使用案例 单独一个模块提供了很多很全 | 无 | |
|
||||
|
|
||||
|
|
||||
## 本框架与RuoYi的业务差异 |
|
||||
|
|
||||
| 业务 | 功能说明 | 本框架 | RuoYi | |
|
||||
|--------|----------------------------------------------------------------------|-----|------------------| |
|
||||
| 租户管理 | 系统内租户的管理 如:租户套餐、过期时间、用户数量、企业信息等 | 支持 | 无 | |
|
||||
| 租户套餐管理 | 系统内租户所能使用的套餐管理 如:套餐内所包含的菜单等 | 支持 | 无 | |
|
||||
| 客户端管理 | 系统内对接的所有客户端管理 如: pc端、小程序端等<br>支持动态授权登录方式 如: 短信登录、密码登录等 支持动态控制token时效 | 支持 | 无 | |
|
||||
| 用户管理 | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等 | 支持 | 支持 | |
|
||||
| 部门管理 | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限 | 支持 | 支持 | |
|
||||
| 岗位管理 | 配置系统用户所属担任职务 | 支持 | 支持 | |
|
||||
| 菜单管理 | 配置系统菜单、操作权限、按钮权限标识等 | 支持 | 支持 | |
|
||||
| 角色管理 | 角色菜单权限分配、设置角色按机构进行数据范围权限划分 | 支持 | 支持 | |
|
||||
| 字典管理 | 对系统中经常使用的一些较为固定的数据进行维护 | 支持 | 支持 | |
|
||||
| 参数管理 | 对系统动态配置常用参数 | 支持 | 支持 | |
|
||||
| 通知公告 | 系统通知公告信息发布维护 | 支持 | 支持 | |
|
||||
| 操作日志 | 系统正常操作日志记录和查询 系统异常信息日志记录和查询 | 支持 | 支持 | |
|
||||
| 登录日志 | 系统登录日志记录查询包含登录异常 | 支持 | 支持 | |
|
||||
| 文件管理 | 系统文件展示、上传、下载、删除等管理 | 支持 | 无 | |
|
||||
| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理 | 支持 | 无 | |
|
||||
| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作 | 支持 | 支持 | |
|
||||
| 定时任务 | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等 | 支持 | 仅支持任务与日志管理 | |
|
||||
| 代码生成 | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载 | 支持 | 仅支持单数据源 | |
|
||||
| 系统接口 | 根据业务代码自动生成相关的api接口文档 | 支持 | 支持 | |
|
||||
| 服务监控 | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等 | 支持 | 仅支持单机CPU、内存、磁盘监控 | |
|
||||
| 缓存监控 | 对系统的缓存信息查询，命令统计等。 | 支持 | 支持 | |
|
||||
| 在线构建器 | 拖动表单元素生成相应的HTML代码。 | 支持 | 支持 | |
|
||||
| 使用案例 | 系统的一些功能案例 | 支持 | 不支持 | |
|
||||
|
|
||||
## 参考文档 |
|
||||
|
|
||||
使用框架前请仔细阅读文档重点注意事项 |
|
||||
<br> |
|
||||
>[初始化项目 必看](https://plus-doc.dromara.org/#/ruoyi-vue-plus/quickstart/init) |
|
||||
>>[https://plus-doc.dromara.org/#/ruoyi-vue-plus/quickstart/init](https://plus-doc.dromara.org/#/ruoyi-vue-plus/quickstart/init) |
|
||||
> |
|
||||
>[专栏与视频 入门必看](https://plus-doc.dromara.org/#/common/column) |
|
||||
>>[https://plus-doc.dromara.org/#/common/column](https://plus-doc.dromara.org/#/common/column) |
|
||||
> |
|
||||
>[部署项目 必看](https://plus-doc.dromara.org/#/ruoyi-vue-plus/quickstart/deploy) |
|
||||
>>[https://plus-doc.dromara.org/#/ruoyi-vue-plus/quickstart/deploy](https://plus-doc.dromara.org/#/ruoyi-vue-plus/quickstart/deploy) |
|
||||
> |
|
||||
>[如何加群](https://plus-doc.dromara.org/#/common/add_group) |
|
||||
>>[https://plus-doc.dromara.org/#/common/add_group](https://plus-doc.dromara.org/#/common/add_group) |
|
||||
> |
|
||||
>[参考文档 Wiki](https://plus-doc.dromara.org) |
|
||||
>>[https://plus-doc.dromara.org](https://plus-doc.dromara.org) |
|
||||
|
|
||||
## 软件架构图 |
|
||||
|
|
||||
 |
|
||||
|
|
||||
## 如何参与贡献 |
|
||||
|
|
||||
[参与贡献的方式 https://plus-doc.dromara.org/#/common/contribution](https://plus-doc.dromara.org/#/common/contribution) |
|
||||
|
|
||||
## 捐献作者 |
|
||||
作者为兼职做开源,平时还需要工作,如果帮到了您可以请作者吃个盒饭 |
|
||||
<img src="https://foruda.gitee.com/images/1678975784848381069/d8661ed9_1766278.png" width="300px" height="450px" /> |
|
||||
<img src="https://foruda.gitee.com/images/1678975801230205215/6f96229d_1766278.png" width="300px" height="450px" /> |
|
||||
|
|
||||
## 演示图例 |
|
||||
|
|
||||
| | | |
|
||||
|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|  |  | |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
@ -1,23 +0,0 @@ |
|||||
package org.dromara; |
|
||||
|
|
||||
import org.springframework.boot.SpringApplication; |
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication; |
|
||||
import org.springframework.boot.context.metrics.buffering.BufferingApplicationStartup; |
|
||||
|
|
||||
/** |
|
||||
* 启动程序 |
|
||||
* |
|
||||
* @author Lion Li |
|
||||
*/ |
|
||||
|
|
||||
@SpringBootApplication |
|
||||
public class DromaraApplication { |
|
||||
|
|
||||
public static void main(String[] args) { |
|
||||
SpringApplication application = new SpringApplication(DromaraApplication.class); |
|
||||
application.setApplicationStartup(new BufferingApplicationStartup(2048)); |
|
||||
application.run(args); |
|
||||
System.out.println("盒子IM后台管理服务启动成功"); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,18 +0,0 @@ |
|||||
package org.dromara; |
|
||||
|
|
||||
import org.springframework.boot.builder.SpringApplicationBuilder; |
|
||||
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer; |
|
||||
|
|
||||
/** |
|
||||
* web容器中进行部署 |
|
||||
* |
|
||||
* @author Lion Li |
|
||||
*/ |
|
||||
public class DromaraServletInitializer extends SpringBootServletInitializer { |
|
||||
|
|
||||
@Override |
|
||||
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { |
|
||||
return application.sources(DromaraApplication.class); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
Loading…
Reference in new issue