diff --git a/src/pages/ShowInfo.tsx b/src/pages/ShowInfo.tsx index 719c284..f971860 100644 --- a/src/pages/ShowInfo.tsx +++ b/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> ); };