flow-playform-react/src/pages/componentDevelopment/componentEnv/addModal.tsx

import React, { useEffect, useState, useRef } from 'react';
import { Modal, Steps, Select, Grid, Input, Form, Message, Button } from '@arco-design/web-react';
import EnvExtra from '@/pages/componentDevelopment/componentEnv/envExtra';
import FormEditor, { FormEditorInstance } from '@/pages/componentDevelopment/componentEnv/formEditor';

const Step = Steps.Step;

// 定义环境类型选项的接口
interface EnvTypeOption {
  id: string | number;
  classifyType: string;
  classifyName: string;
  dictKey: string;
}

// 定义组件 Props 类型
interface AddModalProps {
  visible: boolean;
  envType: EnvTypeOption[];
  setVisible: (visible: boolean) => void;
  onOk?: (value) => void;
  record?: any; // 添加record属性用于接收外部传入的数据
}

const AddModal = ({ visible, envType, setVisible, onOk, record }: AddModalProps) => {
  const [currentStep, setCurrentStep] = useState(1);
  const [envTypeOptions, setEnvTypeOptions] = useState<EnvTypeOption[]>([]);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [currentEnvData, setCurrentEnvData] = useState<any>({});
  const formRef = useRef<FormEditorInstance>(null);

  useEffect(() => {
    if (envType.length > 0) setEnvTypeOptions(envType);
  }, [envType]);

  // 当组件接收到record参数时，初始化数据并跳转到第二步
  useEffect(() => {
    if (record && Object.keys(record).length > 0) setCurrentStep(2);
    else setCurrentStep(1);
    setCurrentEnvData(record);
  }, [record, visible]);

  const handleOk = () => {
    // 当前步骤为1时，触发表单提交
    if (currentStep === 1) {
      formRef.current && formRef.current.handleOk();
      return;
    }

    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleStepOneSuccess = (value) => {
    setCurrentStep(2);
    setCurrentEnvData(value);
    onOk && onOk(value);
  };

  // 返回第一步的处理函数
  const handleBackToStepOne = () => {
    setCurrentStep(1);
  };

  return (
    <Modal
      title="新增环境"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      autoFocus={false}
      focusLock={true}
      style={{ width: 1280 }}
      okText={currentStep === 1 ? '创建并生成证书' : '完成'}
      confirmLoading={confirmLoading}
      footer={[
        <Button key="cancel" onClick={handleCancel}>取消</Button>,
        currentStep === 2 && (
          <Button key="back" onClick={handleBackToStepOne}>编辑基础信息</Button>
        ),
        <Button
          key="ok"
          type="primary"
          loading={confirmLoading}
          onClick={handleOk}
        >
          {currentStep === 1 ? '创建并生成证书' : '完成'}
        </Button>
      ]}
    >
      <Steps current={currentStep} style={{ maxWidth: 780, margin: '0 auto' }}>
        <Step title="基础配置" />
        <Step title="配置文件与环境测试" />
      </Steps>

      {currentStep === 1 && (
        <FormEditor
          ref={formRef}
          record={record}
          envTypeOptions={envTypeOptions}
          setVisible={setVisible}
          setConfirmLoading={setConfirmLoading}
          onSuccess={(value) => handleStepOneSuccess(value)}
        />
      )}

      {currentStep === 2 && (
        <EnvExtra
          currentEnvData={currentEnvData}
        />
      )}

    </Modal>
  );
};

export default AddModal;