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

import { CommButton } from '@/components/Button';
import { 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, { useState } from 'react';

import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';

export type CreateFormProps = {
  createModalOpen: boolean;
  handleModal: () => void;
  reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
  const intl = useIntl();
  const [openFiles, setOpenFiles] = useState<boolean>(false);
  const [form] = Form.useForm<API.ModelCategory>();

  return (
    <ModalForm<API.ModelCategory>
      className="gn_form gn_modal_form"
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'model_runtimeLib.list.table.createForm.add',
        defaultMessage: '新建',
      })}
      open={props.createModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values, 'add_finish_values');
        // TODO 对接新增接口
        // postModelCategoryCreateModelCategory(values)
        //   .then(() => {
        //     message.success(intl.formatMessage({ id: 'common.action.success', defaultMessage: '$$$' }));
        //     props.reload();
        //   })
        //   .catch(() => {
        //     message.error(intl.formatMessage({ id: 'common.action.failure', defaultMessage: '$$$' }));
        //   });
        props.handleModal();
        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="ip"
            initialValue={'http://127.0.0.1'}
            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={'80'}
            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 { ip, port } = form.getFieldsValue();
              if (ip && 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="fileName"
            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 { data } = await apiModelHubSync();
              return data?.data?.map((v: Record<string, any>) => {
                return { ...v, label: v.name, value: v.id };
              });
            }}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="model_runtimeLib.list.table.form.rule.required.fileName"
                    defaultMessage="name is required"
                  />
                ),
              },
            ]}
          />
        ) : (
          <></>
        )}

        <ProFormTextArea
          width={proFormSmallItemStyleProps.width}
          name="remark"
          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 CreateForm;