General-AI-Platform-Web/src/pages/Business/BusinessState/components/updateServerForm.tsx

import { apiServerEdit } from '@/services/business/server';
import { isSuccessApi } from '@/utils/forApi';
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React, { useEffect } from 'react';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';

export type UpdateServerFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Record<string, any>;
  commInfo: Record<string, any>;
  reload: any;
};
const UpdateServerForm: React.FC<UpdateServerFormProps> = (props) => {
  const intl = useIntl();
  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_modal_form gn_form"
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'server_state.create.form.action.edit',
        defaultMessage: '编辑',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values, 'apiServerEdit_values');
        let resp = await apiServerEdit({
          ...values,
          entity_id: props?.commInfo?.id,
          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: '$$$' }),
          );
        }
        props.handleModal();
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width={proFormSmallItemStyleProps.column2Width}
          name="name"
          label={<FormattedMessage id="server_state.table.form.name" defaultMessage="名称" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'server_state.table.form.name',
            defaultMessage: '$$$',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="server_state.table.form.rule.required.name"
                  defaultMessage="名称必填"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.column2Width}
          name="ip"
          initialValue={'http://192.168.10.1'}
          label={<FormattedMessage id="server_state.table.form.ip" defaultMessage="IP" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'server_state.table.form.ip',
            defaultMessage: '$$$',
          })}`}
        />

        <ProFormText
          width={proFormSmallItemStyleProps.column2Width}
          name="username"
          label={<FormattedMessage id="server_state.table.form.userName" defaultMessage="用户名" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'server_state.table.form.userName',
            defaultMessage: '$$$',
          })}`}
        />
        {/* // TODO 密码默认渲染*** */}
        <ProFormText.Password
          width={proFormSmallItemStyleProps.column2Width}
          label={<FormattedMessage id="server_state.table.form.pwd" defaultMessage="密码" />}
          name="passwd"
          initialValue={'******'}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'server_state.table.form.pwd',
            defaultMessage: '$$$',
          })}`}
        />

        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="port"
          initialValue={8080}
          label={
            <FormattedMessage id="server_state.table.form.defaultPort" defaultMessage="默认端口" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'server_state.table.form.defaultPort',
            defaultMessage: '$$$',
          })}`}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateServerForm;