ci4sManagement-cloud/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx

import { Form, Input, Modal, Select } from 'antd';
import { useState } from 'react';
import styles from './addExperimentModal.less';

type FormData = {
  name?: string;
  description?: string;
  workflow_id?: string | number;
};

type AddExperimentModalProps = {
  isAdd: boolean;
  open: boolean;
  onCancel: () => void;
  onFinish: () => void;
  workflowList: Workflow[];
  initialValues: FormData;
};

interface GlobalParam {
  param_name: string;
  param_value: string;
}

interface Workflow {
  id: string | number;
  name: string;
  global_param?: GlobalParam[] | null;
}

function AddExperimentModal({
  isAdd,
  open,
  onCancel,
  onFinish,
  workflowList = [],
  initialValues = {},
}: AddExperimentModalProps) {
  const dialogTitle = isAdd ? '新建实验' : '编辑实验';
  const workflowDisabled = isAdd ? false : true;
  const [globalParam, setGlobalParam] = useState<GlobalParam[]>([]);
  const [form] = Form.useForm();
  // 除了流水线选择发生变化
  const handleWorkflowChange = (id: string) => {
    const pipeline: Workflow | undefined = workflowList.find((v) => v.id === id);
    if (pipeline && pipeline.global_param) {
      setGlobalParam(pipeline.global_param);
      const fields = pipeline.global_param.reduce((acc, item) => {
        acc[item.param_name] = item.param_value;
        return acc;
      }, {} as Record<string, string>);
      form.setFieldsValue(fields);
    } else {
      setGlobalParam([]);
    }
  };
  return (
    <Modal
      className={styles.modal}
      title={
        <div className={styles.title}>
          <img className={styles.image} src={`/assets/images/pipeline-edit-icon.png`} alt="" />
          {dialogTitle}
        </div>
      }
      open={open}
      okButtonProps={{
        htmlType: 'submit',
        form: 'form',
      }}
      onCancel={onCancel}
      destroyOnClose={true}
    >
      <Form
        name="form"
        layout="vertical"
        initialValues={initialValues}
        onFinish={onFinish}
        autoComplete="off"
        form={form}
      >
        <Form.Item
          label="实验名称"
          name="name"
          rules={[{ required: true, message: '请输入实验名称' }]}
        >
          <Input placeholder="请输入实验名称" maxLength={64} showCount allowClear />
        </Form.Item>
        <Form.Item
          label="实验描述"
          name="description"
          rules={[{ required: true, message: '请输入实验描述' }]}
        >
          <Input placeholder="请输入实验描述" maxLength={128} showCount allowClear />
        </Form.Item>
        <Form.Item
          label="选择流水线"
          name="workflow_id"
          rules={[{ required: true, message: '请选择流水线' }]}
        >
          <Select
            disabled={workflowDisabled}
            placeholder="请选择流水线"
            onChange={handleWorkflowChange}
          >
            {Array.isArray(workflowList)
              ? workflowList.map((item) => {
                  return (
                    <Select.Option key={item.id} value={item.id}>
                      {item.name}
                    </Select.Option>
                  );
                })
              : null}
          </Select>
        </Form.Item>
        {globalParam.map((item) => (
          <Form.Item label={item.param_name} name={item.param_name} key={item.param_name}>
            <Input />
          </Form.Item>
        ))}
      </Form>
    </Modal>
  );
}

export default AddExperimentModal;