fix: 添加商品属性

src/pages/GoodsManage/staticdata.js

@@ -215,11 +215,7 @@ export function column() {
               size="small"
               className={styles.button}
               onClick={() => {
-                if (row.type === 4) {
-                  this.serviceVisbleChange(row);
-                } else {
-                  this.onUpdateInfo(row);
-                }
+                this.serviceVisbleChange(row);
               }}
             >
               修改
@@ -364,6 +360,7 @@ export const ProcessEditData = (data, row) => {
     id: data.id,
     productType: data.productType,
     pageProductType: row.productType,
+    productAttributeApplyList: data.productAttributeApplyList,
     infoMation: {
       ...specsParams,
       brandId: data.brandId,

src/pages/ServiceGoods/components/FormAttr.jsx

 /* eslint-disable consistent-return */
-import React, { forwardRef, useContext, useState, useEffect, useImperativeHandle } from 'react';
-import { Form, Select, Row, Col, Button } from 'antd';
+import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Form, Row, Col, Button } from 'antd';
+import { unstable_batchedUpdates } from 'react-dom';
 import { UpOutlined, DownOutlined } from '@ant-design/icons';
-import { ServiceContext } from '../context';
 import styles from '../common.less';
 import { apiGetAttribute } from '../service';
 import CustomSelect from '@/components/CustomSelect';
 
 const FormAttr = forwardRef((props, ref) => {
-  const customer = useContext(ServiceContext);
   const [form] = Form.useForm();
   const [isMore, setIsMome] = useState(false);
   const [categoryAttrs, setCategoryAttrs] = useState([]);
   const [skuOldAttr, setSkuOldAttr] = useState([]);
+  const [initAttrData, setInitAttrData] = useState({});
 
   const formItemAttr = {
     labelCol: { span: 6 },
@@ -23,58 +23,76 @@ const FormAttr = forwardRef((props, ref) => {
     setIsMome(!isMore);
   };
 
-  // 获取属性
-  const getAttribute = async categoryId => {
-    const res = await apiGetAttribute(categoryId);
-    if (res && res.data && res.data.length) {
-      setCategoryAttrs(res.data);
-    }
-  };
-
   // 验证是否失效属性（已失效的商品不显示）
-  const checkInAttrList = id => categoryAttrs.some(item => item.valueList.some(v => +v.id === +id));
+  const checkInAttrList = (id, categoryList) =>
+    categoryList.some(item => item.valueList.some(v => +v.id === +id));
 
   // 获取初始化属性数据
-  const getInitAttrValue = () => {
+  const getInitAttrValue = categoryList => {
     const skuAttr = props.initData.productAttributeApplyList?.productAttributeApplyList || [];
-    const attrs = [];
-    if (customer.isEdit) {
-      categoryAttrs.forEach(({ id, supportCustomValue, optionType }) => {
-        const v = skuAttr.filter(item => id === item.productAttributeId);
-        let values = '';
-        const key = 'productAttributeApplyValueList';
-        if (v.length && v[0][key] && v[0][key].length) {
-          values = [];
-          if (+supportCustomValue.code === 1 || +optionType.code === 2) {
-            v[0][key].forEach(attr => {
-              if (+attr.attributeValueId) {
-                checkInAttrList(attr.attributeValueId) &&
-                  values.push(
-                    JSON.stringify({
-                      attributeValueId: attr.attributeValueId,
-                      attributeValueName: attr.attributeValueName,
-                    }),
-                  );
-              } else {
-                values.push(attr.attributeValueName);
-              }
-            });
-          } else if (v[0][key].length) {
-            const atvalue = v[0][key][0];
-            if (checkInAttrList(atvalue.attributeValueId)) {
-              values = JSON.stringify({
-                attributeValueId: atvalue.attributeValueId,
-                attributeValueName: atvalue.attributeValueName,
-              });
+    const obj = {
+      initValue: {},
+    };
+    const key = 'productAttributeApplyValueList';
+
+    skuAttr.forEach(item => {
+      if (item[key].length) {
+        let values = +item.optionType.code === 1 ? '' : [];
+        obj[item.productAttributeId] = [];
+        item[key].forEach(attr => {
+          const { attributeValueId, attributeValueName } = attr;
+          const json = {
+            attributeValueId,
+            attributeValueName,
+            name: attributeValueName,
+          };
+          if (attributeValueId === 0 || checkInAttrList(attributeValueId, categoryList)) {
+            const v = JSON.stringify(json);
+            if (attributeValueId === 0) {
+              obj[item.productAttributeId].push(json);
             }
+            // eslint-disable-next-line no-unused-expressions
+            +item.optionType.code === 1 ? (values = v) : values.push(v);
           }
-        }
-        attrs.push({
-          [id]: values,
         });
+        obj.initValue[item.productAttributeId] = values;
+      }
+    });
+    return obj;
+  };
+
+  // 获取属性
+  const getAttribute = async categoryId => {
+    const res = await apiGetAttribute(categoryId);
+    if (res && res.data && res.data.length) {
+      let initValue = {
+        initValue: {},
+      };
+      if (props.initData) {
+        if (props.initData.productAttributeApplyList?.oldProductAttributeApplyList) {
+          const oattr = props.initData.productAttributeApplyList;
+          setSkuOldAttr((oattr && oattr.oldProductAttributeApplyList) || []);
+        }
+        if (props.initData.productAttributeApplyList?.productAttributeApplyList) {
+          initValue = getInitAttrValue(res.data);
+        }
+      }
+
+      res.data.forEach(item => {
+        item.valueList = item.valueList.map(v => ({
+          attributeValueId: v.id,
+          attributeValueName: v.name,
+          name: v.name,
+        }));
+        if (initValue[item.id] && initValue[item.id].length) {
+          item.valueList.push(...initValue[item.id]);
+        }
+      });
+      unstable_batchedUpdates(() => {
+        setInitAttrData(initValue.initValue);
+        setCategoryAttrs(res.data);
       });
     }
-    return attrs;
   };
 
   // 获取下拉框类型
@@ -98,8 +116,7 @@ const FormAttr = forwardRef((props, ref) => {
   const deal = attr => {
     try {
       const json = JSON.parse(attr);
-      if (typeof json === 'object') {
-        json.attributeValueName = json.name;
+      if (json.attributeValueId) {
         return json;
       }
       return { attributeValueName: json.name };
@@ -114,13 +131,14 @@ const FormAttr = forwardRef((props, ref) => {
       const attributeApplyList = [];
       // eslint-disable-next-line no-restricted-syntax
       for (const key in values) {
-        if (values.hasOwnProperty(key)) {
+        if (values.hasOwnProperty(key) && values[key]) {
           let attrs = values[key];
           if (Array.isArray(values[key])) {
             attrs = [];
             values[key].forEach(attr => {
-              const json = deal(attr);
-              json && attrs.push(json);
+              if (typeof attr !== 'undefined') {
+                attrs.push(deal(attr));
+              }
             });
           } else {
             const json = deal(values[key]);
@@ -132,11 +150,10 @@ const FormAttr = forwardRef((props, ref) => {
           });
         }
       }
-      const v = {
+      return {
         temp: 'attributeApplyList',
         attributeApplyList,
       };
-      return v;
     } catch (errorInfo) {
       return null;
     }
@@ -149,13 +166,6 @@ const FormAttr = forwardRef((props, ref) => {
     }
   }, [props.categoryIds]);
 
-  useEffect(() => {
-    if (props.editData && props.editData.productAttributeApplyList?.oldProductAttributeApplyList) {
-      const oattr = props.editData.productAttributeApplyList;
-      setSkuOldAttr((oattr && oattr.oldProductAttributeApplyList) || []);
-    }
-  }, [props.editData]);
-
   useImperativeHandle(ref, () => ({
     onCheck,
     reset: form.resetFields,
@@ -164,10 +174,10 @@ const FormAttr = forwardRef((props, ref) => {
   return (
     <>
       <div className={styles.attrbox + (isMore ? styles.attrboxMore : '')}>
-        <Form form={form} initialValues={getInitAttrValue()}>
-          <Row>
-            {categoryAttrs.length > 0 &&
-              categoryAttrs.map(k => (
+        {categoryAttrs.length > 0 && (
+          <Form form={form} initialValues={initAttrData}>
+            <Row>
+              {categoryAttrs.map(k => (
                 <Col span={12} key={k.id}>
                   <Form.Item
                     label={k.name}
@@ -184,8 +194,9 @@ const FormAttr = forwardRef((props, ref) => {
                   </Form.Item>
                 </Col>
               ))}
-          </Row>
-        </Form>
+            </Row>
+          </Form>
+        )}
       </div>
       {categoryAttrs.length > 12 && (
         <div className={styles.btnMore}>

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -425,8 +425,8 @@ const FormPriceOrStock = forwardRef((props, ref) => {
       />
       {customer.isCard && (
         <>
-          <Title title="套餐内容" />
-          <FormPackage ref={packageRef} initData={tableData} />
+          <Title title="套餐内容" key="tctitle" />
+          <FormPackage ref={packageRef} initData={tableData} key="tc" />
         </>
       )}
     </>

src/pages/ServiceGoods/index.jsx

 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Spin, Button, Modal, message, notification } from 'antd';
-import { ConsoleSqlOutlined } from '@ant-design/icons';
 import { Title, WrapperContainer } from './components/CommonTemplate';
 import { TaskTypeSelect } from './components/TaskTypeSelect';
 import FormInformationBasic from './components/FormInformationBasic';
@@ -14,7 +13,6 @@ import {
   merchantSpecList,
   afterSalesAddrsPage,
   merchantgetJdPicList,
-  supplierListQuery,
   shopGetBySupplierId,
   merchantProductAdd,
   merchantProductEdit,
@@ -53,7 +51,6 @@ const ServiceGoods = options => {
   const [specList, setSpecList] = useState([]); // 规格列表
   const [editData, setEditData] = useState({}); // 编辑保存数据
   const [newCategoryList, setNewCategoryList] = useState({});
-  // const [shopList, setShopList] = useState([]); // 供应商列表
   const [checkFormList] = useState([
     basicRef,
     attrRef,
@@ -107,13 +104,6 @@ const ServiceGoods = options => {
     }
   };
 
-  // const getSupplierListResponse = async () => {
-  //   if (!shopList.length) {
-  //     const result = await supplierListQuery();
-  //     console.log('=================>result', result);
-  //     setShopList(result.data);
-  //   }
-  // };
   const sendMerchantProductHttpRequest = async sendData => {
     try {
       setPageLoading(true);
@@ -138,7 +128,6 @@ const ServiceGoods = options => {
   };
 
   const shopGetByProductType = async type => {
-    console.log(newCategoryList[type]);
     if (!newCategoryList[type]?.length) {
       const result = await getByProductType(type);
       setNewCategoryList({
@@ -146,7 +135,6 @@ const ServiceGoods = options => {
         [type]: result.data || [],
       });
     }
-    // console.log(result);
   };
 
   const submitEvent = async () => {
@@ -162,7 +150,7 @@ const ServiceGoods = options => {
       if (isEdit) {
         sendData.id = pageId;
       }
-      // console.log('sendData :>> ', sendData);
+      console.log('sendData :>> ', sendData);
       sendMerchantProductHttpRequest(sendData);
     }
   };
@@ -178,7 +166,6 @@ const ServiceGoods = options => {
         ? [...newImageList, ...carouseList]
         : carouseList;
       picturesRef.current.setFieldsValue({
-        // [`imageList[${data.firstSpecValue}]`]: this.state.colorImg[data.firstSpecValue],
         imageList,
         detailImageList: [...detailImageList, ...detailList],
       });
@@ -192,7 +179,6 @@ const ServiceGoods = options => {
       }
       setPageLoading(true);
       await shopGetBySupplierIdResponse();
-      // await getSupplierListResponse();
       await getMerchantBrandList();
       await getAfterSalesAddrsPage();
       await getMerchantSpecList();
@@ -201,11 +187,8 @@ const ServiceGoods = options => {
         setPageId(SourceData.id);
         setProductType(SourceData.productType);
         setCategoryIds(SourceData.infoMation.categoryId || []);
-
-        // changeCheckList(SourceData.productType);
         setIsEdit(true);
       }
-      console.log('111 :>> ', 111);
       setPageLoading(false);
     })();
   }, [SourceData]);
@@ -217,7 +200,6 @@ const ServiceGoods = options => {
   }, [productType, options.visible]);
 
   useEffect(() => {
-    console.log('1---canAddNormal :>> ', canAddNormal);
     setProductType(canAddNormal ? 1 : 4);
   }, [canAddNormal]);