feat: 使用showInfo为路由组件
parent
fbb14a6e7e
commit
4bba679cb0
@ -1,104 +1,18 @@
|
||||
import {
|
||||
ProCard,
|
||||
ProForm,
|
||||
ProFormDependency,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormUploadDragger,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form, Image } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
// @ts-ignore
|
||||
import cookie from 'react-cookies';
|
||||
const ShowInfoDemo: React.FC = () => {
|
||||
const [form] = Form.useForm<API.ModelImage>();
|
||||
const [imageUrl, setImageUrl] = useState<string>('');
|
||||
// useEffect(()=>{
|
||||
import { history } from '@umijs/max';
|
||||
import { Button, Result } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
// }, [])
|
||||
const initialValues = {
|
||||
cardCode: '100100199508081010',
|
||||
gender: '男',
|
||||
};
|
||||
return (
|
||||
<div className="showInfoDemo_wrap">
|
||||
<ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
|
||||
<div>
|
||||
<ProFormUploadDragger
|
||||
width={800}
|
||||
name="projectFilePath"
|
||||
action="/api/v1/file/uploadFile"
|
||||
max={1}
|
||||
fieldProps={{
|
||||
showUploadList: false,
|
||||
listType: 'picture-card',
|
||||
beforeUpload: (file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setImageUrl(e.target?.result as string);
|
||||
};
|
||||
const NoFoundPage: React.FC = () => (
|
||||
<Result
|
||||
status="404"
|
||||
title="404"
|
||||
subTitle="Sorry, the page you visited does not exist."
|
||||
extra={
|
||||
<Button type="primary" onClick={() => history.push('/')}>
|
||||
Back Home 123
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// 返回 false 可以阻止上传
|
||||
// 返回 Promise 可以异步操作
|
||||
return true;
|
||||
},
|
||||
maxCount: 1,
|
||||
name: 'file',
|
||||
// beforeUpload: beforeUploadFile,
|
||||
data: { path: 'project/files' },
|
||||
headers: {
|
||||
'X-CSRFToken': cookie.load('csrftoken'),
|
||||
Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image width={800} src={imageUrl} preview={false} />
|
||||
</ProFormUploadDragger>
|
||||
|
||||
{/* <Image width={800} height={800} src={imageUrl}>
|
||||
|
||||
</Image> */}
|
||||
</div>
|
||||
|
||||
{/* 展示信息 */}
|
||||
<div style={{ flex: 1, padding: 20 }}>
|
||||
<ProForm
|
||||
form={form}
|
||||
initialValues={initialValues} // 设置初始值
|
||||
submitter={
|
||||
{ render: false } // 隐藏提交按钮
|
||||
} // 配置 submitter
|
||||
>
|
||||
<ProFormSelect
|
||||
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 label={name1.label} name={name1.value} disabled required={false} />
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</ProForm>
|
||||
</div>
|
||||
</ProCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowInfoDemo;
|
||||
export default NoFoundPage;
|
||||
@ -1,18 +1,104 @@
|
||||
import { history } from '@umijs/max';
|
||||
import { Button, Result } from 'antd';
|
||||
import React from 'react';
|
||||
import {
|
||||
ProCard,
|
||||
ProForm,
|
||||
ProFormDependency,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormUploadDragger,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form, Image } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
// @ts-ignore
|
||||
import cookie from 'react-cookies';
|
||||
const ShowInfoDemo: React.FC = () => {
|
||||
const [form] = Form.useForm<API.ModelImage>();
|
||||
const [imageUrl, setImageUrl] = useState<string>('');
|
||||
// useEffect(()=>{
|
||||
|
||||
const ShowInfo: React.FC = () => (
|
||||
<Result
|
||||
status="404"
|
||||
title="40411111"
|
||||
subTitle="Sorry, the page you visited does not exist."
|
||||
extra={
|
||||
<Button type="primary" onClick={() => history.push('/')}>
|
||||
Back Home1111
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
// }, [])
|
||||
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/file/uploadFile"
|
||||
max={1}
|
||||
fieldProps={{
|
||||
showUploadList: false,
|
||||
listType: 'picture-card',
|
||||
beforeUpload: (file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setImageUrl(e.target?.result as string);
|
||||
};
|
||||
|
||||
export default ShowInfo;
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// 返回 false 可以阻止上传
|
||||
// 返回 Promise 可以异步操作
|
||||
return true;
|
||||
},
|
||||
maxCount: 1,
|
||||
name: 'file',
|
||||
// beforeUpload: beforeUploadFile,
|
||||
data: { path: 'project/files' },
|
||||
headers: {
|
||||
'X-CSRFToken': cookie.load('csrftoken'),
|
||||
Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image width={800} src={imageUrl} preview={false} />
|
||||
</ProFormUploadDragger>
|
||||
|
||||
{/* <Image width={800} height={800} src={imageUrl}>
|
||||
|
||||
</Image> */}
|
||||
</div>
|
||||
|
||||
{/* 展示信息 */}
|
||||
<div style={{ flex: 1, padding: 20 }}>
|
||||
<ProForm
|
||||
form={form}
|
||||
initialValues={initialValues} // 设置初始值
|
||||
submitter={
|
||||
{ render: false } // 隐藏提交按钮
|
||||
} // 配置 submitter
|
||||
>
|
||||
<ProFormSelect
|
||||
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 label={name1.label} name={name1.value} disabled required={false} />
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</ProForm>
|
||||
</div>
|
||||
</ProCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowInfoDemo;
|
||||
|
||||
Loading…
Reference in New Issue