dev-v2
parent
e786fcf71a
commit
3872f1fbdf
@ -0,0 +1,151 @@
|
|||||||
|
import React, { useRef } from 'react';
|
||||||
|
import { DrawerForm, ProFormInstance, ProFormSelect, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
|
||||||
|
import { message } from 'antd';
|
||||||
|
import Upload, { RcFile } from 'antd/es/upload';
|
||||||
|
import Constants from '@/constants';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.PbcBanner_>;
|
||||||
|
export type UpdateBannerFormProps = {
|
||||||
|
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||||
|
onSubmit: (values: FormValueType) => Promise<void>;
|
||||||
|
afterClose: () => void;
|
||||||
|
updateModalVisible: boolean;
|
||||||
|
values: Partial<API.PbcBanner_>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const UpdateBannerForm: React.FC<UpdateBannerFormProps> = (props) => {
|
||||||
|
const formRef = useRef<ProFormInstance>();
|
||||||
|
return (
|
||||||
|
<DrawerForm
|
||||||
|
width={640}
|
||||||
|
requiredMark={false}
|
||||||
|
title={props.values.pbcId ? '编辑' : '新增'}
|
||||||
|
open={props.updateModalVisible}
|
||||||
|
formRef={formRef}
|
||||||
|
onFinish={(value: any) => {
|
||||||
|
let pbcBannerImage = ""
|
||||||
|
if (value.pbcBannerImage && value.pbcBannerImage.length > 0) {
|
||||||
|
if (value.pbcBannerImage[0].uid === '-1') {
|
||||||
|
pbcBannerImage = value.pbcBannerImage[0].url || '';
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
value.pbcBannerImage[0].response &&
|
||||||
|
value.pbcBannerImage[0].response.retcode
|
||||||
|
) {
|
||||||
|
pbcBannerImage = value.pbcBannerImage[0].response.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return props.onSubmit({ ...value, pbcBannerImage, pbcId: props.values.pbcId })
|
||||||
|
}}
|
||||||
|
drawerProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
afterOpenChange: (visible) => {
|
||||||
|
if (!visible) props.afterClose();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
|
||||||
|
initialValues={{
|
||||||
|
pbcTitle: props.values.pbcTitle,
|
||||||
|
pbcBannerType: props.values.pbcBannerType ? props.values.pbcBannerType + '' : null,
|
||||||
|
pbcLink: props.values.pbcLink,
|
||||||
|
pbcBannerImage: props.values.pbcBannerImage ? [{
|
||||||
|
uid: '-1',
|
||||||
|
name: props.values.pbcBannerImage.substring(props.values.pbcBannerImage.lastIndexOf('/') + 1),
|
||||||
|
status: 'done',
|
||||||
|
url: props.values.pbcBannerImage,
|
||||||
|
}] : []
|
||||||
|
}}
|
||||||
|
onOpenChange={(visible) => {
|
||||||
|
formRef.current?.resetFields();
|
||||||
|
if (!visible) {
|
||||||
|
props.onCancel();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProFormText
|
||||||
|
placeholder={'请输入标题'}
|
||||||
|
label="标题"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '标题为必填项',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
width="md"
|
||||||
|
name="pbcTitle"
|
||||||
|
/>
|
||||||
|
<ProFormUploadButton
|
||||||
|
label="banner图"
|
||||||
|
name="pbcBannerImage"
|
||||||
|
max={1}
|
||||||
|
fieldProps={{
|
||||||
|
name: 'file',
|
||||||
|
accept: 'image/*',
|
||||||
|
multiple: true,
|
||||||
|
headers: {
|
||||||
|
authorization: localStorage.getItem('token') ?? '',
|
||||||
|
},
|
||||||
|
onChange: (info: any) => {
|
||||||
|
switch (info.file.status) {
|
||||||
|
case 'done':
|
||||||
|
if (info.file.response.retcode === 0) {
|
||||||
|
message.error(info.file.response.retmsg);
|
||||||
|
formRef.current?.setFieldValue('pbcBannerImage', [])
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
action: process.env.BASE_URL + '/oss/imgUpload',
|
||||||
|
beforeUpload(file: RcFile) {
|
||||||
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||||
|
if (!isLt10M) {
|
||||||
|
message.error('图片大小不能超过10MB!');
|
||||||
|
}
|
||||||
|
return isLt10M || Upload.LIST_IGNORE;
|
||||||
|
},
|
||||||
|
onPreview: async (file) => {
|
||||||
|
if (file.uid === '-1') {
|
||||||
|
window.open(file.url);
|
||||||
|
}
|
||||||
|
if (file.response && file.response.retcode) {
|
||||||
|
window.open(file.response.data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
listType: 'picture-card',
|
||||||
|
}}
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请上传banner图' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormSelect
|
||||||
|
name="pbcBannerType"
|
||||||
|
label="类型"
|
||||||
|
width="md"
|
||||||
|
valueEnum={Constants.pbcBannerType}
|
||||||
|
placeholder="请选择类型"
|
||||||
|
rules={[{ required: true, message: '请选择类型' }]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
placeholder={'请输入链接'}
|
||||||
|
label="链接"
|
||||||
|
width="md"
|
||||||
|
name="pbcLink"
|
||||||
|
/>
|
||||||
|
{/* <ProFormDigit
|
||||||
|
placeholder={'请输入排序'}
|
||||||
|
label="排序"
|
||||||
|
min={1}
|
||||||
|
fieldProps={{ precision: 0 }}
|
||||||
|
/> */}
|
||||||
|
</DrawerForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdateBannerForm;
|
||||||
Loading…
Reference in New Issue