feat: improve the options of the upload component
This commit is contained in:
parent
a635c955c6
commit
ce63f0fbe6
@ -91,7 +91,7 @@ const schema: ISchema = {
|
|||||||
type: 'string',
|
type: 'string',
|
||||||
title: 'LOGO',
|
title: 'LOGO',
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
'x-component': 'Upload.File',
|
'x-component': 'Upload.Attachment',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
// accept: 'jpg,png'
|
// accept: 'jpg,png'
|
||||||
},
|
},
|
||||||
|
@ -13,12 +13,19 @@ export const attachment: ISchema = {
|
|||||||
uiSchema: {
|
uiSchema: {
|
||||||
type: 'array',
|
type: 'array',
|
||||||
// title,
|
// title,
|
||||||
'x-component': 'Upload',
|
'x-component': 'Upload.Attachment',
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
'x-designable-bar': 'Upload.DesignableBar',
|
'x-designable-bar': 'Upload.DesignableBar',
|
||||||
} as ISchema,
|
} as ISchema,
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
|
'uiSchema.x-component-props.multiple': {
|
||||||
|
type: 'boolean',
|
||||||
|
'x-content': '允许上传多个文件',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Checkbox',
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -293,174 +293,6 @@ const toImages = (fileList) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
Upload.File = connect(
|
|
||||||
(props: UploadProps & { value?: any }) => {
|
|
||||||
const {
|
|
||||||
multiple,
|
|
||||||
listType = 'picture-card',
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
...others
|
|
||||||
} = props;
|
|
||||||
const [map, { set, setAll, remove }] = useMap<string, any>(toMap(value));
|
|
||||||
const images = toImages(value);
|
|
||||||
const [photoIndex, setPhotoIndex] = useState(0);
|
|
||||||
const [visible, setVisible] = useState(false);
|
|
||||||
useEffect(() => {
|
|
||||||
setAll(toMap(value));
|
|
||||||
}, [value]);
|
|
||||||
console.log('mapmapmapmapmap', map);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AntdUpload
|
|
||||||
action={`${process.env.API_URL}attachments:upload`}
|
|
||||||
{...useUploadProps({ ...others, multiple })}
|
|
||||||
onChange={({ file }) => {
|
|
||||||
console.log({ multiple, file });
|
|
||||||
const f = toItem(file);
|
|
||||||
if (multiple) {
|
|
||||||
set(f.id, f);
|
|
||||||
} else {
|
|
||||||
setAll([[f.id, f]]);
|
|
||||||
}
|
|
||||||
if (file.status === 'done') {
|
|
||||||
if (multiple) {
|
|
||||||
onChange([...toArr(value), file?.response?.data]);
|
|
||||||
} else {
|
|
||||||
onChange(file?.response?.data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
showUploadList={false}
|
|
||||||
>
|
|
||||||
<Button icon={<UploadOutlined />}>上传文件</Button>
|
|
||||||
</AntdUpload>
|
|
||||||
{[...map.entries()].map(
|
|
||||||
([key, item]) =>
|
|
||||||
item.id && (
|
|
||||||
<div>
|
|
||||||
{item.url ? (
|
|
||||||
<a
|
|
||||||
target={'_blank'}
|
|
||||||
href={item.url}
|
|
||||||
title={item.title}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const index = images.findIndex(
|
|
||||||
(image) => image.id === item.id,
|
|
||||||
);
|
|
||||||
setVisible(true);
|
|
||||||
setPhotoIndex(index);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img style={{ height: 16 }} src={item.imageUrl} />{' '}
|
|
||||||
{listType !== 'picture-card' && item.title}{' '}
|
|
||||||
<DeleteOutlined
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
remove(key);
|
|
||||||
if (multiple) {
|
|
||||||
const values = toArr(value).filter(
|
|
||||||
(v) => v.id === item.id,
|
|
||||||
);
|
|
||||||
onChange(values);
|
|
||||||
} else {
|
|
||||||
onChange(null);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<span>
|
|
||||||
{item.title}
|
|
||||||
<Progress percent={item.percent} showInfo={false} />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
{visible && (
|
|
||||||
<Lightbox
|
|
||||||
// discourageDownloads={true}
|
|
||||||
mainSrc={images[photoIndex]?.imageUrl}
|
|
||||||
nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
|
|
||||||
prevSrc={
|
|
||||||
images[(photoIndex + images.length - 1) % images.length]?.imageUrl
|
|
||||||
}
|
|
||||||
onCloseRequest={() => setVisible(false)}
|
|
||||||
onMovePrevRequest={() =>
|
|
||||||
setPhotoIndex((photoIndex + images.length - 1) % images.length)
|
|
||||||
}
|
|
||||||
onMoveNextRequest={() =>
|
|
||||||
setPhotoIndex((photoIndex + 1) % images.length)
|
|
||||||
}
|
|
||||||
imageTitle={images[photoIndex]?.title}
|
|
||||||
// toolbarButtons={[
|
|
||||||
// <div>下载</div>,
|
|
||||||
// ]}
|
|
||||||
// imageCaption={'xxx'}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
mapReadPretty(
|
|
||||||
observer((props) => {
|
|
||||||
const field = useField<Formily.Core.Models.Field>();
|
|
||||||
const images = toImages(field.value);
|
|
||||||
const [photoIndex, setPhotoIndex] = useState(0);
|
|
||||||
const [visible, setVisible] = useState(false);
|
|
||||||
console.log('field.value', field.value, images);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{images.map((item) => (
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
target={'_blank'}
|
|
||||||
href={item.url}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const index = images.indexOf(item);
|
|
||||||
setVisible(true);
|
|
||||||
setPhotoIndex(index);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img style={{ height: 16 }} src={item.imageUrl} /> {item.title}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{visible && (
|
|
||||||
<Lightbox
|
|
||||||
// discourageDownloads={true}
|
|
||||||
mainSrc={images[photoIndex]?.imageUrl}
|
|
||||||
nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
|
|
||||||
prevSrc={
|
|
||||||
images[(photoIndex + images.length - 1) % images.length]
|
|
||||||
?.imageUrl
|
|
||||||
}
|
|
||||||
onCloseRequest={() => setVisible(false)}
|
|
||||||
onMovePrevRequest={() =>
|
|
||||||
setPhotoIndex((photoIndex + images.length - 1) % images.length)
|
|
||||||
}
|
|
||||||
onMoveNextRequest={() =>
|
|
||||||
setPhotoIndex((photoIndex + 1) % images.length)
|
|
||||||
}
|
|
||||||
imageTitle={images[photoIndex]?.title}
|
|
||||||
// toolbarButtons={[
|
|
||||||
// <div>下载</div>,
|
|
||||||
// ]}
|
|
||||||
// imageCaption={'xxx'}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
Upload.Dragger = Dragger;
|
|
||||||
|
|
||||||
Upload.Attachment = connect(
|
Upload.Attachment = connect(
|
||||||
(props: UploadProps) => {
|
(props: UploadProps) => {
|
||||||
const { disabled, multiple, value, onChange } = props;
|
const { disabled, multiple, value, onChange } = props;
|
||||||
@ -751,4 +583,6 @@ Upload.Attachment = connect(
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Upload.Dragger = Dragger;
|
||||||
|
|
||||||
export default Upload;
|
export default Upload;
|
||||||
|
Loading…
Reference in New Issue
Block a user