web-base--/src/pages/ModelList/components/QueryForm.tsx

import React, { useState } from 'react';
import { Button, Form, Input, Modal } from 'antd';
import service from '../service';

const { TextArea } = Input;

// 表单特殊字段
export interface FormValueType {
  modelName?: string;
  queryStr?: string;
}

export interface FormProps {
  onCancel: (flag?: boolean) => void;
  // onSubmit: (values: FormValueType) => void;
  modalVisible: boolean;
  values: FormValueType;
}

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
};

const QueryForm: React.FC<FormProps> = (props) => {
  const [resultStr, setResultStr] = useState('');

  const [form] = Form.useForm();

  const query = async () => {
    const fields = await form.validateFields();
    const result = await service.query(fields);
    setResultStr(result);
  };

  const {
    // onSubmit: handleUpdate,
    onCancel: cancelModalVisible,
    modalVisible,
    values,
  } = props;

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => cancelModalVisible()}>取消</Button>
        <Button type="primary" onClick={() => query()}>
          查询
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="相似度查询"
      visible={modalVisible}
      footer={renderFooter()}
      onCancel={() => cancelModalVisible()}
    >
      <Form {...formLayout} form={form} initialValues={values}>
        <FormItem
          name="modelName"
          label="模型名称"
          rules={[{ required: true, message: '请输入规则名称！' }]}
        >
          <Input placeholder="请输入" readOnly />
        </FormItem>
        <FormItem
          name="queryStr"
          label="查询文字"
          rules={[{ required: true, message: '请输入规则名称！' }]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem label="查询结果">
          <TextArea value={resultStr} rows={4} readOnly />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default QueryForm;