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

2025-06-02 23:02:19 +08:00
parent 4a796b7e9b
commit 2a374b216b
7 changed files with 55 additions and 92 deletions
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
+++ b/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>
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/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({
-  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>
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
+++ b/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>
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
+++ b/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({
-  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>
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/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;
 };

--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/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>
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/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 () => {
-  // 设置审批节点名称
-  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>