General-AI-Platform-Web/src/pages/Model/ModelRuntimeLib/components/updateForm.tsx

import { CommButton } from '@/components/Button';
import { apiModelHubEdit, apiModelHubSync } from '@/services/business/model';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React, { useEffect, useState } from 'react';

import { isSuccessApi } from '@/utils/forApi';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';

export type UpdateFormProps = {
  updateModalOpen: boolean;
  values: Record<string, any>;
  handleModal: () => void;
  reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [openFiles, setOpenFiles] = useState<boolean>(false);
  const [form] = Form.useForm<API.ModelCategory>();
  function resetForm() {
    form.resetFields();
  }
  useEffect(() => {
    if (props.updateModalOpen && props.values?.id) {
      form.setFieldsValue({ ...props.values });
      console.log(props.values, 'useEffect_values');
    } else {
      resetForm();
    }
  }, [props.updateModalOpen, props.values]);
  return (
    <ModalForm<API.ModelCategory>
      className="gn_form gn_modal_form"
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'model_runtimeLib.list.table.form.action.edit',
        defaultMessage: '编辑',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values, 'add_finish_values');
        let resp = await apiModelHubEdit({ ...values, id: props.values.id });
        if (isSuccessApi(resp)) {
          message.success(
            intl.formatMessage({ id: 'common.action.success', defaultMessage: '$$$' }),
          );
          props.reload();
          props.handleModal();
        } else {
          message.error(
            resp?.meta?.message ||
              intl.formatMessage({ id: 'common.action.failure', defaultMessage: '$$$' }),
          );
        }
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="name"
          label={
            <FormattedMessage id="model_runtimeLib.list.table.form.name" defaultMessage="名称" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'model_runtimeLib.list.table.form.name',
            defaultMessage: '$$$',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="model_runtimeLib.list.table.form.rule.required.name"
                  defaultMessage="name is required"
                />
              ),
            },
          ]}
        />
        <ProForm.Group>
          <ProFormText
            width={proFormSmallItemStyleProps.column2Width - 30}
            name="host"
            initialValue={'192.168.10.94'}
            label={
              <FormattedMessage id="model_runtimeLib.list.table.form.IP" defaultMessage="IP地址" />
            }
            placeholder={`${intl.formatMessage({
              id: 'common.please_input',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'model_runtimeLib.list.table.form.IP',
              defaultMessage: '$$$',
            })}`}
            required={true}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="model_runtimeLib.list.table.form.rule.required.IP"
                    defaultMessage="name is required"
                  />
                ),
              },
            ]}
          />
          <ProFormText
            width={proFormSmallItemStyleProps.column2Width - 30}
            name="port"
            initialValue={'5000'}
            label={
              <FormattedMessage id="model_runtimeLib.list.table.form.port" defaultMessage="端口" />
            }
            placeholder={`${intl.formatMessage({
              id: 'common.please_input',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'model_runtimeLib.list.table.form.port',
              defaultMessage: '$$$',
            })}`}
            required={true}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="model_runtimeLib.list.table.form.rule.required.port"
                    defaultMessage="name is required"
                  />
                ),
              },
            ]}
          />

          <CommButton
            style={{
              width: '52px',
              height: '32px',
              marginTop: '30px',
              marginLeft: '-4px',
              borderRadius: '4px',
              borderColor: '#154ddd',
              color: '#154ddd',
            }}
            onClick={() => {
              const { host, port } = form.getFieldsValue();
              if (host && port) {
                setOpenFiles(true);
              } else {
                message.error('请填写IP和端口');
              }

              console.log(form.getFieldsValue(), 'searchIP');
            }}
            buttonLabel={<FormattedMessage id="pages.searchTable.search" defaultMessage="查询" />}
          ></CommButton>
        </ProForm.Group>
        {openFiles ? (
          <ProFormSelect
            width={proFormSmallItemStyleProps.width}
            name="path"
            placeholder={`${intl.formatMessage({
              id: 'common.please_select',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'model_runtimeLib.list.table.form.fileName',
              defaultMessage: '$$$',
            })}`}
            required={true}
            showSearch
            debounceTime={500}
            request={async () => {
              const { host, port } = form.getFieldsValue();
              const { data } = await apiModelHubSync({
                host,
                port,
              });
              return data?.data?.map((v: Record<string, any>) => {
                return { ...v, label: v, value: v };
              });
            }}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="model_runtimeLib.list.table.form.rule.required.fileName"
                    defaultMessage="name is required"
                  />
                ),
              },
            ]}
          />
        ) : (
          <></>
        )}

        <ProFormTextArea
          width={proFormSmallItemStyleProps.width}
          name="comment"
          label={
            <FormattedMessage id="model_runtimeLib.list.table.form.remark" defaultMessage="简介" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'model_runtimeLib.list.table.form.rule.required.remark',
            defaultMessage: '$$$',
          })}`}
          required={false}
          disabled={false}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateForm;