|
|
|
@ -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',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|