272 lines
12 KiB
TypeScript
272 lines
12 KiB
TypeScript
import { useState } from 'react'
|
||
import { Button, Form, Upload, message, } from "antd"
|
||
import { uploadFileUrl } from '../../../../request/request'
|
||
import { UploadOutlined } from '@ant-design/icons';
|
||
import './edit-app-files.css'
|
||
export default function EditAppFiles(props: any) {
|
||
// 定义允许上传的文件格式
|
||
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 handlePreview = (file: any) => {
|
||
console.log(file);
|
||
|
||
|
||
};
|
||
// 上传文件源码文档列表
|
||
const [upCodeArray, setUpCodeArray] = useState<any>([])
|
||
const [codeDis, setCodeDis] = useState(false)
|
||
const validateCodeFileUpload = (_rule: any, value: any) => {
|
||
if (!value || value.fileList.length === 0) {
|
||
return Promise.reject('请选择上传文件');
|
||
|
||
}
|
||
const file = value.fileList[0];
|
||
if (file.status === 'uploading') {
|
||
setCodeDis(true)
|
||
return Promise.reject('文件上传中，请稍候');
|
||
} else if (file.status === 'error') {
|
||
setCodeDis(true)
|
||
setUpCodeArray([])
|
||
return Promise.reject('文件上传失败，请删除后重新上传');
|
||
|
||
} else if (file.status !== 'done') {
|
||
setCodeDis(true)
|
||
setUpCodeArray([])
|
||
|
||
return Promise.reject('文件上传失败，请删除后重新上传');
|
||
} else if (file.status === 'done') {
|
||
setCodeDis(true)
|
||
return Promise.resolve();
|
||
}
|
||
return Promise.resolve();
|
||
};
|
||
// 上传文件软件文档列表
|
||
const [upSoftArray, setUpSoftArray] = useState<any>([])
|
||
const [softDis, setSoftDis] = useState(false)
|
||
const validateSoftFileUpload = (_rule: any, value: any) => {
|
||
if (!value || value.fileList.length === 0) {
|
||
return Promise.reject('请选择上传文件');
|
||
|
||
}
|
||
const file = value.fileList[0];
|
||
if (file.status === 'uploading') {
|
||
setSoftDis(true)
|
||
return Promise.reject('文件上传中，请稍候');
|
||
} else if (file.status === 'error') {
|
||
setSoftDis(true)
|
||
setUpSoftArray([])
|
||
return Promise.reject('文件上传失败，请删除后重新上传');
|
||
|
||
} else if (file.status !== 'done') {
|
||
setSoftDis(true)
|
||
setUpSoftArray([])
|
||
|
||
return Promise.reject('文件上传失败，请删除后重新上传');
|
||
} else if (file.status === 'done') {
|
||
setSoftDis(true)
|
||
return Promise.resolve();
|
||
}
|
||
return Promise.resolve();
|
||
};
|
||
|
||
const token = sessionStorage.getItem('token')
|
||
const height = window.innerHeight - 460;
|
||
const [form] = Form.useForm();
|
||
const handleSubmit = () => {
|
||
// console.log(form);
|
||
props.setEditProcess(4);
|
||
// 调用表单实例的 submit 方法
|
||
form.submit();
|
||
|
||
};
|
||
const submitInfo = (values: any) => {
|
||
message.success('提交成功');
|
||
console.log(values);
|
||
props.setEditProcess(3);
|
||
|
||
|
||
}
|
||
const onFinish = (values: any) => {
|
||
// 处理表单提交逻辑
|
||
console.log('表单提交成功', values);
|
||
submitInfo(values)
|
||
console.log(upCodeArray);
|
||
|
||
};
|
||
return (
|
||
<div>
|
||
<div className='bigLine'></div>
|
||
<div className='appInfoFormBox' style={{
|
||
height: height,
|
||
justifyContent: 'flex-start',
|
||
flexDirection: 'column',
|
||
marginLeft: '100px',
|
||
paddingBottom: '0'
|
||
}}>
|
||
<div style={{
|
||
height: '80px',
|
||
}}>
|
||
<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 style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
width: '600px',
|
||
// background: 'pink'
|
||
}}>
|
||
<div className='appInfoFormInput' style={{
|
||
position: 'relative',
|
||
}}>
|
||
<div className='FormInputTitle' style={{
|
||
}}>源码文档<span style={{color:'red',}}>*</span>：</div>
|
||
<div style={{
|
||
width: '220px',
|
||
}}>
|
||
<Form.Item name="ym" label="" rules={[
|
||
// { required: true, message: '请选上传文件' },
|
||
{ validator: validateCodeFileUpload }
|
||
]}>
|
||
<Upload
|
||
name="file"
|
||
action={uploadFileUrl()}
|
||
defaultFileList={upCodeArray}
|
||
onChange={({ fileList }) => {
|
||
console.log(fileList);
|
||
// console.log(upCodeArray);
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setUpCodeArray([])
|
||
setCodeDis(false)
|
||
}}
|
||
beforeUpload={beforeUpload}
|
||
onPreview={handlePreview}
|
||
// onChange={handleUploadChange}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />} style={{
|
||
marginTop: '4px'
|
||
}}
|
||
disabled={codeDis}
|
||
>上传附件</Button>
|
||
</Upload>
|
||
</Form.Item>
|
||
</div>
|
||
<a style={{
|
||
position: 'absolute',
|
||
top: '10px',
|
||
left: '260px',
|
||
textWrap: 'nowrap'
|
||
}}>[ 下载 ]</a>
|
||
</div>
|
||
<div className='appInfoFormInput' style={{
|
||
position: 'relative',
|
||
}}>
|
||
<div className='FormInputTitle' style={{
|
||
}}>软件文档<span style={{color:'red',}}>*</span>：</div>
|
||
<div style={{
|
||
width: '220px',
|
||
}}>
|
||
<Form.Item name="file" label="" rules={[
|
||
// { required: true, message: '请上传文件' },
|
||
{ validator: validateSoftFileUpload }
|
||
]}>
|
||
<Upload
|
||
name="file"
|
||
action={uploadFileUrl()}
|
||
defaultFileList={upSoftArray}
|
||
onChange={({ fileList }) => {
|
||
console.log(fileList);
|
||
}}
|
||
onRemove={() => {
|
||
setUpSoftArray([])
|
||
setSoftDis(false)
|
||
}}
|
||
beforeUpload={beforeUpload}
|
||
// onChange={handleUploadChange}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />} style={{
|
||
marginTop: '4px'
|
||
}}
|
||
disabled={softDis}
|
||
>上传附件</Button>
|
||
</Upload>
|
||
</Form.Item>
|
||
</div>
|
||
<a style={{
|
||
position: 'absolute',
|
||
top: '10px',
|
||
left: '260px',
|
||
textWrap: 'nowrap'
|
||
}}>[ 下载 ]</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</Form>
|
||
</div>
|
||
{/* <div className="fileTextBox">
|
||
{Array.from({ length: 100 }).map((_, index) => (
|
||
<span style={{
|
||
lineHeight: '30px',
|
||
fontSize: '14px',
|
||
}}
|
||
|
||
key={index}>
|
||
说明:1嘻嘻嘻啊司机大佬觉得拉家带口垃圾狄拉克
|
||
</span>
|
||
))}
|
||
|
||
</div> */}
|
||
</div>
|
||
|
||
<div className='bigLine'></div>
|
||
<div className='nextBtnBxo'>
|
||
<Button
|
||
style={{
|
||
width: '235px',
|
||
height: '46px',
|
||
borderRadius: '5px',
|
||
}}
|
||
onClick={() => {
|
||
props.setEditProcess(2)
|
||
}}>上一步</Button>
|
||
<Button
|
||
style={{
|
||
width: '235px',
|
||
height: '46px',
|
||
borderRadius: '5px',
|
||
marginLeft: '10px',
|
||
}}
|
||
type='primary'
|
||
onClick={() => {
|
||
handleSubmit()
|
||
}}>下一步</Button>
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|