ci4sManagement-cloud/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx

import FormInfo from '@/components/FormInfo';
import ParameterSelect from '@/components/ParameterSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { PipelineNodeModelSerialize } from '@/types';
import { Form } from 'antd';
import styles from './index.less';

type ExperimentParameterProps = {
  nodeData: PipelineNodeModelSerialize;
};

function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
  // 控制策略
  // const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map(
  //   ([key, value]) => ({ key, value }),
  // );
  const nodeId = nodeData.id;
  const hasTaskInfo =
    nodeId &&
    !nodeId.startsWith('git-clone') &&
    !nodeId.startsWith('dataset-export') &&
    !nodeId.startsWith('model-export');

  // 输入参数
  const inParametersList = Object.entries(nodeData.in_parameters ?? {}).map(([key, value]) => ({
    key,
    value,
  }));

  // 输出参数
  const outParametersList = Object.entries(nodeData.out_parameters ?? {}).map(([key, value]) => ({
    key,
    value,
  }));

  return (
    <Form
      name="form"
      layout="vertical"
      labelCol={{
        span: 24,
      }}
      wrapperCol={{
        span: 24,
      }}
      initialValues={nodeData}
      style={{
        maxWidth: 600,
      }}
      autoComplete="off"
      className={styles['experiment-parameter']}
    >
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/static-message.png')}
          title="基本信息"
        ></SubAreaTitle>
      </div>
      <Form.Item
        label="任务名称"
        name="label"
        rules={[
          {
            required: true,
            message: '请输入任务名称',
          },
        ]}
      >
        <FormInfo />
      </Form.Item>
      <Form.Item
        label="任务ID"
        name="id"
        rules={[
          {
            required: true,
            message: '请输入任务id',
          },
        ]}
      >
        <FormInfo />
      </Form.Item>
      {hasTaskInfo && (
        <>
          <div className={styles['experiment-parameter__title']}>
            <SubAreaTitle
              image={require('@/assets/img/duty-message.png')}
              title="任务信息"
            ></SubAreaTitle>
          </div>
          <Form.Item
            label="镜像"
            name="image"
            rules={[
              {
                required: true,
                message: '请输入镜像',
              },
            ]}
          >
            <FormInfo />
          </Form.Item>
          <Form.Item label="工作目录" name="working_directory">
            <FormInfo />
          </Form.Item>

          <Form.Item label="启动命令" name="command">
            <FormInfo textArea />
          </Form.Item>
          <Form.Item
            label="资源规格"
            name="resources_standard"
            rules={[
              {
                required: true,
                message: '请输入资源规格',
              },
            ]}
          >
            <ParameterSelect dataType="resource" placeholder="请选择资源规格" display />
          </Form.Item>
          {/* <Form.Item label="挂载路径" name="mount_path">
            <FormInfo />
           </Form.Item> */}
          <Form.Item label="环境变量" name="env_variables">
            <FormInfo textArea />
          </Form.Item>
          {/* {controlStrategyList.map((item) => (
               <Form.Item key={item.key} name={['control_strategy', item.key]} label={item.value.label}>
                 <FormInfo valuePropName="showValue" />
                 </Form.Item>
            ))} */}
        </>
      )}
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/duty-message.png')}
          title="输入参数"
        ></SubAreaTitle>
      </div>
      {inParametersList.map((item) => (
        <Form.Item
          key={item.key}
          name={['in_parameters', item.key]}
          label={item.value.label + '(' + item.key + ')'}
          rules={[{ required: item.value.require ? true : false }]}
        >
          {item.value.type === 'select' ? (
            ['dataset', 'model', 'service', 'resource'].includes(item.value.item_type) ? (
              <ParameterSelect dataType={item.value.item_type as any} display />
            ) : null
          ) : (
            <FormInfo valuePropName="showValue" />
          )}
        </Form.Item>
      ))}
      <div className={styles['experiment-parameter__title']}>
        <SubAreaTitle
          image={require('@/assets/img/duty-message.png')}
          title="输出参数"
        ></SubAreaTitle>
      </div>
      {outParametersList.map((item) => (
        <Form.Item
          key={item.key}
          name={['out_parameters', item.key]}
          label={item.value.label + '(' + item.key + ')'}
          rules={[{ required: item.value.require ? true : false }]}
        >
          <FormInfo valuePropName="showValue" />
        </Form.Item>
      ))}
    </Form>
  );
}

export default ExperimentParameter;