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

26a95c46 · 龚洪江 · 679b10ca · 26a95c46 · 26a95c46 · 26a95c46
--- a/src/api/interface/goodsType.ts
+++ b/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;
+  }
+>;
--- a/src/api/modules/goodsAPI.ts
+++ b/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;
--- a/src/components/EditableCell/index.tsx
+++ b/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' }}>

--- a/src/pages/categoryManage/categoryList/index.tsx
+++ b/src/pages/categoryManage/categoryList/index.tsx
@@ -118,7 +118,6 @@ const CategoryList = () => {
            ) : (
              ''
            )}
-            <Button type='link'>详情</Button>
            <Button type='link' onClick={() => addOrEditCategoryModalShowClick(record)}>
              编辑
            </Button>

--- a/src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.scss
+++ b/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%);
+  }
+}
--- a/src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.tsx
+++ b/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'>
+          {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>
        ) : (
          ''

--- a/src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/introduceInfo/index.tsx
+++ b/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>
  );
 };

--- a/src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuAddOrEditModal/index.tsx
+++ b/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}>

--- a/src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx
+++ b/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 {

--- a/src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx
+++ b/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}
      />

--- a/src/pages/mallManage/mallGoods/goodsDetails/index.tsx
+++ b/src/pages/mallManage/mallGoods/goodsDetails/index.tsx
+const GoodsDetails = () => {
+  return <div className='goods-detail'></div>;
+};
+export default GoodsDetails;
--- a/src/pages/mallManage/mallGoods/goodsList/index.tsx
+++ b/src/pages/mallManage/mallGoods/goodsList/index.tsx
--- a/src/utils/validateUtils.ts
+++ b/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);
+};