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

import React, {useEffect, useState} from 'react';
import {Button, Form, Input, message, Modal, Radio, Upload} from 'antd';
import {TableListItem} from '../data.d';
import {UploadOutlined} from '@ant-design/icons';

// 表单特殊字段
export interface FormValueType extends Partial<TableListItem> {

}

export interface UpdateFormProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}

const FormItem = Form.Item;

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

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals, setFormVals] = useState<FormValueType>(props.values);

  const [form] = Form.useForm();

  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  const submit = async () => {
    const fieldsValue = await form.validateFields();
    const newValue = {...formVals, ...fieldsValue};
    setFormVals(newValue);
    handleUpdate(newValue);
  };

  const modelFileProps = {
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    // @ts-ignore
    onChange(info) {
      if (info.file.status === 'done') {
        setFormVals({...formVals, ...{"modelFile": info.file.response.url}});
        message.success(`file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`file upload failed.`);
      }
    }
  };
  const vocabFileProps = {
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    // @ts-ignore
    onChange(info) {
      if (info.file.status === 'done') {
        setFormVals({...formVals, ...{"vocabFile": info.file.response.url}});
        message.success(`file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`file upload failed.`);
      }
    }
  };
  const labelFileProps = {
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    // @ts-ignore
    onChange(info) {
      if (info.file.status === 'done') {
        setFormVals({...formVals, ...{"labelFile": info.file.response.url}});
        message.success(`file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`file upload failed.`);
      }
    }
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
        <Button type="primary" onClick={() => submit()}>
          提交
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{padding: '32px 40px 48px'}}
      destroyOnClose
      title="配置模型"
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={formVals}
      >
        <FormItem
          name="modelName"
          label="模型名称"
          rules={[{required: true, message: '请输入规则名称！'}]}
        >
          <Input placeholder="请输入"/>
        </FormItem>


        <FormItem
          name="modelType"
          label="模型类型"
          rules={[{required: true, message: '请选择模型类型！'}]}
        >
          <Radio.Group>
            <Radio.Button value="0">aubert</Radio.Button>
            <Radio.Button value="1">blstm</Radio.Button>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="模型文件"
        >
          <Upload {...modelFileProps}>
            <Button>
              <UploadOutlined/> Upload
            </Button>
          </Upload>
        </FormItem>
        <FormItem
          label="词向量文件"
        >
          <Upload {...vocabFileProps}>
            <Button>
              <UploadOutlined/> Upload
            </Button>
          </Upload>
        </FormItem>
        <FormItem
          label="标签文件"
        >
          <Upload {...labelFileProps}>
            <Button>
              <UploadOutlined/> Upload
            </Button>
          </Upload>
        </FormItem>
      </Form>
    </Modal>
  );
};


export default UpdateForm;