master
Joe 1 year ago
parent f05f809ea3
commit 77b4e74553

@ -59,6 +59,7 @@ const Detail: React.FC<any> = () => {
const [info, setInfo] = useState<API.PbcBusiness>({}); const [info, setInfo] = useState<API.PbcBusiness>({});
const [form1] = Form.useForm(); const [form1] = Form.useForm();
const [form2] = Form.useForm();
const getInfo = () => { const getInfo = () => {
if (params.id) { if (params.id) {
@ -78,13 +79,13 @@ const Detail: React.FC<any> = () => {
activationConstraint: { distance: 10 }, activationConstraint: { distance: 10 },
}); });
const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => { const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string, type: number) => {
if (active.id !== over?.id) { if (active.id !== over?.id) {
const arr = form1.getFieldValue(fieldName) || [] const arr = type == 1 ? form1.getFieldValue(fieldName) || [] : form2.getFieldValue(fieldName)
const activeIndex = arr.findIndex((i: any) => i.uid === active.id); const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
const overIndex = arr.findIndex((i: any) => i.uid === over?.id); const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
const newArr = arrayMove(arr, activeIndex, overIndex) const newArr = arrayMove(arr, activeIndex, overIndex)
form1.setFieldValue(fieldName, newArr) type == 1 ? form1.setFieldValue(fieldName, newArr) : form2.setFieldValue(fieldName, newArr)
} }
}; };
@ -116,9 +117,8 @@ const Detail: React.FC<any> = () => {
); );
}, },
renderFormItem: (text, props: any) => { renderFormItem: (text, props: any) => {
console.log(props.id)
return ( return (
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, props.id)}> <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, props.id, 1)}>
<SortableContext items={form1.getFieldValue(props.id) ? form1.getFieldValue(props.id).map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}> <SortableContext items={form1.getFieldValue(props.id) ? form1.getFieldValue(props.id).map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton <ProFormUploadButton
{...props} {...props}
@ -142,12 +142,10 @@ const Detail: React.FC<any> = () => {
return isLt2M; return isLt2M;
}, },
onPreview: async (file) => { onPreview: async (file) => {
console.log(file);
if (file.uid === '-1') {
window.open(file.url);
}
if (file.response && file.response.retcode) { if (file.response && file.response.retcode) {
window.open(file.response.data); window.open(file.response.data);
} else {
window.open(file.url);
} }
}, },
}} }}
@ -200,11 +198,10 @@ const Detail: React.FC<any> = () => {
) { ) {
for (let i = 0; i < record[key].length; i++) { for (let i = 0; i < record[key].length; i++) {
const element = record[key][i]; const element = record[key][i];
if (element.uid === '-1') {
pbcBusinessImage.push(element.url)
}
if (element.response && element.response.retcode) { if (element.response && element.response.retcode) {
pbcBusinessImage.push(element.response.data) pbcBusinessImage.push(element.response.data)
} else {
pbcBusinessImage.push(element.url)
} }
} }
} }
@ -215,11 +212,10 @@ const Detail: React.FC<any> = () => {
) { ) {
for (let i = 0; i < record[key].length; i++) { for (let i = 0; i < record[key].length; i++) {
const element = record[key][i]; const element = record[key][i];
if (element.uid === '-1') {
pbcBusinessPosterUrl.push(element.url)
}
if (element.response && element.response.retcode) { if (element.response && element.response.retcode) {
pbcBusinessPosterUrl.push(element.response.data) pbcBusinessPosterUrl.push(element.response.data)
} else {
pbcBusinessPosterUrl.push(element.url)
} }
} }
} }
@ -411,43 +407,46 @@ const Detail: React.FC<any> = () => {
<span></span> <span></span>
); );
}, },
renderFormItem: (text, props) => { renderFormItem: (text, props: any) => {
return ( return (
<ProFormUploadButton <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, props.id, 2)}>
{...props} <SortableContext items={form2.getFieldValue(props.id) ? form2.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={{
multiple: true, name: 'file',
listType: 'picture-card', accept: 'image/*',
headers: { multiple: true,
authorization: localStorage.getItem('token') ?? '', listType: 'picture-card',
}, 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!'); beforeUpload(file: RcFile) {
} const isLt2M = file.size / 1024 / 1024 < 10;
return isLt2M; if (!isLt2M) {
}, message.error('图片大小不能超过10MB!');
onPreview: async (file) => { }
console.log(file); return isLt2M;
if (file.uid === '-1') { },
window.open(file.url); onPreview: async (file) => {
} if (file.response && file.response.retcode) {
if (file.response && file.response.retcode) { window.open(file.response.data);
window.open(file.response.data); } else {
} window.open(file.url);
}, }
}} },
action={'/oss/imgUpload'} }}
onChange={(a: any) => { action={'/oss/imgUpload'}
props?.fieldProps.onChange(a.fileList); onChange={(a: any) => {
}} props?.fieldProps.onChange(a.fileList);
/> }}
/>
</SortableContext>
</DndContext>
); );
}, },
}, },
@ -495,7 +494,7 @@ const Detail: React.FC<any> = () => {
editable={ editable={
access.businessSave && isEdit access.businessSave && isEdit
? { ? {
form: form1, form: form2,
onSave: async (key, record: any, originRow) => { onSave: async (key, record: any, originRow) => {
let pbcBusinessHeadUserNoFrontUrl = ""; let pbcBusinessHeadUserNoFrontUrl = "";
if ( if (
@ -523,7 +522,7 @@ const Detail: React.FC<any> = () => {
pbcBusinessHeadUserNoBackUrl = record[key][0].response.data; pbcBusinessHeadUserNoBackUrl = record[key][0].response.data;
} }
} }
const pbcBusinessLicenseUrl = []; let pbcBusinessLicenseUrl = [];
if ( if (
key === 'pbcBusinessLicenseUrl' && key === 'pbcBusinessLicenseUrl' &&
record[key] && record[key] &&
@ -531,11 +530,10 @@ const Detail: React.FC<any> = () => {
) { ) {
for (let i = 0; i < record[key].length; i++) { for (let i = 0; i < record[key].length; i++) {
const element = record[key][i]; const element = record[key][i];
if (element.uid === '-1') {
pbcBusinessLicenseUrl.push(element.url)
}
if (element.response && element.response.retcode) { if (element.response && element.response.retcode) {
pbcBusinessLicenseUrl.push(element.response.data) pbcBusinessLicenseUrl.push(element.response.data)
} else {
pbcBusinessLicenseUrl.push(element.url)
} }
} }
} }
@ -547,8 +545,7 @@ const Detail: React.FC<any> = () => {
key === 'pbcBusinessHeadUserNoFrontUrl' ? pbcBusinessHeadUserNoFrontUrl : undefined, key === 'pbcBusinessHeadUserNoFrontUrl' ? pbcBusinessHeadUserNoFrontUrl : undefined,
pbcBusinessHeadUserNoBackUrl: pbcBusinessHeadUserNoBackUrl:
key === 'pbcBusinessHeadUserNoBackUrl' ? pbcBusinessHeadUserNoBackUrl : undefined, key === 'pbcBusinessHeadUserNoBackUrl' ? pbcBusinessHeadUserNoBackUrl : undefined,
pbcBusinessLicenseUrl: pbcBusinessLicenseUrl: key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl.join(',') : undefined
key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl.join(',') : undefined,
}) })
.then((res) => { .then((res) => {
if (res.retcode) { if (res.retcode) {

@ -1,10 +1,11 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { DrawerForm, ProFormCheckbox, ProFormInstance, ProFormText, ProFormUploadButton } from '@ant-design/pro-components'; import { DrawerForm, ProForm, ProFormCheckbox, ProFormInstance, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
import { PlusCircleOutlined } from '@ant-design/icons'; import { PlusCircleOutlined } from '@ant-design/icons';
import { message } from 'antd'; import { message } from 'antd';
import { RcFile } from 'antd/es/upload'; import Upload, { RcFile, UploadFile, UploadProps } from 'antd/es/upload';
import { specificationListUsingGet } from '@/services/pop-b2b2c/pbcSpecificationController'; import { specificationListUsingGet } from '@/services/pop-b2b2c/pbcSpecificationController';
import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonDataController'; import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonDataController';
import ImgCrop from 'antd-img-crop';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
template?: string; template?: string;
@ -19,10 +20,26 @@ export type UpdateFormProps = {
values: Partial<API.PbcCategory>; values: Partial<API.PbcCategory>;
}; };
const normFile = (e: any) => {
if (Array.isArray(e)) {
return e;
}
return e?.fileList;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => { const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const formRef = useRef<ProFormInstance>(); const formRef = useRef<ProFormInstance>();
const [specList, setSpecList] = useState<API.PbcSpecification[]>([]) const [specList, setSpecList] = useState<API.PbcSpecification[]>([])
const [fileList, setFileList] = useState<UploadFile[]>(props.values.pbcCategoryImage ? [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: props.values.pbcCategoryImage,
},
] : []);
useEffect(() => { useEffect(() => {
if (props.values.pbcCategoryLevel === 3) { if (props.values.pbcCategoryLevel === 3) {
specificationListUsingGet().then(res => { specificationListUsingGet().then(res => {
@ -54,6 +71,10 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
} }
}, [props.values.pbcCategoryLevel, props.values.pbcId]) }, [props.values.pbcCategoryLevel, props.values.pbcId])
const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
setFileList(newFileList);
};
return ( return (
<DrawerForm <DrawerForm
width={640} width={640}
@ -63,15 +84,15 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
formRef={formRef} formRef={formRef}
onFinish={(value) => { onFinish={(value) => {
let pbcCategoryImage = "" let pbcCategoryImage = ""
if (value.pbcCategoryImage && value.pbcCategoryImage.length > 0) { if (fileList && fileList.length > 0) {
if (value.pbcCategoryImage[0].uid === '-1') { if (fileList[0].uid === '-1') {
pbcCategoryImage = value.pbcCategoryImage[0].url; pbcCategoryImage = fileList[0].url || '';
} }
if ( if (
value.pbcCategoryImage[0].response && fileList[0].response &&
value.pbcCategoryImage[0].response.retcode fileList[0].response.retcode
) { ) {
pbcCategoryImage = value.pbcCategoryImage[0].response.data; pbcCategoryImage = fileList[0].response.data;
} }
} }
const arr = specList.filter(e => value.pbcSpecificationList && value.pbcSpecificationList.length > 0 && value.pbcSpecificationList.includes(e.pbcId)) const arr = specList.filter(e => value.pbcSpecificationList && value.pbcSpecificationList.length > 0 && value.pbcSpecificationList.includes(e.pbcId))
@ -81,15 +102,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
destroyOnClose: true, destroyOnClose: true,
}} }}
initialValues={{ initialValues={{
pbcCategoryName: props.values.pbcCategoryName, pbcCategoryName: props.values.pbcCategoryName
pbcCategoryImage: props.values.pbcCategoryImage ? [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: props.values.pbcCategoryImage,
},
] : []
}} }}
onOpenChange={(visible) => { onOpenChange={(visible) => {
formRef.current?.resetFields(); formRef.current?.resetFields();
@ -110,38 +123,67 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
width="md" width="md"
name="pbcCategoryName" name="pbcCategoryName"
/> />
<ProFormUploadButton <ProForm.Item name="pbcCategoryImage" label="图片">
name="pbcCategoryImage" <ImgCrop rotationSlider>
label="图片" <Upload
icon={<PlusCircleOutlined style={{ fontSize: 30 }} />} name="file"
title={<div style={{ marginTop: 10, fontSize: 12 }}></div>} accept="image/*"
max={1} headers={{
fieldProps={{ authorization: localStorage.getItem('token') ?? '',
name: 'file', }}
accept: 'image/*', maxCount={1}
listType: 'picture-card', action='/oss/imgUpload'
headers: { listType="picture-card"
authorization: localStorage.getItem('token') ?? '', fileList={fileList}
}, onChange={onChange}
beforeUpload(file: RcFile) { onPreview={async (file) => {
const isLt2M = file.size / 1024 / 1024 < 10; console.log(file)
if (!isLt2M) { if (file.uid === '-1') {
message.error('图片大小不能超过10MB!'); window.open(file.url);
} }
return isLt2M; if (file.response && file.response.retcode) {
}, window.open(file.response.data);
onPreview: async (file) => { }
console.log(file) }}
if (file.uid === '-1') { >
window.open(file.url); {fileList.length === 0 && '点击上传图片'}
} </Upload>
if (file.response && file.response.retcode) { </ImgCrop>
window.open(file.response.data); </ProForm.Item>
}
}, {/* <ProFormUploadButton
}} name="pbcCategoryImage"
action={process.env.BASE_URL + '/oss/imgUpload'} label="图片"
/> icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
title={<div style={{ marginTop: 10, fontSize: 12 }}></div>}
max={1}
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={'/oss/imgUpload'}
/> */}
{props.values.pbcCategoryLevel === 3 ? <ProFormCheckbox.Group {props.values.pbcCategoryLevel === 3 ? <ProFormCheckbox.Group
label="类目规格" label="类目规格"
width="md" width="md"

Loading…
Cancel
Save