feat: [BPM 工作流] Simple 模型 - 条件节点配置
jason
parent
ce9b6c5b88
commit
4cd9b3c6d8
|
|
@ -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>
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
NodeType,
|
||||
} from '../../consts';
|
||||
import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
|
||||
// TODO import ConditionNodeConfig from './nodes-config/condition-node-config.vue';
|
||||
import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
|
||||
import ProcessNodeTree from '../process-node-tree.vue';
|
||||
import NodeHandler from './node-handler.vue';
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ const recursiveFindParentNode = (
|
|||
<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"
|
||||
|
|
@ -252,12 +252,12 @@ const recursiveFindParentNode = (
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 条件节点配置-->
|
||||
<!-- <ConditionNodeConfig
|
||||
<!-- 条件节点配置 -->
|
||||
<ConditionNodeConfig
|
||||
:node-index="index"
|
||||
:condition-node="item"
|
||||
:ref="item.id"
|
||||
/> -->
|
||||
/>
|
||||
<!-- 递归显示子节点 -->
|
||||
<ProcessNodeTree
|
||||
v-if="item && item.childNode"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
getDefaultInclusiveConditionNodeName,
|
||||
useTaskStatusClass,
|
||||
} from '../../helpers';
|
||||
// import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue';
|
||||
import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
|
||||
import ProcessNodeTree from '../process-node-tree.vue';
|
||||
import NodeHandler from './node-handler.vue';
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ const recursiveFindParentNode = (
|
|||
>
|
||||
<span class="iconfont icon-inclusive icon-size inclusive"></span>
|
||||
</div>
|
||||
<Button v-else class="branch-node-add" @click="addCondition" plain>
|
||||
<Button v-else class="branch-node-add" @click="addCondition">
|
||||
添加条件
|
||||
</Button>
|
||||
<div
|
||||
|
|
@ -257,12 +257,12 @@ const recursiveFindParentNode = (
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 条件节点配置 -->
|
||||
<!-- <ConditionNodeConfig
|
||||
<!-- 条件节点配置 -->
|
||||
<ConditionNodeConfig
|
||||
:node-index="index"
|
||||
:condition-node="item"
|
||||
:ref="item.id"
|
||||
/> -->
|
||||
/>
|
||||
<!-- 递归显示子节点 -->
|
||||
<ProcessNodeTree
|
||||
v-if="item && item.childNode"
|
||||
|
|
|
|||
Loading…
Reference in New Issue