优化：问题修复

src/components/EditableCell/index.tsx

@@ -2,13 +2,22 @@ import { Form, InputNumber, Input, Select, Radio, Switch } from 'antd';
 import React from 'react';
 import { Uploader } from '~/components/uploader';
 import { UploadOutlined } from '@ant-design/icons';
+import { UploaderOld } from '~/components/uploaderOld';
 
 // 表格可编辑单元格
 export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   editing: boolean;
   dataIndex: string;
   title: any;
-  inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea' | 'switch';
+  inputType:
+    | 'number'
+    | 'text'
+    | 'select'
+    | 'uploader'
+    | 'radio'
+    | 'textArea'
+    | 'switch'
+    | 'uploaderOld';
   record: any;
   index: number;
   children: React.ReactNode;
@@ -70,6 +79,17 @@ const EditableCell: React.FC<
             <UploadOutlined />
           </Uploader>
         );
+      case 'uploaderOld':
+        return (
+          <UploaderOld
+            fileUpload
+            listType='picture-card'
+            onChange={(value) => uploadSuccess?.(record, value)}
+            defaultFileList={record.fileList}
+          >
+            <UploadOutlined />
+          </UploaderOld>
+        );
       case 'radio':
         return (
           <Radio.Group>

src/components/goods/commonSkuInfo/index.tsx

@@ -67,6 +67,7 @@ const CommonSkuInfo = forwardRef<any, selfProps>(
     useImperativeHandle(ref, () => ({
       getSpecificationForm: () => form,
       getSpecificationValueForm: () => skuValueForm,
+      // getSpecificationValueForm: (e: any) => console.log('执行到此处 ====>', e),
       getSpecificationFormList: () => specificationFormList,
       updateSpecificationFormList: (value: specificationFormListType[]) =>
         setSpecificationFormList(value),
@@ -279,7 +280,9 @@ const CommonSkuInfo = forwardRef<any, selfProps>(
             editing: col.editable,
             radioOption: col.radioOption,
             inputType: col.inputType,
-            uploadSuccess: col.inputType === 'uploader' ? uploadSuccess : undefined,
+            uploadSuccess: ['uploader', 'uploaderOld'].includes(col.inputType || '')
+              ? uploadSuccess
+              : undefined,
             rules: col.rules,
             placeholder: col.placeholder,
             maxLength: col.maxLength,

src/components/uploaderOld/index.scss

+.uploader-view {
+  .ant-upload-wrapper .ant-upload-list .ant-upload-list-item-container {
+    //width: 200px !important;
+  }
+
+  .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,
+  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select {
+    width: 50px !important;
+    height: 50px !important;
+  }
+}

src/components/uploaderOld/index.tsx

+import React, { useEffect, useState } from 'react';
+import { message, Upload, UploadProps } from 'antd';
+import { CommonAPI } from '~/api';
+import './index.scss';
+import Viewer from '~/components/viewer';
+import saveAs from 'file-saver';
+import { fileTypeList } from '~/utils/dictionary';
+
+interface PropsType {
+  listType?: 'text' | 'picture' | 'picture-card'; // 上传列表的内建样式
+  fileSize?: number; // 文件大小
+  fileType?: string[]; // 上传文件类型
+  fileUpload: boolean; // 是否上传到服务器(返回文件流还是返回上传后的地址)
+  fileLength?: number; // 最大上传文件数量
+  children: React.ReactNode; // 上传按钮
+  onChange?: (
+    fileList: {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[],
+  ) => void; // 上传文件改变时的状态
+  defaultFileList?: any[]; // 默认文件列表
+  disabled?: boolean; // 是否禁用
+}
+export const UploaderOld: React.FC<PropsType> = (props) => {
+  UploaderOld.defaultProps = {
+    listType: 'picture-card',
+    fileSize: 10,
+    fileLength: 1,
+    fileType: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
+    defaultFileList: [],
+    disabled: false,
+  };
+  const {
+    fileType = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp'],
+    children,
+    listType,
+    fileSize,
+    fileUpload,
+    fileLength,
+    onChange,
+    defaultFileList,
+    disabled,
+  } = props;
+  // 是否上传图片
+  const [visible, setVisible] = useState<boolean>(false);
+  // 当前选择的文件
+  const [currentFile, setCurrentFile] = useState<string>();
+  // 文件列表
+  const [fileList, setFileList] = useState<any[]>([]);
+  // 上传文件配置
+  const uploadProps: UploadProps = {
+    listType,
+    fileList,
+    beforeUpload: (res) => {
+      // console.log('文件类型-->', res);
+      const isType = fileType?.includes(res.type);
+      const isSize = res.size / 1024 / 1024 < (fileSize || 2);
+      if (!isType) {
+        message.error(`请上传${getFileTypeStr()}格式的文件!`).then();
+        return isType;
+      }
+      if (!isSize) {
+        message.error(`文件最大${props.fileSize}M，请压缩后上传！`).then();
+        return isSize;
+      }
+    },
+    customRequest: (res) => {
+      if (fileList.length >= (fileLength || 1)) {
+        message.error(`最多上传${fileLength || 1}个文件`).then();
+        return;
+      }
+      if (fileUpload) {
+        // 上传到服务器
+        const formData = new FormData();
+        formData.append('uploadFile', res.file);
+        CommonAPI.uploadOssBP(formData).then(({ result }: any) => {
+          setFileList([
+            ...fileList,
+            {
+              id: new Date().getTime(),
+              uid: new Date().getTime(),
+              name: (res.file as any).name,
+              url: result,
+            },
+          ]);
+          onChange?.([
+            ...fileList,
+            {
+              id: new Date().getTime(),
+              uid: new Date().getTime(),
+              name: (res.file as any).name,
+              url: result,
+            },
+          ]);
+        });
+      } else {
+        setFileList([...fileList, res.file]);
+        onChange?.([...fileList, res.file]);
+      }
+    },
+    onRemove: (res) => {
+      const newFileList = fileList.filter((item) => item.uid !== res.uid);
+      setFileList(newFileList);
+      onChange?.(newFileList);
+    },
+    onPreview: (res) => {
+      const { url } = res;
+      const fileType = url?.substring(url?.lastIndexOf('.') + 1) || '';
+      if (['png', 'jpg', 'bmp', 'gif', 'jpeg', 'webp'].includes(fileType)) {
+        setCurrentFile(url);
+        setVisible(true);
+      } else {
+        if (url) {
+          // 如果有oss地址,则直接下载
+          saveAs(url.replace(/^http:/, 'https:'), res?.name ? res.name : '未命名文件');
+        } else {
+          // 没有就直接保存文件
+          const blob = new Blob([res as any]);
+          saveAs(blob, res.name);
+        }
+      }
+    },
+  };
+
+  // 获取文件类型提示
+  const getFileTypeStr = () =>
+    fileType
+      .map((v) => fileTypeList.find((i) => i.value === v)?.label)
+      .filter((v) => !!v)
+      .join(',');
+  useEffect(() => {
+    // 如果有默认文件列表
+    if (defaultFileList?.length) {
+      setFileList(defaultFileList);
+    } else {
+      setFileList([]);
+    }
+  }, [defaultFileList]);
+  return (
+    <div className='uploader-view'>
+      {listType === 'text' ? (
+        <Upload {...uploadProps} style={{ width: '100%' }} disabled={disabled}>
+          <>{fileList.length < (fileLength || 1) && children}</>
+        </Upload>
+      ) : (
+        <Upload {...uploadProps} style={{ width: '100%' }} disabled={disabled}>
+          {fileList.length < (fileLength || 1) && children}
+        </Upload>
+      )}
+      <Viewer
+        visible={visible}
+        currentImgList={[
+          {
+            src: currentFile,
+            alt: '图片',
+          },
+        ]}
+        activeViewerIndex={0}
+        setVisible={() => {
+          setVisible(false);
+        }}
+      />
+    </div>
+  );
+};

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx

@@ -107,7 +107,8 @@ const SkuInfo = forwardRef<any, selfProps>(({ goodsDetailsInfo }, ref) => {
       align: 'center',
       editable: true,
       dataIndex: 'skuImage',
-      inputType: 'uploader',
+      // inputType: 'uploader',
+      inputType: 'uploaderOld',
     },
     {
       title: 'sku编号（料号）',
@@ -196,10 +197,15 @@ const SkuInfo = forwardRef<any, selfProps>(({ goodsDetailsInfo }, ref) => {
     const tableIndex: number = tableData.findIndex((v) => v.id === record.id);
     if (tableIndex !== -1) {
       tableData[tableIndex].fileList = fileList;
+      tableData[tableIndex].skuImage = fileList?.at(0)?.url as string;
       const obj = Object.create(null);
       obj['skuImage' + record.id] = fileList.length ? fileList[0].url : undefined;
-      commonSkuInfoRef.current.getSpecificationValueForm().setFieldsValue(obj);
-      setTableData([...tableData]);
+      // commonSkuInfoRef.current.getSpecificationValueObj(obj);
+      // commonSkuInfoRef.current.getSpecificationValueForm()?.setFieldsValue(obj);
+      // console.log('执行到此处 ====>', fileList, record);
+      // console.log('tableData ====>', fileList?.at(0)?.url, fileList, tableData[tableIndex]);
+      setTableData(tableData);
+      // setTableData([...tableData]);
     }
   };
 

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx

@@ -9,6 +9,7 @@ import { InterDataType } from '~/api/interface';
 import { mallGoodsDetailsType } from '~/api/interface/goodsType';
 import GoodsAPI from '~/api/modules/goodsAPI';
 import { filterObjAttr } from '~/utils';
+import { isArray } from 'lodash';
 
 //商品详情-返回类型
 type goodsDetailType = InterDataType<mallGoodsDetailsType>;
@@ -110,11 +111,16 @@ const GoodsAddOrEditOrDetail = () => {
           categorySubId: values[0].categoryId.length === 2 ? values[0].categoryId[1] : undefined,
           goodsDetails,
           ...values[1],
+          priceStock: values[1].priceStock?.map((v: any) => ({
+            ...v,
+            skuImage: isArray(v.skuImage) ? v.skuImage?.[0]?.url : v.skuImage,
+          })),
           id: goodsId || undefined,
         };
+        // console.log('addGoodsEditReq ===>', addGoodsEditReq);
         GoodsAPI[goodsId ? 'editMallGoods' : 'addMallGoods'](addGoodsEditReq).then(({ code }) => {
           if (code === '200') {
-            message.success(goodsId ? '编辑商品成功' : '新增商品成功');
+            message.success(goodsId ? '编辑商品成功' : '新增商品成功').then();
             navigate(-1);
           }
         });