feat: 添加数据改变自动保存功能

src/pages/ServiceGoods/components/EditFormTable.jsx

@@ -171,7 +171,7 @@ const EditFormTable = forwardRef((props, ref) => {
 
   return (
     <>
-      <Form form={form} scrollToFirstError component={false}>
+      <Form form={form} scrollToFirstError component={false} onValuesChange={props.onValuesChange}>
         <EditableContext.Provider value={form}>
           <Table
             scroll={{ y: 300, x: 1000 }}

src/pages/ServiceGoods/components/FormAttr.jsx

@@ -175,7 +175,7 @@ const FormAttr = forwardRef((props, ref) => {
     <>
       <div className={styles.attrbox + (isMore ? styles.attrboxMore : '')}>
         {categoryAttrs.length > 0 && (
-          <Form form={form} initialValues={initAttrData}>
+          <Form form={form} initialValues={initAttrData} onValuesChange={props.onValuesChange}>
             <Row>
               {categoryAttrs.map(k => (
                 <Col span={12} key={k.id}>

src/pages/ServiceGoods/components/FormInformationBasic.jsx

@@ -82,6 +82,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
         description: '',
       }}
       scrollToFirstError
+      onValuesChange={props.onValuesChange}
     >
       <Form.Item
         name="categoryId"

src/pages/ServiceGoods/components/FormPackage.jsx

@@ -270,7 +270,7 @@ const FormPackage = forwardRef((props, ref) => {
 
   return (
     <div className={styles.formPackageBox}>
-      <Form style={{ marginBottom: 10 }} form={form}>
+      <Form style={{ marginBottom: 10 }} form={form} onValuesChange={props.onValuesChange}>
         <Form.List name="lists">
           {(fields, { add, remove }) => (
             <>

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -322,6 +322,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
     const bacthFirst = form.getFieldValue('bacthFirst');
     const bacthSecon = form.getFieldValue('bacthSecon');
     const resetObject = batchTableSourceData({ batchItem, tableData, bacthSecon, bacthFirst });
+    props.onValuesChange({ tableList: resetObject });
     setTableData(resetObject);
   };
 
@@ -384,7 +385,12 @@ const FormPriceOrStock = forwardRef((props, ref) => {
 
   return (
     <>
-      <Form form={form} autoComplete="off" initialValues={initSpecReced()}>
+      <Form
+        form={form}
+        autoComplete="off"
+        initialValues={initSpecReced()}
+        onValuesChange={props.onValuesChange}
+      >
         <SpecificationTemplate
           form={form}
           label="一级规格"
@@ -422,11 +428,17 @@ const FormPriceOrStock = forwardRef((props, ref) => {
         setTableData={setTableData}
         defaultColumns={defaultColumns}
         initData={tableData}
+        onValuesChange={props.onValuesChange}
       />
       {customer.isCard && (
         <>
           <Title title="套餐内容" key="tctitle" />
-          <FormPackage ref={packageRef} initData={tableData} key="tc" />
+          <FormPackage
+            ref={packageRef}
+            initData={tableData}
+            key="tc"
+            onValuesChange={props.onValuesChange}
+          />
         </>
       )}
     </>

src/pages/ServiceGoods/components/FormRuleSetting.jsx

@@ -89,6 +89,7 @@ const FormRuleSetting = forwardRef((props, ref) => {
           tips: '', // 温馨提示
         }}
         scrollToFirstError
+        onValuesChange={props.onValuesChange}
       >
         <Form.Item name="purchaseTime" label="购买时间" {...rangeConfig}>
           <RangePicker

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

@@ -117,6 +117,7 @@ const FormRuleVPictures = forwardRef((props, ref) => {
         imageList: {},
         detailImageList: [],
       }}
+      onValuesChange={props.onValuesChange}
     >
       <Form.Item
         name="commonImageList"

src/pages/ServiceGoods/components/FormSettlementOthers.jsx

@@ -120,6 +120,7 @@ const FormSettlementOthers = forwardRef((props, ref) => {
       name="register"
       initialValues={initValue}
       scrollToFirstError
+      onValuesChange={props.onValuesChange}
     >
       <Form.Item
         name="appointment"

src/pages/ServiceGoods/index.jsx

@@ -18,7 +18,7 @@ import {
   merchantProductEdit,
   getByProductType,
 } from './service';
-import { isUrl, filterSendData, clearCurrent } from './utils';
+import { isUrl, filterSendData, clearCurrent, onAutoSaveValue } from './utils';
 import { ServiceContext } from './context';
 import { GOOD_MANAGE } from '@/../config/permission.config';
 
@@ -64,8 +64,20 @@ const ServiceGoods = options => {
 
   const resetForm = () => clearCurrent(checkFormList).forEach(({ current }) => current.reset());
 
+  const onValuesChange = e => {
+    if (!isEdit) {
+      onAutoSaveValue(e);
+    }
+  };
+
   const productChange = task => {
     setProductType(task.type);
+    onAutoSaveValue(
+      {
+        type: task.type,
+      },
+      !0,
+    );
     const timer = setTimeout(() => {
       resetForm();
       clearTimeout(timer);
@@ -280,11 +292,18 @@ const ServiceGoods = options => {
               afterAddressList={afterAddressList}
               specListData={specListData}
               onCategoryChange={onCategoryChange}
+              onValuesChange={onValuesChange}
             />
 
             {[1, 2].includes(productType) && [
               <Title title="商品属性" key="attrtitle" />,
-              <FormAttr key="attr" ref={attrRef} categoryIds={categoryIds} initData={editData} />,
+              <FormAttr
+                key="attr"
+                ref={attrRef}
+                categoryIds={categoryIds}
+                initData={editData}
+                onValuesChange={onValuesChange}
+              />,
             ]}
 
             <Title title="价格与库存" />
@@ -294,6 +313,7 @@ const ServiceGoods = options => {
               onSpecChange={onSpecCommonImgEvent}
               editData={editData.infoSpecData}
               skuList={editData.skuList}
+              onValuesChange={onValuesChange}
             />
 
             <Title title="规则设置" />
@@ -302,6 +322,7 @@ const ServiceGoods = options => {
                 ref={settingRef}
                 editData={editData.serviceItem}
                 supplierIdList={supplierIdList}
+                onValuesChange={onValuesChange}
               />
             )}
 
@@ -309,9 +330,14 @@ const ServiceGoods = options => {
               ref={picturesRef}
               specKeyItem={specKeyList}
               editData={editData.infoImageData}
+              onValuesChange={onValuesChange}
             />
             {productType === 4 && (
-              <FormSettlementOthers ref={settleOtrRef} editData={editData.settlementItem} />
+              <FormSettlementOthers
+                ref={settleOtrRef}
+                editData={editData.settlementItem}
+                onValuesChange={onValuesChange}
+              />
             )}
           </ServiceContext.Provider>
         </WrapperContainer>

src/pages/ServiceGoods/utils.js

+import { message } from 'antd';
 import { sortBy } from 'lodash';
 import UUID from '../../utils/uuid';
+import localStorage from '@/utils/localStorage';
+import { debounce, getObjectType } from '@/utils/utils';
 
 export const clearCurrent = currentList => currentList.filter(item => item.current);
 
@@ -248,3 +251,37 @@ export const createProductData = (props, isEdit) => {
   // }
   return list;
 };
+
+export const onAutoSaveValue = (e, isClear) => {
+  const localkey = 'good-info-auto-save';
+  if (isClear) {
+    localStorage.set(localkey, Object.assign({}, e));
+  } else {
+    const info = localStorage.get(localkey) || {};
+    console.log('e :>> ', e);
+    const key = Object.keys(e)[0];
+    if (getObjectType(e[key]) === 'Array') {
+      e[key].forEach((item, i) => {
+        if (item !== null) {
+          if (getObjectType(item) === 'Object') {
+            const itemkeys = Object.keys(item);
+            if (itemkeys.length > 1 || info[key][i] === null) {
+              info[key][i] = item;
+            } else {
+              info[key][i][itemkeys[0]] = item[itemkeys[0]];
+            }
+          } else {
+            info[key][i] = item;
+          }
+        }
+      });
+      localStorage.set(localkey, Object.assign({}, info));
+    } else if (getObjectType(e[key]) === 'Object') {
+      const okey = Object.keys(e[key])[0];
+      info[key][okey] = e[key][okey];
+    } else {
+      localStorage.set(localkey, Object.assign({}, info, e));
+    }
+  }
+  message.success('已自动保存至缓存');
+};

src/utils/utils.js

@@ -64,6 +64,21 @@ export function isClass(o) {
   return Object.prototype.toString.call(o).slice(8, -1);
 }
 
+export function debounce(fn, delay = 500) {
+  let timer = null;
+
+  return function fun(...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
 // 深拷贝
 export function deepClone(obj) {
   let result;
@@ -110,3 +125,5 @@ export const getClientInfo = () => {
     height: document.body.clientHeight,
   };
 };
+
+export const getObjectType = v => Object.prototype.toString.call(v).replace(/\[object |]/g, '');