@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/settings/wrappers/contextual/StepRequiredSettingsDialog.tsx

@@ -0,0 +1,446 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { createSchemaField, FormConsumer, ISchema } from '@formily/react';
+import { toJS } from '@formily/reactive';
+import { Button, message } from 'antd';
+import React from 'react';
+import { FlowRuntimeContext } from '../../../../flowContext';
+import { FlowSettingsContextProvider, useFlowSettingsContext } from '../../../../hooks/useFlowSettingsContext';
+import { FlowModel } from '../../../../models';
+import { StepDefinition } from '../../../../types';
+import {
+  compileUiSchema,
+  getT,
+  resolveDefaultParams,
+  resolveStepUiSchema,
+  setupRuntimeContextSteps,
+} from '../../../../utils';
+
+/**
+ * 检查步骤是否已经有了所需的配置值
+ * @param uiSchema 步骤的 UI Schema
+ * @param currentParams 当前步骤的参数
+ * @returns 是否已经有了所需的配置值
+ */
+function hasRequiredParams(uiSchema: Record<string, any>, currentParams: Record<string, any>): boolean {
+  // 检查 uiSchema 中所有 required 为 true 的字段
+  for (const [fieldKey, fieldSchema] of Object.entries(uiSchema)) {
+    if (fieldSchema.required === true) {
+      // 如果字段是必需的，但当前参数中没有值或值为空
+      const value = currentParams[fieldKey];
+      if (value === undefined || value === null || value === '') {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+const SchemaField = createSchemaField();
+
+/**
+ * 多步骤上下文提供器 - 为每个步骤提供相应的上下文信息
+ * 能够根据当前步骤动态切换上下文
+ */
+interface MultiStepContextProviderProps {
+  model: any;
+  requiredSteps: Array<{
+    flowKey: string;
+    stepKey: string;
+    step: StepDefinition;
+    uiSchema: Record<string, any>;
+    title: string;
+    flowTitle: string;
+  }>;
+  formStep: any; // FormStep实例，用于获取当前步骤
+  children: React.ReactNode;
+}
+
+const MultiStepContextProvider: React.FC<MultiStepContextProviderProps> = ({
+  model,
+  requiredSteps,
+  formStep,
+  children,
+}) => {
+  // 获取当前步骤索引
+  const currentStepIndex = formStep?.current ?? 0;
+  const currentStepInfo = requiredSteps[currentStepIndex];
+
+  // 根据当前步骤创建上下文
+  const flowRuntimeContext = React.useMemo(() => {
+    const { flowKey, step } = currentStepInfo;
+    const flow = model.getFlow(flowKey);
+
+    const ctx = new FlowRuntimeContext(model, flowKey, 'settings');
+    setupRuntimeContextSteps(ctx, flow?.steps || {}, model, flowKey);
+    ctx.defineProperty('currentStep', { value: step });
+    return ctx;
+  }, [model, currentStepInfo]);
+
+  return <FlowSettingsContextProvider value={flowRuntimeContext}>{children}</FlowSettingsContextProvider>;
+};
+
+/**
+ * 分步表单对话框的属性接口
+ */
+export interface StepFormDialogProps {
+  model: FlowModel;
+  dialogWidth?: number | string;
+  dialogTitle?: string;
+}
+
+/**
+ * StepFormDialog组件 - 使用 FormDialog 和 FormStep 显示所有需要配置参数的步骤
+ * @param props.model 模型实例
+ * @param props.dialogWidth 对话框宽度，默认为800
+ * @param props.dialogTitle 自定义对话框标题，默认为"步骤参数配置"
+ * @returns Promise<any> 返回表单提交的值
+ */
+const openRequiredParamsStepFormDialog = async ({
+  model,
+  dialogWidth = 800,
+  dialogTitle,
+}: StepFormDialogProps): Promise<any> => {
+  const t = getT(model);
+  const defaultTitle = dialogTitle || t('Step parameter configuration');
+
+  if (!model) {
+    message.error(t('Invalid model provided'));
+    throw new Error(t('Invalid model provided'));
+  }
+
+  // 创建一个Promise, 并最终返回，当此弹窗关闭时此promise resolve或者reject
+  return new Promise((resolve, reject) => {
+    (async () => {
+      try {
+        // 获取所有流程
+        const allFlows = (model as FlowModel).getFlows();
+
+        // 收集所有需要配置参数的步骤
+        const requiredSteps: Array<{
+          flowKey: string;
+          stepKey: string;
+          step: StepDefinition;
+          uiSchema: Record<string, any>;
+          title: string;
+          flowTitle: string;
+        }> = [];
+
+        for (const [flowKey, flow] of allFlows) {
+          for (const stepKey in flow.steps) {
+            const step = flow.steps[stepKey];
+
+            // 只处理 paramsRequired 为 true 的步骤
+            if (step.paramsRequired || step.preset) {
+              // 使用提取的工具函数解析并合并uiSchema
+              const mergedUiSchema = await resolveStepUiSchema(model, flow, step);
+
+              // 如果有可配置的UI Schema，检查是否已经有了所需的配置值
+              if (mergedUiSchema) {
+                // 获取当前步骤的参数
+                const currentStepParams = model.getStepParams(flowKey, stepKey) || {};
+
+                // 检查是否已经有了所需的配置值
+                const hasAllRequiredParams = false; // hasRequiredParams(mergedUiSchema, currentStepParams);
+                console.log(`Flow: ${flowKey}, Step: ${stepKey}, hasAllRequiredParams:`, hasAllRequiredParams);
+
+                // 只有当缺少必需参数时才添加到列表中
+                if (!hasAllRequiredParams) {
+                  requiredSteps.push({
+                    flowKey,
+                    stepKey,
+                    step,
+                    uiSchema: mergedUiSchema,
+                    title: step.title || stepKey,
+                    flowTitle: flow.title || flowKey,
+                  });
+                }
+              }
+            }
+          }
+        }
+
+        console.log('Required steps:', requiredSteps);
+
+        // 如果没有需要配置的步骤，显示提示
+        if (requiredSteps.length === 0) {
+          resolve({});
+          return;
+        }
+
+        // 获取所有步骤的初始值
+        const initialValues: Record<string, any> = {};
+
+        for (const { flowKey, stepKey, step } of requiredSteps) {
+          const stepParams = model.getStepParams(flowKey, stepKey) || {};
+          // 如果step使用了action，也获取action的defaultParams
+          let actionDefaultParams = {};
+          if (step.use) {
+            const action = model.flowEngine?.getAction?.(step.use);
+            actionDefaultParams = action.defaultParams || {};
+          }
+          // Create flowRuntimeContext for this step
+          const flowRuntimeContext = new FlowRuntimeContext(model, flowKey, 'settings');
+          const flow = model.getFlow(flowKey);
+          if (flow) {
+            setupRuntimeContextSteps(flowRuntimeContext, flow.steps, model, flowKey);
+          }
+          flowRuntimeContext.defineProperty('currentStep', { value: step });
+
+          // 解析 defaultParams
+          const resolvedActionDefaultParams = await resolveDefaultParams(actionDefaultParams, flowRuntimeContext);
+          const resolvedDefaultParams = await resolveDefaultParams(step.defaultParams, flowRuntimeContext);
+          const mergedParams = {
+            ...toJS(resolvedActionDefaultParams),
+            ...toJS(resolvedDefaultParams),
+            ...toJS(stepParams),
+          };
+
+          if (Object.keys(mergedParams).length > 0) {
+            if (!initialValues[flowKey]) {
+              initialValues[flowKey] = {};
+            }
+            initialValues[flowKey][stepKey] = mergedParams;
+          }
+        }
+
+        // 构建分步表单的 Schema
+        const stepPanes: Record<string, any> = {};
+
+        requiredSteps.forEach(({ flowKey, stepKey, uiSchema, title, flowTitle }) => {
+          const stepId = `${flowKey}_${stepKey}`;
+
+          stepPanes[stepId] = {
+            type: 'void',
+            'x-component': 'FormStep.StepPane',
+            'x-component-props': {
+              title: `${title}`,
+              description: `Flow: ${flowTitle}`,
+            },
+            properties: {
+              layout: {
+                type: 'void',
+                'x-component': 'FormLayout',
+                'x-component-props': {
+                  layout: 'vertical',
+                },
+                properties: {
+                  [flowKey]: {
+                    type: 'object',
+                    properties: {
+                      [stepKey]: {
+                        type: 'object',
+                        properties: uiSchema,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          };
+        });
+
+        // 构建完整的表单Schema
+        // 当只有一个步骤时，不使用FormStep组件，直接渲染表单内容
+        const formSchema: ISchema =
+          requiredSteps.length === 1
+            ? {
+                type: 'object',
+                properties: {
+                  // 直接渲染单个步骤的内容，不显示步骤指示器
+                  ...Object.values(stepPanes)[0].properties,
+                },
+              }
+            : {
+                type: 'object',
+                properties: {
+                  step: {
+                    type: 'void',
+                    'x-component': 'FormStep',
+                    'x-component-props': {
+                      formStep: '{{formStep}}',
+                    },
+                    properties: stepPanes,
+                  },
+                },
+              };
+
+        // 动态导入所需组件
+        const { FormDialog, FormStep } = await import('@formily/antd-v5');
+        // 创建分步表单实例（只有多个步骤时才需要）
+        const formStep = requiredSteps.length > 1 ? FormStep.createFormStep(0) : null;
+
+        const flowEngine = model.flowEngine;
+        const scopes = {
+          formStep,
+          totalSteps: requiredSteps.length,
+          requiredSteps,
+          useFlowSettingsContext,
+          ...flowEngine.flowSettings?.scopes,
+        };
+
+        // 创建FormDialog
+        const formDialog = FormDialog(
+          {
+            title: dialogTitle || t('Step parameter configuration'),
+            width: dialogWidth,
+            footer: null, // 移除默认的底部按钮，使用自定义的导航按钮
+            destroyOnClose: true,
+          },
+          (form) => {
+            const handleSubmit = async () => {
+              try {
+                await form.submit();
+                const currentValues = form.values;
+
+                // 保存每个步骤的参数
+                requiredSteps.forEach(({ flowKey, stepKey }) => {
+                  const stepValues = currentValues[flowKey]?.[stepKey];
+                  if (stepValues) {
+                    model.setStepParams(flowKey, stepKey, stepValues);
+                  }
+                });
+
+                await model.saveStepParams();
+                // message.success('所有步骤参数配置已保存');
+                resolve(currentValues);
+                formDialog.close();
+              } catch (error) {
+                console.error(t('Error submitting form'), ':', error);
+                // reject(error);
+                // 这里不需要reject，因为forConfirm会处理
+              }
+            };
+
+            const handleClose = () => {
+              formDialog.close();
+              resolve({});
+            };
+
+            const dialogScopes = {
+              ...scopes,
+              closeDialog: handleClose,
+              handleNext: () => {
+                // 验证当前步骤的表单
+                form
+                  .validate()
+                  .then(() => {
+                    if (formStep) {
+                      formStep.next();
+                    }
+                  })
+                  .catch((errors: any) => {
+                    console.log(t('Form validation failed'), ':', errors);
+                    // 可以在这里添加更详细的错误处理
+                  });
+              },
+            };
+
+            // 编译 formSchema 中的表达式
+            const compiledFormSchema = compileUiSchema(dialogScopes, formSchema);
+
+            return (
+              <>
+                <MultiStepContextProvider model={model} requiredSteps={requiredSteps} formStep={formStep}>
+                  <SchemaField
+                    schema={compiledFormSchema}
+                    components={{
+                      FormStep,
+                      ...flowEngine.flowSettings?.components,
+                    }}
+                    scope={dialogScopes}
+                  />
+                </MultiStepContextProvider>
+                <FormConsumer>
+                  {() => (
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        gap: 8,
+                        marginTop: 24,
+                        paddingTop: 16,
+                        borderTop: '1px solid #f0f0f0',
+                      }}
+                    >
+                      {/* 只有一个步骤时，只显示完成按钮 */}
+                      {requiredSteps.length === 1 ? (
+                        <Button type="primary" onClick={handleSubmit}>
+                          {t('Complete configuration')}
+                        </Button>
+                      ) : (
+                        <>
+                          <Button
+                            disabled={!formStep?.allowBack}
+                            onClick={() => {
+                              if (formStep) {
+                                formStep.back();
+                              }
+                            }}
+                          >
+                            {t('Previous step')}
+                          </Button>
+                          <Button
+                            disabled={!formStep?.allowNext}
+                            type="primary"
+                            onClick={() => {
+                              // 验证当前步骤的表单
+                              form
+                                .validate()
+                                .then(() => {
+                                  if (formStep) {
+                                    formStep.next();
+                                  }
+                                })
+                                .catch((errors: any) => {
+                                  console.log(t('Form validation failed'), ':', errors);
+                                  // 可以在这里添加更详细的错误处理
+                                });
+                            }}
+                            style={{
+                              display: (formStep?.current ?? 0) < requiredSteps.length - 1 ? 'inline-block' : 'none',
+                            }}
+                          >
+                            {t('Next step')}
+                          </Button>
+                          <Button
+                            disabled={formStep?.allowNext}
+                            type="primary"
+                            onClick={handleSubmit}
+                            style={{
+                              display: (formStep?.current ?? 0) >= requiredSteps.length - 1 ? 'inline-block' : 'none',
+                            }}
+                          >
+                            {t('Complete configuration')}
+                          </Button>
+                        </>
+                      )}
+                    </div>
+                  )}
+                </FormConsumer>
+              </>
+            );
+          },
+        );
+
+        // 打开对话框
+        formDialog.open({
+          initialValues: compileUiSchema(scopes, initialValues),
+        });
+      } catch (error) {
+        reject(new Error(`${t('Failed to import FormDialog or FormStep')}: ${error.message}`));
+      }
+    })();
+  }).catch((e) => {
+    console.error(e);
+  });
+};
+
+export { openRequiredParamsStepFormDialog };

package/src/components/settings/wrappers/contextual/StepSettings.tsx

@@ -0,0 +1,109 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { autorun, model as observableModel } from '@formily/reactive';
+import { message } from 'antd';
+import { FlowRuntimeContext } from '../../../../flowContext';
+import { StepSettingsProps } from '../../../../types';
+import { getT, resolveUiMode, setupRuntimeContextSteps } from '../../../../utils';
+import { openStepSettingsDialog } from './StepSettingsDialog';
+import { openStepSettingsDrawer } from './StepSettingsDrawer';
+
+/**
+ * 统一的步骤设置入口函数
+ * 根据步骤的 uiMode 配置自动选择使用 Dialog 或 Drawer
+ * @param props.model 模型实例
+ * @param props.flowKey 流程Key
+ * @param props.stepKey 步骤Key
+ * @param props.width 对话框/抽屉宽度，默认为600
+ * @param props.title 自定义标题，默认使用step的title
+ * @returns Promise<any> 返回表单提交的值
+ */
+const openStepSettings = async ({ model, flowKey, stepKey, width = 600, title }: StepSettingsProps): Promise<any> => {
+  const t = getT(model);
+
+  // 获取流程和步骤信息
+  const flow = model.getFlow(flowKey);
+  const step = flow?.steps?.[stepKey];
+
+  if (!flow) {
+    message.error(t('Flow with key {{flowKey}} not found', { flowKey }));
+    throw new Error(t('Flow with key {{flowKey}} not found', { flowKey }));
+  }
+
+  if (!step) {
+    message.error(t('Step with key {{stepKey}} not found', { stepKey }));
+    throw new Error(t('Step with key {{stepKey}} not found', { stepKey }));
+  }
+
+  // 创建设置专用的流程运行时上下文
+  const ctx = new FlowRuntimeContext(model, flowKey, 'settings');
+  setupRuntimeContextSteps(ctx, flow.steps, model, flowKey);
+  ctx.defineProperty('currentStep', { value: step });
+
+  // 解析 uiMode，支持函数式
+  const resolvedUiMode = await resolveUiMode(step.uiMode, ctx);
+
+  // 提取模式和属性
+  let settingMode: 'dialog' | 'drawer' | 'embed';
+  let uiModeProps: Record<string, any> = {};
+  let cleanup: () => void;
+
+  if (typeof resolvedUiMode === 'string') {
+    settingMode = resolvedUiMode;
+  } else if (typeof resolvedUiMode === 'object') {
+    settingMode = resolvedUiMode.type || 'dialog';
+    uiModeProps = observableModel(resolvedUiMode.props || {});
+    const disposer = autorun(() => {
+      resolveUiMode(step.uiMode, ctx)
+        .then((newUiMode) => {
+          if (typeof newUiMode === 'object') {
+            Object.assign(uiModeProps, newUiMode.props || {});
+          }
+        })
+        .catch((error) => {
+          console.warn('Error resolving uiMode:', error);
+        });
+    });
+
+    cleanup = () => {
+      disposer();
+    };
+  } else {
+    // 默认使用 dialog 模式
+    settingMode = 'dialog';
+  }
+
+  // 根据 settingMode 选择相应的打开方式
+  if (settingMode === 'drawer') {
+    return openStepSettingsDrawer({
+      model,
+      flowKey,
+      stepKey,
+      drawerWidth: width,
+      drawerTitle: title,
+      ctx,
+      uiModeProps,
+      cleanup,
+    });
+  } else {
+    return openStepSettingsDialog({
+      model,
+      flowKey,
+      stepKey,
+      dialogWidth: width,
+      dialogTitle: title,
+      ctx,
+      uiModeProps,
+      cleanup,
+    });
+  }
+};
+
+export { openStepSettings, openStepSettingsDialog, openStepSettingsDrawer };