diff --git a/package.json b/package.json
index ae72266..0b5400b 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/pages/BusinessList/add.tsx b/src/pages/BusinessList/add.tsx
index 706b70a..a4b42d8 100644
--- a/src/pages/BusinessList/add.tsx
+++ b/src/pages/BusinessList/add.tsx
@@ -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>
diff --git a/src/pages/BusinessList/detail.tsx b/src/pages/BusinessList/detail.tsx
index 62de7dd..2681cd0 100644
--- a/src/pages/BusinessList/detail.tsx
+++ b/src/pages/BusinessList/detail.tsx
@@ -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',
               },
               {
diff --git a/src/pages/ProductList/add.tsx b/src/pages/ProductList/add.tsx
index 9b3cd96..ec99c4e 100644
--- a/src/pages/ProductList/add.tsx
+++ b/src/pages/ProductList/add.tsx
@@ -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: '请输入规格名称' }
diff --git a/src/pages/ProductList/components/UpdateForm.tsx b/src/pages/ProductList/components/UpdateForm.tsx
index 4f481a1..e30db74 100644
--- a/src/pages/ProductList/components/UpdateForm.tsx
+++ b/src/pages/ProductList/components/UpdateForm.tsx
@@ -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 (