feat: 添加使用缓存变量

src/pages/ServiceGoods/components/CommonTemplate.jsx

-import React from 'react';
+import React, { memo } from 'react';
 import { Select, Form, InputNumber, Input, Button, Popover } from 'antd';
 import commonStyle from '../common.less';
 
@@ -15,11 +15,11 @@ export const WrapperContainer = props => (
  * @param props
  */
 
-export const Title = props => (
+export const Title = memo(props => (
   <div className={commonStyle.title}>
     <h3>{props.title}</h3>
   </div>
-);
+));
 
 export const SelectTemplate = props => {
   const {

src/pages/ServiceGoods/components/EditFormTable.jsx

@@ -173,6 +173,7 @@ const EditFormTable = forwardRef((props, ref) => {
         return rowProps;
       },
     }));
+  // console.log('columns :>> ', columns);
 
   return (
     <>
@@ -184,6 +185,7 @@ const EditFormTable = forwardRef((props, ref) => {
             pagination={false}
             size="small"
             bordered
+            rowKey={(record, i) => i}
             dataSource={dataSource}
             columns={columns}
           />

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -7,7 +7,11 @@ import React, {
   useRef,
   useEffect,
   useContext,
+  useMemo,
+  useCallback,
+  memo,
 } from 'react';
+// import { unstable_batchedUpdates } from 'react-dom';
 import { formItemLayout, StaticColumns } from '../config';
 import EditFormTable from './EditFormTable';
 import FormPackage from './FormPackage';
@@ -224,6 +228,7 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
 };
 
 const FormPriceOrStock = forwardRef((props, ref) => {
+  console.log('props :>> ', props);
   const { specList, editData, skuList = [], onSpecChange } = props;
 
   const editRef = useRef(null);
@@ -425,6 +430,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     onCheck,
+    onFinish,
     reset: () => {
       form.resetFields();
       setDefaultColumns([]);
@@ -435,16 +441,19 @@ const FormPriceOrStock = forwardRef((props, ref) => {
   }));
 
   useEffect(() => {
-    // if (customer.isEdit) {
-    if (!editData) return;
-    form.setFieldsValue(editData); // 设置规格数据
-    firstOnChangeEvent(); // 触发成底部动态表格数据
-    setSpecInitValue(editData); // 缓存规格数据
-    CreateColumnsEvent(editData);
-    setMergeTable(Boolean(editData.secondSpecValue.length));
-    setTableData(fliterSkuListSortData(skuList));
-    // }
-  }, [customer.isEdit, editData]);
+    if (customer.isEdit || customer.isUseCache) {
+      if (!editData) {
+        onFinish();
+        return;
+      }
+      form.setFieldsValue(editData); // 设置规格数据
+      firstOnChangeEvent(); // 触发成底部动态表格数据
+      setSpecInitValue(editData); // 缓存规格数据
+      CreateColumnsEvent(editData);
+      setMergeTable(Boolean(editData.secondSpecValue.length));
+      setTableData(fliterSkuListSortData(skuList));
+    }
+  }, [customer.isEdit, customer.isUseCache, editData]);
 
   return (
     <>

src/pages/ServiceGoods/components/FormRuleSetting.jsx

@@ -34,16 +34,16 @@ const FormRuleSetting = forwardRef((props, ref) => {
   };
 
   useEffect(() => {
-    // if (customer.isEdit) {
-    if (!editData) return;
-    const goodInfo = Object.assign({}, editData);
-    if (goodInfo.shopIds) {
-      const shopIds = getIsInShops(editData.shopIds);
-      goodInfo.shopIds = shopIds;
+    if (customer.isEdit || customer.isUseCache) {
+      if (!editData) return;
+      const goodInfo = Object.assign({}, editData);
+      if (goodInfo.shopIds) {
+        const shopIds = getIsInShops(editData.shopIds);
+        goodInfo.shopIds = shopIds;
+      }
+      form.setFieldsValue(goodInfo);
     }
-    form.setFieldsValue(goodInfo);
-    // }
-  }, [customer.isEdit, editData]);
+  }, [customer.isEdit, customer.isUseCache, editData]);
 
   const onCheck = async () => {
     try {

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

@@ -22,28 +22,28 @@ const FormRuleVPictures = forwardRef((props, ref) => {
   const [{ imgConfig }] = typeConfig.filter(item => item.type === customer.productType);
 
   useEffect(() => {
-    // if (customer.isEdit) {
-    if (editData) {
-      setImageList(editData.imageList || {});
-      setCardImageList(editData.cardImageList || []);
-      setCommonImageList(editData.commonImageList || []); // 编辑状态下设置公共图
-      setDetailImageList(editData.detailImageList || []); // 编辑状态下设置详情图
-      const editParams = {
-        commonImageList: editData.commonImageList,
-        detailImageList: editData.detailImageList,
-      };
-      if (customer.isCard) {
-        editParams.cardImageList = editData.cardImageList;
-      } else {
-        editParams.imageList = editData.imageList;
+    if (customer.isEdit || customer.isUseCache) {
+      if (editData) {
+        setImageList(editData.imageList || {});
+        setCardImageList(editData.cardImageList || []);
+        setCommonImageList(editData.commonImageList || []); // 编辑状态下设置公共图
+        setDetailImageList(editData.detailImageList || []); // 编辑状态下设置详情图
+        const editParams = {
+          commonImageList: editData.commonImageList,
+          detailImageList: editData.detailImageList,
+        };
+        if (customer.isCard) {
+          editParams.cardImageList = editData.cardImageList;
+        } else {
+          editParams.imageList = editData.imageList;
+        }
+        const timer = setTimeout(() => {
+          form.setFieldsValue(editParams);
+          clearTimeout(timer);
+        });
       }
-      const timer = setTimeout(() => {
-        form.setFieldsValue(editParams);
-        clearTimeout(timer);
-      });
     }
-    // }
-  }, [customer.isEdit, editData]);
+  }, [customer.isEdit, customer.isUseCache, editData]);
 
   useEffect(() => {
     if (customer.isCard) return;

src/pages/ServiceGoods/components/FormSettlementOthers.jsx

@@ -42,12 +42,12 @@ const FormSettlementOthers = forwardRef((props, ref) => {
   }, 400);
 
   useEffect(() => {
-    // if (customer.isEdit) {
-    if (!editData) return;
-    form.setFieldsValue(editData);
-    setInitValue({ ...editData });
-    // }
-  }, [customer.isEdit, editData]);
+    if (customer.isEdit || customer.isUseCache) {
+      if (!editData) return;
+      form.setFieldsValue(editData);
+      setInitValue({ ...editData });
+    }
+  }, [customer.isEdit, customer.isUseCache, editData]);
 
   useImperativeHandle(ref, () => ({
     onCheck,

src/pages/ServiceGoods/index.jsx

-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Spin, Button, Modal, message, notification } from 'antd';
 import moment from 'moment';
 import { Title, WrapperContainer } from './components/CommonTemplate';
@@ -45,6 +45,7 @@ const ServiceGoods = options => {
   const [pageId, setPageId] = useState(null);
   const [categoryIds, setCategoryIds] = useState([]); // 商品品类ID
   const [isEdit, setIsEdit] = useState(false); // 是否是编辑状态
+  const [isUseCache, setIsUseCache] = useState(false); // 是否使用缓存
   const [productType, setProductType] = useState(canAddNormal ? 1 : 4); // 商品状态
   const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
   const [afterAddressList, setAfterAddressList] = useState([]); // 售后地址
@@ -99,6 +100,7 @@ const ServiceGoods = options => {
         },
         !0,
       );
+      stockRef.current.onFinish();
     }, 1000);
   };
 
@@ -282,9 +284,10 @@ const ServiceGoods = options => {
       localStorage.remove(localAutoSaveKey);
     }
   };
-  // 继续编辑
+  // 继续编辑(使用缓存数据)
   const onContinueEdit = () => {
     setVisibleCacheEdit(false);
+    setIsUseCache(true);
     const info = localStorage.get(localAutoSaveKey);
     if (info) {
       console.log('info :>> ', info);
@@ -320,7 +323,7 @@ const ServiceGoods = options => {
     // 当商品进行编辑 & 类型不为电子卡券 & 商品状态不为驳回 禁用当前功能
     isDisabled: isEdit && productType !== 4 && SourceData.state && SourceData.state !== 4,
     isJDGoods: isEdit && SourceData.pageProductType && +SourceData.pageProductType !== 1,
-    // isUseCache: false, // 是否使用缓存数据
+    isUseCache, // 是否使用缓存数据
     onEventBus,
   };
 
@@ -393,7 +396,6 @@ const ServiceGoods = options => {
               skuList={editData.skuList}
               onValuesChange={onValuesChange}
             />
-
             <Title title="规则设置" />
             {productType === 4 && (
               <FormRuleSetting