!123 Merge remote-tracking branch 'yudao/dev' into dev
Merge pull request !123 from Jason/devpull/124/head^2
commit
b90a7a4b36
|
@ -0,0 +1,196 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SimpleFlowNode } from '../../consts';
|
||||||
|
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenDrawer } from '@vben/common-ui';
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
import { cloneDeep } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Button, Input } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { ConditionType } from '../../consts';
|
||||||
|
import {
|
||||||
|
getConditionShowText,
|
||||||
|
getDefaultConditionNodeName,
|
||||||
|
useFormFieldsAndStartUser,
|
||||||
|
} from '../../helpers';
|
||||||
|
import Condition from './modules/condition.vue';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'ConditionNodeConfig',
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
conditionNode: {
|
||||||
|
type: Object as () => SimpleFlowNode,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
nodeIndex: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentNode = ref<SimpleFlowNode>(props.conditionNode);
|
||||||
|
const condition = ref<any>({
|
||||||
|
conditionType: ConditionType.RULE, // 设置默认值
|
||||||
|
conditionExpression: '',
|
||||||
|
conditionGroups: {
|
||||||
|
and: true,
|
||||||
|
conditions: [
|
||||||
|
{
|
||||||
|
and: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
opCode: '==',
|
||||||
|
leftSide: '',
|
||||||
|
rightSide: '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示名称输入框
|
||||||
|
const showInput = ref(false);
|
||||||
|
const conditionRef = ref();
|
||||||
|
const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
|
||||||
|
|
||||||
|
/** 保存配置 */
|
||||||
|
const saveConfig = async () => {
|
||||||
|
if (!currentNode.value.conditionSetting?.defaultFlow) {
|
||||||
|
// 校验表单
|
||||||
|
const valid = await conditionRef.value.validate();
|
||||||
|
if (!valid) return false;
|
||||||
|
const showText = getConditionShowText(
|
||||||
|
condition.value?.conditionType,
|
||||||
|
condition.value?.conditionExpression,
|
||||||
|
condition.value.conditionGroups,
|
||||||
|
fieldOptions,
|
||||||
|
);
|
||||||
|
if (!showText) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
currentNode.value.showText = showText;
|
||||||
|
// 使用 cloneDeep 进行深拷贝
|
||||||
|
currentNode.value.conditionSetting = cloneDeep({
|
||||||
|
...currentNode.value.conditionSetting,
|
||||||
|
conditionType: condition.value?.conditionType,
|
||||||
|
conditionExpression:
|
||||||
|
condition.value?.conditionType === ConditionType.EXPRESSION
|
||||||
|
? condition.value?.conditionExpression
|
||||||
|
: undefined,
|
||||||
|
conditionGroups:
|
||||||
|
condition.value?.conditionType === ConditionType.RULE
|
||||||
|
? condition.value?.conditionGroups
|
||||||
|
: undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
drawerApi.close();
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用 useVbenDrawer 替代传统 Drawer
|
||||||
|
const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
|
title: currentNode.value.name,
|
||||||
|
class: 'w-[588px]',
|
||||||
|
onCancel: () => {
|
||||||
|
drawerApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: saveConfig,
|
||||||
|
});
|
||||||
|
|
||||||
|
const open = () => {
|
||||||
|
// 使用三元表达式代替 if-else,解决 linter 警告
|
||||||
|
condition.value = currentNode.value.conditionSetting
|
||||||
|
? cloneDeep(currentNode.value.conditionSetting)
|
||||||
|
: {
|
||||||
|
conditionType: ConditionType.RULE,
|
||||||
|
conditionExpression: '',
|
||||||
|
conditionGroups: {
|
||||||
|
and: true,
|
||||||
|
conditions: [
|
||||||
|
{
|
||||||
|
and: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
opCode: '==',
|
||||||
|
leftSide: '',
|
||||||
|
rightSide: '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
drawerApi.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.conditionNode,
|
||||||
|
(newValue) => {
|
||||||
|
currentNode.value = newValue;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const clickIcon = () => {
|
||||||
|
showInput.value = true;
|
||||||
|
};
|
||||||
|
// 输入框失去焦点
|
||||||
|
const blurEvent = () => {
|
||||||
|
showInput.value = false;
|
||||||
|
currentNode.value.name =
|
||||||
|
currentNode.value.name ||
|
||||||
|
getDefaultConditionNodeName(
|
||||||
|
props.nodeIndex,
|
||||||
|
currentNode.value?.conditionSetting?.defaultFlow,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({ open }); // 提供 open 方法,用于打开弹窗
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Drawer>
|
||||||
|
<template #title>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<Input
|
||||||
|
v-if="showInput"
|
||||||
|
type="text"
|
||||||
|
class="mr-2 w-48"
|
||||||
|
@blur="blurEvent()"
|
||||||
|
v-model:value="currentNode.name"
|
||||||
|
:placeholder="currentNode.name"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="flex cursor-pointer items-center"
|
||||||
|
@click="clickIcon()"
|
||||||
|
>
|
||||||
|
{{ currentNode.name }}
|
||||||
|
<IconifyIcon class="ml-1" icon="ep:edit-pen" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="mb-3 text-base"
|
||||||
|
v-if="currentNode.conditionSetting?.defaultFlow"
|
||||||
|
>
|
||||||
|
未满足其它条件时,将进入此分支(该分支不可编辑和删除)
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<Condition ref="conditionRef" v-model:model-value="condition" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-end space-x-2">
|
||||||
|
<Button type="primary" @click="saveConfig">确 定</Button>
|
||||||
|
<Button @click="drawerApi.close">取 消</Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Drawer>
|
||||||
|
</template>
|
|
@ -0,0 +1,277 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SimpleFlowNode } from '../../consts';
|
||||||
|
|
||||||
|
import { getCurrentInstance, inject, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Button, Input } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ConditionType,
|
||||||
|
DEFAULT_CONDITION_GROUP_VALUE,
|
||||||
|
NODE_DEFAULT_TEXT,
|
||||||
|
NodeType,
|
||||||
|
} from '../../consts';
|
||||||
|
import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
|
||||||
|
import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
|
||||||
|
import ProcessNodeTree from '../process-node-tree.vue';
|
||||||
|
import NodeHandler from './node-handler.vue';
|
||||||
|
|
||||||
|
defineOptions({ name: 'ExclusiveNode' });
|
||||||
|
const props = defineProps({
|
||||||
|
flowNode: {
|
||||||
|
type: Object as () => SimpleFlowNode,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 定义事件,更新父组件
|
||||||
|
const emits = defineEmits<{
|
||||||
|
findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
|
||||||
|
recursiveFindParentNode: [
|
||||||
|
nodeList: SimpleFlowNode[],
|
||||||
|
curentNode: SimpleFlowNode,
|
||||||
|
nodeType: number,
|
||||||
|
];
|
||||||
|
'update:modelValue': [node: SimpleFlowNode | undefined];
|
||||||
|
}>();
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
// 是否只读
|
||||||
|
const readonly = inject<Boolean>('readonly');
|
||||||
|
const currentNode = ref<SimpleFlowNode>(props.flowNode);
|
||||||
|
watch(
|
||||||
|
() => props.flowNode,
|
||||||
|
(newValue) => {
|
||||||
|
currentNode.value = newValue;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const showInputs = ref<boolean[]>([]);
|
||||||
|
// 失去焦点
|
||||||
|
const blurEvent = (index: number) => {
|
||||||
|
showInputs.value[index] = false;
|
||||||
|
const conditionNode = currentNode.value.conditionNodes?.at(
|
||||||
|
index,
|
||||||
|
) as SimpleFlowNode;
|
||||||
|
conditionNode.name =
|
||||||
|
conditionNode.name ||
|
||||||
|
getDefaultConditionNodeName(
|
||||||
|
index,
|
||||||
|
conditionNode.conditionSetting?.defaultFlow,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击条件名称
|
||||||
|
const clickEvent = (index: number) => {
|
||||||
|
showInputs.value[index] = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const conditionNodeConfig = (nodeId: string) => {
|
||||||
|
if (readonly) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const conditionNode = proxy.$refs[nodeId][0];
|
||||||
|
conditionNode.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增条件
|
||||||
|
const addCondition = () => {
|
||||||
|
const conditionNodes = currentNode.value.conditionNodes;
|
||||||
|
if (conditionNodes) {
|
||||||
|
const len = conditionNodes.length;
|
||||||
|
const lastIndex = len - 1;
|
||||||
|
const conditionData: SimpleFlowNode = {
|
||||||
|
id: `Flow_${generateUUID()}`,
|
||||||
|
name: `条件${len}`,
|
||||||
|
showText: '',
|
||||||
|
type: NodeType.CONDITION_NODE,
|
||||||
|
childNode: undefined,
|
||||||
|
conditionNodes: [],
|
||||||
|
conditionSetting: {
|
||||||
|
defaultFlow: false,
|
||||||
|
conditionType: ConditionType.RULE,
|
||||||
|
conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
conditionNodes.splice(lastIndex, 0, conditionData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除条件
|
||||||
|
const deleteCondition = (index: number) => {
|
||||||
|
const conditionNodes = currentNode.value.conditionNodes;
|
||||||
|
if (conditionNodes) {
|
||||||
|
conditionNodes.splice(index, 1);
|
||||||
|
if (conditionNodes.length === 1) {
|
||||||
|
const childNode = currentNode.value.childNode;
|
||||||
|
// 更新此节点为后续孩子节点
|
||||||
|
emits('update:modelValue', childNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 移动节点
|
||||||
|
const moveNode = (index: number, to: number) => {
|
||||||
|
// -1 :向左 1: 向右
|
||||||
|
if (
|
||||||
|
currentNode.value.conditionNodes &&
|
||||||
|
currentNode.value.conditionNodes[index]
|
||||||
|
) {
|
||||||
|
currentNode.value.conditionNodes[index] =
|
||||||
|
currentNode.value.conditionNodes.splice(
|
||||||
|
index + to,
|
||||||
|
1,
|
||||||
|
currentNode.value.conditionNodes[index],
|
||||||
|
)[0] as SimpleFlowNode;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 递归从父节点中查询匹配的节点
|
||||||
|
const recursiveFindParentNode = (
|
||||||
|
nodeList: SimpleFlowNode[],
|
||||||
|
node: SimpleFlowNode,
|
||||||
|
nodeType: number,
|
||||||
|
) => {
|
||||||
|
if (!node || node.type === NodeType.START_USER_NODE) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.type === nodeType) {
|
||||||
|
nodeList.push(node);
|
||||||
|
}
|
||||||
|
// 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点(NodeType.EXCLUSIVE_NODE) 继续查找
|
||||||
|
emits('findParentNode', nodeList, nodeType);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="branch-node-wrapper">
|
||||||
|
<div class="branch-node-container">
|
||||||
|
<div
|
||||||
|
v-if="readonly"
|
||||||
|
class="branch-node-readonly"
|
||||||
|
:class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
|
||||||
|
>
|
||||||
|
<span class="iconfont icon-exclusive icon-size condition"></span>
|
||||||
|
</div>
|
||||||
|
<Button v-else class="branch-node-add" @click="addCondition">
|
||||||
|
添加条件
|
||||||
|
</Button>
|
||||||
|
<!-- 排他网关节点下面可以多个分支,每个分支第一个节点是条件节点 NodeType.CONDITION_NODE -->
|
||||||
|
<div
|
||||||
|
class="branch-node-item"
|
||||||
|
v-for="(item, index) in currentNode.conditionNodes"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<template v-if="index === 0">
|
||||||
|
<div class="branch-line-first-top"></div>
|
||||||
|
<div class="branch-line-first-bottom"></div>
|
||||||
|
</template>
|
||||||
|
<template v-if="index + 1 === currentNode.conditionNodes?.length">
|
||||||
|
<div class="branch-line-last-top"></div>
|
||||||
|
<div class="branch-line-last-bottom"></div>
|
||||||
|
</template>
|
||||||
|
<div class="node-wrapper">
|
||||||
|
<div class="node-container">
|
||||||
|
<div
|
||||||
|
class="node-box"
|
||||||
|
:class="[
|
||||||
|
{ 'node-config-error': !item.showText },
|
||||||
|
`${useTaskStatusClass(item.activityStatus)}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="branch-node-title-container">
|
||||||
|
<div v-if="!readonly && showInputs[index]">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
class="editable-title-input"
|
||||||
|
@blur="blurEvent(index)"
|
||||||
|
v-model="item.name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else class="branch-title" @click="clickEvent(index)">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<div class="branch-priority">优先级{{ index + 1 }}</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="branch-node-content"
|
||||||
|
@click="conditionNodeConfig(item.id)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="branch-node-text"
|
||||||
|
:title="item.showText"
|
||||||
|
v-if="item.showText"
|
||||||
|
>
|
||||||
|
{{ item.showText }}
|
||||||
|
</div>
|
||||||
|
<div class="branch-node-text" v-else>
|
||||||
|
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="node-toolbar"
|
||||||
|
v-if="
|
||||||
|
!readonly && index + 1 !== currentNode.conditionNodes?.length
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="toolbar-icon">
|
||||||
|
<IconifyIcon
|
||||||
|
color="#0089ff"
|
||||||
|
icon="ep:circle-close-filled"
|
||||||
|
:size="18"
|
||||||
|
@click="deleteCondition(index)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="branch-node-move move-node-left"
|
||||||
|
v-if="
|
||||||
|
!readonly &&
|
||||||
|
index !== 0 &&
|
||||||
|
index + 1 !== currentNode.conditionNodes?.length
|
||||||
|
"
|
||||||
|
@click="moveNode(index, -1)"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="ep:arrow-left" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="branch-node-move move-node-right"
|
||||||
|
v-if="
|
||||||
|
!readonly &&
|
||||||
|
currentNode.conditionNodes &&
|
||||||
|
index < currentNode.conditionNodes.length - 2
|
||||||
|
"
|
||||||
|
@click="moveNode(index, 1)"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="ep:arrow-right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NodeHandler
|
||||||
|
v-model:child-node="item.childNode"
|
||||||
|
:current-node="item"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 条件节点配置 -->
|
||||||
|
<ConditionNodeConfig
|
||||||
|
:node-index="index"
|
||||||
|
:condition-node="item"
|
||||||
|
:ref="item.id"
|
||||||
|
/>
|
||||||
|
<!-- 递归显示子节点 -->
|
||||||
|
<ProcessNodeTree
|
||||||
|
v-if="item && item.childNode"
|
||||||
|
:parent-node="item"
|
||||||
|
v-model:flow-node="item.childNode"
|
||||||
|
@recursive-find-parent-node="recursiveFindParentNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NodeHandler
|
||||||
|
v-if="currentNode"
|
||||||
|
v-model:child-node="currentNode.childNode"
|
||||||
|
:current-node="currentNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped></style>
|
|
@ -0,0 +1,282 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SimpleFlowNode } from '../../consts';
|
||||||
|
|
||||||
|
import { getCurrentInstance, inject, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Button, Input } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ConditionType,
|
||||||
|
DEFAULT_CONDITION_GROUP_VALUE,
|
||||||
|
NODE_DEFAULT_TEXT,
|
||||||
|
NodeType,
|
||||||
|
} from '../../consts';
|
||||||
|
import {
|
||||||
|
getDefaultInclusiveConditionNodeName,
|
||||||
|
useTaskStatusClass,
|
||||||
|
} from '../../helpers';
|
||||||
|
import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
|
||||||
|
import ProcessNodeTree from '../process-node-tree.vue';
|
||||||
|
import NodeHandler from './node-handler.vue';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'InclusiveNode',
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
flowNode: {
|
||||||
|
type: Object as () => SimpleFlowNode,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 定义事件,更新父组件
|
||||||
|
const emits = defineEmits<{
|
||||||
|
findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
|
||||||
|
recursiveFindParentNode: [
|
||||||
|
nodeList: SimpleFlowNode[],
|
||||||
|
curentNode: SimpleFlowNode,
|
||||||
|
nodeType: number,
|
||||||
|
];
|
||||||
|
'update:modelValue': [node: SimpleFlowNode | undefined];
|
||||||
|
}>();
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
// 是否只读
|
||||||
|
const readonly = inject<Boolean>('readonly');
|
||||||
|
|
||||||
|
const currentNode = ref<SimpleFlowNode>(props.flowNode);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.flowNode,
|
||||||
|
(newValue) => {
|
||||||
|
currentNode.value = newValue;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const showInputs = ref<boolean[]>([]);
|
||||||
|
// 失去焦点
|
||||||
|
const blurEvent = (index: number) => {
|
||||||
|
showInputs.value[index] = false;
|
||||||
|
const conditionNode = currentNode.value.conditionNodes?.at(
|
||||||
|
index,
|
||||||
|
) as SimpleFlowNode;
|
||||||
|
conditionNode.name =
|
||||||
|
conditionNode.name ||
|
||||||
|
getDefaultInclusiveConditionNodeName(
|
||||||
|
index,
|
||||||
|
conditionNode.conditionSetting?.defaultFlow,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击条件名称
|
||||||
|
const clickEvent = (index: number) => {
|
||||||
|
showInputs.value[index] = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const conditionNodeConfig = (nodeId: string) => {
|
||||||
|
if (readonly) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const conditionNode = proxy.$refs[nodeId][0];
|
||||||
|
conditionNode.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增条件
|
||||||
|
const addCondition = () => {
|
||||||
|
const conditionNodes = currentNode.value.conditionNodes;
|
||||||
|
if (conditionNodes) {
|
||||||
|
const len = conditionNodes.length;
|
||||||
|
const lastIndex = len - 1;
|
||||||
|
const conditionData: SimpleFlowNode = {
|
||||||
|
id: `Flow_${generateUUID()}`,
|
||||||
|
name: `包容条件${len}`,
|
||||||
|
showText: '',
|
||||||
|
type: NodeType.CONDITION_NODE,
|
||||||
|
childNode: undefined,
|
||||||
|
conditionNodes: [],
|
||||||
|
conditionSetting: {
|
||||||
|
defaultFlow: false,
|
||||||
|
conditionType: ConditionType.RULE,
|
||||||
|
conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
conditionNodes.splice(lastIndex, 0, conditionData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除条件
|
||||||
|
const deleteCondition = (index: number) => {
|
||||||
|
const conditionNodes = currentNode.value.conditionNodes;
|
||||||
|
if (conditionNodes) {
|
||||||
|
conditionNodes.splice(index, 1);
|
||||||
|
if (conditionNodes.length === 1) {
|
||||||
|
const childNode = currentNode.value.childNode;
|
||||||
|
// 更新此节点为后续孩子节点
|
||||||
|
emits('update:modelValue', childNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 移动节点
|
||||||
|
const moveNode = (index: number, to: number) => {
|
||||||
|
// -1 :向左 1: 向右
|
||||||
|
if (
|
||||||
|
currentNode.value.conditionNodes &&
|
||||||
|
currentNode.value.conditionNodes[index]
|
||||||
|
) {
|
||||||
|
currentNode.value.conditionNodes[index] =
|
||||||
|
currentNode.value.conditionNodes.splice(
|
||||||
|
index + to,
|
||||||
|
1,
|
||||||
|
currentNode.value.conditionNodes[index],
|
||||||
|
)[0] as SimpleFlowNode;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 递归从父节点中查询匹配的节点
|
||||||
|
const recursiveFindParentNode = (
|
||||||
|
nodeList: SimpleFlowNode[],
|
||||||
|
node: SimpleFlowNode,
|
||||||
|
nodeType: number,
|
||||||
|
) => {
|
||||||
|
if (!node || node.type === NodeType.START_USER_NODE) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.type === nodeType) {
|
||||||
|
nodeList.push(node);
|
||||||
|
}
|
||||||
|
// 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点(NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
|
||||||
|
emits('findParentNode', nodeList, nodeType);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="branch-node-wrapper">
|
||||||
|
<div class="branch-node-container">
|
||||||
|
<div
|
||||||
|
v-if="readonly"
|
||||||
|
class="branch-node-readonly"
|
||||||
|
:class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
|
||||||
|
>
|
||||||
|
<span class="iconfont icon-inclusive icon-size inclusive"></span>
|
||||||
|
</div>
|
||||||
|
<Button v-else class="branch-node-add" @click="addCondition">
|
||||||
|
添加条件
|
||||||
|
</Button>
|
||||||
|
<div
|
||||||
|
class="branch-node-item"
|
||||||
|
v-for="(item, index) in currentNode.conditionNodes"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<template v-if="index === 0">
|
||||||
|
<div class="branch-line-first-top"></div>
|
||||||
|
<div class="branch-line-first-bottom"></div>
|
||||||
|
</template>
|
||||||
|
<template v-if="index + 1 === currentNode.conditionNodes?.length">
|
||||||
|
<div class="branch-line-last-top"></div>
|
||||||
|
<div class="branch-line-last-bottom"></div>
|
||||||
|
</template>
|
||||||
|
<div class="node-wrapper">
|
||||||
|
<div class="node-container">
|
||||||
|
<div
|
||||||
|
class="node-box"
|
||||||
|
:class="[
|
||||||
|
{ 'node-config-error': !item.showText },
|
||||||
|
`${useTaskStatusClass(item.activityStatus)}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="branch-node-title-container">
|
||||||
|
<div v-if="!readonly && showInputs[index]">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
class="editable-title-input"
|
||||||
|
@blur="blurEvent(index)"
|
||||||
|
v-model="item.name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else class="branch-title" @click="clickEvent(index)">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="branch-node-content"
|
||||||
|
@click="conditionNodeConfig(item.id)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="branch-node-text"
|
||||||
|
:title="item.showText"
|
||||||
|
v-if="item.showText"
|
||||||
|
>
|
||||||
|
{{ item.showText }}
|
||||||
|
</div>
|
||||||
|
<div class="branch-node-text" v-else>
|
||||||
|
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="node-toolbar"
|
||||||
|
v-if="
|
||||||
|
!readonly && index + 1 !== currentNode.conditionNodes?.length
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="toolbar-icon">
|
||||||
|
<IconifyIcon
|
||||||
|
color="#0089ff"
|
||||||
|
icon="ep:circle-close-filled"
|
||||||
|
:size="18"
|
||||||
|
@click="deleteCondition(index)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="branch-node-move move-node-left"
|
||||||
|
v-if="
|
||||||
|
!readonly &&
|
||||||
|
index !== 0 &&
|
||||||
|
index + 1 !== currentNode.conditionNodes?.length
|
||||||
|
"
|
||||||
|
@click="moveNode(index, -1)"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="ep:arrow-left" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="branch-node-move move-node-right"
|
||||||
|
v-if="
|
||||||
|
!readonly &&
|
||||||
|
currentNode.conditionNodes &&
|
||||||
|
index < currentNode.conditionNodes.length - 2
|
||||||
|
"
|
||||||
|
@click="moveNode(index, 1)"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="ep:arrow-right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NodeHandler
|
||||||
|
v-model:child-node="item.childNode"
|
||||||
|
:current-node="item"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 条件节点配置 -->
|
||||||
|
<ConditionNodeConfig
|
||||||
|
:node-index="index"
|
||||||
|
:condition-node="item"
|
||||||
|
:ref="item.id"
|
||||||
|
/>
|
||||||
|
<!-- 递归显示子节点 -->
|
||||||
|
<ProcessNodeTree
|
||||||
|
v-if="item && item.childNode"
|
||||||
|
:parent-node="item"
|
||||||
|
v-model:flow-node="item.childNode"
|
||||||
|
@recursive-find-parent-node="recursiveFindParentNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NodeHandler
|
||||||
|
v-if="currentNode"
|
||||||
|
v-model:child-node="currentNode.childNode"
|
||||||
|
:current-node="currentNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped></style>
|
|
@ -5,6 +5,8 @@ import { NodeType } from '../consts';
|
||||||
import { useWatchNode } from '../helpers';
|
import { useWatchNode } from '../helpers';
|
||||||
import CopyTaskNode from './nodes/copy-task-node.vue';
|
import CopyTaskNode from './nodes/copy-task-node.vue';
|
||||||
import EndEventNode from './nodes/end-event-node.vue';
|
import EndEventNode from './nodes/end-event-node.vue';
|
||||||
|
import ExclusiveNode from './nodes/exclusive-node.vue';
|
||||||
|
import InclusiveNode from './nodes/inclusive-node.vue';
|
||||||
import StartUserNode from './nodes/start-user-node.vue';
|
import StartUserNode from './nodes/start-user-node.vue';
|
||||||
import TriggerNode from './nodes/trigger-node.vue';
|
import TriggerNode from './nodes/trigger-node.vue';
|
||||||
import UserTaskNode from './nodes/user-task-node.vue';
|
import UserTaskNode from './nodes/user-task-node.vue';
|
||||||
|
@ -85,12 +87,12 @@ const recursiveFindParentNode = (
|
||||||
@update:flow-node="handleModelValueUpdate"
|
@update:flow-node="handleModelValueUpdate"
|
||||||
/>
|
/>
|
||||||
<!-- 条件节点 -->
|
<!-- 条件节点 -->
|
||||||
<!-- <ExclusiveNode
|
<ExclusiveNode
|
||||||
v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
|
v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
|
||||||
:flow-node="currentNode"
|
:flow-node="currentNode"
|
||||||
@update:model-value="handleModelValueUpdate"
|
@update:model-value="handleModelValueUpdate"
|
||||||
@find:parent-node="findFromParentNode"
|
@find-parent-node="findParentNode"
|
||||||
/> -->
|
/>
|
||||||
<!-- 并行节点 -->
|
<!-- 并行节点 -->
|
||||||
<!-- <ParallelNode
|
<!-- <ParallelNode
|
||||||
v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
|
v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
|
||||||
|
@ -99,12 +101,12 @@ const recursiveFindParentNode = (
|
||||||
@find:parent-node="findFromParentNode"
|
@find:parent-node="findFromParentNode"
|
||||||
/> -->
|
/> -->
|
||||||
<!-- 包容分支节点 -->
|
<!-- 包容分支节点 -->
|
||||||
<!-- <InclusiveNode
|
<InclusiveNode
|
||||||
v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
|
v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
|
||||||
:flow-node="currentNode"
|
:flow-node="currentNode"
|
||||||
@update:model-value="handleModelValueUpdate"
|
@update:model-value="handleModelValueUpdate"
|
||||||
@find:parent-node="findFromParentNode"
|
@find-parent-node="findParentNode"
|
||||||
/> -->
|
/>
|
||||||
<!-- 延迟器节点 -->
|
<!-- 延迟器节点 -->
|
||||||
<!-- <DelayTimerNode
|
<!-- <DelayTimerNode
|
||||||
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
|
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
|
||||||
|
|
|
@ -737,3 +737,25 @@ const getOpName = (opCode: string): string | undefined => {
|
||||||
);
|
);
|
||||||
return opName?.label;
|
return opName?.label;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 获取条件节点默认的名称 */
|
||||||
|
export const getDefaultConditionNodeName = (
|
||||||
|
index: number,
|
||||||
|
defaultFlow: boolean | undefined,
|
||||||
|
): string => {
|
||||||
|
if (defaultFlow) {
|
||||||
|
return '其它情况';
|
||||||
|
}
|
||||||
|
return `条件${index + 1}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取包容分支条件节点默认的名称 */
|
||||||
|
export const getDefaultInclusiveConditionNodeName = (
|
||||||
|
index: number,
|
||||||
|
defaultFlow: boolean | undefined,
|
||||||
|
): string => {
|
||||||
|
if (defaultFlow) {
|
||||||
|
return '其它情况';
|
||||||
|
}
|
||||||
|
return `包容条件${index + 1}`;
|
||||||
|
};
|
||||||
|
|
|
@ -334,12 +334,14 @@
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
color: #111f2c;
|
color: #111f2c;
|
||||||
|
background: rgb(0 0 0 / 3%);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.branch-node-text {
|
.branch-node-text {
|
||||||
|
display: -webkit-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
|
-webkit-line-clamp: 1; /* 这将限制文本显示为一行 */
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
@ -478,6 +480,8 @@
|
||||||
top: -18px;
|
top: -18px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
Loading…
Reference in New Issue