import { Form, Input, Modal, Select, Upload, Space, Button, message } from 'antd';
|
import { sendRequest } from '@/utils/antdUtils';
|
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
|
import { customRequest } from '@/utils/utils';
|
import { add, Edit, getDetail } from '../service'
|
|
const formItemLayout = {
|
labelCol: { span: 7 },
|
wrapperCol: { span: 12 },
|
};
|
|
const AddEditView = ({ visible, onSave, onUpdate, onCancel, }, ref) => {
|
const [form] = Form.useForm();
|
const [fileList, setFileList] = useState([])//banner图片
|
const [loading, setLoading] = useState(false);
|
const [editData, setEditData] = useState({})
|
|
const config = {
|
name: 'file',
|
action: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
|
headers: {
|
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTI0MjE4MjgwODU4Mzc4MjYsInR5cGUiOjEsImV4cCI6MTc0MTY1OTg5MywiY3JlYXRlZCI6MTc0MDM2Mzg5MzE2MH0.o3Gc0g1LAo_kkL3X3QrC6qKwztxsp6psoTcpTreDzQUXGqPzUXw89fNSR5YKz8gzhtSuSKI2d6TJJYPX1IQCgw',
|
},
|
};
|
const formItemLayout = {
|
labelCol: { span: 6 },
|
wrapperCol: { span: 20 },
|
};
|
const uploadButton = (text) => {
|
return <div>
|
<PlusOutlined />
|
<div
|
style={{
|
marginTop: 8,
|
}}
|
>
|
</div>
|
</div>
|
};
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data) => {
|
form.resetFields();
|
form.setFieldsValue(data);
|
setEditData(data);
|
if (data.id) {
|
getDetail(data.id).then(res => {
|
if (res.data.url) {
|
let obj = [{
|
uid: 1,
|
name: 'banner',
|
url: res.data.url
|
}]
|
setFileList(obj)
|
form.setFieldsValue({ image: obj })
|
}
|
form.setFieldsValue({name: res.data.name})
|
})
|
}
|
},
|
clean: () => {
|
form.resetFields();
|
setFileList([])
|
},
|
};
|
});
|
|
// 上传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 }) => {
|
console.log('11111111111111', file)
|
if (file.status == 'error' || (file.status == 'done' && file.response.code != 200)) {
|
setLoading(false)
|
setFileList([])
|
message.error('上传失败')
|
return
|
}
|
if (file.status == 'done') {
|
setLoading(false)
|
message.success('上传成功')
|
}
|
newFileList.map((item) => {
|
if (!item.url && item.status == 'done' && item.response.code == 200) {
|
item.url = item.response.data;
|
}
|
});
|
setFileList(newFileList);
|
};
|
|
// 提交表单
|
const submit = () => {
|
form.validateFields().then(async (values) => {
|
|
values.url = fileList[0].url
|
delete values.image
|
if (editData.id) {
|
values.id = editData.id
|
onUpdate(values)
|
return
|
}
|
onSave(values)
|
})
|
}
|
|
return (
|
<Modal
|
getContainer={false}
|
width="25%"
|
destroyOnClose
|
title={editData.id ? '编辑banner' : '添加banner'}
|
open={visible}
|
onCancel={() => onCancel(false)}
|
onOk={submit}
|
>
|
<Form scrollToFirstError layout="horizontal" {...formItemLayout} form={form}>
|
|
<Form.Item
|
name="name"
|
label='banner名称' rules={[
|
{
|
required: true,
|
message: '请输入banner名称',
|
},
|
]}
|
>
|
<Input disabled={editData.type == 'detail'} placeholder='请输入banner名称'></Input>
|
</Form.Item>
|
|
<Form.Item
|
name="image"
|
label="banner图片"
|
extra={
|
<div>
|
<div>推荐尺寸732px * 320px</div>
|
</div>
|
}
|
rules={[
|
{
|
required: true,
|
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={editData.type == 'detail'}
|
>
|
{fileList?.length == 1 || editData.type == 'detail' ? null : uploadButton()}
|
</Upload>
|
</Form.Item>
|
</Form>
|
</Modal>
|
);
|
};
|
|
export default forwardRef(AddEditView);
|
