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

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

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

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

@@ -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({
+defineOptions({ name: 'CopyTaskNodeConfig' });
-  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>

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

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

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

@@ -25,9 +25,7 @@ import { ConditionType, NodeType } from '../../consts';
 import { useNodeName, useWatchNode } from '../../helpers';
 import Condition from './modules/condition.vue';
 
-defineOptions({
+defineOptions({ name: 'RouterNodeConfig' });
-  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>

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

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

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

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

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

@@ -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 () => {
+const validateConfig = 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;
-  }
   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>