feat: prompt when leaving the approval process page

Author: 1myuan

frontend/packages/web/src/components/business/crm-flow/components/canvas/flowCanvas.vue

@@ -199,6 +199,24 @@
     graphController.value.render(cellsWithSelection);
   }
 
+  const canvasRef = ref<HTMLElement | null>(null);
+
+  function refreshCanvas() {
+    nextTick(() => {
+      const graph = graphController.value?.getGraph();
+      const resizeTarget = flowCanvasRef.value ?? canvasRef.value;
+      if (!graph || !resizeTarget) {
+        return;
+      }
+
+      const { clientWidth, clientHeight } = resizeTarget;
+      if (clientWidth && clientHeight) {
+        graph.resize(clientWidth, clientHeight);
+      }
+      renderFlow();
+    });
+  }
+
   function updateRenderedNodeState() {
     const graph = graphController.value?.getGraph();
     if (!graph) {
@@ -247,7 +265,6 @@
   }
 
   let hasAutoFitted = false;
-  const canvasRef = ref<HTMLElement | null>(null);
 
   function fitAfterInit() {
     if (!graphController.value || !canvasRef.value || hasAutoFitted) {
@@ -383,6 +400,10 @@
     graphController.value = null;
     closeAddPopover();
   });
+
+  defineExpose({
+    refreshCanvas,
+  });
 </script>
 
 <style scoped lang="less">

frontend/packages/web/src/components/business/crm-flow/index.vue

@@ -2,6 +2,7 @@
   <div class="crm-flow relative flex h-full w-full">
     <div class="crm-flow__main relative flex-1 overflow-hidden">
       <FlowCanvas
+        ref="flowCanvasRef"
         :readonly="props.readonly"
         :flow="flow"
         :selection="selection"
@@ -25,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, useSlots } from 'vue';
+  import { computed, ref, useSlots } from 'vue';
 
   import { useI18n } from '@lib/shared/hooks/useI18n';
 
@@ -114,9 +115,16 @@
     });
   }
 
+  const flowCanvasRef = ref<InstanceType<typeof FlowCanvas> | null>(null);
+
+  function refreshCanvas() {
+    flowCanvasRef.value?.refreshCanvas();
+  }
+
   defineExpose({
     flow,
     selectNode,
+    refreshCanvas,
   });
 </script>
 

frontend/packages/web/src/components/business/crm-process-drawer/index.vue

@@ -6,10 +6,10 @@
     :footer="false"
     :closable="false"
     :close-on-esc="false"
+    :mask-closable="false"
     :loading="loading"
     header-class="crm-process-drawer-header"
     body-content-class="!p-0"
-    @cancel="handleCancel"
   >
     <template #header>
       <div class="crm-process-drawer-header-content">
@@ -101,7 +101,6 @@
 
   function handleCancel() {
     emit('cancel');
-    visible.value = false;
   }
 
   watchEffect(() => {

frontend/packages/web/src/views/system/process/process/components/addProcessDrawer.vue

@@ -5,6 +5,8 @@
     :tabList="tabList"
     :loading="loading"
     :readonly="isDetail"
+    @pointerdown.capture="handleUserInteraction"
+    @keydown.capture="handleUserInteraction"
     @save="handleSave"
     @next-step="handleNextStep"
     @cancel="handleCancel"
@@ -41,6 +43,7 @@
         :need-detail="!!props.sourceId"
         :readonly="isDetail"
         :option-map="detailOptionMap"
+        @change="markUnsaved"
         @switch-more-setting="activeTab = 'moreSetting'"
       />
       <moreSetting
@@ -121,13 +124,54 @@
     },
   ];
 
-  function handleCancel() {
+  const unsaved = ref(false);
+  const userInteracted = ref(false); // 防止没编辑就弹出提示
+  const loading = ref(false);
+
+  function markUnsaved() {
+    if (!props.readonly && !props.isDetail && userInteracted.value) {
+      unsaved.value = true;
+    }
+  }
+
+  function handleUserInteraction() {
+    if (!props.readonly && !props.isDetail) {
+      userInteracted.value = true;
+    }
+  }
+
+  function closeDrawer() {
+    unsaved.value = false;
+    userInteracted.value = false;
     visible.value = false;
     form.value = cloneDeep(initForm);
     detailOptionMap.value = {};
     emit('cancel');
   }
 
+  function showUnsavedLeaveTip() {
+    openModal({
+      type: 'warning',
+      title: t('common.unSaveLeaveTitle'),
+      content: t('common.editUnsavedLeave'),
+      positiveText: t('common.confirm'),
+      negativeText: t('common.cancel'),
+      onPositiveClick: async () => {
+        closeDrawer();
+      },
+    });
+  }
+
+  function handleCancel() {
+    if (!loading.value) {
+      if (unsaved.value) {
+        showUnsavedLeaveTip();
+      } else {
+        closeDrawer();
+      }
+    }
+  }
+
   function handleNextStep() {
     const index = tabList.findIndex((item) => item.name === activeTab.value);
     if (index === tabList.length - 1) {
@@ -136,8 +180,6 @@
     activeTab.value = tabList[index + 1].name;
   }
 
-  const loading = ref(false);
-
   async function handleSubmit() {
     try {
       loading.value = true;
@@ -157,7 +199,7 @@
         Message.success(t('common.addSuccess'));
       }
       emit('refresh');
-      handleCancel();
+      closeDrawer();
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -173,9 +215,14 @@
         title: t('common.saveFailed'),
         positiveText: t('process.process.flow.toConfig'),
         content: t('process.process.flow.nodeNameNotSet'),
-        onPositiveClick: async () => undefined,
+        negativeText: t('common.cancel'),
+        onPositiveClick: async () => {
+          activeTab.value = 'process';
+          nextTick(() => {
+            approvalFlowDesignRef.value?.refreshCanvas();
+          });
+        },
       });
-      activeTab.value = 'process';
       return;
     }
 
@@ -207,6 +254,10 @@
       editingName.value = result.name;
       nextTick(() => {
         approvalFlowDesignRef.value?.setProcessData(result.nodes ?? [], result.links ?? []);
+        nextTick(() => {
+          unsaved.value = false;
+          userInteracted.value = false;
+        });
       });
     } catch (error) {
       // eslint-disable-next-line no-console
@@ -270,9 +321,26 @@
     (val) => {
       if (!val) {
         activeTab.value = 'process';
+        userInteracted.value = false;
+        return;
+      }
+
+      if (!props.sourceId) {
+        unsaved.value = false;
+        userInteracted.value = false;
       }
     }
   );
+
+  watch(
+    () => [form.value.basicConfig, form.value.moreConfig],
+    () => {
+      markUnsaved();
+    },
+    {
+      deep: true,
+    }
+  );
 </script>
 
 <style lang="less">

frontend/packages/web/src/views/system/process/process/components/approval-flow/approval-node/tabs/afterApprovalTab.vue

@@ -56,7 +56,7 @@
             </n-form-item>
           </div>
           <n-form-item :path="`${index}.enable`">
-            <n-switch v-model:value="line.enable" :disabled="props.readonly" />
+            <n-switch v-model:value="line.enable" :disabled="isFieldUpdateSwitchDisabled(line)" />
           </n-form-item>
           <n-button ghost class="px-[7px]" :disabled="props.readonly" @click="handleDeleteFieldUpdate(index)">
             <template #icon>
@@ -348,6 +348,18 @@
     return fieldType && isSupportedFieldValueType(fieldType) ? fieldValueComponentMap[fieldType] : null;
   }
 
+  function isEmptyFieldValue(value: unknown) {
+    if (Array.isArray(value)) {
+      return !value.length;
+    }
+
+    return value === null || value === undefined || value === '';
+  }
+
+  function isFieldUpdateSwitchDisabled(line: ApprovalFieldUpdateConfig) {
+    return props.readonly || !line.fieldId || isEmptyFieldValue(line.fieldValue);
+  }
+
   // 切换左侧字段时，右侧值按批量编辑逻辑重置成该字段自己的默认值
   function handleFieldUpdate(line: ApprovalFieldUpdateConfig, fieldId: string) {
     if (props.readonly) {

frontend/packages/web/src/views/system/process/process/components/approval-flow/index.vue

@@ -105,6 +105,7 @@
 
   const emit = defineEmits<{
     (event: 'switchMoreSetting'): void;
+    (event: 'change'): void;
   }>();
   const { t } = useI18n();
 
@@ -169,6 +170,10 @@
     });
   }
 
+  function refreshCanvas() {
+    crmFlowRef.value?.refreshCanvas();
+  }
+
   onMounted(() => {
     nextTick(() => {
       selectStartNodeOnInit();
@@ -253,11 +258,45 @@
     }
   );
 
+  function resetToDefaultFlow() {
+    setConditionDrawerVisible.value = false;
+    activeConditionBranch.value = null;
+    flowSchema.value = createDefaultFlow(startNodeDescription.value);
+
+    nextTick(() => {
+      selectStartNodeOnInit();
+    });
+  }
+
+  watch(
+    () => basicConfig.value.formType,
+    (formType, oldFormType) => {
+      if (props.readonly || !oldFormType || formType === oldFormType) {
+        return;
+      }
+
+      resetToDefaultFlow();
+    }
+  );
+
+  watch(
+    flowSchema,
+    () => {
+      if (!props.readonly) {
+        emit('change');
+      }
+    },
+    {
+      deep: true,
+    }
+  );
+
   defineExpose({
     validateFlowNodes,
     getProcessNodes,
     getProcessLinks,
     setProcessData,
+    refreshCanvas,
   });
 </script>