feat:

src/pages/ShowInfo.tsx

@@ -7,13 +7,13 @@ import {
   ProFormText,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Button, Form, Image, Spin } from 'antd';
+import {Button, Form, Image, message, Spin} from 'antd';
 import React, { useEffect, useState } from 'react';
 // @ts-ignore
 import cookie from 'react-cookies';
 import { API } from 'types';
 const ShowInfoDemo: React.FC = () => {
-  const [form] = Form.useForm<API.ModelImage>();
+  const [form] = Form.useForm();
   const [imageUrl, setImageUrl] = useState<string>('');
   // 是否需要加载中
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -30,29 +30,8 @@ const ShowInfoDemo: React.FC = () => {
     //   gender: '男',
     // })
   }
-  function doAddField() {
-    setKeyNameList([
-      {
-        label: '证件名称',
-        value: '居民身份',
-      },
-      {
-        label: '证件号码',
-        value: '511028198702325665',
-      },
-      {
-        label: '姓名',
-        value: '杨阳阳',
-      },
-      {
-        label: '性别',
-        value: '男',
-      },
-      {
-        label: '出生日期',
-        value: '1989-10-21',
-      },
-    ]);
+  function doAddField(data) {
+    setKeyNameList(data);
   }
 
   useEffect(() => {
@@ -62,9 +41,6 @@ const ShowInfoDemo: React.FC = () => {
   return (
     <div className="showInfoDemo_wrap">
       <Spin tip="正在分析中，请稍候..." fullscreen={true} spinning={isLoading}></Spin>
-      <Button type="primary" onClick={doAddField}>
-        addField
-      </Button>
       <PageContainer>
         <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
           <div>
@@ -73,11 +49,35 @@ const ShowInfoDemo: React.FC = () => {
               name="projectFilePath"
               action="/api/v1/common/upload_file/"
               max={1}
+              // onChange={(info) => {
+              //   if(info.file.status === 'done') {
+              //     setIsLoading(false);
+              //     message.success('分析成功').then(r => {});
+              //     console.log(info, 'info');
+              //     doAddField(info.file.response.data)
+              //   }
+              // }}
               fieldProps={{
                 showUploadList: false,
                 listType: 'picture-card',
+                onChange: (info) => {
+                  if(info.file.status === 'done') {
+                    setIsLoading(false);
+                    message.success('分析成功').then(r => {});
+                    console.log(info, 'info');
+                    doAddField(info.file.response.data)
+                  }
+                  if(info.file.status === 'error') {
+                    setIsLoading(false);
+                    message.error('请求失败').then(r => {});
+                    console.log(info, 'info');
+                    doAddField([])
+                  }
+                },
                 beforeUpload: (file) => {
+                  form.resetFields(['name1']);
                   setIsLoading(true);
+                  doAddField([])
                   const reader = new FileReader();
                   reader.onload = (e) => {
                     setImageUrl(e.target?.result as string);
@@ -107,7 +107,7 @@ const ShowInfoDemo: React.FC = () => {
           </div>
 
           {/* 展示信息 */}
-          <div style={{ flex: 1, padding: 20 }}>
+          <div style={{ flex: 1, padding: 40 }}>
             <ProForm
               form={form}
               submitter={
@@ -115,7 +115,7 @@ const ShowInfoDemo: React.FC = () => {
               } // 配置 submitter
             >
               <ProFormSelect
-                style={{ width: 160 }}
+                style={{ width: 300 }}
                 fieldProps={{
                   labelInValue: true,
                 }}
@@ -130,10 +130,10 @@ const ShowInfoDemo: React.FC = () => {
                     console.log(name1, 'ProFormDependency_name1');
                     return (
                       <ProFormText
-                        width={160}
+                        width={300}
                         label={name1.label}
                         name={'activeKey'}
-                        disabled
+                        readonly={true}
                         required={false}
                       />
                     );