Yaxin
/
InfoDetectFront
27
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增spin

Browse Source
main
zhoux 2 years ago
parent eeb9d9c882
commit 2466d80b56
1 changed files with 88 additions and 73 deletions
Show Stats Download Patch File Download Diff File

161
src/pages/ShowInfo.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save