feat: [BPM 工作流] Simple 模型 - 延迟器节点
jason
parent
7d7ee36ef0
commit
059df5b4ca
|
|
@ -0,0 +1,256 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
|
||||||
|
import type { SimpleFlowNode } from '../../consts';
|
||||||
|
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenDrawer } from '@vben/common-ui';
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Col,
|
||||||
|
DatePicker,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
Input,
|
||||||
|
InputNumber,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
Row,
|
||||||
|
Select,
|
||||||
|
SelectOption,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
DELAY_TYPE,
|
||||||
|
DelayTypeEnum,
|
||||||
|
NodeType,
|
||||||
|
TIME_UNIT_TYPES,
|
||||||
|
TimeUnitType,
|
||||||
|
} from '../../consts';
|
||||||
|
import { useNodeName, useWatchNode } from '../../helpers';
|
||||||
|
import { convertTimeUnit } from './utils';
|
||||||
|
|
||||||
|
defineOptions({ name: 'DelayTimerNodeConfig' });
|
||||||
|
const props = defineProps({
|
||||||
|
flowNode: {
|
||||||
|
type: Object as () => SimpleFlowNode,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 当前节点
|
||||||
|
const currentNode = useWatchNode(props);
|
||||||
|
// 节点名称
|
||||||
|
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
|
||||||
|
NodeType.DELAY_TIMER_NODE,
|
||||||
|
);
|
||||||
|
// 抄送人表单配置
|
||||||
|
const formRef = ref(); // 表单 Ref
|
||||||
|
// 表单校验规则
|
||||||
|
const formRules: Record<string, Rule[]> = reactive({
|
||||||
|
delayType: [
|
||||||
|
{ required: true, message: '延迟时间不能为空', trigger: 'change' },
|
||||||
|
],
|
||||||
|
timeDuration: [
|
||||||
|
{ required: true, message: '延迟时间不能为空', trigger: 'change' },
|
||||||
|
],
|
||||||
|
dateTime: [
|
||||||
|
{ required: true, message: '延迟时间不能为空', trigger: 'change' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
// 配置表单数据
|
||||||
|
const configForm = ref({
|
||||||
|
delayType: DelayTypeEnum.FIXED_TIME_DURATION,
|
||||||
|
timeDuration: 1,
|
||||||
|
timeUnit: TimeUnitType.HOUR,
|
||||||
|
dateTime: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取显示文本
|
||||||
|
const getShowText = (): string => {
|
||||||
|
let showText = '';
|
||||||
|
if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
|
||||||
|
showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
|
||||||
|
}
|
||||||
|
if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
|
||||||
|
showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
|
||||||
|
}
|
||||||
|
return showText;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取ISO时间格式
|
||||||
|
const getIsoTimeDuration = () => {
|
||||||
|
let strTimeDuration = 'PT';
|
||||||
|
if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
|
||||||
|
strTimeDuration += `${configForm.value.timeDuration}M`;
|
||||||
|
}
|
||||||
|
if (configForm.value.timeUnit === TimeUnitType.HOUR) {
|
||||||
|
strTimeDuration += `${configForm.value.timeDuration}H`;
|
||||||
|
}
|
||||||
|
if (configForm.value.timeUnit === TimeUnitType.DAY) {
|
||||||
|
strTimeDuration += `${configForm.value.timeDuration}D`;
|
||||||
|
}
|
||||||
|
return strTimeDuration;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存配置
|
||||||
|
const saveConfig = async () => {
|
||||||
|
if (!formRef.value) return false;
|
||||||
|
const valid = await formRef.value.validate();
|
||||||
|
if (!valid) return false;
|
||||||
|
const showText = getShowText();
|
||||||
|
if (!showText) return false;
|
||||||
|
currentNode.value.name = nodeName.value!;
|
||||||
|
currentNode.value.showText = showText;
|
||||||
|
if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
|
||||||
|
currentNode.value.delaySetting = {
|
||||||
|
delayType: configForm.value.delayType,
|
||||||
|
delayTime: getIsoTimeDuration(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
|
||||||
|
currentNode.value.delaySetting = {
|
||||||
|
delayType: configForm.value.delayType,
|
||||||
|
delayTime: configForm.value.dateTime,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
drawerApi.close();
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
|
title: nodeName.value,
|
||||||
|
onCancel: () => {
|
||||||
|
drawerApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: saveConfig,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示延迟器节点配置，由父组件调用
|
||||||
|
const openDrawer = (node: SimpleFlowNode) => {
|
||||||
|
nodeName.value = node.name;
|
||||||
|
if (node.delaySetting) {
|
||||||
|
configForm.value.delayType = node.delaySetting.delayType;
|
||||||
|
// 固定时长
|
||||||
|
if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
|
||||||
|
const strTimeDuration = node.delaySetting.delayTime;
|
||||||
|
const parseTime = strTimeDuration.slice(2, -1);
|
||||||
|
const parseTimeUnit = strTimeDuration.slice(-1);
|
||||||
|
configForm.value.timeDuration = Number.parseInt(parseTime);
|
||||||
|
configForm.value.timeUnit = convertTimeUnit(parseTimeUnit);
|
||||||
|
}
|
||||||
|
// 固定日期时间
|
||||||
|
if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
|
||||||
|
configForm.value.dateTime = node.delaySetting.delayTime;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
drawerApi.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({ openDrawer }); // 暴露方法给父组件
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Drawer class="w-[480px]">
|
||||||
|
<template #title>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<Input
|
||||||
|
v-if="showInput"
|
||||||
|
type="text"
|
||||||
|
class="mr-2 w-48"
|
||||||
|
@blur="blurEvent()"
|
||||||
|
v-model:value="nodeName"
|
||||||
|
:placeholder="nodeName"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="flex cursor-pointer items-center"
|
||||||
|
@click="clickIcon()"
|
||||||
|
>
|
||||||
|
{{ nodeName }}
|
||||||
|
<IconifyIcon class="ml-1" icon="ep:edit-pen" :size="16" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Form
|
||||||
|
ref="formRef"
|
||||||
|
:model="configForm"
|
||||||
|
:rules="formRules"
|
||||||
|
:label-col="{ span: 24 }"
|
||||||
|
:wrapper-col="{ span: 24 }"
|
||||||
|
>
|
||||||
|
<FormItem label="延迟时间" name="delayType">
|
||||||
|
<RadioGroup v-model:value="configForm.delayType">
|
||||||
|
<Radio
|
||||||
|
v-for="item in DELAY_TYPE"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
|
||||||
|
>
|
||||||
|
<Row :gutter="8">
|
||||||
|
<Col>
|
||||||
|
<FormItem name="timeDuration">
|
||||||
|
<InputNumber
|
||||||
|
class="w-28"
|
||||||
|
v-model:value="configForm.timeDuration"
|
||||||
|
:min="1"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Select v-model:value="configForm.timeUnit" class="w-28">
|
||||||
|
<SelectOption
|
||||||
|
v-for="item in TIME_UNIT_TYPES"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<span class="inline-flex h-8 items-center">后进入下一节点</span>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
|
||||||
|
name="dateTime"
|
||||||
|
>
|
||||||
|
<Row :gutter="8">
|
||||||
|
<Col>
|
||||||
|
<DatePicker
|
||||||
|
class="mr-2"
|
||||||
|
v-model:value="configForm.dateTime"
|
||||||
|
show-time
|
||||||
|
placeholder="请选择日期和时间"
|
||||||
|
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<span class="inline-flex h-8 items-center">后进入下一节点</span>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</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>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { SimpleFlowNode } from '../../consts';
|
||||||
|
|
||||||
|
import { inject, ref } from 'vue';
|
||||||
|
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
|
||||||
|
import { Input } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
|
||||||
|
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
|
||||||
|
import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
|
||||||
|
import NodeHandler from './node-handler.vue';
|
||||||
|
|
||||||
|
defineOptions({ name: 'DelayTimerNode' });
|
||||||
|
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.DELAY_TIMER_NODE,
|
||||||
|
);
|
||||||
|
|
||||||
|
const nodeSetting = ref();
|
||||||
|
// 打开节点配置
|
||||||
|
const openNodeConfig = () => {
|
||||||
|
if (readonly) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
nodeSetting.value.openDrawer(currentNode.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除节点。更新当前节点为孩子节点
|
||||||
|
const deleteNode = () => {
|
||||||
|
emits('update:flowNode', currentNode.value.childNode);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<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 delay-node">
|
||||||
|
<span class="iconfont icon-delay"></span>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
v-if="!readonly && showInput"
|
||||||
|
type="text"
|
||||||
|
class="editable-title-input"
|
||||||
|
@blur="blurEvent()"
|
||||||
|
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.DELAY_TIMER_NODE) }}
|
||||||
|
</div>
|
||||||
|
<IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
|
||||||
|
</div>
|
||||||
|
<div v-if="!readonly" class="node-toolbar">
|
||||||
|
<div class="toolbar-icon">
|
||||||
|
<IconifyIcon
|
||||||
|
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>
|
||||||
|
<DelayTimerNodeConfig
|
||||||
|
v-if="!readonly && currentNode"
|
||||||
|
ref="nodeSetting"
|
||||||
|
:flow-node="currentNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -4,6 +4,7 @@ import type { SimpleFlowNode } from '../consts';
|
||||||
import { NodeType } from '../consts';
|
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 DelayTimerNode from './nodes/delay-timer-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 ExclusiveNode from './nodes/exclusive-node.vue';
|
||||||
import InclusiveNode from './nodes/inclusive-node.vue';
|
import InclusiveNode from './nodes/inclusive-node.vue';
|
||||||
|
|
@ -109,11 +110,11 @@ const recursiveFindParentNode = (
|
||||||
@find-parent-node="findParentNode"
|
@find-parent-node="findParentNode"
|
||||||
/>
|
/>
|
||||||
<!-- 延迟器节点 -->
|
<!-- 延迟器节点 -->
|
||||||
<!-- <DelayTimerNode
|
<DelayTimerNode
|
||||||
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
|
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
|
||||||
:flow-node="currentNode"
|
:flow-node="currentNode"
|
||||||
@update:flow-node="handleModelValueUpdate"
|
@update:flow-node="handleModelValueUpdate"
|
||||||
/> -->
|
/>
|
||||||
<!-- 路由分支节点 -->
|
<!-- 路由分支节点 -->
|
||||||
<!-- <RouterNode
|
<!-- <RouterNode
|
||||||
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
|
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue