yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 节点配置抽屉保持一致

pull/124/head
jason 2025-06-02 23:02:19 +08:00
parent 4a796b7e9b
commit 2a374b216b
7 changed files with 55 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
View File

@ -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>

13
apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
View File

@ -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>

11
apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
View File

@ -9,7 +9,6 @@ import { useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
Button,
Col,
DatePicker,
Form,
@ -123,9 +122,6 @@ const saveConfig = async () => {
const [Drawer, drawerApi] = useVbenDrawer({
title: nodeName.value,
onCancel: () => {
drawerApi.close();
},
onConfirm: saveConfig,
});
@ -244,13 +240,6 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
</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>

48
apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
View File

@ -25,9 +25,7 @@ import { ConditionType, NodeType } from '../../consts';
import { useNodeName, useWatchNode } from '../../helpers';
import Condition from './modules/condition.vue';
defineOptions({
name: 'RouterNodeConfig',
});
defineOptions({ name: 'RouterNodeConfig' });
const props = defineProps({
flowNode: {
type: Object as () => SimpleFlowNode,
@ -36,9 +34,9 @@ const props = defineProps({
});
const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
// 当前节点
/** 当前节点 */
const currentNode = useWatchNode(props);
// 节点名称
/** 节点名称 */
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.ROUTER_BRANCH_NODE,
);
@ -47,8 +45,8 @@ const nodeOptions = ref<any[]>([]);
const conditionRef = ref<any[]>([]);
const formRef = ref();
/** 保存配置 */
const saveConfig = async () => {
/** 校验节点配置 */
const validateConfig = async () => {
// 校验路由分支选择
const routeIdValid = await formRef.value.validate().catch(() => false);
if (!routeIdValid) {
@ -64,26 +62,34 @@ const saveConfig = async () => {
}
}
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 = showText;
currentNode.value.showText = getShowText();
currentNode.value.routerGroups = routerGroups.value;
drawerApi.close();
return true;
};
// 使用 useVbenDrawer
const [Drawer, drawerApi] = useVbenDrawer({
title: nodeName.value,
class: 'w-[630px]',
onCancel: () => {
drawerApi.close();
},
onConfirm: saveConfig,
});
// 显示路由分支节点配置， 由父组件调用
/** 打开路由节点配置抽屉，由父组件调用 */
const openDrawer = (node: SimpleFlowNode) => {
nodeOptions.value = [];
getRouterNode(processNodeTree?.value);
@ -95,6 +101,7 @@ const openDrawer = (node: SimpleFlowNode) => {
drawerApi.open();
};
/** 获取显示文本 */
const getShowText = () => {
if (
!routerGroups.value ||
@ -130,6 +137,7 @@ const getShowText = () => {
return `${routerGroups.value.length}条路由分支`;
};
/** 添加路由分支 */
const addRouterGroup = () => {
routerGroups.value.push({
nodeId: undefined,
@ -153,11 +161,12 @@ const addRouterGroup = () => {
});
};
/** 删除路由分支 */
const deleteRouterGroup = (index: number) => {
routerGroups.value.splice(index, 1);
};
// 递归获取所有节点
/** 递归获取所有节点 */
const getRouterNode = (node: any) => {
// TODO 最好还需要满足以下要求
// 并行分支、包容分支内部节点不能跳转到外部节点
@ -188,7 +197,7 @@ const getRouterNode = (node: any) => {
defineExpose({ openDrawer }); // 暴露方法给父组件
</script>
<template>
<Drawer>
<Drawer class="w-[630px]">
<template #title>
<div class="flex items-center">
<Input
@ -279,12 +288,5 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
</Button>
</Col>
</Row>
<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>

4
apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
View File

@ -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;
};

9
apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
View File

@ -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>

46
apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
View File

@ -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>