50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Button, Form, Space, Typography } from 'antd';
|
|
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
|
import OssUpload from './OssUpload';
|
|
|
|
type Props = {
|
|
name?: string;
|
|
label: string;
|
|
bizType?: string;
|
|
/** 最多可添加张数；不传则不限制 */
|
|
maxCount?: number;
|
|
};
|
|
|
|
export default function DetailImageUrlList({
|
|
name = 'detailImageUrls',
|
|
label,
|
|
bizType = 'DETAIL',
|
|
maxCount,
|
|
}: Props) {
|
|
return (
|
|
<>
|
|
{maxCount != null && (
|
|
<Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
|
|
最多 {maxCount} 张{label}
|
|
</Typography.Text>
|
|
)}
|
|
<Form.List name={name}>
|
|
{(fields, { add, remove }) => (
|
|
<>
|
|
{fields.map((field) => (
|
|
<Space key={field.key} align="start" style={{ display: 'flex', marginBottom: 8 }}>
|
|
<Form.Item {...field} style={{ flex: 1, marginBottom: 0 }}>
|
|
<OssUpload bizType={bizType} mediaType="IMAGE" />
|
|
</Form.Item>
|
|
{fields.length > 1 && (
|
|
<MinusCircleOutlined onClick={() => remove(field.name)} style={{ marginTop: 8 }} />
|
|
)}
|
|
</Space>
|
|
))}
|
|
{(!maxCount || fields.length < maxCount) && (
|
|
<Button type="dashed" onClick={() => add('')} block icon={<PlusOutlined />}>
|
|
添加{label}
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</Form.List>
|
|
</>
|
|
);
|
|
}
|