master
Joe 1 year ago
parent 84c43f59bb
commit f05f809ea3

@ -55,6 +55,7 @@
"@dnd-kit/utilities": "^3.2.2",
"@umijs/route-utils": "^2.2.2",
"antd": "^5.2.2",
"antd-img-crop": "^4.23.0",
"braft-editor": "^2.3.9",
"classnames": "^2.3.2",
"lodash": "^4.17.21",

@ -14,9 +14,43 @@ import {
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, message, Row } from 'antd';
import Upload, { RcFile } from 'antd/es/upload';
import Upload, { RcFile, UploadFile } from 'antd/es/upload';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { CSS } from '@dnd-kit/utilities';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
interface DraggableUploadListItemProps {
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
file: UploadFile<any>;
}
const DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {
let { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: file.uid,
});
const style: React.CSSProperties = {
transform: CSS.Translate.toString(transform),
transition,
cursor: 'move',
};
return (
<div
ref={setNodeRef}
style={style}
// prevent preview event when drag end
className={isDragging ? 'is-dragging' : ''}
{...attributes}
{...listeners}
>
{/* hide error tooltip when dragging */}
{file.status === 'error' && isDragging ? originNode.props.children : originNode}
</div>
);
};
const Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities())
@ -55,6 +89,20 @@ const Detail: React.FC<any> = () => {
}
}
const sensor = useSensor(PointerSensor, {
activationConstraint: { distance: 10 },
});
const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => {
if (active.id !== over?.id) {
const arr = formRef.current?.getFieldValue(fieldName) || []
const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
const newArr = arrayMove(arr, activeIndex, overIndex)
formRef.current?.setFieldValue(fieldName, newArr)
}
};
return (
<PageContainer
header={{
@ -174,74 +222,86 @@ const Detail: React.FC<any> = () => {
</Row>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="商户图片"
name="pbcBusinessImage"
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传商户图片' },
]}
/>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcBusinessImage")}>
<SortableContext items={formRef.current?.getFieldValue("pbcBusinessImage") ? formRef.current?.getFieldValue("pbcBusinessImage").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="商户图片"
name="pbcBusinessImage"
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传商户图片' },
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="商户海报"
name="pbcBusinessPosterUrl"
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传商户海报' },
]}
/>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcBusinessPosterUrl")}>
<SortableContext items={formRef.current?.getFieldValue("pbcBusinessPosterUrl") ? formRef.current?.getFieldValue("pbcBusinessPosterUrl").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="商户海报"
name="pbcBusinessPosterUrl"
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传商户海报' },
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
</ProCard>
@ -395,38 +455,44 @@ const Detail: React.FC<any> = () => {
</Row>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="营业执照"
name="pbcBusinessLicenseUrl"
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传营业执照' },
]}
/>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcBusinessLicenseUrl")}>
<SortableContext items={formRef.current?.getFieldValue("pbcBusinessLicenseUrl") ? formRef.current?.getFieldValue("pbcBusinessLicenseUrl").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="营业执照"
name="pbcBusinessLicenseUrl"
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传营业执照' },
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
</ProCard>

@ -12,11 +12,44 @@ import {
ProFormUploadButton,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { useAccess, useParams, useSearchParams } from '@umijs/max';
import { Button, Image, message, Tag } from 'antd';
import { RcFile } from 'antd/es/upload';
import { Button, Form, Image, message, Tag } from 'antd';
import { RcFile, UploadFile } from 'antd/es/upload';
import React, { useEffect, useState } from 'react';
import { CSS } from '@dnd-kit/utilities';
interface DraggableUploadListItemProps {
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
file: UploadFile<any>;
}
const DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {
let { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: file.uid,
});
const style: React.CSSProperties = {
transform: CSS.Translate.toString(transform),
transition,
cursor: 'move',
};
return (
<div
ref={setNodeRef}
style={style}
// prevent preview event when drag end
className={isDragging ? 'is-dragging' : ''}
{...attributes}
{...listeners}
>
{/* hide error tooltip when dragging */}
{file.status === 'error' && isDragging ? originNode.props.children : originNode}
</div>
);
};
const Detail: React.FC<any> = () => {
const params = useParams();
const [searchParams] = useSearchParams();
@ -25,6 +58,7 @@ const Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities())
const [info, setInfo] = useState<API.PbcBusiness>({});
const [form1] = Form.useForm();
const getInfo = () => {
if (params.id) {
@ -40,6 +74,20 @@ const Detail: React.FC<any> = () => {
getInfo();
}, []);
const sensor = useSensor(PointerSensor, {
activationConstraint: { distance: 10 },
});
const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => {
if (active.id !== over?.id) {
const arr = form1.getFieldValue(fieldName) || []
const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
const newArr = arrayMove(arr, activeIndex, overIndex)
form1.setFieldValue(fieldName, newArr)
}
};
return (
<PageContainer
header={{
@ -67,42 +115,49 @@ const Detail: React.FC<any> = () => {
<span></span>
);
},
renderFormItem: (text, props) => {
renderFormItem: (text, props: any) => {
console.log(props.id)
return (
<ProFormUploadButton
{...props}
{...props?.fieldProps}
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
title={<div style={{ marginTop: 10, fontSize: 12 }}></div>}
fieldProps={{
name: 'file',
accept: 'image/*',
listType: 'picture-card',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M;
},
onPreview: async (file) => {
console.log(file);
if (file.uid === '-1') {
window.open(file.url);
}
if (file.response && file.response.retcode) {
window.open(file.response.data);
}
},
}}
action={process.env.BASE_URL + '/oss/imgUpload'}
onChange={(a: any) => {
props?.fieldProps.onChange(a.fileList);
}}
/>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, props.id)}>
<SortableContext items={form1.getFieldValue(props.id) ? form1.getFieldValue(props.id).map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
{...props}
{...props?.fieldProps}
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
title={<div style={{ marginTop: 10, fontSize: 12 }}></div>}
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
listType: 'picture-card',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M;
},
onPreview: async (file) => {
console.log(file);
if (file.uid === '-1') {
window.open(file.url);
}
if (file.response && file.response.retcode) {
window.open(file.response.data);
}
},
}}
action={'/oss/imgUpload'}
onChange={(a: any) => {
props?.fieldProps.onChange(a.fileList);
}}
/>
</SortableContext>
</DndContext>
);
},
},
@ -113,6 +168,7 @@ const Detail: React.FC<any> = () => {
editable={
access.businessSave && isEdit
? {
form: form1,
onSave: async (key, record: any, originRow) => {
let pbcState = record.pbcState;
let pbcBusinessLogo = "";
@ -348,8 +404,9 @@ const Detail: React.FC<any> = () => {
valueTypeMap={{
upload: {
render: (text) => {
return text.length > 0 ? (
<Image width={200} src={text[0].url}></Image>
console.log(text)
return text.length > 0 ? text.map((e: any) =>
<Image key={e.url} width={200} src={e.url}></Image>
) : (
<span></span>
);
@ -361,10 +418,10 @@ const Detail: React.FC<any> = () => {
{...props?.fieldProps}
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
title={<div style={{ marginTop: 10, fontSize: 12 }}></div>}
max={1}
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
listType: 'picture-card',
headers: {
authorization: localStorage.getItem('token') ?? '',
@ -386,7 +443,7 @@ const Detail: React.FC<any> = () => {
}
},
}}
action={process.env.BASE_URL + '/oss/imgUpload'}
action={'/oss/imgUpload'}
onChange={(a: any) => {
props?.fieldProps.onChange(a.fileList);
}}
@ -426,20 +483,19 @@ const Detail: React.FC<any> = () => {
},
]
: [],
pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl
? [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: info.pbcBusinessLicenseUrl,
},
]
: [],
pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl ? info.pbcBusinessLicenseUrl.split(',').map((e, index) => {
return {
uid: '-' + (index+1),
name: 'image.png',
status: 'done',
url: e,
}
}) : [],
}}
editable={
access.businessSave && isEdit
? {
form: form1,
onSave: async (key, record: any, originRow) => {
let pbcBusinessHeadUserNoFrontUrl = "";
if (
@ -467,17 +523,20 @@ const Detail: React.FC<any> = () => {
pbcBusinessHeadUserNoBackUrl = record[key][0].response.data;
}
}
let pbcBusinessLicenseUrl = "";
const pbcBusinessLicenseUrl = [];
if (
key === 'pbcBusinessLicenseUrl' &&
record[key] &&
record[key].length > 0
) {
if (record[key][0].uid === '-1') {
pbcBusinessLicenseUrl = record[key][0].url;
}
if (record[key][0].response && record[key][0].response.retcode) {
pbcBusinessLicenseUrl = record[key][0].response.data;
for (let i = 0; i < record[key].length; i++) {
const element = record[key][i];
if (element.uid === '-1') {
pbcBusinessLicenseUrl.push(element.url)
}
if (element.response && element.response.retcode) {
pbcBusinessLicenseUrl.push(element.response.data)
}
}
}
await adminChangeBusinessInfoUsingPost({
@ -489,7 +548,7 @@ const Detail: React.FC<any> = () => {
pbcBusinessHeadUserNoBackUrl:
key === 'pbcBusinessHeadUserNoBackUrl' ? pbcBusinessHeadUserNoBackUrl : undefined,
pbcBusinessLicenseUrl:
key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl : undefined,
key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl.join(',') : undefined,
})
.then((res) => {
if (res.retcode) {
@ -545,6 +604,9 @@ const Detail: React.FC<any> = () => {
key: 'pbcBusinessHeadUserNoBackUrl',
dataIndex: 'pbcBusinessHeadUserNoBackUrl',
span: 1,
fieldProps: {
max: 1
},
valueType: 'upload',
},
{
@ -552,6 +614,9 @@ const Detail: React.FC<any> = () => {
key: 'pbcBusinessHeadUserNoFrontUrl',
dataIndex: 'pbcBusinessHeadUserNoFrontUrl',
span: 2,
fieldProps: {
max: 1
},
valueType: 'upload',
},
{

@ -5,7 +5,6 @@ import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonD
import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
import { getCities } from '@/utils/cities';
import {
FormListActionType,
ProCard,
ProForm,
ProFormCascader,
@ -18,9 +17,43 @@ import {
ProFormUploadButton,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { Button, Col, message, Row } from 'antd';
import Upload, { RcFile } from 'antd/es/upload';
import Upload, { RcFile, UploadFile } from 'antd/es/upload';
import React, { useRef, useState } from 'react';
import { CSS } from '@dnd-kit/utilities';
interface DraggableUploadListItemProps {
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
file: UploadFile<any>;
}
const DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {
let { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: file.uid,
});
const style: React.CSSProperties = {
transform: CSS.Translate.toString(transform),
transition,
cursor: 'move',
};
return (
<div
ref={setNodeRef}
style={style}
// prevent preview event when drag end
className={isDragging ? 'is-dragging' : ''}
{...attributes}
{...listeners}
>
{/* hide error tooltip when dragging */}
{file.status === 'error' && isDragging ? originNode.props.children : originNode}
</div>
);
};
const Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities())
@ -63,7 +96,7 @@ const Detail: React.FC<any> = () => {
console.log(values.colorItems)
console.log(values.specItems)
const specItems: API.PbcProductCommonData[] = []
if (colorData != null && values.colorItems && values.colorItems.length > 0) {
if (colorData && values.colorItems && values.colorItems.length > 0) {
for (let i = 0; i < values.colorItems.length; i++) {
const element = values.colorItems[i];
specItems.push({
@ -75,7 +108,7 @@ const Detail: React.FC<any> = () => {
})
}
}
if (commonDataList != null) {
if (commonDataList) {
for (let i = 0; i < commonDataList.length; i++) {
const element = commonDataList[i];
console.log(values[`value${i}`])
@ -119,6 +152,20 @@ const Detail: React.FC<any> = () => {
}
}
const sensor = useSensor(PointerSensor, {
activationConstraint: { distance: 10 },
});
const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => {
if (active.id !== over?.id) {
const arr = formRef.current?.getFieldValue(fieldName) || []
const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
const newArr = arrayMove(arr, activeIndex, overIndex)
formRef.current?.setFieldValue(fieldName, newArr)
}
};
return (
<PageContainer
header={{
@ -211,7 +258,7 @@ const Detail: React.FC<any> = () => {
]} />
</Col>
</Row>
{colorData != null ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
{colorData ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
<ProFormList
name="colorItems"
creatorButtonProps={{
@ -279,77 +326,89 @@ const Detail: React.FC<any> = () => {
</ProForm.Item> : null}
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="相册图"
name="pbcProductImages"
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传相册图' },
]}
/>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductImages")}>
<SortableContext items={formRef.current?.getFieldValue("pbcProductImages") ? formRef.current?.getFieldValue("pbcProductImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="相册图"
name="pbcProductImages"
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传相册图' },
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="详情图"
name="pbcProductDetailImages"
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传详情图' },
]}
/>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductDetailImages")}>
<SortableContext items={formRef.current?.getFieldValue("pbcProductDetailImages") ? formRef.current?.getFieldValue("pbcProductDetailImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="详情图"
name="pbcProductDetailImages"
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || 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: '请上传详情图' },
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
{commonDataList != null ? commonDataList.map((e, index) => <Row key={e.pbcId} align="middle" gutter={20}>
{commonDataList ? commonDataList.map((e, index) => <Row key={e.pbcId} align="middle" gutter={20}>
<Col span={6}>
<ProFormText width="sm" disabled name={`name${index}`} initialValue={e.pbcSystemName} placeholder="请输入规格名称" rules={[
{ required: true, message: '请输入规格名称' }

@ -64,7 +64,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
onFinish={(value) => {
let pbcCategoryImage = ""
if (value.pbcCategoryImage && value.pbcCategoryImage.length > 0) {
if (value.pbcCategoryImage[0].uid == '-1') {
if (value.pbcCategoryImage[0].uid === '-1') {
pbcCategoryImage = value.pbcCategoryImage[0].url;
}
if (

Loading…
Cancel
Save