import { sendRequest } from '@/utils/antdUtils';
|
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
import { PageContainer, } from '@ant-design/pro-components';
|
import { Button, Select, Row, Col, Input, Card, Space, Form, Upload, Spin, message, InputNumber } from 'antd';
|
import { useState, useEffect } from 'react';
|
import { addAndEdit, getDetail } from '../service';
|
import { history, useLocation } from 'umi';
|
import { customRequest } from '@/utils/utils';
|
const AddOrEditOrDetail = () => {
|
|
const [form] = Form.useForm();
|
const [fileList, setFileList] = useState([])//banner图片
|
const [loading, setLoading] = useState(false);
|
const { search } = useLocation();
|
const searchParams = new URLSearchParams(search);
|
|
const config = {
|
name: 'file',
|
action: BASE_URL + '/file/obs/upload',
|
headers: {
|
authorization: localStorage.getItem('token'),
|
},
|
};
|
const formItemLayout = {
|
labelCol: { span: 6 },
|
wrapperCol: { span: 20 },
|
};
|
const uploadButton = (text) => {
|
return <div>
|
<PlusOutlined />
|
<div
|
style={{
|
marginTop: 8,
|
}}
|
>
|
</div>
|
</div>
|
};
|
useEffect(() => {
|
if (searchParams.get('id')) {
|
getDetail( searchParams.get('id') ).then(res => {
|
if (res.data.picUrl) {
|
let obj = [{
|
uid: 1,
|
name: 'banner',
|
url: res.data.picUrl
|
}]
|
setFileList(obj)
|
}
|
form.setFieldsValue(res.data)
|
})
|
}
|
}, [])
|
|
// 上传banner前
|
const beforeUpload = (file) => {
|
return new Promise(async (resolve, reject) => {
|
if (file.name.includes(',')) {
|
message.warning('上传文件不能包含英文逗号(,)')
|
return Upload.LIST_IGNORE
|
}
|
setLoading(true)
|
resolve(file)
|
});
|
};
|
// 上传banner
|
const handleChange = ({ file: file, fileList: newFileList }) => {
|
if (file.status == 'error') {
|
setLoading(false)
|
setFileList([])
|
message.error('上传失败')
|
return
|
}
|
if (file.status == 'done') {
|
setLoading(false)
|
message.success('上传成功')
|
}
|
newFileList.map((item) => {
|
if (!item.url && item.status == 'done') {
|
item.url = item.response.data;
|
}
|
});
|
setFileList(newFileList);
|
};
|
|
// 提交表单
|
const submit = () => {
|
form.validateFields().then(async (values) => {
|
|
values.picUrl = fileList[0].url
|
delete values.image
|
if (searchParams.get('id')) {
|
values.id = searchParams.get('id')
|
let state = await sendRequest(addAndEdit, values)
|
if (state) {
|
history.back()
|
}
|
return
|
}
|
let state = await sendRequest(addAndEdit, values)
|
if (state) {
|
history.back()
|
}
|
})
|
}
|
return (
|
<PageContainer title={searchParams.get('detail') ? '查看详情' : searchParams.get('id') ? '编辑banner' : '添加banner'}>
|
<Spin spinning={loading}>
|
<Form scrollToFirstError layout="horizontal" {...formItemLayout} form={form}>
|
<Card style={{ background: '#fff', paddingTop: '15px' }}>
|
<Row>
|
<Col span={12}>
|
<Form.Item
|
name="bannerName"
|
label='banner名称' rules={[
|
{
|
required: true,
|
message: '请输入banner名称',
|
},
|
]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入banner名称'></Input>
|
</Form.Item>
|
|
<Form.Item
|
name="image"
|
label="banner图片"
|
extra={
|
<div>
|
<div>推荐尺寸732px * 320px</div>
|
</div>
|
}
|
rules={[
|
{
|
required: fileList.length == 0 ? true : false,
|
message: '请上传banner图片',
|
},
|
]}
|
>
|
<Upload
|
{...config}
|
listType="picture-card"
|
maxCount={1}
|
beforeUpload={beforeUpload}
|
onChange={handleChange}
|
showUploadList={{
|
showPreviewIcon: false,
|
}}
|
customRequest={customRequest}
|
// accept="image/png, image/jpeg, image/jpg"
|
fileList={fileList}
|
disabled={searchParams.get('detail')}
|
>
|
{fileList?.length == 1 || searchParams.get('detail') ? null : uploadButton()}
|
</Upload>
|
</Form.Item>
|
</Col>
|
</Row>
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<Space size='large'>
|
<Button onClick={() => history.back()}>关闭</Button>
|
{
|
!searchParams.get('detail') && <Button type='primary' onClick={submit}>保存</Button>
|
}
|
</Space>
|
</div>
|
</Card>
|
</Form>
|
</Spin>
|
</PageContainer >
|
);
|
}
|
|
export default AddOrEditOrDetail
|
