Joe
/
xie_fang_tong_admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

up

Browse Source
master
Joe 1 year ago
parent 84c43f59bb
commit f05f809ea3
5 changed files with 417 additions and 226 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

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

260
src/pages/BusinessList/add.tsx
Unescape Escape View File

@ -14,9 +14,43 @@ import {
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout'; import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, message, Row } from 'antd'; 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 moment from 'moment';
import React, { useRef, useState } from 'react'; 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 Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities()) 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 ( return (
<PageContainer <PageContainer
header={{ header={{
@ -174,74 +222,86 @@ const Detail: React.FC<any> = () => {
</Row> </Row>
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcBusinessImage")}>
label="商户图片" <SortableContext items={formRef.current?.getFieldValue("pbcBusinessImage") ? formRef.current?.getFieldValue("pbcBusinessImage").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
name="pbcBusinessImage" <ProFormUploadButton
fieldProps={{ label="商户图片"
name: 'file', name="pbcBusinessImage"
accept: 'image/*', fieldProps={{
headers: { name: 'file',
authorization: localStorage.getItem('token') ?? '', accept: 'image/*',
}, multiple: true,
action: process.env.BASE_URL + '/oss/imgUpload', headers: {
beforeUpload(file: RcFile) { authorization: localStorage.getItem('token') ?? '',
const isLt2M = file.size / 1024 / 1024 < 10; },
if (!isLt2M) { itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
message.error('图片大小不能超过10MB!'); action: process.env.BASE_URL + '/oss/imgUpload',
} beforeUpload(file: RcFile) {
return isLt2M || Upload.LIST_IGNORE; const isLt2M = file.size / 1024 / 1024 < 10;
}, if (!isLt2M) {
onPreview: async (file) => { message.error('图片大小不能超过10MB!');
}
if (file.uid === '-1') { return isLt2M || Upload.LIST_IGNORE;
window.open(file.url); },
} onPreview: async (file) => {
if (file.response && file.response.retcode) {
window.open(file.response.data); if (file.uid === '-1') {
} window.open(file.url);
}, }
listType: 'picture-card', if (file.response && file.response.retcode) {
}} window.open(file.response.data);
rules={[ }
{ required: true, message: '请上传商户图片' }, },
]} listType: 'picture-card',
/> }}
rules={[
{ required: true, message: '请上传商户图片' },
]}
/>
</SortableContext>
</DndContext>
</Col> </Col>
</Row> </Row>
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcBusinessPosterUrl")}>
label="商户海报" <SortableContext items={formRef.current?.getFieldValue("pbcBusinessPosterUrl") ? formRef.current?.getFieldValue("pbcBusinessPosterUrl").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
name="pbcBusinessPosterUrl" <ProFormUploadButton
fieldProps={{ label="商户海报"
name: 'file', name="pbcBusinessPosterUrl"
accept: 'image/*', fieldProps={{
headers: { name: 'file',
authorization: localStorage.getItem('token') ?? '', accept: 'image/*',
}, multiple: true,
action: process.env.BASE_URL + '/oss/imgUpload', headers: {
beforeUpload(file: RcFile) { authorization: localStorage.getItem('token') ?? '',
const isLt2M = file.size / 1024 / 1024 < 10; },
if (!isLt2M) { itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
message.error('图片大小不能超过10MB!'); action: process.env.BASE_URL + '/oss/imgUpload',
} beforeUpload(file: RcFile) {
return isLt2M || Upload.LIST_IGNORE; const isLt2M = file.size / 1024 / 1024 < 10;
}, if (!isLt2M) {
onPreview: async (file) => { message.error('图片大小不能超过10MB!');
}
if (file.uid === '-1') { return isLt2M || Upload.LIST_IGNORE;
window.open(file.url); },
} onPreview: async (file) => {
if (file.response && file.response.retcode) {
window.open(file.response.data); if (file.uid === '-1') {
} window.open(file.url);
}, }
listType: 'picture-card', if (file.response && file.response.retcode) {
}} window.open(file.response.data);
rules={[ }
{ required: true, message: '请上传商户海报' }, },
]} listType: 'picture-card',
/> }}
rules={[
{ required: true, message: '请上传商户海报' },
]}
/>
</SortableContext>
</DndContext>
</Col> </Col>
</Row> </Row>
</ProCard> </ProCard>
@ -395,38 +455,44 @@ const Detail: React.FC<any> = () => {
</Row> </Row>
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcBusinessLicenseUrl")}>
label="营业执照" <SortableContext items={formRef.current?.getFieldValue("pbcBusinessLicenseUrl") ? formRef.current?.getFieldValue("pbcBusinessLicenseUrl").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
name="pbcBusinessLicenseUrl" <ProFormUploadButton
fieldProps={{ label="营业执照"
name: 'file', name="pbcBusinessLicenseUrl"
accept: 'image/*', fieldProps={{
headers: { name: 'file',
authorization: localStorage.getItem('token') ?? '', accept: 'image/*',
}, multiple: true,
action: process.env.BASE_URL + '/oss/imgUpload', headers: {
beforeUpload(file: RcFile) { authorization: localStorage.getItem('token') ?? '',
const isLt2M = file.size / 1024 / 1024 < 10; },
if (!isLt2M) { itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
message.error('图片大小不能超过10MB!'); action: process.env.BASE_URL + '/oss/imgUpload',
} beforeUpload(file: RcFile) {
return isLt2M || Upload.LIST_IGNORE; const isLt2M = file.size / 1024 / 1024 < 10;
}, if (!isLt2M) {
onPreview: async (file) => { message.error('图片大小不能超过10MB!');
}
if (file.uid === '-1') { return isLt2M || Upload.LIST_IGNORE;
window.open(file.url); },
} onPreview: async (file) => {
if (file.response && file.response.retcode) {
window.open(file.response.data); if (file.uid === '-1') {
} window.open(file.url);
}, }
listType: 'picture-card', if (file.response && file.response.retcode) {
}} window.open(file.response.data);
rules={[ }
{ required: true, message: '请上传营业执照' }, },
]} listType: 'picture-card',
/> }}
rules={[
{ required: true, message: '请上传营业执照' },
]}
/>
</SortableContext>
</DndContext>
</Col> </Col>
</Row> </Row>
</ProCard> </ProCard>

181
src/pages/BusinessList/detail.tsx
Unescape Escape View File

@ -12,11 +12,44 @@ import {
ProFormUploadButton, ProFormUploadButton,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout'; 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 { useAccess, useParams, useSearchParams } from '@umijs/max';
import { Button, Image, message, Tag } from 'antd'; import { Button, Form, Image, message, Tag } from 'antd';
import { RcFile } from 'antd/es/upload'; import { RcFile, UploadFile } from 'antd/es/upload';
import React, { useEffect, useState } from 'react'; 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 Detail: React.FC<any> = () => {
const params = useParams(); const params = useParams();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
@ -25,6 +58,7 @@ const Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities()) const [cities] = useState(() => getCities())
const [info, setInfo] = useState<API.PbcBusiness>({}); const [info, setInfo] = useState<API.PbcBusiness>({});
const [form1] = Form.useForm();
const getInfo = () => { const getInfo = () => {
if (params.id) { if (params.id) {
@ -40,6 +74,20 @@ const Detail: React.FC<any> = () => {
getInfo(); 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 ( return (
<PageContainer <PageContainer
header={{ header={{
@ -67,42 +115,49 @@ const Detail: React.FC<any> = () => {
<span></span> <span></span>
); );
}, },
renderFormItem: (text, props) => { renderFormItem: (text, props: any) => {
console.log(props.id)
return ( return (
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, props.id)}>
{...props} <SortableContext items={form1.getFieldValue(props.id) ? form1.getFieldValue(props.id).map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
{...props?.fieldProps} <ProFormUploadButton
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />} {...props}
title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>} {...props?.fieldProps}
fieldProps={{ icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
name: 'file', title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
accept: 'image/*', fieldProps={{
listType: 'picture-card', name: 'file',
headers: { accept: 'image/*',
authorization: localStorage.getItem('token') ?? '', multiple: true,
}, listType: 'picture-card',
beforeUpload(file: RcFile) { headers: {
const isLt2M = file.size / 1024 / 1024 < 10; authorization: localStorage.getItem('token') ?? '',
if (!isLt2M) { },
message.error('图片大小不能超过10MB!'); itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
} beforeUpload(file: RcFile) {
return isLt2M; const isLt2M = file.size / 1024 / 1024 < 10;
}, if (!isLt2M) {
onPreview: async (file) => { message.error('图片大小不能超过10MB!');
console.log(file); }
if (file.uid === '-1') { return isLt2M;
window.open(file.url); },
} onPreview: async (file) => {
if (file.response && file.response.retcode) { console.log(file);
window.open(file.response.data); if (file.uid === '-1') {
} window.open(file.url);
}, }
}} if (file.response && file.response.retcode) {
action={process.env.BASE_URL + '/oss/imgUpload'} window.open(file.response.data);
onChange={(a: any) => { }
props?.fieldProps.onChange(a.fileList); },
}} }}
/> action={'/oss/imgUpload'}
onChange={(a: any) => {
props?.fieldProps.onChange(a.fileList);
}}
/>
</SortableContext>
</DndContext>
); );
}, },
}, },
@ -113,6 +168,7 @@ const Detail: React.FC<any> = () => {
editable={ editable={
access.businessSave && isEdit access.businessSave && isEdit
? { ? {
form: form1,
onSave: async (key, record: any, originRow) => { onSave: async (key, record: any, originRow) => {
let pbcState = record.pbcState; let pbcState = record.pbcState;
let pbcBusinessLogo = ""; let pbcBusinessLogo = "";
@ -348,8 +404,9 @@ const Detail: React.FC<any> = () => {
valueTypeMap={{ valueTypeMap={{
upload: { upload: {
render: (text) => { render: (text) => {
return text.length > 0 ? ( console.log(text)
<Image width={200} src={text[0].url}></Image> return text.length > 0 ? text.map((e: any) =>
<Image key={e.url} width={200} src={e.url}></Image>
) : ( ) : (
<span></span> <span></span>
); );
@ -361,10 +418,10 @@ const Detail: React.FC<any> = () => {
{...props?.fieldProps} {...props?.fieldProps}
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />} icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>} title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
max={1}
fieldProps={{ fieldProps={{
name: 'file', name: 'file',
accept: 'image/*', accept: 'image/*',
multiple: true,
listType: 'picture-card', listType: 'picture-card',
headers: { headers: {
authorization: localStorage.getItem('token') ?? '', 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) => { onChange={(a: any) => {
props?.fieldProps.onChange(a.fileList); props?.fieldProps.onChange(a.fileList);
}} }}
@ -426,20 +483,19 @@ const Detail: React.FC<any> = () => {
}, },
] ]
: [], : [],
pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl ? info.pbcBusinessLicenseUrl.split(',').map((e, index) => {
? [ return {
{ uid: '-' + (index+1),
uid: '-1', name: 'image.png',
name: 'image.png', status: 'done',
status: 'done', url: e,
url: info.pbcBusinessLicenseUrl, }
}, }) : [],
]
: [],
}} }}
editable={ editable={
access.businessSave && isEdit access.businessSave && isEdit
? { ? {
form: form1,
onSave: async (key, record: any, originRow) => { onSave: async (key, record: any, originRow) => {
let pbcBusinessHeadUserNoFrontUrl = ""; let pbcBusinessHeadUserNoFrontUrl = "";
if ( if (
@ -467,17 +523,20 @@ const Detail: React.FC<any> = () => {
pbcBusinessHeadUserNoBackUrl = record[key][0].response.data; pbcBusinessHeadUserNoBackUrl = record[key][0].response.data;
} }
} }
let pbcBusinessLicenseUrl = ""; const pbcBusinessLicenseUrl = [];
if ( if (
key === 'pbcBusinessLicenseUrl' && key === 'pbcBusinessLicenseUrl' &&
record[key] && record[key] &&
record[key].length > 0 record[key].length > 0
) { ) {
if (record[key][0].uid === '-1') { for (let i = 0; i < record[key].length; i++) {
pbcBusinessLicenseUrl = record[key][0].url; const element = record[key][i];
} if (element.uid === '-1') {
if (record[key][0].response && record[key][0].response.retcode) { pbcBusinessLicenseUrl.push(element.url)
pbcBusinessLicenseUrl = record[key][0].response.data; }
if (element.response && element.response.retcode) {
pbcBusinessLicenseUrl.push(element.response.data)
}
} }
} }
await adminChangeBusinessInfoUsingPost({ await adminChangeBusinessInfoUsingPost({
@ -489,7 +548,7 @@ const Detail: React.FC<any> = () => {
pbcBusinessHeadUserNoBackUrl: pbcBusinessHeadUserNoBackUrl:
key === 'pbcBusinessHeadUserNoBackUrl' ? pbcBusinessHeadUserNoBackUrl : undefined, key === 'pbcBusinessHeadUserNoBackUrl' ? pbcBusinessHeadUserNoBackUrl : undefined,
pbcBusinessLicenseUrl: pbcBusinessLicenseUrl:
key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl : undefined, key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl.join(',') : undefined,
}) })
.then((res) => { .then((res) => {
if (res.retcode) { if (res.retcode) {
@ -545,6 +604,9 @@ const Detail: React.FC<any> = () => {
key: 'pbcBusinessHeadUserNoBackUrl', key: 'pbcBusinessHeadUserNoBackUrl',
dataIndex: 'pbcBusinessHeadUserNoBackUrl', dataIndex: 'pbcBusinessHeadUserNoBackUrl',
span: 1, span: 1,
fieldProps: {
max: 1
},
valueType: 'upload', valueType: 'upload',
}, },
{ {
@ -552,6 +614,9 @@ const Detail: React.FC<any> = () => {
key: 'pbcBusinessHeadUserNoFrontUrl', key: 'pbcBusinessHeadUserNoFrontUrl',
dataIndex: 'pbcBusinessHeadUserNoFrontUrl', dataIndex: 'pbcBusinessHeadUserNoFrontUrl',
span: 2, span: 2,
fieldProps: {
max: 1
},
valueType: 'upload', valueType: 'upload',
}, },
{ {

199
src/pages/ProductList/add.tsx
Unescape Escape View File

@ -5,7 +5,6 @@ import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonD
import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController'; import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
import { getCities } from '@/utils/cities'; import { getCities } from '@/utils/cities';
import { import {
FormListActionType,
ProCard, ProCard,
ProForm, ProForm,
ProFormCascader, ProFormCascader,
@ -18,9 +17,43 @@ import {
ProFormUploadButton, ProFormUploadButton,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout'; 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 { 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 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 Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities()) const [cities] = useState(() => getCities())
@ -63,7 +96,7 @@ const Detail: React.FC<any> = () => {
console.log(values.colorItems) console.log(values.colorItems)
console.log(values.specItems) console.log(values.specItems)
const specItems: API.PbcProductCommonData[] = [] 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++) { for (let i = 0; i < values.colorItems.length; i++) {
const element = values.colorItems[i]; const element = values.colorItems[i];
specItems.push({ specItems.push({
@ -75,7 +108,7 @@ const Detail: React.FC<any> = () => {
}) })
} }
} }
if (commonDataList != null) { if (commonDataList) {
for (let i = 0; i < commonDataList.length; i++) { for (let i = 0; i < commonDataList.length; i++) {
const element = commonDataList[i]; const element = commonDataList[i];
console.log(values[`value${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 ( return (
<PageContainer <PageContainer
header={{ header={{
@ -211,7 +258,7 @@ const Detail: React.FC<any> = () => {
]} /> ]} />
</Col> </Col>
</Row> </Row>
{colorData != null ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required> {colorData ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
<ProFormList <ProFormList
name="colorItems" name="colorItems"
creatorButtonProps={{ creatorButtonProps={{
@ -279,77 +326,89 @@ const Detail: React.FC<any> = () => {
</ProForm.Item> : null} </ProForm.Item> : null}
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductImages")}>
label="相册图" <SortableContext items={formRef.current?.getFieldValue("pbcProductImages") ? formRef.current?.getFieldValue("pbcProductImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
name="pbcProductImages" <ProFormUploadButton
fieldProps={{ label="相册图"
name: 'file', name="pbcProductImages"
accept: 'image/*', fieldProps={{
headers: { name: 'file',
authorization: localStorage.getItem('token') ?? '', accept: 'image/*',
}, multiple: true,
action: process.env.BASE_URL + '/oss/imgUpload', headers: {
beforeUpload(file: RcFile) { authorization: localStorage.getItem('token') ?? '',
const isLt2M = file.size / 1024 / 1024 < 10; },
if (!isLt2M) { itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
message.error('图片大小不能超过10MB!'); action: process.env.BASE_URL + '/oss/imgUpload',
} beforeUpload(file: RcFile) {
return isLt2M || Upload.LIST_IGNORE; const isLt2M = file.size / 1024 / 1024 < 10;
}, if (!isLt2M) {
onPreview: async (file) => { message.error('图片大小不能超过10MB!');
}
if (file.uid === '-1') { return isLt2M || Upload.LIST_IGNORE;
window.open(file.url); },
} onPreview: async (file) => {
if (file.response && file.response.retcode) {
window.open(file.response.data); if (file.uid === '-1') {
} window.open(file.url);
}, }
listType: 'picture-card', if (file.response && file.response.retcode) {
}} window.open(file.response.data);
rules={[ }
{ required: true, message: '请上传相册图' }, },
]} listType: 'picture-card',
/> }}
rules={[
{ required: true, message: '请上传相册图' },
]}
/>
</SortableContext>
</DndContext>
</Col> </Col>
</Row> </Row>
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductDetailImages")}>
label="详情图" <SortableContext items={formRef.current?.getFieldValue("pbcProductDetailImages") ? formRef.current?.getFieldValue("pbcProductDetailImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
name="pbcProductDetailImages" <ProFormUploadButton
fieldProps={{ label="详情图"
name: 'file', name="pbcProductDetailImages"
accept: 'image/*', fieldProps={{
headers: { name: 'file',
authorization: localStorage.getItem('token') ?? '', accept: 'image/*',
}, multiple: true,
action: process.env.BASE_URL + '/oss/imgUpload', headers: {
beforeUpload(file: RcFile) { authorization: localStorage.getItem('token') ?? '',
const isLt2M = file.size / 1024 / 1024 < 10; },
if (!isLt2M) { itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
message.error('图片大小不能超过10MB!'); action: process.env.BASE_URL + '/oss/imgUpload',
} beforeUpload(file: RcFile) {
return isLt2M || Upload.LIST_IGNORE; const isLt2M = file.size / 1024 / 1024 < 10;
}, if (!isLt2M) {
onPreview: async (file) => { message.error('图片大小不能超过10MB!');
}
if (file.uid === '-1') { return isLt2M || Upload.LIST_IGNORE;
window.open(file.url); },
} onPreview: async (file) => {
if (file.response && file.response.retcode) {
window.open(file.response.data); if (file.uid === '-1') {
} window.open(file.url);
}, }
listType: 'picture-card', if (file.response && file.response.retcode) {
}} window.open(file.response.data);
rules={[ }
{ required: true, message: '请上传详情图' }, },
]} listType: 'picture-card',
/> }}
rules={[
{ required: true, message: '请上传详情图' },
]}
/>
</SortableContext>
</DndContext>
</Col> </Col>
</Row> </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}> <Col span={6}>
<ProFormText width="sm" disabled name={`name${index}`} initialValue={e.pbcSystemName} placeholder="请输入规格名称" rules={[ <ProFormText width="sm" disabled name={`name${index}`} initialValue={e.pbcSystemName} placeholder="请输入规格名称" rules={[
{ required: true, message: '请输入规格名称' } { required: true, message: '请输入规格名称' }

2
src/pages/ProductList/components/UpdateForm.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save