!124 Merge remote-tracking branch 'yudao/dev' into dev
Merge pull request !124 from Jason/devpull/125/head^2
xingyu
Gitee
commit
517124ba83
|
|
@ -7,7 +7,7 @@ import { useVbenDrawer } from '@vben/common-ui';
|
|||
import { IconifyIcon } from '@vben/icons';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
import { ConditionType } from '../../consts';
|
||||
import {
|
||||
|
|
@ -91,13 +91,8 @@ const saveConfig = async () => {
|
|||
return true;
|
||||
};
|
||||
|
||||
// 使用 useVbenDrawer 替代传统 Drawer
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
title: currentNode.value.name,
|
||||
class: 'w-[588px]',
|
||||
onCancel: () => {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm: saveConfig,
|
||||
});
|
||||
|
||||
|
|
@ -152,7 +147,7 @@ const blurEvent = () => {
|
|||
defineExpose({ open }); // 提供 open 方法，用于打开弹窗
|
||||
</script>
|
||||
<template>
|
||||
<Drawer>
|
||||
<Drawer class="w-[580px]">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<Input
|
||||
|
|
@ -185,12 +180,5 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import { useVbenDrawer } from '@vben/common-ui';
|
|||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Form,
|
||||
FormItem,
|
||||
|
|
@ -44,9 +43,7 @@ import {
|
|||
useWatchNode,
|
||||
} from '../../helpers';
|
||||
|
||||
defineOptions({
|
||||
name: 'CopyTaskNodeConfig',
|
||||
});
|
||||
defineOptions({ name: 'CopyTaskNodeConfig' });
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
|
|
@ -67,10 +64,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
|||
header: true,
|
||||
closable: true,
|
||||
title: '',
|
||||
placement: 'right',
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
saveConfig();
|
||||
},
|
||||
|
|
@ -512,10 +505,6 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
|
|||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<template #footer>
|
||||
<Button type="primary" @click="saveConfig">确 定</Button>
|
||||
<Button @click="drawerApi.close()">取 消</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,245 @@
|
|||
<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 {
|
||||
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,
|
||||
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>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { RouterSetting, SimpleFlowNode } from '../../consts';
|
||||
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
message,
|
||||
Row,
|
||||
Select,
|
||||
SelectOption,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { ConditionType, NodeType } from '../../consts';
|
||||
import { useNodeName, useWatchNode } from '../../helpers';
|
||||
import Condition from './modules/condition.vue';
|
||||
|
||||
defineOptions({ name: 'RouterNodeConfig' });
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
|
||||
|
||||
/** 当前节点 */
|
||||
const currentNode = useWatchNode(props);
|
||||
/** 节点名称 */
|
||||
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
|
||||
NodeType.ROUTER_BRANCH_NODE,
|
||||
);
|
||||
const routerGroups = ref<RouterSetting[]>([]);
|
||||
const nodeOptions = ref<any[]>([]);
|
||||
const conditionRef = ref<any[]>([]);
|
||||
const formRef = ref();
|
||||
|
||||
/** 校验节点配置 */
|
||||
const validateConfig = async () => {
|
||||
// 校验路由分支选择
|
||||
const routeIdValid = await formRef.value.validate().catch(() => false);
|
||||
if (!routeIdValid) {
|
||||
message.warning('请配置路由目标节点');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 校验条件规则
|
||||
let valid = true;
|
||||
for (const item of conditionRef.value) {
|
||||
if (item && !(await item.validate())) {
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
if (!valid) return false;
|
||||
|
||||
// 获取节点显示文本，如果为空，校验不通过
|
||||
const showText = getShowText();
|
||||
if (!showText) return false;
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
/** 保存配置 */
|
||||
const saveConfig = async () => {
|
||||
// 校验配置
|
||||
if (!(await validateConfig())) {
|
||||
return false;
|
||||
}
|
||||
// 保存配置
|
||||
currentNode.value.name = nodeName.value!;
|
||||
currentNode.value.showText = getShowText();
|
||||
currentNode.value.routerGroups = routerGroups.value;
|
||||
drawerApi.close();
|
||||
return true;
|
||||
};
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
title: nodeName.value,
|
||||
onConfirm: saveConfig,
|
||||
});
|
||||
|
||||
/** 打开路由节点配置抽屉，由父组件调用 */
|
||||
const openDrawer = (node: SimpleFlowNode) => {
|
||||
nodeOptions.value = [];
|
||||
getRouterNode(processNodeTree?.value);
|
||||
routerGroups.value = [];
|
||||
nodeName.value = node.name;
|
||||
if (node.routerGroups) {
|
||||
routerGroups.value = node.routerGroups;
|
||||
}
|
||||
drawerApi.open();
|
||||
};
|
||||
|
||||
/** 获取显示文本 */
|
||||
const getShowText = () => {
|
||||
if (
|
||||
!routerGroups.value ||
|
||||
!Array.isArray(routerGroups.value) ||
|
||||
routerGroups.value.length <= 0
|
||||
) {
|
||||
message.warning('请配置路由！');
|
||||
return '';
|
||||
}
|
||||
for (const route of routerGroups.value) {
|
||||
if (!route.nodeId || !route.conditionType) {
|
||||
message.warning('请完善路由配置项！');
|
||||
return '';
|
||||
}
|
||||
if (
|
||||
route.conditionType === ConditionType.EXPRESSION &&
|
||||
!route.conditionExpression
|
||||
) {
|
||||
message.warning('请完善路由配置项！');
|
||||
return '';
|
||||
}
|
||||
if (route.conditionType === ConditionType.RULE) {
|
||||
for (const condition of route.conditionGroups.conditions) {
|
||||
for (const rule of condition.rules) {
|
||||
if (!rule.leftSide || !rule.rightSide) {
|
||||
message.warning('请完善路由配置项！');
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return `${routerGroups.value.length}条路由分支`;
|
||||
};
|
||||
|
||||
/** 添加路由分支 */
|
||||
const addRouterGroup = () => {
|
||||
routerGroups.value.push({
|
||||
nodeId: undefined,
|
||||
conditionType: ConditionType.RULE,
|
||||
conditionExpression: '',
|
||||
conditionGroups: {
|
||||
and: true,
|
||||
conditions: [
|
||||
{
|
||||
and: true,
|
||||
rules: [
|
||||
{
|
||||
opCode: '==',
|
||||
leftSide: undefined,
|
||||
rightSide: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除路由分支 */
|
||||
const deleteRouterGroup = (index: number) => {
|
||||
routerGroups.value.splice(index, 1);
|
||||
};
|
||||
|
||||
/** 递归获取所有节点 */
|
||||
const getRouterNode = (node: any) => {
|
||||
// TODO 最好还需要满足以下要求
|
||||
// 并行分支、包容分支内部节点不能跳转到外部节点
|
||||
// 条件分支节点可以向上跳转到外部节点
|
||||
while (true) {
|
||||
if (!node) break;
|
||||
if (
|
||||
node.type !== NodeType.ROUTER_BRANCH_NODE &&
|
||||
node.type !== NodeType.CONDITION_NODE
|
||||
) {
|
||||
nodeOptions.value.push({
|
||||
label: node.name,
|
||||
value: node.id,
|
||||
});
|
||||
}
|
||||
if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
|
||||
break;
|
||||
}
|
||||
if (node.conditionNodes && node.conditionNodes.length > 0) {
|
||||
node.conditionNodes.forEach((item: any) => {
|
||||
getRouterNode(item);
|
||||
});
|
||||
}
|
||||
node = node.childNode;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ openDrawer }); // 暴露方法给父组件
|
||||
</script>
|
||||
<template>
|
||||
<Drawer class="w-[630px]">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Form ref="formRef" :model="{ routerGroups }">
|
||||
<Card
|
||||
:body-style="{ padding: '10px' }"
|
||||
class="mt-4"
|
||||
v-for="(item, index) in routerGroups"
|
||||
:key="index"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex h-16 w-full items-center justify-between">
|
||||
<div class="flex items-center font-normal">
|
||||
<span class="font-medium">路由{{ index + 1 }}</span>
|
||||
<FormItem
|
||||
class="mb-0 ml-4 inline-block w-[180px]"
|
||||
:name="['routerGroups', index, 'nodeId']"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '路由目标节点不能为空',
|
||||
trigger: 'change',
|
||||
}"
|
||||
>
|
||||
<Select
|
||||
v-model:value="item.nodeId"
|
||||
placeholder="请选择路由目标节点"
|
||||
allow-clear
|
||||
>
|
||||
<SelectOption
|
||||
v-for="node in nodeOptions"
|
||||
:key="node.value"
|
||||
:value="node.value"
|
||||
>
|
||||
{{ node.label }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</div>
|
||||
<Button
|
||||
v-if="routerGroups.length > 1"
|
||||
shape="circle"
|
||||
class="flex items-center justify-center"
|
||||
@click="deleteRouterGroup(index)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:close" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<Condition
|
||||
:ref="(el) => (conditionRef[index] = el)"
|
||||
:model-value="routerGroups[index] as Record<string, any>"
|
||||
@update:model-value="(val) => (routerGroups[index] = val)"
|
||||
/>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
<Row class="mt-4">
|
||||
<Col :span="24">
|
||||
<Button
|
||||
class="flex items-center p-0"
|
||||
type="link"
|
||||
@click="addRouterGroup"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:setting" />
|
||||
</template>
|
||||
新增路由分支
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Drawer>
|
||||
</template>
|
||||
|
|
@ -95,7 +95,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
|||
header: true,
|
||||
closable: true,
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
drawerApi.setState({ isOpen: false });
|
||||
},
|
||||
onConfirm() {
|
||||
saveConfig();
|
||||
|
|
@ -111,7 +111,7 @@ const saveConfig = async () => {
|
|||
currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
|
||||
// 设置发起人的按钮权限
|
||||
currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
|
||||
drawerApi.close();
|
||||
drawerApi.setState({ isOpen: false });
|
||||
return true;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,9 +63,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
|||
header: true,
|
||||
closable: true,
|
||||
title: '',
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
saveConfig();
|
||||
},
|
||||
|
|
@ -678,12 +675,6 @@ onMounted(() => {
|
|||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<Button type="primary" @click="saveConfig">确 定</Button>
|
||||
<Button class="ml-2" @click="drawerApi.close()">取 消</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -102,9 +102,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
|||
header: true,
|
||||
closable: true,
|
||||
title: '',
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
saveConfig();
|
||||
},
|
||||
|
|
@ -212,7 +209,7 @@ const changeCandidateStrategy = () => {
|
|||
configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
|
||||
};
|
||||
|
||||
// 审批方式改变
|
||||
/** 审批方式改变 */
|
||||
const approveMethodChanged = () => {
|
||||
configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
|
||||
if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
|
||||
|
|
@ -240,18 +237,8 @@ const nodeTypeName = computed(() => {
|
|||
return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
|
||||
});
|
||||
|
||||
/** 保存配置 */
|
||||
const saveConfig = async () => {
|
||||
// 设置审批节点名称
|
||||
currentNode.value.name = nodeName.value!;
|
||||
// 设置审批类型
|
||||
currentNode.value.approveType = approveType.value;
|
||||
// 如果不是人工审批。返回
|
||||
if (approveType.value !== ApproveType.USER) {
|
||||
currentNode.value.showText = getApproveTypeText(approveType.value);
|
||||
drawerApi.close();
|
||||
return true;
|
||||
}
|
||||
/** 校验节点配置 */
|
||||
const validateConfig = async () => {
|
||||
if (!formRef.value) return false;
|
||||
if (!userTaskListenerRef.value) return false;
|
||||
|
||||
|
|
@ -274,6 +261,27 @@ const saveConfig = async () => {
|
|||
const showText = getShowText();
|
||||
if (!showText) return false;
|
||||
|
||||
return true;
|
||||
};
|
||||
/** 保存配置 */
|
||||
const saveConfig = async () => {
|
||||
// 如果不是人工审批，不执行校验，直接返回
|
||||
if (approveType.value !== ApproveType.USER) {
|
||||
currentNode.value.name = nodeName.value!;
|
||||
currentNode.value.approveType = approveType.value;
|
||||
currentNode.value.showText = getApproveTypeText(approveType.value);
|
||||
drawerApi.close();
|
||||
return true;
|
||||
}
|
||||
// 执行校验
|
||||
if (!(await validateConfig())) {
|
||||
return false;
|
||||
}
|
||||
// 设置审批节点名称
|
||||
currentNode.value.name = nodeName.value!;
|
||||
// 设置审批类型
|
||||
currentNode.value.approveType = approveType.value;
|
||||
// 设置审批人设置策略
|
||||
currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
|
||||
// 处理 candidateParam 参数
|
||||
currentNode.value.candidateParam = handleCandidateParam();
|
||||
|
|
@ -336,7 +344,7 @@ const saveConfig = async () => {
|
|||
// 审批意见
|
||||
currentNode.value.reasonRequire = configForm.value.reasonRequire;
|
||||
|
||||
currentNode.value.showText = showText;
|
||||
currentNode.value.showText = getShowText();
|
||||
drawerApi.close();
|
||||
return true;
|
||||
};
|
||||
|
|
@ -1206,10 +1214,6 @@ onMounted(() => {
|
|||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<template #footer>
|
||||
<Button type="primary" @click="saveConfig">确 定</Button>
|
||||
<Button @click="drawerApi.close()">取 消</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<script setup lang="ts">
|
||||
import type { SimpleFlowNode } from '../../consts';
|
||||
|
||||
import { inject, ref, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { buildShortUUID as generateUUID } from '@vben/utils';
|
||||
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
|
||||
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
|
||||
import { useTaskStatusClass } from '../../helpers';
|
||||
import ProcessNodeTree from '../process-node-tree.vue';
|
||||
import NodeHandler from './node-handler.vue';
|
||||
|
||||
defineOptions({ name: 'ParallelNode' });
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
// 定义事件，更新父组件
|
||||
const emits = defineEmits<{
|
||||
findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
|
||||
recursiveFindParentNode: [
|
||||
nodeList: SimpleFlowNode[],
|
||||
curentNode: SimpleFlowNode,
|
||||
nodeType: number,
|
||||
];
|
||||
'update:modelValue': [node: SimpleFlowNode | undefined];
|
||||
}>();
|
||||
const currentNode = ref<SimpleFlowNode>(props.flowNode);
|
||||
// 是否只读
|
||||
const readonly = inject<Boolean>('readonly');
|
||||
|
||||
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 || `并行${index + 1}`;
|
||||
};
|
||||
|
||||
// 点击条件名称
|
||||
const clickEvent = (index: number) => {
|
||||
showInputs.value[index] = true;
|
||||
};
|
||||
|
||||
// 新增条件
|
||||
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: [],
|
||||
};
|
||||
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 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.PARALLEL_NODE) 继续查找
|
||||
emits('findParnetNode', 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-parallel icon-size parallel"></span>
|
||||
</div>
|
||||
<Button
|
||||
v-else
|
||||
class="branch-node-add"
|
||||
color="#626aef"
|
||||
@click="addCondition"
|
||||
plain
|
||||
>
|
||||
添加分支
|
||||
</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="`${useTaskStatusClass(item.activityStatus)}`"
|
||||
>
|
||||
<div class="branch-node-title-container">
|
||||
<div v-if="showInputs[index]">
|
||||
<Input
|
||||
type="text"
|
||||
class="input-max-width 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">无优先级</div>
|
||||
</div>
|
||||
<div class="branch-node-content">
|
||||
<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 v-if="!readonly" class="node-toolbar">
|
||||
<div class="toolbar-icon">
|
||||
<IconifyIcon
|
||||
color="#0089ff"
|
||||
icon="ep:circle-close-filled"
|
||||
@click="deleteCondition(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NodeHandler
|
||||
v-model:child-node="item.childNode"
|
||||
:current-node="item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 递归显示子节点 -->
|
||||
<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>
|
||||
|
|
@ -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 RouterNodeConfig from '../nodes-config/router-node-config.vue';
|
||||
import NodeHandler from './node-handler.vue';
|
||||
|
||||
defineOptions({ name: 'RouterNode' });
|
||||
|
||||
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.ROUTER_BRANCH_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 router-node">
|
||||
<span class="iconfont icon-router"></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.ROUTER_BRANCH_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"
|
||||
@click="deleteNode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
|
||||
<NodeHandler
|
||||
v-if="currentNode"
|
||||
v-model:child-node="currentNode.childNode"
|
||||
:current-node="currentNode"
|
||||
/>
|
||||
</div>
|
||||
<RouterNodeConfig
|
||||
v-if="!readonly && currentNode"
|
||||
ref="nodeSetting"
|
||||
:flow-node="currentNode"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -4,9 +4,12 @@ import type { SimpleFlowNode } from '../consts';
|
|||
import { NodeType } from '../consts';
|
||||
import { useWatchNode } from '../helpers';
|
||||
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 ExclusiveNode from './nodes/exclusive-node.vue';
|
||||
import InclusiveNode from './nodes/inclusive-node.vue';
|
||||
import ParallelNode from './nodes/parallel-node.vue';
|
||||
import RouterNode from './nodes/router-node.vue';
|
||||
import StartUserNode from './nodes/start-user-node.vue';
|
||||
import TriggerNode from './nodes/trigger-node.vue';
|
||||
import UserTaskNode from './nodes/user-task-node.vue';
|
||||
|
|
@ -94,12 +97,12 @@ const recursiveFindParentNode = (
|
|||
@find-parent-node="findParentNode"
|
||||
/>
|
||||
<!-- 并行节点 -->
|
||||
<!-- <ParallelNode
|
||||
<ParallelNode
|
||||
v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:model-value="handleModelValueUpdate"
|
||||
@find:parent-node="findFromParentNode"
|
||||
/> -->
|
||||
@find-parent-node="findParentNode"
|
||||
/>
|
||||
<!-- 包容分支节点 -->
|
||||
<InclusiveNode
|
||||
v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
|
||||
|
|
@ -108,17 +111,17 @@ const recursiveFindParentNode = (
|
|||
@find-parent-node="findParentNode"
|
||||
/>
|
||||
<!-- 延迟器节点 -->
|
||||
<!-- <DelayTimerNode
|
||||
<DelayTimerNode
|
||||
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
/>
|
||||
<!-- 路由分支节点 -->
|
||||
<!-- <RouterNode
|
||||
<RouterNode
|
||||
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
/>
|
||||
<!-- 触发器节点 -->
|
||||
<TriggerNode
|
||||
v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
|
||||
|
|
|
|||
|
|
@ -564,7 +564,7 @@ export type RouterSetting = {
|
|||
conditionExpression: string;
|
||||
conditionGroups: ConditionGroup;
|
||||
conditionType: ConditionType;
|
||||
nodeId: string;
|
||||
nodeId: string | undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue