Skip to content

phsl / admin

Go to a project
Commit cd0f1322 by 芋道源码 Committed by Gitee
Options

!712 BPM-子流程 

Merge pull request !712 from Lesan/feature/bpm-子流程
parents a061265d 2f8f5454
Showing with 227 additions and 24 deletions
src/assets/svgs/bpm/child-process.svg 0 → 100644
<svg t="1740116949537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" width="200" height="200"><path d="M440.32 296.96h283.30496v145.92h66.56V230.4H440.32V17.92H17.92v424.96H440.32V296.96zM373.76 376.32H84.48v-291.84H373.76v291.84zM586.24 588.8v143.36512H298.66496V586.24h-66.56v212.48512H586.24V1013.76H1008.64v-424.96h-422.4z m355.84 358.4h-289.28v-291.84H942.08v291.84z" p-id="1154" fill="#ffffff"></path></svg>
\ No newline at end of file
src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
...@@ -63,6 +63,12 @@ ...@@ -63,6 +63,12 @@
</div> </div>
<div class="handler-item-text">触发器</div> <div class="handler-item-text">触发器</div>
</div> </div>
<div class="handler-item" @click="addNode(NodeType.CHILD_PROCESS_NODE)">
<div class="handler-item-icon child-process">
<span class="iconfont icon-size icon-child-process"></span>
</div>
<div class="handler-item-text">子流程</div>
</div>
</div> </div>
<template #reference> <template #reference>
<div class="add-icon"><Icon icon="ep:plus" /></div> <div class="add-icon"><Icon icon="ep:plus" /></div>
...@@ -283,6 +289,25 @@ const addNode = (type: number) => { ...@@ -283,6 +289,25 @@ const addNode = (type: number) => {
} }
emits('update:childNode', data) emits('update:childNode', data)
} }
if (type === NodeType.CHILD_PROCESS_NODE) {
const data: SimpleFlowNode = {
id: 'Activity_' + generateUUID(),
name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
showText: '',
type: NodeType.CHILD_PROCESS_NODE,
childNode: props.childNode,
childProcessSetting: {
calledProcessDefinitionKey: '',
calledProcessDefinitionName: '',
async: false,
skipStartUserNode: false,
startUserSetting: {
type: 1
}
}
}
emits('update:childNode', data)
}
} }
</script> </script>
......
src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
...@@ -54,12 +54,18 @@ ...@@ -54,12 +54,18 @@
:flow-node="currentNode" :flow-node="currentNode"
@update:flow-node="handleModelValueUpdate" @update:flow-node="handleModelValueUpdate"
/> />
<!-- 触发器节点 --> <!-- 触发器节点 -->
<TriggerNode <TriggerNode
v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE" v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
:flow-node="currentNode" :flow-node="currentNode"
@update:flow-node="handleModelValueUpdate" @update:flow-node="handleModelValueUpdate"
/> />
<!-- 子流程节点 -->
<ChildProcessNode
v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
/>
<!-- 递归显示孩子节点 --> <!-- 递归显示孩子节点 -->
<ProcessNodeTree <ProcessNodeTree
v-if="currentNode && currentNode.childNode" v-if="currentNode && currentNode.childNode"
...@@ -85,6 +91,7 @@ import InclusiveNode from './nodes/InclusiveNode.vue' ...@@ -85,6 +91,7 @@ import InclusiveNode from './nodes/InclusiveNode.vue'
import DelayTimerNode from './nodes/DelayTimerNode.vue' import DelayTimerNode from './nodes/DelayTimerNode.vue'
import RouterNode from './nodes/RouterNode.vue' import RouterNode from './nodes/RouterNode.vue'
import TriggerNode from './nodes/TriggerNode.vue' import TriggerNode from './nodes/TriggerNode.vue'
import ChildProcessNode from './nodes/ChildProcessNode.vue'
import { SimpleFlowNode, NodeType } from './consts' import { SimpleFlowNode, NodeType } from './consts'
import { useWatchNode } from './node' import { useWatchNode } from './node'
defineOptions({ defineOptions({
......
src/components/SimpleProcessDesignerV2/src/consts.ts
...@@ -39,6 +39,11 @@ export enum NodeType { ...@@ -39,6 +39,11 @@ export enum NodeType {
TRIGGER_NODE = 15, TRIGGER_NODE = 15,
/** /**
* 子流程节点
*/
CHILD_PROCESS_NODE = 20,
/**
* 条件节点 * 条件节点
*/ */
CONDITION_NODE = 50, CONDITION_NODE = 50,
...@@ -128,6 +133,8 @@ export interface SimpleFlowNode { ...@@ -128,6 +133,8 @@ export interface SimpleFlowNode {
reasonRequire?: boolean reasonRequire?: boolean
// 触发器设置 // 触发器设置
triggerSetting?: TriggerSetting triggerSetting?: TriggerSetting
// 子流程
childProcessSetting?: ChildProcessSetting
} }
// 候选人策略枚举 （ 用于审批节点。抄送节点 ) // 候选人策略枚举 （ 用于审批节点。抄送节点 )
export enum CandidateStrategy { export enum CandidateStrategy {
...@@ -512,6 +519,7 @@ NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器') ...@@ -512,6 +519,7 @@ NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器')
NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点') NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点')
NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器') NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器')
NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人') NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人')
NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程')
export const NODE_DEFAULT_NAME = new Map<number, string>() export const NODE_DEFAULT_NAME = new Map<number, string>()
NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人') NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
...@@ -522,6 +530,7 @@ NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器') ...@@ -522,6 +530,7 @@ NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器')
NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支') NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支')
NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器') NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器')
NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人') NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人')
NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程')
// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
export const CANDIDATE_STRATEGY: DictDataVO[] = [ export const CANDIDATE_STRATEGY: DictDataVO[] = [
...@@ -788,12 +797,38 @@ export type FormTriggerSetting = { ...@@ -788,12 +797,38 @@ export type FormTriggerSetting = {
// 更新表单字段配置 // 更新表单字段配置
updateFormFields?: Record<string, any>, updateFormFields?: Record<string, any>,
// 删除表单字段配置 // 删除表单字段配置
deleteFields?: string[] deleteFields?: string[]
} }
export const TRIGGER_TYPES: DictDataVO[] = [ export const TRIGGER_TYPES: DictDataVO[] = [
{ label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST }, { label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST },
{ label: '异步 HTTP 请求', value: TriggerTypeEnum.ASYNC_HTTP_REQUEST }, { label: '异步 HTTP 请求', value: TriggerTypeEnum.ASYNC_HTTP_REQUEST },
{ label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE }, { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE },
{ label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE } { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE }
] ]
/**
* 子流程节点结构定义
*/
export type ChildProcessSetting = {
calledProcessDefinitionKey: string
calledProcessDefinitionName: string
async: boolean,
inVariables?: IOParameter[],
outVariables?: IOParameter[],
skipStartUserNode: boolean,
startUserSetting: StartUserSetting,
}
export type IOParameter = {
source: string
sourceExpression: string
target: string
targetExpression: string
}
export type StartUserSetting = {
type: number
formField?: string
emptyType?: number
}
src/components/SimpleProcessDesignerV2/src/nodes/ChildProcessNode.vue 0 → 100644
<template>
<div class="node-wrapper">
<div class="node-container">
<div
class="node-box"
:class="[
{ 'node-config-error': !currentNode.showText },
`${useTaskStatusClass(currentNode?.activityStatus)}`
]"
>
<div class="node-title-container">
<div
:class="`node-title-icon ${currentNode.childProcessSetting?.async === true ? 'async-child-process' : 'child-process'}`"
>
<span
:class="`iconfont ${currentNode.childProcessSetting?.async === true ? 'icon-async-child-process' : 'icon-child-process'}`"
>
</span>
</div>
<input
v-if="!readonly && showInput"
type="text"
class="editable-title-input"
@blur="blurEvent()"
v-mountedFocus
v-model="currentNode.name"
:placeholder="currentNode.name"
/>
<div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }}
</div>
</div>
<div class="node-content" @click="openNodeConfig">
<div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.CHILD_PROCESS_NODE) }}
</div>
<Icon v-if="!readonly" icon="ep:arrow-right-bold" />
</div>
<div v-if="!readonly" class="node-toolbar">
<div class="toolbar-icon"
><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
/></div>
</div>
</div>
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
<NodeHandler
v-if="currentNode"
v-model:child-node="currentNode.childNode"
:current-node="currentNode"
/>
</div>
<ChildProcessNodeConfig
v-if="!readonly && currentNode"
ref="nodeSetting"
:flow-node="currentNode"
/>
</div>
</template>
<script setup lang="ts">
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import NodeHandler from '../NodeHandler.vue'
import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
import ChildProcessNodeConfig from '../nodes-config/ChildProcessNodeConfig.vue'
defineOptions({
name: 'ChildProcessNode'
})
const props = defineProps({
flowNode: {
type: Object as () => SimpleFlowNode,
required: true
}
})
// 定义事件，更新父组件。
const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined]
}>()
// 是否只读
const readonly = inject<Boolean>('readonly')
// 监控节点的变化
const currentNode = useWatchNode(props)
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.CHILD_PROCESS_NODE)
const nodeSetting = ref()
// 打开节点配置
const openNodeConfig = () => {
if (readonly) {
return
}
nodeSetting.value.showChildProcessNodeConfig(currentNode.value)
nodeSetting.value.openDrawer()
}
// 删除节点。更新当前节点为孩子节点
const deleteNode = () => {
emits('update:flowNode', currentNode.value.childNode)
}
</script>
<style scoped></style>
src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
...@@ -181,6 +181,14 @@ ...@@ -181,6 +181,14 @@
color: #330099; color: #330099;
} }
.child-process {
color: #996633;
}
.async-child-process {
color: #006666;
}
.handler-item-text { .handler-item-text {
margin-top: 4px; margin-top: 4px;
width: 80px; width: 80px;
...@@ -302,6 +310,14 @@ ...@@ -302,6 +310,14 @@
&.transactor-task { &.transactor-task {
color: #330099; color: #330099;
} }
&.child-process {
color: #996633;
}
&.async-child-process {
color: #006666;
}
} }
.node-title { .node-title {
...@@ -800,3 +816,11 @@ ...@@ -800,3 +816,11 @@
.icon-parallel:before { .icon-parallel:before {
content: "\e688"; content: "\e688";
} }
.icon-async-child-process:before {
content: "\e6f2";
}
.icon-child-process:before {
content: "\e6c1";
}
src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
...@@ -157,24 +157,25 @@ const initProcessInfo = async (row: any, formVariables?: any) => { ...@@ -157,24 +157,25 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
} }
/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */ /** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
watch( // TODO @芋艿：这里我执行填写表单的时候不知道为啥一直报错，先注释了
detailForm.value, // watch(
(newValue) => { // detailForm.value,
if (newValue && Object.keys(newValue.value).length > 0) { // (newValue) => {
// 记录之前的节点审批人 // if (newValue && Object.keys(newValue.value).length > 0) {
tempStartUserSelectAssignees.value = startUserSelectAssignees.value // // 记录之前的节点审批人
startUserSelectAssignees.value = {} // tempStartUserSelectAssignees.value = startUserSelectAssignees.value
// 加载最新的审批详情 // startUserSelectAssignees.value = {}
getApprovalDetail({ // // 加载最新的审批详情
id: props.selectProcessDefinition.id, // getApprovalDetail({
processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON // id: props.selectProcessDefinition.id,
}) // processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
} // })
}, // }
{ // },
immediate: true // {
} // immediate: true
) // }
// )
/** 获取审批详情 */ /** 获取审批详情 */
const getApprovalDetail = async (row: any) => { const getApprovalDetail = async (row: any) => {
......
src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
...@@ -85,7 +85,8 @@ const setSimpleModelNodeTaskStatus = ( ...@@ -85,7 +85,8 @@ const setSimpleModelNodeTaskStatus = (
if ( if (
simpleModel.type === NodeType.START_USER_NODE || simpleModel.type === NodeType.START_USER_NODE ||
simpleModel.type === NodeType.USER_TASK_NODE || simpleModel.type === NodeType.USER_TASK_NODE ||
simpleModel.type === NodeType.TRANSACTOR_NODE simpleModel.type === NodeType.TRANSACTOR_NODE ||
simpleModel.type === NodeType.CHILD_PROCESS_NODE
) { ) {
simpleModel.activityStatus = TaskStatusEnum.NOT_START simpleModel.activityStatus = TaskStatusEnum.NOT_START
if (rejectedTaskActivityIds.includes(simpleModel.id)) { if (rejectedTaskActivityIds.includes(simpleModel.id)) {
......
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
...@@ -181,6 +181,7 @@ import conditionSvg from '@/assets/svgs/bpm/condition.svg' ...@@ -181,6 +181,7 @@ import conditionSvg from '@/assets/svgs/bpm/condition.svg'
import parallelSvg from '@/assets/svgs/bpm/parallel.svg' import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
import finishSvg from '@/assets/svgs/bpm/finish.svg' import finishSvg from '@/assets/svgs/bpm/finish.svg'
import transactorSvg from '@/assets/svgs/bpm/transactor.svg' import transactorSvg from '@/assets/svgs/bpm/transactor.svg'
import childProcessSvg from '@/assets/svgs/bpm/child-process.svg'
defineOptions({ name: 'BpmProcessInstanceTimeline' }) defineOptions({ name: 'BpmProcessInstanceTimeline' })
withDefaults( withDefaults(
...@@ -249,7 +250,9 @@ const nodeTypeSvgMap = { ...@@ -249,7 +250,9 @@ const nodeTypeSvgMap = {
// 条件分支节点 // 条件分支节点
[NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg }, [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
// 并行分支节点 // 并行分支节点
[NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg } [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg },
// 子流程节点
[NodeType.CHILD_PROCESS_NODE]: { color: '#14bb83', svg: childProcessSvg },
} }
// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon // 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
...@@ -269,6 +272,7 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => { ...@@ -269,6 +272,7 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
nodeType === NodeType.START_USER_NODE || nodeType === NodeType.START_USER_NODE ||
nodeType === NodeType.USER_TASK_NODE || nodeType === NodeType.USER_TASK_NODE ||
nodeType === NodeType.TRANSACTOR_NODE || nodeType === NodeType.TRANSACTOR_NODE ||
nodeType === NodeType.CHILD_PROCESS_NODE ||
nodeType === NodeType.END_EVENT_NODE nodeType === NodeType.END_EVENT_NODE
) { ) {
return statusIconMap[taskStatus]?.icon return statusIconMap[taskStatus]?.icon
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment