From 77b4e7455358092c3f84013c99eb33676f1fb037 Mon Sep 17 00:00:00 2001 From: Joe Date: Thu, 29 Aug 2024 19:30:57 +0800 Subject: [PATCH] up --- src/pages/BusinessList/detail.tsx | 113 +++++++------- .../ProductList/components/UpdateForm.tsx | 140 ++++++++++++------ 2 files changed, 146 insertions(+), 107 deletions(-) diff --git a/src/pages/BusinessList/detail.tsx b/src/pages/BusinessList/detail.tsx index 2681cd0..299e99e 100644 --- a/src/pages/BusinessList/detail.tsx +++ b/src/pages/BusinessList/detail.tsx @@ -59,6 +59,7 @@ const Detail: React.FC = () => { const [info, setInfo] = useState({}); const [form1] = Form.useForm(); + const [form2] = Form.useForm(); const getInfo = () => { if (params.id) { @@ -78,13 +79,13 @@ const Detail: React.FC = () => { activationConstraint: { distance: 10 }, }); - const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => { + const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string, type: number) => { 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 overIndex = arr.findIndex((i: any) => i.uid === over?.id); 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 = () => { ); }, renderFormItem: (text, props: any) => { - console.log(props.id) return ( - onDragEnd(event, props.id)}> + onDragEnd(event, props.id, 1)}> i.uid) : []} strategy={verticalListSortingStrategy}> = () => { 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); + } else { + window.open(file.url); } }, }} @@ -200,11 +198,10 @@ const Detail: React.FC = () => { ) { for (let i = 0; i < record[key].length; i++) { const element = record[key][i]; - if (element.uid === '-1') { - pbcBusinessImage.push(element.url) - } if (element.response && element.response.retcode) { pbcBusinessImage.push(element.response.data) + } else { + pbcBusinessImage.push(element.url) } } } @@ -215,11 +212,10 @@ const Detail: React.FC = () => { ) { for (let i = 0; i < record[key].length; i++) { const element = record[key][i]; - if (element.uid === '-1') { - pbcBusinessPosterUrl.push(element.url) - } if (element.response && element.response.retcode) { pbcBusinessPosterUrl.push(element.response.data) + } else { + pbcBusinessPosterUrl.push(element.url) } } } @@ -411,43 +407,46 @@ const Detail: React.FC = () => { ); }, - renderFormItem: (text, props) => { + renderFormItem: (text, props: any) => { return ( - } - title={
点击上传图片
} - fieldProps={{ - name: 'file', - accept: 'image/*', - multiple: true, - 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'} - onChange={(a: any) => { - props?.fieldProps.onChange(a.fileList); - }} - /> + onDragEnd(event, props.id, 2)}> + i.uid) : []} strategy={verticalListSortingStrategy}> + } + title={
点击上传图片
} + fieldProps={{ + name: 'file', + accept: 'image/*', + multiple: true, + listType: 'picture-card', + headers: { + authorization: localStorage.getItem('token') ?? '', + }, + itemRender: (originNode, file) => , + beforeUpload(file: RcFile) { + const isLt2M = file.size / 1024 / 1024 < 10; + if (!isLt2M) { + message.error('图片大小不能超过10MB!'); + } + return isLt2M; + }, + onPreview: async (file) => { + if (file.response && file.response.retcode) { + window.open(file.response.data); + } else { + window.open(file.url); + } + }, + }} + action={'/oss/imgUpload'} + onChange={(a: any) => { + props?.fieldProps.onChange(a.fileList); + }} + /> + + ); }, }, @@ -495,7 +494,7 @@ const Detail: React.FC = () => { editable={ access.businessSave && isEdit ? { - form: form1, + form: form2, onSave: async (key, record: any, originRow) => { let pbcBusinessHeadUserNoFrontUrl = ""; if ( @@ -523,7 +522,7 @@ const Detail: React.FC = () => { pbcBusinessHeadUserNoBackUrl = record[key][0].response.data; } } - const pbcBusinessLicenseUrl = []; + let pbcBusinessLicenseUrl = []; if ( key === 'pbcBusinessLicenseUrl' && record[key] && @@ -531,11 +530,10 @@ const Detail: React.FC = () => { ) { 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) + } else { + pbcBusinessLicenseUrl.push(element.url) } } } @@ -547,8 +545,7 @@ const Detail: React.FC = () => { key === 'pbcBusinessHeadUserNoFrontUrl' ? pbcBusinessHeadUserNoFrontUrl : undefined, pbcBusinessHeadUserNoBackUrl: key === 'pbcBusinessHeadUserNoBackUrl' ? pbcBusinessHeadUserNoBackUrl : undefined, - pbcBusinessLicenseUrl: - key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl.join(',') : undefined, + pbcBusinessLicenseUrl: key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl.join(',') : undefined }) .then((res) => { if (res.retcode) { diff --git a/src/pages/ProductList/components/UpdateForm.tsx b/src/pages/ProductList/components/UpdateForm.tsx index e30db74..39f65e9 100644 --- a/src/pages/ProductList/components/UpdateForm.tsx +++ b/src/pages/ProductList/components/UpdateForm.tsx @@ -1,10 +1,11 @@ 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 { 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 { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonDataController'; +import ImgCrop from 'antd-img-crop'; export type FormValueType = { target?: string; template?: string; @@ -19,10 +20,26 @@ export type UpdateFormProps = { values: Partial; }; +const normFile = (e: any) => { + if (Array.isArray(e)) { + return e; + } + return e?.fileList; +}; + const UpdateForm: React.FC = (props) => { const formRef = useRef(); const [specList, setSpecList] = useState([]) + const [fileList, setFileList] = useState(props.values.pbcCategoryImage ? [ + { + uid: '-1', + name: 'image.png', + status: 'done', + url: props.values.pbcCategoryImage, + }, + ] : []); + useEffect(() => { if (props.values.pbcCategoryLevel === 3) { specificationListUsingGet().then(res => { @@ -54,6 +71,10 @@ const UpdateForm: React.FC = (props) => { } }, [props.values.pbcCategoryLevel, props.values.pbcId]) + const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => { + setFileList(newFileList); + }; + return ( = (props) => { formRef={formRef} onFinish={(value) => { let pbcCategoryImage = "" - if (value.pbcCategoryImage && value.pbcCategoryImage.length > 0) { - if (value.pbcCategoryImage[0].uid === '-1') { - pbcCategoryImage = value.pbcCategoryImage[0].url; + if (fileList && fileList.length > 0) { + if (fileList[0].uid === '-1') { + pbcCategoryImage = fileList[0].url || ''; } if ( - value.pbcCategoryImage[0].response && - value.pbcCategoryImage[0].response.retcode + fileList[0].response && + 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)) @@ -81,15 +102,7 @@ const UpdateForm: React.FC = (props) => { destroyOnClose: true, }} initialValues={{ - pbcCategoryName: props.values.pbcCategoryName, - pbcCategoryImage: props.values.pbcCategoryImage ? [ - { - uid: '-1', - name: 'image.png', - status: 'done', - url: props.values.pbcCategoryImage, - }, - ] : [] + pbcCategoryName: props.values.pbcCategoryName }} onOpenChange={(visible) => { formRef.current?.resetFields(); @@ -110,38 +123,67 @@ const UpdateForm: React.FC = (props) => { width="md" name="pbcCategoryName" /> - } - title={
点击上传图片
} - 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={process.env.BASE_URL + '/oss/imgUpload'} - /> + + + { + console.log(file) + if (file.uid === '-1') { + window.open(file.url); + } + if (file.response && file.response.retcode) { + window.open(file.response.data); + } + }} + > + {fileList.length === 0 && '点击上传图片'} + + + + + {/* } + title={
点击上传图片
} + 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 ?