feat: 新增spin

src/pages/ShowInfo.tsx

@@ -1,4 +1,5 @@
 import {
+  PageContainer,
   ProCard,
   ProForm,
   ProFormDependency,
@@ -6,97 +7,111 @@ import {
   ProFormText,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Form, Image } from 'antd';
-import React, { useState } from 'react';
+import { Button, Form, Image, Spin, SpinProps } from 'antd';
+import React, { useEffect, useState } from 'react';
 // @ts-ignore
 import cookie from 'react-cookies';
-import axios from 'axios';
+import { API } from 'types';
 const ShowInfoDemo: React.FC = () => {
   const [form] = Form.useForm<API.ModelImage>();
   const [imageUrl, setImageUrl] = useState<string>('');
-  // useEffect(()=>{
+  // 是否需要加载中
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  // }, [])
   const initialValues = {
     cardCode: '200100199508081010',
     gender: '男',
   };
+
+
   return (
     <div className="showInfoDemo_wrap">
-      <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
-        <div>
-          <ProFormUploadDragger
-            width={800}
-            name="projectFilePath"
-            action="/api/v1/common/upload_file/"
-            max={1}
-            fieldProps={{
-              showUploadList: false,
-              listType: 'picture-card',
-              beforeUpload: (file) => {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                  setImageUrl(e.target?.result as string);
-                };
+      <Spin tip="正在分析中，请稍候..." fullscreen={true} spinning={isLoading}></Spin>
+
+      <PageContainer>
+        <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
+          <div>
+            <ProFormUploadDragger
+              width={800}
+              name="projectFilePath"
+              action="/api/v1/common/upload_file/"
+              max={1}
+              fieldProps={{
+                showUploadList: false,
+                listType: 'picture-card',
+                beforeUpload: (file) => {
+                  setIsLoading(true)
+                  const reader = new FileReader();
+                  reader.onload = (e) => {
+                    setImageUrl(e.target?.result as string);
+                  };
 
-                reader.readAsDataURL(file);
+                  reader.readAsDataURL(file);
 
-                // 返回 false 可以阻止上传
-                // 返回 Promise 可以异步操作
-                return true;
-              },
-              maxCount: 1,
-              name: 'file',
-              // beforeUpload: beforeUploadFile,
-              headers: {
-                'X-CSRFToken': cookie.load('csrftoken'),
-              },
-            }}
-          >
-            <Image width={800} src={imageUrl} preview={false} />
-          </ProFormUploadDragger>
+                  // 返回 false 可以阻止上传
+                  // 返回 Promise 可以异步操作
+                  return true;
+                },
+            
+                maxCount: 1,
+                name: 'file',
+                // beforeUpload: beforeUploadFile,
+                headers: {
+                  'X-CSRFToken': cookie.load('csrftoken'),
+                },
+              }}
+            >
+              <Image width={800} src={imageUrl} preview={false} />
+            </ProFormUploadDragger>
 
-          {/* <Image width={800} height={800} src={imageUrl}>
+            {/* <Image width={800} height={800} src={imageUrl}>
 
           </Image> */}
-        </div>
+          </div>
 
-        {/* 展示信息 */}
-        <div style={{ flex: 1, padding: 20 }}>
-          <ProForm
-            form={form}
-            initialValues={initialValues} // 设置初始值
-            submitter={
-              { render: false } // 隐藏提交按钮
-            } // 配置 submitter
-          >
-            <ProFormSelect
-              style={{width: 160}}
-              fieldProps={{
-                labelInValue: true,
-              }}
-              request={async () => [
-                // TODO 使用接口数据与  initialValues 值对应
-                { label: '证件号码', value: 'cardCode' },
-                { label: '性别', value: 'gender' },
-              ]}
-              name="name1"
-              label="展示数据"
-            />
-            <ProFormDependency name={['name1']}>
-              {({ name1 }) => {
-                if (name1) {
-                  console.log(name1, 'ProFormDependency_name1');
-                  return (
-                    <ProFormText width={160} label={name1.label} name={name1.value} disabled required={false}/>
-                  );
-                }
-                return <></>;
-              }}
-            </ProFormDependency>
-          </ProForm>
-        </div>
-      </ProCard>
+          {/* 展示信息 */}
+          <div style={{ flex: 1, padding: 20 }}>
+            <ProForm
+              form={form}
+              initialValues={initialValues} // 设置初始值
+              submitter={
+                { render: false } // 隐藏提交按钮
+              } // 配置 submitter
+            >
+              <ProFormSelect
+                style={{ width: 160 }}
+                fieldProps={{
+                  labelInValue: true,
+                }}
+                request={async () => [
+                  // TODO 使用接口数据与  initialValues 值对应
+                  { label: '证件号码', value: 'cardCode' },
+                  { label: '性别', value: 'gender' },
+                ]}
+                name="name1"
+                label="展示数据"
+              />
+              <ProFormDependency name={['name1']}>
+                {({ name1 }) => {
+                  if (name1) {
+                    console.log(name1, 'ProFormDependency_name1');
+                    return (
+                      <ProFormText
+                        width={160}
+                        label={name1.label}
+                        name={name1.value}
+                        disabled
+                        required={false}
+                      />
+                    );
+                  }
+                  return <></>;
+                }}
+              </ProFormDependency>
+            </ProForm>
+          </div>
+        </ProCard>
+      </PageContainer>
     </div>
   );
 };