功能：商品新增，商品编辑（联调完成）

src/api/interface/goodsType.ts

@@ -99,8 +99,12 @@ export type otherServiceType = InterFunction<any, { id: number; saleServiceName:
 export type skuUnitType = InterFunction<any, { id: number; unitName: string }[]>;
 //商品-批量上下架
 export type batchOnShelfOrTakeDownType = InterFunction<{ goodsIds: number[]; status: number }, any>;
+//商品-单个上下架（新）
+export type upOrDownShelfType = InterFunction<{ id: number; status: number }, any>;
 //商品批量删除
 export type batchRemoveWareInfoType = InterFunction<number[], any>;
+//商品-单个删除
+export type removeMallGoodsType = InterFunction<{ id: number }, any>;
 //商品-上下移动
 export type exchangeGoodsInfoType = InterFunction<{ firstId: number; secondId: number }, any>;
 
@@ -116,7 +120,7 @@ export type addMallGoodsType = InterFunction<
       chooseType: number;
       goodsSpecValuesList: {
         channelPrice?: number;
-        id: number;
+        id: any;
         partNo: string;
         salePrice: number;
         showPrice: number;
@@ -124,7 +128,44 @@ export type addMallGoodsType = InterFunction<
         specValueName: string;
         stock?: number;
       }[];
+      id: any;
+      mallGoodsId: number;
+      must: number;
+      skuUnitId: number;
+      specName: string;
+    }[];
+    labelShow: number;
+    resourcesList: {
       id: number;
+      type: number;
+      url: string;
+    }[];
+    shelfStatus: number;
+    tradeName: string;
+  },
+  any
+>;
+//商品-编辑（新）
+export type editMallGoodsType = InterFunction<
+  {
+    categoryPrimaryId: number;
+    categorySubId: number;
+    description: string;
+    goodsDetails: string;
+    goodsLabel: string;
+    goodsSpecList: {
+      chooseType: number;
+      goodsSpecValuesList: {
+        channelPrice?: number;
+        id: any;
+        partNo: string;
+        salePrice: number;
+        showPrice: number;
+        specValueImage: string;
+        specValueName: string;
+        stock?: number;
+      }[];
+      id: any;
       mallGoodsId: number;
       must: number;
       skuUnitId: number;
@@ -142,3 +183,85 @@ export type addMallGoodsType = InterFunction<
   },
   any
 >;
+//商品-列表（新）
+export type listPageGoodsInfoType = InterItemFunction<
+  { categoryPrimaryId?: number; tradeName?: string; shelfStatus?: number },
+  {
+    categoryPrimaryId: number;
+    categorySubId: number;
+    createTime: string;
+    description: string;
+    goodsDetails: string;
+    goodsLabel: string;
+    goodsSpecList: {
+      chooseType: number;
+      goodsSpecValuesList: {
+        channelPrice: number;
+        goodsSpecId: number;
+        id: number;
+        partNo: string;
+        salePrice: number;
+        showPrice: number;
+        specValueImage: string;
+        specValueName: string;
+        stock: number;
+      }[];
+      id: number;
+      mallGoodsId: number;
+      must: number;
+      skuUnitId: number;
+      specName: string;
+    }[];
+    id: number;
+    labelShow: number;
+    resourcesList: {
+      id: number;
+      type: number;
+      url: string;
+    }[];
+    shelfStatus: number;
+    tradeName: string;
+    userAccountId: number;
+  }[]
+>;
+//商城-详情（新）
+export type mallGoodsDetailsType = InterFunction<
+  { id: number },
+  {
+    categoryPrimaryId: number;
+    categorySubId: number;
+    createTime: string;
+    description: string;
+    goodsDetails: string;
+    goodsLabel: string;
+    goodsSpecList: {
+      chooseType: number;
+      goodsSpecValuesList: {
+        channelPrice: number;
+        goodsSpecId: number;
+        id: number;
+        partNo: string;
+        salePrice: number;
+        showPrice: number;
+        specValueImage: string;
+        specValueName: string;
+        stock: number;
+      }[];
+      id: number;
+      mallGoodsId: number;
+      must: number;
+      skuUnitId: number;
+      specName: string;
+    }[];
+    id: number;
+    labelShow: number;
+    resourcesList: {
+      id: number;
+      type: number;
+      url: string;
+    }[];
+    shelfStatus: number;
+    tradeName: string;
+    userAccountId: number;
+  }
+>;

src/api/modules/goodsAPI.ts

@@ -5,10 +5,15 @@ import {
   batchRemoveWareInfoType,
   detailGoodsType,
   editGoodsType,
+  editMallGoodsType,
   exchangeGoodsInfoType,
   listGoodsType,
+  listPageGoodsInfoType,
+  mallGoodsDetailsType,
   otherServiceType,
+  removeMallGoodsType,
   skuUnitType,
+  upOrDownShelfType,
 } from '~/api/interface/goodsType';
 import axios from '../request';
 
@@ -41,16 +46,35 @@ class GoodsAPI {
   static batchOnShelfOrTakeDown: batchOnShelfOrTakeDownType = (data) => {
     return axios.post('/pms/goods/batchOnShelfOrTakeDown', data);
   };
+  //商品-单个上下架（新）
+  static upOrDownShelf: upOrDownShelfType = (params) =>
+    axios.get('/pms/mall/goods/upOrDownShelf', { params });
+
   //  商品-批量删除
   static batchRemoveWareInfo: batchRemoveWareInfoType = (data) => {
     return axios.post('/pms/goods/batchRemoveWareInfo', data);
   };
+  //商品-单个删除
+  static removeMallGoods: removeMallGoodsType = (params) =>
+    axios.get('/pms/mall/goods/removeMallGoods', { params });
   //  商品-上下移动
   static exchangeGoodsInfo: exchangeGoodsInfoType = (params) => {
     return axios.get('/pms/goods/exchangeGoodsInfo', { params });
   };
+  //商品-上下移动
+  static exchange: exchangeGoodsInfoType = (params) =>
+    axios.get('/pms/mall/goods/exchange', { params });
   //  商品-新增（新）
   static addMallGoods: addMallGoodsType = (data) =>
     axios.post('/pms/mall/goods/addMallGoods', data);
+  //商品-编辑（新）
+  static editMallGoods: editMallGoodsType = (data) =>
+    axios.post('/pms/mall/goods/editMallGoods', data);
+  //  商品-列表（新）
+  static getListPageGoodsInfo: listPageGoodsInfoType = (data) =>
+    axios.post('/pms/mall/goods/listPageGoodsInfo', data);
+  //  商品-详情（新）
+  static getMallGoodsDetails: mallGoodsDetailsType = (params) =>
+    axios.get('/pms/mall/goods/mallGoodsDetails', { params });
 }
 export default GoodsAPI;

src/components/EditableCell/index.tsx

@@ -39,7 +39,7 @@ const EditableCell: React.FC<
   const inputNode = () => {
     switch (inputType) {
       case 'number':
-        return <InputNumber />;
+        return <InputNumber placeholder={`请输入${title}`} maxLength={maxLength} />;
       case 'select':
         return (
           <Select placeholder={`请选择${title}`} style={{ textAlign: 'start' }}>

src/pages/categoryManage/categoryList/index.tsx

@@ -118,7 +118,6 @@ const CategoryList = () => {
             ) : (
               ''
             )}
-            <Button type='link'>详情</Button>
             <Button type='link' onClick={() => addOrEditCategoryModalShowClick(record)}>
               编辑
             </Button>

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.scss

+.goods-video-wrap{
+  position: relative;
+  width: 200px;
+  img{
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%,-25%);
+  }
+}

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

@@ -2,10 +2,12 @@ import { Button, Cascader, Form, Input, Radio, Select } from 'antd';
 import { Uploader } from '~/components/uploader';
 import type { RadioChangeEvent } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { InterDataType } from '~/api/interface';
 import { categoryListRespType } from '~/api/interface/categoryManage';
 import { CategoryManageAPI } from '~/api';
+import deletePng from '~/assets/image/delete.png';
+import './index.scss';
 
 //分类返回类型
 type categoryType = InterDataType<categoryListRespType>['list'];
@@ -76,6 +78,12 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
 
   useImperativeHandle(ref, () => ({
     getForm: () => baseInfoForm,
+    setLabelShow: (value: boolean) => setLabelShow(value),
+    mediaData: {
+      setMainFileList,
+      setSubFileList,
+      setVideoFileList,
+    },
   }));
 
   //标签选中监听
@@ -115,6 +123,11 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
       setCategoryList(result.list || []);
     });
   };
+  //视频删除
+  const deleteVideo = () => {
+    setVideoFileList([]);
+    baseInfoForm.setFieldValue('videoList', undefined);
+  };
 
   useEffect(() => {
     getCategoryList();
@@ -133,10 +146,14 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
           name='tradeName'
           rules={[{ required: true, message: '请输入商品名称' }]}
         >
-          <Input placeholder='请输入商品名称' />
+          <Input placeholder='请输入商品名称' maxLength={50} />
         </Form.Item>
-        <Form.Item label='商品描述' name='description'>
-          <Input.TextArea rows={4} placeholder='请输入商品描述' />
+        <Form.Item
+          label='商品描述'
+          name='description'
+          rules={[{ required: true, message: '请输入商品描述' }]}
+        >
+          <Input.TextArea rows={4} placeholder='请输入商品描述' maxLength={70} showCount />
         </Form.Item>
         <Form.Item
           label='商品主图'
@@ -163,14 +180,27 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
           </Uploader>
         </Form.Item>
         <Form.Item label='商品视频' name='videoList'>
-          <Uploader
-            fileUpload
-            listType='text'
-            onChange={(fileList) => uploadSuccess(fileList, 'videoList')}
-            defaultFileList={videoFileList}
-          >
-            <Button icon={<UploadOutlined />}>上传视频</Button>
-          </Uploader>
+          {videoFileList.length ? (
+            <div className='goods-video-wrap'>
+              <video
+                src={videoFileList[0].url}
+                style={{ width: '200px', height: '200px' }}
+                controls
+              />
+              <img src={deletePng} alt='删除' onClick={deleteVideo} />
+            </div>
+          ) : (
+            <Uploader
+              fileUpload
+              listType='text'
+              onChange={(fileList) => uploadSuccess(fileList, 'videoList')}
+              defaultFileList={videoFileList}
+              fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
+              fileSize={50}
+            >
+              <Button icon={<UploadOutlined />}>上传视频</Button>
+            </Uploader>
+          )}
         </Form.Item>
         <Form.Item
           label='商品分类'
@@ -205,7 +235,7 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
             name='goodsLabel'
             rules={[{ required: true, message: '请输入商品标签' }]}
           >
-            <Input placeholder='请输入商品标签' />
+            <Input placeholder='请输入商品标签' maxLength={10} />
           </Form.Item>
         ) : (
           ''

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

 import RichText from '~/components/richText';
+import { FC } from 'react';
+
+interface selfProps {
+  onChange: (html: string) => void;
+  introduceInfo: string;
+}
+
+const IntroduceInfo: FC<selfProps> = ({ onChange, introduceInfo }) => {
+  //富文本修改
+  const richTextOnChange = (html?: string) => {
+    onChange(html || '');
+  };
 
-const IntroduceInfo = () => {
   return (
     <div className='introduce-info'>
-      <RichText richTextContent='' height={400} />
+      <RichText richTextContent={introduceInfo} height={400} onChange={richTextOnChange} />
     </div>
   );
 };

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

-import { Button, Form, Input, message, Modal, ModalProps, Radio, Select, Table } from 'antd';
+import { Button, Form, Input, Modal, ModalProps, Radio, Select, Table } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import EditableCell from '~/components/EditableCell';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { InterDataType, InterReqType } from '~/api/interface';
 import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
 import { filterObjAttr } from '~/utils';
+import { isEmptyBol, regPriceNumber } from '~/utils/validateUtils';
+import _ from 'lodash';
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
 
 //商品sku规格类型
-type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
+type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
 //商品sku规格值类型
-type goodsSpecValuesType =
-  InterReqType<addMallGoodsType>['goodsSpecList'][0]['goodsSpecValuesList'] & { fileList: any };
+type goodsSpecValuesType = Exclude<
+  InterReqType<addMallGoodsType>,
+  undefined
+>['goodsSpecList'][0]['goodsSpecValuesList'][0] & { fileList: any };
 //单位返回类型
 type unitType = InterDataType<skuUnitType>;
 
 interface selfProps {
   onCancel: () => void;
-  onOk: (value: goodsSpecType) => void;
+  onHandleOk: (value: goodsSpecType) => void;
   skuUnitList: unitType;
   currentSku: goodsSpecType | undefined;
 }
@@ -27,12 +31,49 @@ interface selfProps {
 const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
   open,
   onCancel,
-  onOk,
+  onHandleOk,
   skuUnitList,
   currentSku,
 }) => {
   const [goodsSpecForm] = Form.useForm<Omit<goodsSpecType, 'goodsSpecValuesList'>>();
-  const [goodsSpecValuesForm] = Form.useForm<goodsSpecValuesType[0]>();
+  const [goodsSpecValuesForm] = Form.useForm<goodsSpecValuesType>();
+
+  //销售正则价格校验
+  const salePriceValidator = (_rules: any, value: number) => {
+    if (!isEmptyBol(value)) {
+      if (regPriceNumber(value.toString())) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject(new Error('为整数且最多保留两位小数'));
+      }
+    } else {
+      return Promise.reject(new Error('请输入销售价'));
+    }
+  };
+  //渠道正则价格校验
+  const channelPriceValidator = (_rules: any, value: number) => {
+    if (!isEmptyBol(value)) {
+      if (regPriceNumber(value.toString())) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject(new Error('为整数且最多保留两位小数'));
+      }
+    } else {
+      return Promise.resolve();
+    }
+  };
+  //库存正则校验
+  const stockPriceValidator = (_rules: any, value: number) => {
+    if (!isEmptyBol(value)) {
+      if (/^[+]{0,1}(\d+)$/.test(value.toString())) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject(new Error('请输入正整数'));
+      }
+    } else {
+      return Promise.resolve();
+    }
+  };
 
   const [tableData, setTableData] = useState<goodsSpecValuesType[]>([
     {
@@ -53,6 +94,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
     inputType?: string;
     radioOption?: { name: string; id: number }[];
     rules?: any;
+    maxLength?: number;
   })[] = [
     {
       title: '序号',
@@ -74,6 +116,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       editable: true,
       dataIndex: 'specValueName',
       rules: [{ required: true, message: '请输入选项名称' }],
+      maxLength: 30,
     },
     {
       title: '料号',
@@ -81,25 +124,31 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       editable: true,
       dataIndex: 'partNo',
       rules: [{ required: true, message: '请输入料号' }],
+      maxLength: 30,
     },
     {
       title: '销售价',
       align: 'center',
       editable: true,
       dataIndex: 'salePrice',
-      rules: [{ required: true, message: '请输入销售号' }],
+      rules: [{ required: true, validator: salePriceValidator }],
+      inputType: 'number',
     },
     {
       title: '渠道价',
       editable: true,
       align: 'center',
       dataIndex: 'channelPrice',
+      rules: [{ required: false, validator: channelPriceValidator }],
+      inputType: 'number',
     },
     {
       title: '库存',
       editable: true,
       align: 'center',
       dataIndex: 'stock',
+      rules: [{ required: false, validator: stockPriceValidator }],
+      inputType: 'number',
     },
     {
       title: '是否显示',
@@ -107,7 +156,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       align: 'center',
       dataIndex: 'showPrice',
       inputType: 'radio',
-      width: '20%',
+      width: '18%',
       radioOption: [
         { id: 1, name: '显示' },
         { id: 0, name: '不显示' },
@@ -237,7 +286,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
   //提交
   const handleOk = () => {
     Promise.all([goodsSpecForm.validateFields(), goodsSpecValuesForm.validateFields()]).then(
-      (values) => {
+      (values: any) => {
         const goodsSpecValuesList: goodsSpecValuesType[] = tableData.map((v) => {
           return Object.getOwnPropertyNames(v).reduce((pre: any, cur: string) => {
             if (Object.getOwnPropertyNames(values[1]).includes(cur + v.id)) {
@@ -247,7 +296,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
             return pre;
           }, {});
         });
-        onOk({ ...values[0], goodsSpecValuesList, id: currentSku?.id || Math.random() });
+        onHandleOk({ ...values[0], goodsSpecValuesList, id: currentSku?.id || Math.random() });
         clearForm();
       },
     );
@@ -294,7 +343,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
     <Modal
       open={open}
       title={currentSku ? '编辑规格' : '添加规格'}
-      width={1000}
+      width={1100}
       onCancel={handleCancel}
       onOk={handleOk}
     >
@@ -309,7 +358,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
           name='specName'
           rules={[{ required: true, message: '请输入规格名称' }]}
         >
-          <Input placeholder='请输入规格名称' />
+          <Input placeholder='请输入规格名称' maxLength={30} />
         </Form.Item>
         <Form.Item label='规格值'>
           <Form component={false} form={goodsSpecValuesForm}>

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

@@ -6,7 +6,7 @@ import { InterDataType, InterReqType } from '~/api/interface';
 import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
 
 //商品sku规格类型
-type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
+type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
 //单位返回类型
 type unitType = InterDataType<skuUnitType>;
 interface selfProps {

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

@@ -5,20 +5,24 @@ import SkuInfo from './components/skuInfo';
 import IntroduceInfo from './components/introduceInfo';
 import SkuAddOrEditModal from './components/skuAddOrEditModal';
 import './index.scss';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { baseInfoType } from './components/baseInfo';
 import { InterDataType, InterReqType } from '~/api/interface';
-import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
+import { addMallGoodsType, mallGoodsDetailsType, skuUnitType } from '~/api/interface/goodsType';
 import GoodsAPI from '~/api/modules/goodsAPI';
+import { filterObjAttr } from '~/utils';
 
 //商品sku规格类型
-type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
+type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
 //单位返回类型
 type unitType = InterDataType<skuUnitType>;
+//商品详情-返回类型
+type goodsDetailType = InterDataType<mallGoodsDetailsType>;
 
 const GoodsAddOrEditOrDetail = () => {
   const baseInfoRef = useRef<any>();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   //单位列表
   const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
@@ -27,10 +31,14 @@ const GoodsAddOrEditOrDetail = () => {
   const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState<boolean>(false);
   //当前编辑sku
   const [currentSku, setCurrentSku] = useState<goodsSpecType>();
-  //基本信息暂存
-  const [baseInfo, setBaseInfo] = useState<baseInfoType>();
   //skuTable数据
   const [skuTable, setSkuTable] = useState<goodsSpecType[]>([]);
+  //商品介绍详情
+  const [goodsDetails, setGoodsDetails] = useState<string>('');
+  //商品id
+  const [goodsId, setGoodsId] = useState<number>(0);
+  //商品详情
+  const [goodsDetailsInfo, setGoodsDetailsInfo] = useState<goodsDetailType>();
 
   //新增、编辑sku弹窗显示
   const addOrEditSkuClick = (record?: goodsSpecType) => {
@@ -56,6 +64,10 @@ const GoodsAddOrEditOrDetail = () => {
     skuTable.splice(skuIndex, 1);
     setSkuTable([...skuTable]);
   };
+  //商品详情获取
+  const getIntroduceInfo = (richText: string) => {
+    setGoodsDetails(richText);
+  };
 
   const tabItems: TabsProps['items'] = [
     {
@@ -79,7 +91,7 @@ const GoodsAddOrEditOrDetail = () => {
     {
       key: '3',
       label: `商品详情`,
-      children: <IntroduceInfo />,
+      children: <IntroduceInfo onChange={getIntroduceInfo} introduceInfo={goodsDetails} />,
     },
   ];
 
@@ -94,8 +106,7 @@ const GoodsAddOrEditOrDetail = () => {
         baseInfoRef.current
           .getForm()
           .validateFields()
-          .then((value: baseInfoType) => {
-            setBaseInfo(value);
+          .then(() => {
             setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
           })
           .catch((error: any) => {
@@ -129,8 +140,95 @@ const GoodsAddOrEditOrDetail = () => {
     });
   };
 
+  //商品保存
+  const saveGoods = () => {
+    baseInfoRef.current
+      .getForm()
+      .validateFields()
+      .then((values: baseInfoType) => {
+        if (skuTable.length) {
+          const skuList = skuTable.map((v) => ({
+            ...v,
+            id: goodsDetailsInfo
+              ? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id
+              : undefined,
+            goodsSpecValuesList: v.goodsSpecValuesList.map((i) => ({
+              ...i,
+              id: goodsDetailsInfo
+                ? goodsDetailsInfo.goodsSpecList
+                    .find((j) => j.id === v.id)
+                    ?.goodsSpecValuesList.find((k) => k.id === i.id)?.id
+                : undefined,
+            })),
+          }));
+          const addGoodsEditReq = {
+            ...filterObjAttr(values, ['mainImgList', 'subImgList', 'videoList', 'categoryId']),
+            resourcesList: [
+              ...values.mainImgList.map((v) => ({ type: 0, url: v.url })),
+              ...(values.subImgList?.map((v) => ({ type: 1, url: v.url })) || []),
+              ...(values.videoList?.map((v) => ({ type: 2, url: v.url })) || []),
+            ],
+            categoryPrimaryId: values.categoryId[0],
+            categorySubId: values.categoryId.length === 2 ? values.categoryId[1] : undefined,
+            goodsDetails,
+            goodsSpecList: skuList,
+            id: goodsId || undefined,
+          };
+          GoodsAPI[goodsId ? 'editMallGoods' : 'addMallGoods'](addGoodsEditReq).then(({ code }) => {
+            if (code === '200') {
+              message.success(goodsId ? '编辑商城成功' : '新增商品成功');
+              navigate(-1);
+            }
+          });
+        } else {
+          message.warning('商品规格未添加');
+        }
+      })
+      .catch((error: any) => {
+        message.error(error.errorFields[0].errors[0]);
+      });
+  };
+  //商品详情
+  const getMallGoodsDetails = (id: number) => {
+    GoodsAPI.getMallGoodsDetails({ id }).then(({ result }) => {
+      const mainImgList = result.resourcesList
+        .filter((v) => v.type === 0)
+        .map((v) => ({ id: v.id, name: 'mainImg', uid: v.id, url: v.url }));
+      const subImgList = result.resourcesList
+        .filter((v) => v.type === 1)
+        .map((v) => ({ id: v.id, name: 'subImg', uid: v.id, url: v.url }));
+      const videoList = result.resourcesList
+        .filter((v) => v.type === 2)
+        .map((v) => ({ id: v.id, name: 'video', uid: v.id, url: v.url }));
+      setGoodsDetailsInfo(result);
+      setSkuTable(result.goodsSpecList);
+      setGoodsDetails(result.goodsDetails || '');
+      baseInfoRef.current.getForm().setFieldsValue({
+        tradeName: result.tradeName,
+        description: result.description || undefined,
+        mainImgList,
+        subImgList: subImgList.length ? subImgList : undefined,
+        videoList: videoList.length ? videoList : undefined,
+        categoryId: result.categorySubId
+          ? [result.categoryPrimaryId, result.categorySubId]
+          : [result.categoryPrimaryId],
+        shelfStatus: result.shelfStatus,
+        labelShow: result.labelShow,
+        goodsLabel: result.goodsLabel || undefined,
+      });
+      baseInfoRef.current.setLabelShow(!!result.labelShow);
+      baseInfoRef.current.mediaData.setMainFileList(mainImgList);
+      baseInfoRef.current.mediaData.setSubFileList(subImgList);
+      baseInfoRef.current.mediaData.setVideoFileList(videoList);
+    });
+  };
+
   useEffect(() => {
     getSkuUnit();
+    if (searchParams.get('id')) {
+      setGoodsId(Number(searchParams.get('id')));
+      getMallGoodsDetails(Number(searchParams.get('id')));
+    }
   }, []);
 
   return (
@@ -143,7 +241,9 @@ const GoodsAddOrEditOrDetail = () => {
             下一步
           </Button>
         ) : (
-          <Button type='primary'>保存</Button>
+          <Button type='primary' onClick={saveGoods}>
+            保存
+          </Button>
         )}
       </div>
       <div className='back-btn'>
@@ -155,7 +255,7 @@ const GoodsAddOrEditOrDetail = () => {
       <SkuAddOrEditModal
         open={addOrEditSkuModalShow}
         onCancel={addOrEditSkuModalCancel}
-        onOk={addOrEditSkuModalOk}
+        onHandleOk={addOrEditSkuModalOk}
         skuUnitList={skuUnitList}
         currentSku={currentSku}
       />

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

+const GoodsDetails = () => {
+  return <div className='goods-detail'></div>;
+};
+export default GoodsDetails;

src/utils/validateUtils.ts

+import _ from 'lodash';
+
 // 不能输入数字，其他可以输入
 export const exceptNumber = (val: any) => {
   val.target.value = val.target.value.replace(/1?(\d|([1-9]\d+))(.\d+)?$/g, '').replace(/\s/g, '');
@@ -105,3 +107,13 @@ export const maxLength6 = (val: any) => {
     val.target.value = val.target.value.replace(/\D/g, '');
   }
 };
+
+//通用价格，且保留两位小数正则
+export const regPriceNumber = (value: string): boolean => {
+  const reg = /^\d+(\.\d{1,2})?$/;
+  return reg.test(value);
+};
+//判断空值
+export const isEmptyBol = (value: any): boolean => {
+  return _.isNull(value) || _.isNaN(value) || _.isNull(value) || _.isUndefined(value);
+};