209 lines
8.2 KiB
TypeScript
209 lines
8.2 KiB
TypeScript
import { useState } from 'react'
|
||
import { Button, Form, Upload, message, Select } from "antd"
|
||
import { uploadFileUrl } from '../../../../request/request'
|
||
import { UploadOutlined } from '@ant-design/icons';
|
||
export default function EditAppDes(props: any) {
|
||
const [upArray, setUpArray] = useState<any>([])
|
||
// 是否禁用上传按钮
|
||
const [disabled, setDisabled] = useState(false);
|
||
const validateFileUpload = (_rule: any, value: any) => {
|
||
if (!value || value.fileList.length === 0) {
|
||
return Promise.reject('请选择上传文件');
|
||
|
||
}
|
||
const file = value.fileList[0];
|
||
if (file.status === 'uploading') {
|
||
// setDisabled(true)
|
||
return Promise.reject('文件上传中，请稍候');
|
||
} else if (file.status === 'error') {
|
||
// setDisabled(true)
|
||
setUpArray([])
|
||
return Promise.reject('文件上传失败，请删除后重新上传');
|
||
|
||
} else if (file.status !== 'done') {
|
||
// setDisabled(true)
|
||
setUpArray([])
|
||
|
||
return Promise.reject('文件上传失败，请删除后重新上传');
|
||
} else if (file.status === 'done') {
|
||
// setDisabled(true)
|
||
return Promise.resolve();
|
||
}
|
||
return Promise.resolve();
|
||
};
|
||
// 定义允许上传的文件格式
|
||
const ALLOWED_FILE_TYPES = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png'];
|
||
const beforeUpload = (file: File) => {
|
||
const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
|
||
if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
|
||
message.error(`仅支持 ${ALLOWED_FILE_TYPES.join(', ')} 格式的文件`);
|
||
return Upload.LIST_IGNORE;
|
||
}
|
||
return true;
|
||
};
|
||
const token = sessionStorage.getItem('token')
|
||
const height = window.innerHeight - 460;
|
||
const [form] = Form.useForm();
|
||
const handleSubmit = () => {
|
||
// console.log(form);
|
||
props.setEditProcess(3);
|
||
// 调用表单实例的 submit 方法
|
||
form.submit();
|
||
|
||
};
|
||
|
||
const submitInfo = (values: any) => {
|
||
message.success('提交成功');
|
||
console.log(values);
|
||
props.setEditProcess(3);
|
||
|
||
|
||
}
|
||
const onFinish = (values: any) => {
|
||
// 处理表单提交逻辑
|
||
console.log('表单提交成功', values);
|
||
submitInfo(values)
|
||
};
|
||
return (
|
||
<div>
|
||
<div className='bigLine'></div>
|
||
<div className='appInfoFormBox' style={{
|
||
height: height,
|
||
justifyContent: 'flex-start',
|
||
marginLeft: '100px',
|
||
}}>
|
||
|
||
<Form form={form} onFinish={onFinish}
|
||
onFinishFailed={(errorInfo: any) => {
|
||
const errorMessages = errorInfo.errorFields.map((field: any) => field.errors[0]);
|
||
if (errorMessages.some((msg: any) => msg.includes('文件上传失败'))) {
|
||
message.error('文件上传失败，请重新上传');
|
||
} else if (errorMessages.some((msg: any) => msg.includes('文件上传中'))) {
|
||
message.error('文件上传中，请稍候');
|
||
} else if (errorMessages.some((msg: any) => msg.includes('文件状态异常'))) {
|
||
message.error('文件状态异常，请重新上传');
|
||
} else {
|
||
message.error('请完善信息');
|
||
}
|
||
}}
|
||
>
|
||
<div className='appInfoFormInput'>
|
||
<div className='FormInputTitle' style={{
|
||
width: '160px',
|
||
}}>权力取得方式：</div>
|
||
<Form.Item name="gettype" label="" rules={[{ required: true, message: '请选择权力取得方式' },
|
||
|
||
]}>
|
||
<Select
|
||
allowClear
|
||
style={{
|
||
width: '300px',
|
||
height: '42px',
|
||
}}
|
||
|
||
options={[
|
||
// { value: '', label: '全部项目' },
|
||
{ value: '1', label: '取得方式1' },
|
||
{ value: '2', label: '取得方式2' },
|
||
{ value: '3', label: '取得方式3' },
|
||
]}
|
||
// defaultValue=""
|
||
placeholder={'请选择权力取得方式'}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
<div className='appInfoFormInput'>
|
||
<div className='FormInputTitle' style={{
|
||
width: '160px',
|
||
}}>权力范围：</div>
|
||
<Form.Item name="fw" label="" rules={[{ required: true, message: '请选择权力范围' },
|
||
|
||
]}>
|
||
<Select
|
||
allowClear
|
||
style={{
|
||
width: '300px',
|
||
height: '42px',
|
||
}}
|
||
|
||
options={[
|
||
{ value: '1', label: '全部权力' },
|
||
{ value: '2', label: '部分权力' },
|
||
|
||
]}
|
||
// defaultValue=""
|
||
placeholder={'请选择权力范围'}
|
||
/>
|
||
</Form.Item>
|
||
|
||
</div>
|
||
<div className='appInfoFormInput' >
|
||
<div className='FormInputTitle' style={{
|
||
width: '160px',
|
||
}}>上传其他相关文件：</div>
|
||
<div style={{
|
||
maxWidth: '500px',
|
||
}}>
|
||
<Form.Item name="file" label=""
|
||
rules={[
|
||
{ validator: validateFileUpload }
|
||
]}
|
||
|
||
>
|
||
<Upload
|
||
action={uploadFileUrl()}
|
||
defaultFileList={upArray}
|
||
|
||
onChange={({ fileList }) => {
|
||
console.log(fileList);
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setUpArray([])
|
||
setDisabled(false)
|
||
}}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
beforeUpload={beforeUpload}
|
||
>
|
||
<Button disabled={disabled} icon={<UploadOutlined />} style={{
|
||
marginTop: 4
|
||
}}>上传附件</Button>
|
||
</Upload>
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</Form>
|
||
|
||
</div>
|
||
|
||
<div className='bigLine'></div>
|
||
<div className='nextBtnBxo'>
|
||
<Button
|
||
style={{
|
||
width: '235px',
|
||
height: '46px',
|
||
borderRadius: '5px',
|
||
}}
|
||
onClick={() => {
|
||
props.setEditProcess(1)
|
||
}}>上一步</Button>
|
||
<Button
|
||
style={{
|
||
width: '235px',
|
||
height: '46px',
|
||
borderRadius: '5px',
|
||
marginLeft: '10px',
|
||
}}
|
||
type='primary'
|
||
onClick={() => {
|
||
handleSubmit()
|
||
}}>下一步</Button>
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|