General-AI-Platform-Web/src/pages/Model/ModelDetail/components/createForm.tsx

import { apiFileDelete, apiFileUpload } from '@/services/business/file';
import {
  ProForm,
  ProFormInstance,
  ProFormList,
  ProFormText,
  ProFormTextArea,
  ProFormUploadDragger,
  StepsForm,
} from '@ant-design/pro-components';
import { FormListActionType } from '@ant-design/pro-form/lib';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Modal, UploadFile, message } from 'antd';
import yaml from 'js-yaml';
import React, { useEffect, useRef, useState } from 'react';
import {
  proFormItemStyleProps,
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
  proFormStepsFormProps,
} from '../../../../../config/defaultForm';
// import {beforeUploadFile} from "@/utils/common";
// @ts-ignore
import { fileApiActionUrl } from '../../../../../config/defaultApi';

export type CreateFormProps = {
  createModalOpen: boolean;
  handleModal: () => void;
  modelInfo: Record<string, any>;
  reload: any;
};
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
// interface ProjectConfig {
//   params: Array<object>;
// }
const CreateForm: React.FC<CreateFormProps> = (props) => {
  const actionFormListRef = useRef<
    FormListActionType<{
      name: string;
    }>
  >();

  const intl = useIntl();

  const [dataFormList] = useState<any>([]);
  const dataFormListRef = useRef(dataFormList);
  // const [projectFileList, setProjectFileList] = useState<UploadFile<any>[]>([]);
  const [configFileList, setConfigFileList] = useState<UploadFile<any>[]>([]);

  // const [form] = Form.useForm<Record<string, any>>();

  const [current, setCurrent] = useState(0);
  const formBaseRef = useRef<ProFormInstance>();
  const formProjectFileRef = useRef<ProFormInstance>();
  // const [filePath, setFilePath] = useState('');

  const handleFileChange = ({ file }: { file: UploadFile }) => {
    console.log(configFileList, 'handleFileChange_configFileList');
    let curFile: any;

    switch (file.status) {
      case 'uploading':
      case 'done':
        curFile = [file];
        break;
      case 'removed':
      default:
        curFile = [];
        break;
    }

    setConfigFileList([...curFile]);
  };

  // test 测试数据
  useEffect(() => {
    // if (formBaseRef) {
    formBaseRef.current?.setFieldsValue({
      version: '0.0.91', // 设备分类的suid
      comment:
        '测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注',
    });

    // }
  }, [props.createModalOpen]);
  return (
    <StepsForm<{
      name: string;
    }>
      onFinish={async (values) => {
        console.log('All form values:', values, { model_id: props.modelInfo?.model_id });
        // 在这里处理提交数据，例如调用API
        message.success('提交成功');
      }}
      stepsProps={proFormStepsFormProps.stepsProps}
      current={current}
      onCurrentChange={setCurrent}
      formProps={{
        validateMessages: {
          required: '此项为必填项',
        },
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            className="gn_model_steps_form"
            title={
              <FormattedMessage id="model_detail.version.table.list.add" defaultMessage="新增" />
            }
            width={proFormSmallModelWidth}
            onCancel={() => {
              setCurrent(0);
              formBaseRef.current?.resetFields();
              // setProjectFileList([]);
              props.handleModal();
            }}
            open={props.createModalOpen}
            footer={submitter}
            destroyOnClose
          >
            {dom}
          </Modal>
        );
      }}
    >
      {/* 版本信息 */}
      <StepsForm.StepForm<{
        name: string;
      }>
        className="gn_form"
        name="base"
        formRef={formBaseRef}
        title={
          <FormattedMessage id="model_detail.version.stepForm.base" defaultMessage="版本信息" />
        }
        stepProps={{
          description: (
            <FormattedMessage
              id="model_detail.version.stepForm.base.description"
              defaultMessage="填写版本基础信息"
            />
          ),
        }}
        onFinish={async () => {
          // setFormData(formBaseRef.current?.getFieldsValue());
          await waitTime(500);
          return true;
        }}
      >
        <ProForm.Group>
          {/*  默认填充模型 无需选择 */}
          <ProFormText
            width={proFormSmallItemStyleProps.width}
            name="model_name"
            label={
              <FormattedMessage id="model_detail.version.form.modelFkId" defaultMessage="$$$" />
            }
            required={true}
            initialValue={props.modelInfo?.name}
            debounceTime={1000}
            disabled={true}
            // request={async (keyWord) => {
            //   const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
            //     keyword: keyWord?.keyWords || '',
            //   });
            //   return resp.data.list.map((v: any) => {
            //     return {
            //       label: v.name,
            //       value: v.id,
            //     };
            //   });
            // }}
          />
          <ProFormText
            width={proFormSmallItemStyleProps.width}
            fieldProps={{
              prefix: <span>V</span>,
            }}
            name="version"
            label={<FormattedMessage id="model_detail.version.form.name" defaultMessage="版本号" />}
            placeholder={`${intl.formatMessage({
              id: 'common.please_input',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'model_detail.version.form.name',
              defaultMessage: '$$$',
            })}`}
            required={true}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="model_detail.version.form.required.name"
                    defaultMessage="name is required"
                  />
                ),
              },
            ]}
          />
          <ProFormTextArea
            width={proFormSmallItemStyleProps.width}
            name="comment"
            label={<FormattedMessage id="model_detail.version.form.remark" defaultMessage="备注" />}
            placeholder={`${intl.formatMessage({
              id: 'common.please_input',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'model_detail.version.form.remark',
              defaultMessage: '$$$',
            })}`}
            required={false}
            disabled={false}
          />
        </ProForm.Group>
      </StepsForm.StepForm>
      {/* 版本上传 */}
      <StepsForm.StepForm<{
        project_file: string;
      }>
        formRef={formProjectFileRef}
        className="gn_form"
        name="project_file"
        title={
          <FormattedMessage
            id="model_detail.version.stepForm.project_file"
            defaultMessage="版本上传"
          />
        }
        style={{ width: proFormItemStyleProps.width }}
        stepProps={{
          description: (
            <FormattedMessage
              id="model_detail.version.stepForm.project_file.description"
              defaultMessage="上传模型文件"
            />
          ),
        }}
        onFinish={async (values: any) => {
          console.log(values, 'values');
          // if ('projectFilePath' in values && values['projectFilePath'].length > 0) {
          //   let projectFilePath = values['projectFilePath'][0]?.response?.data?.path || '';
          //   setFilePath(projectFilePath);
          // }
          return true;
        }}
      >
        <ProFormUploadDragger
          label={<span className="font-bold">上传模型文件</span>}
          title={
            <div className="gn_uploadfile_title py-[16px] text1 text-center">
              <span>拖拽文件到这里，或</span>
              <a>点此添加</a>
            </div>
          }
          description=""
          icon={<i className="iconfont icon-shangchuanwenjian text_primary text-[32px]"></i>}
          name="model_file_name"
          // action={fileApiActionUrl}
          onRemove={async (file) => {
            // 这里可以添加删除文件的接口调用逻辑
            // await deleteFileFromServer(file);

            // setFileList((prevList) => {
            //   const newList = prevList.filter((item) => item.uid !== file.uid);
            //   return newList;
            // });
            const currFileId = formProjectFileRef?.current?.getFieldValue('model_file');
            const resp = await apiFileDelete({ file_md5: currFileId });
            console.log(resp, 'apiFileDelete_resp', file);
            message.success('文件已删除');
            return true; // 确保文件从文件列表中移除
          }}
          onChange={async ({ file, fileList }) => {
            // 检查文件状态

            console.log(
              file,
              fileList,
              'onChange_ProjectFile',
              formProjectFileRef?.current?.getFieldValue('model_file'),
            );
            if (file.status === 'removed') {
              // 删除文件
              // setProjectFileList(fileList.filter((item) => item.uid !== file.uid));
              // const currFileId = formProjectFileRef?.current?.getFieldValue('model_file')
              // const resp = await apiFileDelete({file_md5: currFileId})
              // console.log(resp,'apiFileDelete_resp')
              // message.success(`${file.name} 删除成功`);
            } else {
              // 处理上传
              // formProjectFileRef?.current?.setFieldValue('model_file_name', [file]);
              // handleUpload(file);
            }
            // setProjectFileList(fileList);
          }}
          max={1}
          fieldProps={{
            className: 'gn_proFormUploadDragger_formItem',
            name: 'file',
            // beforeUpload: beforeUploadFile,
            data: { path: `models/${Date.now()}` },

            headers: {
              // 'X-CSRFToken': cookie.load('csrftoken'),
              // Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
            },
            beforeUpload: async (file) => {
              const formData = new FormData();
              formData.append('file', file);
              const resp = await apiFileUpload(formData);
              formProjectFileRef?.current?.setFieldValue('model_file', resp?.data?.result);
              console.log(resp, 'apiFileUpload_resp');
              // form.setFieldValue('logo', base64);
              return false; // 阻止自动上传
            },
          }}
        />
        <div style={{ color: '#666666', marginTop: '-8px' }}>请上传格式为zip.tar.gz的模型文件</div>
      </StepsForm.StepForm>
      {/* 参数配置 */}
      <StepsForm.StepForm<{
        config: string;
      }>
        className="gn_form"
        name="config"
        title={
          <FormattedMessage id="model_detail.version.stepForm.config" defaultMessage="参数配置" />
        }
        stepProps={{
          description: (
            <FormattedMessage
              id="model_detail.version.stepForm.config.description"
              defaultMessage="参数配置"
            />
          ),
        }}
        onFinish={async (values: any) => {
          // setConfigFileList([]);
          console.log(values, 'config_values');
          let formData1 = formBaseRef.current?.getFieldsValue();
          if (formData1?.model_name) {
            await waitTime(500);
            // formData1.modelConfig = { params: values?.params || [] };
            // if (filePath) {
            //   formData1.path = filePath;
            // }
            // postModelVersionCreateModelVersion(formData)
            //   .then(() => {
            //     message.success(
            //       intl.formatMessage({ id: 'common.action.success', defaultMessage: '$$$' }),
            //     );
            //     props.handleModal();
            //     props.reload();
            //   })
            //   .catch(() => {
            //     message.error(intl.formatMessage({ id: 'common.action.failure', defaultMessage: '$$$' }));
            //     return false;
            //   });
          }
          return true;
        }}
      >
        <ProFormUploadDragger
          width={proFormSmallItemStyleProps.width}
          max={1}
          label={<span className="font-bold">模型配置文件上传</span>}
          title={
            <div className="gn_uploadfile_title py-[16px] text1 text-center">
              <span>拖拽文件到这里，或</span>
              <a>点此添加</a>
            </div>
          }
          description=""
          icon={<i className="iconfont icon-shangchuanwenjian text_primary text-[32px]"></i>}
          name="config_file"
          action={fileApiActionUrl}
          fieldProps={{
            className: 'gn_proFormUploadDragger_formItem',
            onChange: handleFileChange,
            onRemove: () => {
              let index_ids = actionFormListRef.current?.getList()?.map((v, i) => {
                return i;
              });
              actionFormListRef.current?.remove(index_ids || []);
            },
            beforeUpload: (file) => {
              if (
                !file.name.endsWith('.yaml') &&
                !file.name.endsWith('.yml') &&
                !file.name.endsWith('.json')
              ) {
                message.error('请上传yaml或json文件').then(() => {});
                return false;
              } else {
                let parsedData = {};
                file
                  .text()
                  .then((text) => {
                    if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
                      parsedData = yaml.load(text) as Record<string, unknown>;
                    }
                    if (file.name.endsWith('.json')) {
                      parsedData = JSON.parse(text) as Record<string, unknown>;
                    }
                    if (Object.keys(parsedData).length > 0) {
                      dataFormListRef.current = Object.entries(parsedData).map(([key, value]) => ({
                        name: key,
                        default: value,
                      }));

                      dataFormListRef.current.forEach((v: any, i: number) => {
                        actionFormListRef.current?.add(v, i);
                      });
                    }
                    return true;
                  })
                  .catch(() => {
                    return false;
                  });
              }
            },
          }}
        />
        <div style={{ color: '#666666', marginTop: '-8px', marginBottom: '16px' }}>
          请上传格式为zip.tar.gz的模型文件
        </div>

        {/*  // TODO label字重与上面统一, 操作按钮需要与输入框对齐   */}
        <ProFormList
          name="config_str_arr"
          label={
            <div>
              <span className="font-bold">模型参数</span>
              <div style={{ color: '#333333', padding: '8px 0 4px' }}>
                暂未上传模型配置文件，可根据业务需求手动添加参数字段~
              </div>
            </div>
          }
          actionRef={actionFormListRef}
          itemContainerRender={(doms) => {
            return <ProForm.Group>{doms}</ProForm.Group>;
          }}
          alwaysShowItemLabel
        >
          {() => {
            return (
              <>
                <ProFormText width={268} key="name" name="name" label="键名" />
                <ProFormText width={268} key="default" name="default" label="默认值" />
              </>
            );
          }}
        </ProFormList>
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default CreateForm;