前端：商品编辑，部分逻辑，解决 sku 编辑的 bug 。

admin-web/src/components/Image/PicturesWall.js

@@ -137,6 +137,25 @@ class PicturesWall extends React.Component {
     return urls;
   };
 
+  setUrls = (urls) => {
+    // let urls = this.props.urls;
+    if (urls) {
+      let fileList = [];
+      for (let i in urls) {
+        let url = urls[i];
+        fileList.push({
+          uid: -i,
+          name: url,
+          status: 'done',
+          url,
+        });
+      }
+      this.setState({
+        fileList: fileList,
+      })
+    }
+  };
+
   render() {
     const { previewVisible, previewImage, fileList } = this.state;
     const uploadButton = (
@@ -168,7 +187,8 @@ class PicturesWall extends React.Component {
 };
 
 PicturesWall.propTypes = {
-  maxLength: Number,
+  maxLength: Number, // 最大照片墙图片数量
+  // urls: String[],  // 初始图片列表
 };
 
 export default PicturesWall;

admin-web/src/components/Product/ProductAttrSelectFormItem.js

@@ -24,7 +24,7 @@ export default class ProductAttrSelectFormItem extends PureComponent {
         }
       },
     });
-  }
+  };
 
   handleSelectAttrValue = (values, options) => {
     let attrValues = [];
@@ -87,11 +87,16 @@ export default class ProductAttrSelectFormItem extends PureComponent {
       }
     }
     // 3. 拼装最终，添加到 attrTreeHTML 中
+    // debugger;
+    let attrValues = []; // 选中的规格值集合
+    for (let i in attr.values) {
+      attrValues.push(attr.values[i].id + ''); // Select 传入数组时，如果不 + '' ，选不中。
+    }
     return <div key={`div-attr-${index}`}>
-      <Select key={`select-attr-${index}`} style={{width: 120}} placeholder='请选择规格' onChange={this.handleSelectAttr}>
+      <Select key={`select-attr-${index}`} style={{width: 120}} placeholder='请选择规格' value={attr.id} onChange={this.handleSelectAttr}>
         {attrOptions}
       </Select>
-      <Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} placeholder='请选择规格值'
+      <Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} value={attrValues} placeholder='请选择规格值'
               onChange={this.handleSelectAttrValue}>
         {attrValueOptions}
       </Select>

admin-web/src/components/Product/ProductSkuAddOrUpdateTable.js

@@ -29,7 +29,8 @@ class SkuInputNumber extends PureComponent {
   }
 
   render() {
-    return <InputNumber placeholder="请输入" onChange={this.handleChange} />
+    const { value } = this.props;
+    return <InputNumber placeholder="请输入" value={value} onChange={this.handleChange} />
   }
 
 }
@@ -60,7 +61,8 @@ export default class ProductSkuAddOrUpdateTable extends PureComponent {
           record: record,
           index: index,
           dispatch: dispatch,
-          dataIndex: 'price'
+          dataIndex: 'price',
+          value: record.price,
         };
         return <SkuInputNumber {...props} />;
       }
@@ -73,7 +75,8 @@ export default class ProductSkuAddOrUpdateTable extends PureComponent {
           record: record,
           index: index,
           dispatch: dispatch,
-          dataIndex: 'quantity'
+          dataIndex: 'quantity',
+          value: record.quantity,
         };
         return <SkuInputNumber {...props} />;
       }

admin-web/src/models/product/productSpuAddOrUpdate.js

@@ -1,12 +1,10 @@
 import { message } from 'antd';
 import {
-  productCategoryTree,
   productSpuAdd,
-  productCategoryUpdate,
+  productSpuUpdate,
-  productCategoryUpdateStatus,
-  productCategoryDelete,
   productSpuInfo
 } from '../../services/product';
+import {bool} from "prop-types";
 
 export default {
   namespace: 'productSpuAddOrUpdate',
@@ -52,7 +50,7 @@ export default {
     //     payload: {},
     //   });
     // },
-    *info({ payload }, { call, put }) {
+    *info({ payload, callback }, { call, put }) {
       // 显示加载中
       yield put({
         type: 'changeLoading',
@@ -109,10 +107,20 @@ export default {
               };
               attrTree.push(attrTreeNode);
             } else {
-              // let values = attrTreeNode.values;
+              let attrValueExists = false;
-              // for (let k in ) {
+              let values = attrTreeNode.values;
-              //
+              for (let k in values) {
-              // }
+                if (values[k].id === attr.attrValueId) {
+                  attrValueExists = true;
+                  break;
+                }
+              }
+              if (!attrValueExists) {
+                values.push({
+                  id: attr.attrValueId,
+                  name: attr.attrValueName,
+                });
+              }
             }
           }
         }
@@ -127,6 +135,11 @@ export default {
         },
       });
 
+      // 如果有回调，则执行回调方法
+      if (callback) {
+        callback(response.data);
+      }
+
       // 隐藏加载中
       yield put({
         type: 'changeLoading',
@@ -190,7 +203,7 @@ export default {
     },
     *update({ payload }, { call, put }) {
       const { callback, body } = payload;
-      const response = yield call(productSpuAdd, body);
+      const response = yield call(productSpuUpdate, body);
       if (callback) {
         callback(response);
       }
@@ -238,7 +251,13 @@ export default {
           quantity: undefined,
         });
       }
+      // let interval = skuSize; // 该间隔，用于下面规格组合
       for (let i = 0; i < state.attrTree.length; i++) { // 初始化 sku 格子里的 attrs
+        if (i === 1) {
+          // debugger;
+        }
+        let values = state.attrTree[i].values;
+        let interval = skuSize / values.length;
         for (let j = 0; j < skuSize; j++) {
           // let values = state.attrTree[i].values;
           // let attr = values[j % values.length];
@@ -246,8 +265,8 @@ export default {
           //   id: attr.id,
           //   name: attr.name,
           // });
-          let values = state.attrTree[i].values;
+          // let attr = values[j % values.length];
-          let attr = values[j % values.length];
+          let attr = values[parseInt(j / interval)];
           skus[j].attrs.push({
             id: attr.id,
             name: attr.name,

admin-web/src/models/product/productSpuList.js

@@ -10,28 +10,6 @@ export default {
   },
 
   effects: {
-    // *add({ payload }, { call, put }) {
-    //   const { callback, body } = payload;
-    //   const response = yield call(productCategoryAdd, body);
-    //   if (callback) {
-    //     callback(response);
-    //   }
-    //   yield put({
-    //     type: 'tree',
-    //     payload: {},
-    //   });
-    // },
-    // *update({ payload }, { call, put }) {
-    //   const { callback, body } = payload;
-    //   const response = yield call(productCategoryUpdate, body);
-    //   if (callback) {
-    //     callback(response);
-    //   }
-    //   yield put({
-    //     type: 'tree',
-    //     payload: {},
-    //   });
-    // },
     // *updateStatus({ payload }, { call, put }) {
     //   const { callback, body } = payload;
     //   const response = yield call(productCategoryUpdateStatus, body);

admin-web/src/pages/Product/ProductSpuAddOrUpdate.js

@@ -44,16 +44,21 @@ class ProductSpuAddOrUpdate extends Component {
 
   componentDidMount() {
     const { dispatch } = this.props;
+    const that = this;
     // 判断是否是更新
     const params = new URLSearchParams(this.props.location.search);
     if (params.get("id")) {
       let id = params.get("id");
       this.setState({
         modalType: 'update',
+        id: id,
       })
       dispatch({
         type: 'productSpuAddOrUpdate/info',
         payload: parseInt(id),
+        callback: function (data) {
+          that.refs.picturesWall.setUrls(data.picUrls); // TODO 后续找找，有没更合适的做法
+        }
       })
     }
     // 获得规格列表
@@ -84,8 +89,9 @@ class ProductSpuAddOrUpdate extends Component {
   handleSubmit = e => {
     e.preventDefault();
     const { skus, dispatch } = this.props;
+    const { modalType, id } = this.state;
     // 获得图片
-    let picUrls = this.refs.picturesWall.getUrls();
+    let picUrls = this.refs.picturesWall.getUrls(); // TODO 芋艿，后续找找其他做法
     if (picUrls.length === 0) {
       alert('请必须上传一张图片！');
       return;
@@ -113,17 +119,32 @@ class ProductSpuAddOrUpdate extends Component {
     }
     // debugger;
     this.props.form.validateFields((err, values) => {
+      debugger;
       if (!err) {
-        dispatch({
+        if (modalType === 'add') {
-          type: 'productSpuAddOrUpdate/add',
+          dispatch({
-          payload: {
+            type: 'productSpuAddOrUpdate/add',
-            body: {
+            payload: {
-              ...values,
+              body: {
-              picUrls: picUrls.join(','),
+                ...values,
-              skuStr: JSON.stringify(skuStr)
+                picUrls: picUrls.join(','),
-            }
+                skuStr: JSON.stringify(skuStr)
-          },
+              }
-        });
+            },
+          });
+        } else if (modalType === 'update') {
+          dispatch({
+            type: 'productSpuAddOrUpdate/update',
+            payload: {
+              body: {
+                ...values,
+                id,
+                picUrls: picUrls.join(','),
+                skuStr: JSON.stringify(skuStr)
+              }
+            },
+          });
+        }
       }
     });
     // console.log(fields);

admin-web/src/services/product.js

@@ -39,7 +39,6 @@ export async function productCategoryDelete(params) {
 // product spu + sku
 
 export async function productSpuPage(params) {
-  debugger;
   return request(`/product-api/admins/spu/page?${stringify(params)}`, {
     method: 'GET',
   });
@@ -52,6 +51,13 @@ export async function productSpuAdd(params) {
   });
 }
 
+export async function productSpuUpdate(params) {
+  return request(`/product-api/admins/spu/update?${stringify(params)}`, {
+    method: 'POST',
+    body: {},
+  });
+}
+
 export async function productSpuInfo(params) {
   return request(`/product-api/admins/spu/info?${stringify(params)}`, {
     method: 'GET',

product/product-application/src/main/java/cn/iocoder/mall/product/application/controller/admins/AdminsProductSpuController.java

@@ -84,7 +84,7 @@ public class AdminsProductSpuController {
                                         @RequestParam("sellPoint") String sellPoint,
                                         @RequestParam("description") String description,
                                         @RequestParam("cid") Integer cid,
-                                        @RequestParam("picURLs") List<String> picUrls,
+                                        @RequestParam("picUrls") List<String> picUrls,
                                         @RequestParam("visible") Boolean visible,
                                         @RequestParam("skuStr") String skuStr) { // TODO 芋艿，因为考虑不使用 json 接受参数，所以这里手动转。
         // 创建 ProductSpuUpdateDTO 对象