功能：商品sku新增编辑

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

@@ -3,19 +3,13 @@ import { useEffect, useRef, useState } from 'react';
 import BaseInfo from './components/baseInfo';
 import SkuInfo from './components/skuInfo';
 import IntroduceInfo from './components/introduceInfo';
-import SkuAddOrEditModal from './components/skuAddOrEditModal';
 import './index.scss';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { baseInfoType } from './components/baseInfo';
-import { InterDataType, InterReqType } from '~/api/interface';
-import { addMallGoodsType, mallGoodsDetailsType, skuUnitType } from '~/api/interface/goodsType';
+import { InterDataType } from '~/api/interface';
+import { mallGoodsDetailsType } from '~/api/interface/goodsType';
 import GoodsAPI from '~/api/modules/goodsAPI';
 import { filterObjAttr } from '~/utils';
 
-//商品sku规格类型
-type goodsSpecType = Exclude<InterReqType<addMallGoodsType>, undefined>['goodsSpecList'][0];
-//单位返回类型
-type unitType = InterDataType<skuUnitType>;
 //商品详情-返回类型
 type goodsDetailType = InterDataType<mallGoodsDetailsType>;
 
@@ -23,16 +17,9 @@ const GoodsAddOrEditOrDetail = () => {
   const baseInfoRef = useRef<any>();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const skuInfoRef = useRef<any>();
 
-  //单位列表
-  const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
   const [tabSelectKeys, setTabSelectKeys] = useState<string>('1');
-  //新增、编辑sku弹窗
-  const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState<boolean>(false);
-  //当前编辑sku
-  const [currentSku, setCurrentSku] = useState<goodsSpecType>();
-  //skuTable数据
-  const [skuTable, setSkuTable] = useState<goodsSpecType[]>([]);
   //商品介绍详情
   const [goodsDetails, setGoodsDetails] = useState<string>('');
   //商品id
@@ -40,30 +27,6 @@ const GoodsAddOrEditOrDetail = () => {
   //商品详情
   const [goodsDetailsInfo, setGoodsDetailsInfo] = useState<goodsDetailType>();
 
-  //新增、编辑sku弹窗显示
-  // const addOrEditSkuClick = (record?: goodsSpecType) => {
-  //   setCurrentSku(record ? { ...record } : undefined);
-  //   setAddOrEditSkuModalShow(true);
-  // };
-  const addOrEditSkuModalCancel = () => {
-    setAddOrEditSkuModalShow(false);
-  };
-  const addOrEditSkuModalOk = (values: goodsSpecType) => {
-    setAddOrEditSkuModalShow(false);
-    const skuTableIndex: number = skuTable.findIndex((v) => v.id === values.id);
-    if (skuTableIndex !== -1) {
-      skuTable.splice(skuTableIndex, 1, values);
-      setSkuTable([...skuTable]);
-    } else {
-      setSkuTable([...skuTable, { ...values }]);
-    }
-  };
-  //sku删除
-  // const deleteSkuClick = (record: goodsSpecType) => {
-  //   const skuIndex: number = skuTable.findIndex((v) => v.id === record.id);
-  //   skuTable.splice(skuIndex, 1);
-  //   setSkuTable([...skuTable]);
-  // };
   //商品详情获取
   const getIntroduceInfo = (richText: string) => {
     setGoodsDetails(richText);
@@ -78,18 +41,7 @@ const GoodsAddOrEditOrDetail = () => {
     {
       key: '2',
       label: `商品规格`,
-      children: (
-        // (旧)
-        // <SkuInfo
-        //   addOrEditSkuClick={addOrEditSkuClick}
-        //   skuTableData={skuTable}
-        //   skuUnitList={skuUnitList}
-        //   deleteSkuClick={deleteSkuClick}
-        //   editSkuClick={addOrEditSkuClick}
-        // />
-        //（新）
-        <SkuInfo />
-      ),
+      children: <SkuInfo ref={skuInfoRef} goodsDetailsInfo={goodsDetailsInfo} />,
     },
     {
       key: '3',
@@ -117,11 +69,14 @@ const GoodsAddOrEditOrDetail = () => {
           });
         break;
       case '2':
-        if (skuTable.length) {
+        skuInfoRef.current
+          .submitSku()
+          .then(() => {
             setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
-        } else {
+          })
+          .catch(() => {
             message.warning('请添加规格');
-        }
+          });
         break;
       case '3':
         break;
@@ -136,62 +91,45 @@ const GoodsAddOrEditOrDetail = () => {
   const backRoute = () => {
     navigate(-1);
   };
-  //单位列表
-  const getSkuUnit = () => {
-    GoodsAPI.getSkuUnit().then(({ result }) => {
-      setSkuUnitList(result || []);
-    });
-  };
 
   //商品保存
   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,
-              goodsSpecId: goodsDetailsInfo
-                ? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id
-                : undefined,
-            })),
-          }));
+    Promise.all([
+      baseInfoRef.current.getForm().validateFields(),
+      skuInfoRef.current ? skuInfoRef.current.submitSku() : getDefaultSku(),
+    ])
+      .then((values: any) => {
         const addGoodsEditReq = {
-            ...filterObjAttr(values, ['mainImgList', 'subImgList', 'videoList', 'categoryId']),
+          ...filterObjAttr(values[0], ['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 })) || []),
+            ...values[0].mainImgList.map((v: any) => ({ type: 0, url: v.url })),
+            ...(values[0].subImgList?.map((v: any) => ({ type: 1, url: v.url })) || []),
+            ...(values[0].videoList?.map((v: any) => ({ type: 2, url: v.url })) || []),
           ],
-            categoryPrimaryId: values.categoryId[0],
-            categorySubId: values.categoryId.length === 2 ? values.categoryId[1] : undefined,
+          categoryPrimaryId: values[0].categoryId[0],
+          categorySubId: values[0].categoryId.length === 2 ? values[0].categoryId[1] : undefined,
           goodsDetails,
-            goodsSpecList: skuList,
+          ...values[1],
           id: goodsId || undefined,
         };
         GoodsAPI[goodsId ? 'editMallGoods' : 'addMallGoods'](addGoodsEditReq).then(({ code }) => {
           if (code === '200') {
-              message.success(goodsId ? '编辑商城成功' : '新增商品成功');
+            message.success(goodsId ? '编辑商品成功' : '新增商品成功');
             navigate(-1);
           }
         });
-        } else {
-          message.warning('商品规格未添加');
-        }
       })
       .catch((error: any) => {
-        message.error(error.errorFields[0].errors[0]);
+        baseInfoRef.current
+          .getForm()
+          .validateFields()
+          .then(() => {
+            setTabSelectKeys('2');
+          })
+          .catch(() => {
+            setTabSelectKeys('1');
+          });
+        message.error(error?.errorFields?.[0].errors[0] || error);
       });
   };
   //商品详情
@@ -207,7 +145,6 @@ const GoodsAddOrEditOrDetail = () => {
         .filter((v) => v.type === 2)
         .map((v) => ({ id: v.id, name: 'video', uid: v.id, url: v.url }));
       setGoodsDetailsInfo(JSON.parse(JSON.stringify(result)));
-      setSkuTable(result.goodsSpecList);
       setGoodsDetails(result.goodsDetails || '');
       baseInfoRef.current.getForm().setFieldsValue({
         tradeName: result.tradeName,
@@ -228,9 +165,21 @@ const GoodsAddOrEditOrDetail = () => {
       baseInfoRef.current.mediaData.setVideoFileList(videoList);
     });
   };
+  //编辑未点击规格时数据处理
+  const getDefaultSku = () => {
+    return new Promise((resolve, reject) => {
+      if (goodsDetailsInfo) {
+        resolve({
+          priceStock: goodsDetailsInfo.priceStock,
+          specAttrList: goodsDetailsInfo.specAttrList,
+        });
+      } else {
+        reject('请上传商品规格');
+      }
+    });
+  };
 
   useEffect(() => {
-    getSkuUnit();
     if (searchParams.get('id')) {
       setGoodsId(Number(searchParams.get('id')));
       getMallGoodsDetails(Number(searchParams.get('id')));
@@ -258,14 +207,6 @@ const GoodsAddOrEditOrDetail = () => {
           返回
         </Button>
       </div>
-      {/*新增、编辑sku弹窗*/}
-      <SkuAddOrEditModal
-        open={addOrEditSkuModalShow}
-        onCancel={addOrEditSkuModalCancel}
-        onHandleOk={addOrEditSkuModalOk}
-        skuUnitList={skuUnitList}
-        currentSku={currentSku}
-      />
     </div>
   );
 };

src/pages/mallManage/rentGoods/rentList/index.tsx → src/pages/rentManage/rentGoods/rentList/index.tsx

@@ -188,19 +188,19 @@ const RentList = () => {
   };
   //新增商品
   const toAddRentGoods = () => {
-    navigate({ pathname: '/mallManage/rentGoods/add' });
+    navigate({ pathname: '/rentManage/rentGoods/add' });
   };
   //编辑商品
   const toEditGoods = (id: number) => {
     navigate({
-      pathname: '/mallManage/rentGoods/edit',
+      pathname: '/rentManage/rentGoods/edit',
       search: `id=${id}`,
     });
   };
   //商品详情
   const toRentGoodsDetail = (id: number) => {
     navigate({
-      pathname: '/mallManage/rentGoods/detail',
+      pathname: '/rentManage/rentGoods/detail',
       search: `id=${id}&isDetail=1`,
     });
   };

src/router/router.tsx

@@ -96,10 +96,13 @@ const ServiceDetailView = React.lazy(
 const ServiceIntroduceView = React.lazy(
   () => import('~/pages/mallManage/serviceManage/serviceIntroduce'),
 ); //服务介绍
-const RentListView = React.lazy(() => import('~/pages/mallManage/rentGoods/rentList')); //租赁列表
+
+const RentListView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentList')); //租赁列表
 const RentAddOrEditOrDetailView = React.lazy(
-  () => import('~/pages/mallManage/rentGoods/rentAddOrEditOrDetail'),
+  () => import('~/pages/rentManage/rentGoods/rentAddOrEditOrDetail'),
 ); //租赁新增、编辑、详情
+const RentTypeView = React.lazy(() => import('~/pages/rentManage/rentType')); //类型管理
+
 const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
 const MallAddOrEditOrDetailView = React.lazy(
   () => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'),
@@ -614,49 +617,6 @@ export const routerList: Array<RouteObjectType> = [
         },
       },
       {
-        path: '/mallManage/rentGoods',
-        element: withLoadingComponent(<RentListView />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1030,
-          icon: <SmileOutlined />,
-          title: '租赁商品',
-        },
-      },
-      {
-        path: '/mallManage/rentGoods/add',
-        element: withLoadingComponent(<RentAddOrEditOrDetailView />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 10135,
-          icon: <SmileOutlined />,
-          title: '租赁商品新增',
-          hidden: true,
-        },
-      },
-      {
-        path: '/mallManage/rentGoods/edit',
-        element: withLoadingComponent(<RentAddOrEditOrDetailView />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 10136,
-          icon: <SmileOutlined />,
-          title: '租赁商品编辑',
-          hidden: true,
-        },
-      },
-      {
-        path: '/mallManage/rentGoods/detail',
-        element: withLoadingComponent(<RentAddOrEditOrDetailView />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 10136,
-          icon: <SmileOutlined />,
-          title: '租赁商品详情',
-          hidden: true,
-        },
-      },
-      {
         path: '/mallManage/mallGoods',
         element: withLoadingComponent(<MallGoodsView />),
         errorElement: <ErrorPage />,
@@ -730,25 +690,73 @@ export const routerList: Array<RouteObjectType> = [
           title: '品牌管理',
         },
       },
-      // {
-      //   path: '/mallManage/industryList',
-      //   element: withLoadingComponent(<IndustryListView />),
-      //   meta: {
-      //     id: 10180,
-      //     icon: <SmileOutlined />,
-      //     title: '行业方案',
-      //   },
-      // },
-      // {
-      //   path: '/mallManage/industryDetail',
-      //   element: withLoadingComponent(<IndustryDetailView />),
-      //   meta: {
-      //     id: 10190,
-      //     icon: <SmileOutlined />,
-      //     title: '行业详情',
-      //     hidden: true,
-      //   },
-      // },
+    ],
+  },
+  {
+    path: '/rentManage',
+    element: <LayoutView />,
+    errorElement: <ErrorPage />,
+    meta: {
+      id: 10001,
+      icon: <ShopOutlined />,
+      title: '租赁管理',
+      develop: true,
+    },
+    children: [
+      {
+        path: '/rentManage/rentGoods',
+        element: withLoadingComponent(<RentListView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 1030,
+          icon: <SmileOutlined />,
+          title: '租赁商品',
+        },
+      },
+      {
+        path: '/rentManage/rentGoods/add',
+        element: withLoadingComponent(<RentAddOrEditOrDetailView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10135,
+          icon: <SmileOutlined />,
+          title: '租赁商品新增',
+          hidden: true,
+        },
+      },
+      {
+        path: '/rentManage/rentGoods/edit',
+        element: withLoadingComponent(<RentAddOrEditOrDetailView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10136,
+          icon: <SmileOutlined />,
+          title: '租赁商品编辑',
+          hidden: true,
+        },
+      },
+      {
+        path: '/rentManage/rentGoods/detail',
+        element: withLoadingComponent(<RentAddOrEditOrDetailView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10136,
+          icon: <SmileOutlined />,
+          title: '租赁商品详情',
+          hidden: true,
+        },
+      },
+      {
+        path: '/rentManage/rentType',
+        element: withLoadingComponent(<RentTypeView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10137,
+          icon: <SmileOutlined />,
+          title: '类型管理',
+          develop: true,
+        },
+      },
     ],
   },
   {